You can override the default participant details view by providing an alternative participant.html file. You can provide the alternative page either (1) through the web user interface (see
), (2) or through a file-based module.
To add the participant details page through a file-based module, place a file named "participant.html" in the views/ directory:
Then enable the module in your study folder. When the participant details view is called, LabKey Server will use the participant.html you have provided.
The following page grabs the participantid from the URL, queries the database for the details about that participant, and builds a custom HTML view/summary of the data with a different appearance than the default.
<style type="text/css">
div.wrapper {
/*margin-left: auto;*/
/*margin-right: auto;*/
margin-top: -10px;
width : 974px;
}
div.wrapper .x4-panel-body {
background-color: transparent;
}
div.main {
background-color: white;
padding: 10px 20px 20px 20px;
margin-top: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,0.15), -1px 0 0 rgba(0,0,0,0.06), 1px 0 0 rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.12);
}
div.main h2 {
display: inline-block;
text-transform: uppercase;
font-weight: normal;
background-color: #126495;
color: white;
font-size: 13px;
padding: 9px 20px 7px 20px;
margin-top: -20px;
margin-left: -20px;
}
div.main h3 {
text-transform: uppercase;
font-size: 14px;
font-weight: normal;
padding: 10px 0px 10px 50px;
border-bottom: 1px solid darkgray;
}
#demographics-content .detail {
font-size: 15px;
padding-left: 30px;
padding-bottom: 5px;
}
#demographics-content .detail td {
font-size: 15px;
}
#demographics-content h3 {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
#demographics-content td {
padding: 3px;
}
#demographics-content td.label,
td.label, div.label, a.label {
font-size: 12px;
color: #a9a9a9;
vertical-align: text-top;
}
div.main-body {
margin-top: 0.5em;
}
#assays-content .detail td {
font-size: 15px;
padding: 3px;
}
.thumb.x-panel-header {
background-color: transparent;
}
</style>
<div id="participant-view"></div>
<script type="text/javascript">
LABKEY.requiresExt4Sandbox(function(){
LABKEY.requiresScript('clientapi/ext4/Util.js');
LABKEY.requiresScript('clientapi/ext4/data/Reader.js');
LABKEY.requiresScript('clientapi/ext4/data/Proxy.js');
LABKEY.requiresScript('clientapi/ext4/data/Store.js');
});
</script>
<script type="text/javascript">
var outer_panel = null;
var subject_accession = null;
LABKEY.requiresExt4Sandbox(function(){
Ext4.onReady(function(){
Ext4.QuickTips.init();
subject_accession = LABKEY.ActionURL.getParameter('participantId') || 'SUB112829';
outer_panel = Ext4.create('Ext.panel.Panel', {
renderTo : 'participant-view',
border : false, frame : false,
cls : 'wrapper',
layout : 'column',
items : [{
xtype : 'container',
id : 'leftContainer',
columnWidth : .55,
padding: 10,
items : []
},{
xtype : 'container',
id : 'rightContainer',
columnWidth : .45,
padding: 10,
items : []
}]
});
getDemographicCfg();
});
function getDemographicCfg()
{
var tpl = new Ext4.XTemplate(
'<div id="demographics" class="main">',
'<h2>Information</h2>',
'<div id="demographics-content">',
'<h3>Demographics</h3>',
'<table class="detail" style="margin-left: 30px">',
'<tr><td class="label" width="120px">ParticipantId</td><td>{ParticipantId:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">Gender</td><td>{Gender:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">StartDate</td><td>{StartDate:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">Country</td><td>{Country:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">Language</td><td>{Language:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">TreatmentGroup</td><td>{TreatmentGroup:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">Status</td><td>{Status:this.renderNull}</td></tr>',
'<tr><td class="label" width="120px">Height</td><td>{Height:this.renderNull}</td></tr>',
'</table>',
'</div>',
'</div>',
{
renderNull : function(v) {
return (v == undefined || v == null || v == "") ? "--" : v;
}
}
);
Ext4.getCmp('leftContainer').add({
xtype : 'component',
id : 'demographics-' + subject_accession,
tpl : tpl,
border : false, frame : false,
data : {}
});
var sql = "SELECT Demographics.ParticipantId, " +
"Demographics.date, " +
"Demographics.StartDate, " +
"Demographics.Country, " +
"Demographics.Language, " +
"Demographics.Gender, " +
"Demographics.TreatmentGroup, " +
"Demographics.Status, " +
"Demographics.Height " +
"FROM Demographics " +
"WHERE Demographics.ParticipantId='" + subject_accession + "'";
var demo_store = Ext4.create('LABKEY.ext4.data.Store', {
schemaName : 'study',
sql : sql,
autoLoad : true,
listeners : {
load : function(s) {
var c = Ext4.getCmp('demographics-' + subject_accession);
if (c) { c.update(s.getAt(0).data); }
},
scope : this
},
scope : this
});
}
});
</script>
You can see an example custom participant view in the online example study. Click the tabs to see the datasets in each category; step through to see data for other participants:
