Use Case
The client is conducting both Mystery Shopping and Customer Satisfaction surveys. They would like to see how their locations score on each survey section, both for each survey separately and all surveys combined. They would also like to see particularly good scores (greater than 90) and particularly bad scores (lower than 60) highlighted.
Report
Code
<img class="photo" src="http://sassieshop.com/2su/custom/chameleon/images/southface/boot.png" border="0" alt="">
<img class="logo" src="http://sassieshop.com/2su/custom/chameleon/images/southface/southface-logo.png" border="0" alt="">
<div class="clear"></div>
{|SHOWIF|OUTPUT_MODE=|EVALCONST(KNICKERS_OUTPUT_STANDARD)|}{DATATYPES.CONTROLS_START}
{DATATYPES.DEFAULT_DATE_FILTERS}
{DATATYPES.CONTROLS_END}{/|SHOWIF|}
{|VANISHIF|DATATYPES.SHOW_DATATYPE.TOTAL_COUNT}
<div class='ui-state-highlight no-data'><p>No data was found to display</p></div>
{/|VANISHIF|}
{|SHOWIF|DATATYPES.SHOW_DATATYPE.TOTAL_COUNT}
{|CROSSTAB|}
<div>
{|LOOP|CROSSTAB.CLIENT_49_LEVEL_1(SORT=NAME,CROSSTAB_FILTER=NO_BLANKS)}
{|SHOWIF|LOOP.ISFIRST}
<table class='data'>
<thead>
<tr>
<th rowspan="2">{DATATYPES.SHOW_DATATYPE.CLIENT_49_LEVEL_1.NAME}</th>
{|LOOP|CLIENT_49_LEVEL_1.CLIENT_49_SURVEY(SORT=ORDER_NUM)}
<th class="col-survey-{CLIENT_49_SURVEY.ID}" colspan="{DATATYPES.SHOW_DATATYPE.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM).NUMELEMENTS}">
{CLIENT_49_SURVEY.NAME}
</th>
{/|LOOP|}
<th class="col-combined" colspan="{DATATYPES.SHOW_DATATYPE.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM).NUMELEMENTS}">
Combined
</th>
</tr>
<tr>
{|LOOP|CLIENT_49_LEVEL_1.CLIENT_49_SURVEY(SORT=ORDER_NUM)}
{|LOOP|CLIENT_49_SURVEY.PROPERTIES(FILTER=type|eq|major_sectional_percent_score,SORT=ORDER_NUM,LIMIT=5)}
<th class="col-wave-{CLIENT_49_SURVEY.ID} {LOOP.HASNEXT?:last-property}">
{|SORT_TOGGLE|POS(AVG(CLIENT_49_SURVEY.|EVALTAG(PROPERTIES.PROPERTY_ID)|),|EVALTAG(CLIENT_49_SURVEY.INDEX)|)}
{PROPERTIES.NAME.SPLIT(:,1)}
{/|SORT_TOGGLE|}
</th>
{/|LOOP|}
{/|LOOP|}
{|LOOP|CLIENT_49_LEVEL_1.PROPERTIES(FILTER=type|eq|major_sectional_percent_score,SORT=ORDER_NUM,LIMIT=5)}
<th class="col-combined">
{|SORT_TOGGLE|AVG(CLIENT_49_LEVEL_1.|EVALTAG(PROPERTIES.PROPERTY_ID)|,CLIENT_49_LEVEL_1)}
{PROPERTIES.NAME.SPLIT(:,1)}
{/|SORT_TOGGLE|}
</th>
{/|LOOP|}
</tr>
</thead>
<tbody>
{/|SHOWIF|}
<tr>
<th>{CLIENT_49_LEVEL_1.NAME}</th>
{|LOOP|CLIENT_49_LEVEL_1.CLIENT_49_SURVEY(SORT=ORDER_NUM)}
{|LOOP|CLIENT_49_SURVEY.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM)}
<td class="col-survey-{CLIENT_49_SURVEY.ID} {AVG(CLIENT_49_SURVEY.PROPERTIES.VALUE).ROUND>90?good-score} {AVG(CLIENT_49_SURVEY.PROPERTIES.VALUE).ROUND<60?bad-score}">
{AVG(CLIENT_49_SURVEY.PROPERTIES.VALUE).ROUND}
</td>
{/|LOOP|}
{/|LOOP|}
{|LOOP|CLIENT_49_LEVEL_1.PROPERTIES(FILTER=type|eq|sectional_percent_score,SORT=ORDER_NUM)}
<td class="col-combined {AVG(CLIENT_49_LEVEL_1.PROPERTIES.VALUE).ROUND>90?good-score} {AVG(CLIENT_49_LEVEL_1.PROPERTIES.VALUE).ROUND<60?bad-score}">
{AVG(CLIENT_49_LEVEL_1.PROPERTIES.VALUE, CLIENT_49_LEVEL_1).ROUND}
</td>
{/|LOOP|}
</tr>
{|VANISHIF|LOOP.HASNEXT}
</tbody>
</table>
{/|VANISHIF|}
{/|LOOP|}
</div>
{/|CROSSTAB|}
{/|SHOWIF|}
CSS
/* css for CombinedSurveyReport */
@import "themeroller/jquery.ui.all.css";
@import "chrome.theme.css";
@import "chrome.layout.css";
.data thead th
{
text-align: center;
}
.data thead a
{
color: white;
text-decoration: underline;
}
.data tbody td
{
text-align: center;
}
.good-score
{
color: green;
}
.bad-score
{
color: red;
}
.last-property
{
border-right: 1px solid #B3B3B3;
}
/***** jmill *****/
body {
background: #252b2b url("http://sassieshop.com/2su/custom/chameleon/images/jmill/bg.jpg") no-repeat top center fixed;
}
.wrap {
padding: 2em 0;
}
header.main, .header.main {
background: transparent;
border: 0;
padding: 0;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#content {
background: #39403a;
border: 1px solid #000;
padding: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: 0px 0px 9px #000;
-webkit-box-shadow: 0px 0px 9px #000;
box-shadow: 0px 0px 9px #000;
}
#content img.photo {
float: right;
margin: -2em 1.5em 0 0;
height: 150px;
}
#content img.logo {
margin: 4em 0 0 3em;
}
.clear {
clear: both;
}
fieldset {
background: transparent;
border: 0;
padding: 0 1em;
text-align: right;
}
fieldset label {
color: #fff;
}
fieldset > div, fieldset .level-input {
float: left;
width: 25%;
text-align: left;
}
fieldset .date-input {
width: 50%;
}
fieldset .date-input div {
float: left;
margin-left: 15px;
}
fieldset .controls, fieldset .ui-controls {
float: right;
margin: 1.5em 1em 0 0;
text-align: right;
width: 40%;
}
fieldset .controls button {
background: #cacfcb;
border: 1px solid #252b2b;
color: #540a29;
font-size: 1.1em;
float: right;
margin-left: 1em;
padding: .25em 1em;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: 0px 0px 12px #252b2b;
-webkit-box-shadow: 0px 0px 12px #252b2b;
box-shadow: 0px 0px 12px #252b2b;
}
fieldset .controls button:hover {
background: #661f3c;
border: 1px solid #000;
color: #fff;
-moz-box-shadow: 0px 0px 12px #cacfcb;
-webkit-box-shadow: 0px 0px 12px #cacfcb;
box-shadow: 0px 0px 12px #cacfcb;
}
h2,
.score-title
{
color: #800000;
margin-bottom: .5em;
}
.results {
margin: 0;
padding: 0 2em 2em 2em;
}
.results:before,
.results:after {
content:"";
display:table;
}
.results:after {
clear:both;
}
table#data-table,
table.data
{
border: 1px solid #000;
float: none;
margin: 0 auto 2em auto;
width: 96%;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-box-shadow: 0px 0px 12px #000;
-webkit-box-shadow: 0px 0px 12px #000;
box-shadow: 0px 0px 12px #000;
}
thead th {
background: #661f3c;
color: #fff;
}
table tbody tr:nth-child(odd) {
background: #e3e2e1;
color: #111;
}
table tbody tr:nth-child(even) {
background: #e8e8e8;
color: #111;
}
table tbody tr th {
background: transparent;
color: #313030;
}
/*table tbody tr:hover,*/
table tbody td:hover
{
background: #d9216d;
color: #000;
}
table thead th,
table thead th.last-property {
border: 0;
color: #fff;
}
table tbody tr th, table tbody td {
border-top: 1px solid #dfc3ce;
border-bottom: 1px solid #dfc3ce;
}
/*
th.col-survey-1229 {
background: #903535;
}
*/
td.col-survey-1229 {
background: #faf6f5;
background: transparent;
}
/*
th.col-survey-1230 {
background: #9e453c;
}
*/
td.col-survey-1230 {
background: #cacfcb;
}
/*
th.col-combined {
background: #903535;
}
*/
td.col-combined {
background: #faf6f5;
background: transparent;
}
.good-score {
color: #009800;
}
/***** 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;
}