Use Case
The client would like to see a breakdown of responses for each multichoice question broken out by Region. Additionally, they would like to see an average overall score for the Regions.
Report
Code – Option 1
This version has the advantage of keeping everything in one table, which makes formatting easier and displays better on PDF and Spreadsheet views. However, it can be slower if the report is displaying a lot of data.
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}
{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
<div class='results'>
{|VANISHIF|COUNT(DATATYPES.SHOW_DATATYPE)}
<div class='ui-state-highlight no-data'><p>No data was found to display</p></div>
{/|VANISHIF|}
{|SHOWIF|COUNT(DATATYPES.SHOW_DATATYPE)}
<div>
<table id="data-table">
<thead>
<tr>
<th>Region</th>
{|LOOP|DATATYPES.SHOW_DATATYPE.GROUPS(FILTERSET=type|eq|question_multichoice,SORT=ORDER_NUM)}
<th>{GROUPS.NAME}</th>
{/|LOOP|}
<th>Overall Score</th>
</tr>
</thead>
<tbody>
{|LOOP|DATATYPES.SHOW_DATATYPE.CLIENT_49_LEVEL_3.MEMBERS(SORT=NAME)}
<tr>
<th class="region-header" colspan="{DATATYPES.SHOW_DATATYPE.GROUPS(FILTERSET=type|eq|question_multichoice).NUMELEMENTS.PLUS(1)}">{MEMBERS.NAME}</th>
<td class="overall-score">
{AVG(MEMBERS.PERCENT_SCORE).ROUND}
</td>
</tr>
<tr>
<th class="opt-header">
5<br/>
4<br/>
3<br/>
2<br/>
1<br/>
</th>
{|LOOP|DATATYPES.SHOW_DATATYPE.GROUPS(FILTERSET=type|eq|question_multichoice,SORT=ORDER_NUM)}
<td class="response-summary">
{|RESULT|FILTER=CLIENT_49_LEVEL_3_ID|eq||EVALTAG(MEMBERS.GROUP_MEMBER_ID)|}
{|LOOP|RESULT.DYNAMIC_GROUP(GROUP_ID=|EVALTAG(GROUPS.ID)|,RESULT_FILTER=WITH_BLANKS)}
{COUNT(DYNAMIC_GROUP)}<br/>
{/|LOOP|}
{/|RESULT|}
</td>
{/|LOOP|}
</tr>
{/|LOOP|}
</tbody>
</table>
</div>
{/|SHOWIF|}
</div>
CSS
/* css for MultichoiceDistrictSummary-v11365093896937 */
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
/***** dining 2012 *****/
body {
background: #cccc99;
}
.results {
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: 0px 0px 12px #a5a573;
-webkit-box-shadow: 0px 0px 12px #a5a573;
box-shadow: 0px 0px 12px #a5a573;
}
.results:before,
.results:after {
content:"";
display:table;
}
.results:after {
clear:both;
}
#data-table {
margin-top:20px;
border: 1px solid #bbaac4;
float: none;
width: 100%;
margin-bottom:25px;
}
thead th {
background: #bbaac4; /* Old browsers */
background: -moz-linear-gradient(top, #bbaac4 0%, #683f7f 50%, #452259 51%, #683f7f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbaac4), color-stop(50%,#683f7f), color-stop(51%,#452259), color-stop(100%,#683f7f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbaac4', endColorstr='#683f7f',GradientType=0 ); /* IE6-9 */
color: #fff;
}
tbody tr:nth-child(odd) {
background: #f5f0f7;
color: #452259;
}
tbody tr:nth-child(even) {
background: #fff;
color: #452259;
}
tbody tr th {
background: transparent
}
.region-header,
.overall-score
{
font-size:110%;
}
.overall-score,
.response-summary
{
text-align:center;
}
.opt-header
{
text-align:right;
}
/***** print mode *****/
body.output-mode-print,
.output-mode-print #content,
.output-mode-print .results
{
background: #fff;
border: 0;
margin: 0 auto;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.output-mode-print .results {
margin: 2em;
}
Code – Option 2
This version will be faster to display but can be more difficult to format and does not display nicely in Spreadsheet mode.
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
<div class='results'>
{|VANISHIF|COUNT(DATATYPES.SHOW_DATATYPE)}
<div class='ui-state-highlight no-data'><p>No data was found to display</p></div>
{/|VANISHIF|}
{|SHOWIF|COUNT(DATATYPES.SHOW_DATATYPE)}
{|LOOP|DATATYPES.SHOW_DATATYPE.GROUPS(FILTERSET=type|eq|question_multichoice,SORT=ORDER_NUM)}
<table class='{|SHOWIF|LOOP.ISFIRST}mc-tbl-header{/|SHOWIF|}{|VANISHIF|LOOP.ISFIRST}{LOOP.HASNEXT?mc-tbl:mc-tbl-plus}{/|VANISHIF|}'>
<thead>
<tr>
{|SHOWIF|LOOP.ISFIRST}
<th>Region</th>
{/|SHOWIF|}
<th class='question-text'>{GROUPS.NAME}</th>
{|VANISHIF|LOOP.HASNEXT}
<th class='overall-score'>Overall Score</th>
{/|VANISHIF|}
</tr>
</thead>
<tbody>
{|SHOWIF|LOOP.ISFIRST}
{|CROSSTAB|}
{|LOOP|CROSSTAB.CLIENT_49_LEVEL_3(SORT=ORDER_NUM)}
<tr>
<th>{CLIENT_49_LEVEL_3.NAME}</th>
<td> </td>
</tr>
{|LOOP|CLIENT_49_LEVEL_3.DYNAMIC_GROUP(SORT=ORDER_NUM,GROUP_ID=|EVALTAG(GROUPS.ID)|)}
<tr>
<td class="opt-header">{LOOP.COUNT.TIMES(-1).PLUS(6)}</td>
<td class="response-summary">{COUNT(DYNAMIC_GROUP)}</td>
</tr>
{/|LOOP|}
{/|LOOP|}
{/|CROSSTAB|}
{/|SHOWIF|}
{|VANISHIF|LOOP.ISFIRST}
{|SHOWIF|LOOP.HASNEXT}
{|CROSSTAB|}
{|LOOP|CROSSTAB.CLIENT_49_LEVEL_3(SORT=ORDER_NUM)}
<tr>
<th> </th>
</tr>
{|LOOP|CLIENT_49_LEVEL_3.DYNAMIC_GROUP(SORT=ORDER_NUM,GROUP_ID=|EVALTAG(GROUPS.ID)|)}
<tr>
<td class="response-summary">{COUNT(DYNAMIC_GROUP)}</td>
</tr>
{/|LOOP|}
{/|LOOP|}
{/|CROSSTAB|}
{/|SHOWIF|}
{|VANISHIF|LOOP.HASNEXT}
{|CROSSTAB|}
{|LOOP|CROSSTAB.CLIENT_49_LEVEL_3(SORT=ORDER_NUM)}
<tr>
<th> </th>
<th class="overall-score">{AVG(CLIENT_49_LEVEL_3.PERCENT_SCORE, CLIENT_49_LEVEL_3).ROUND}</th>
</tr>
{|LOOP|CLIENT_49_LEVEL_3.DYNAMIC_GROUP(SORT=ORDER_NUM,GROUP_ID=|EVALTAG(GROUPS.ID)|)}
<tr>
<td class="response-summary">{COUNT(DYNAMIC_GROUP)}</td>
<td></td>
</tr>
{/|LOOP|}
{/|LOOP|}
{/|CROSSTAB|}
{/|VANISHIF|}
{/|VANISHIF|}
</tbody>
</table>
{/|LOOP|}
{/|SHOWIF|}
</div>
CSS
/* css for MultichoiceRegionSummary-v21365097582302 */@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
#content {
width: 1400px;
}
.mc-tbl
{
width: 150px;
float: left;
}
.mc-tbl-plus
{
width: 275px;
float: left;
}
.mc-tbl-header
{
width: 175px;
float: left;
}
.question-text
{
height: 85px;
vertical-align: bottom;
}
/* css for MultichoiceDistrictSummary-v11365093896937 */
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
/***** dining 2012 *****/
body {
background: #cccc99;
}
.results {
background: #fff;
border: 1px solid #ccc;
-moz-box-shadow: 0px 0px 12px #a5a573;
-webkit-box-shadow: 0px 0px 12px #a5a573;
box-shadow: 0px 0px 12px #a5a573;
}
.results:before,
.results:after {
content:"";
display:table;
}
.results:after {
clear:both;
}
#data-table {
margin-top:20px;
border: 1px solid #bbaac4;
float: none;
width: 100%;
margin-bottom:25px;
}
thead th {
background: #bbaac4; /* Old browsers */
background: -moz-linear-gradient(top, #bbaac4 0%, #683f7f 50%, #452259 51%, #683f7f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbaac4), color-stop(50%,#683f7f), color-stop(51%,#452259), color-stop(100%,#683f7f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbaac4 0%,#683f7f 50%,#452259 51%,#683f7f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbaac4', endColorstr='#683f7f',GradientType=0 ); /* IE6-9 */
color: #fff;
}
tbody tr:nth-child(odd) {
background: #f5f0f7;
color: #452259;
}
tbody tr:nth-child(even) {
background: #fff;
color: #452259;
}
tbody tr th {
background: transparent
}
.region-header,
.overall-score
{
font-size:110%;
}
.overall-score,
.response-summary
{
text-align:center;
}
.opt-header
{
text-align:right;
}
/***** print mode *****/
body.output-mode-print,
.output-mode-print #content,
.output-mode-print .results
{
background: #fff;
border: 0;
margin: 0 auto;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.output-mode-print .results {
margin: 2em;