Custom HTML/JavaScript Participant Details View

Documentation
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 Participant Details View), (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:

MODULE_NAME
resources
views
participant.html

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.

Example Custom Participant.html

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();
</script>
<script type="text/javascript">
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;

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>

Discussion

previousnext
 
expand all collapse all