Hey,
Made a quick brutal tweak just to fetch the style in line with Sense (green, white text, padding, bottom border)
var _app;
define( ["jquery", "qlik"], function ( $, qlik ) {
'use strict';
_app=qlik.currApp();
function createVariable ( name ) {
//from 2.1: check if variable exists
if ( _app.variable.getByName ) {
_app.variable.getByName( name ).then( function () {
//variable already exist
}, function () {
//create variable
_app.variable.create( name );
} );
} else {
//create variable - ignore errors
_app.variable.create( name );
}
}
return {
initialProperties: {
version: 1.0,
qHyperCubeDef: {
qDimensions: [],
qMeasures: [],
qInitialDataFetch: [{
qWidth: 20,
qHeight: 1
}]
}
},
//property panel
definition: {
type: "items",
component: "accordion",
items: {
dimensions: {
uses: "dimensions",
min: 2,
max: 20
},
variable: {
type: "items",
label: "Variable",
items:{
VariableName: {
type: "string",
label: "List Variable Name",
ref: "variable.variablename",
defaultValue: "vDimensionList"
}
}
},
/* measures: {
uses: "measures",
min: 1,
max: 1
},
sorting: {
uses: "sorting"
},*/
settings: {
uses: "settings"
}
}
},
snapshot: {
canTakeSnapshot: true
},
paint: function ( $element, layout ) {
var divName = layout.qInfo.qId;
var self = this, html = '<table width="100%" id="dimensionListTable_' + divName + '">';
var dimensions = layout.qHyperCube.qDimensionInfo;
var vVariableValue='Test value';
var varName=layout.variable.variablename;
createVariable(varName);
_app.variable.getContent(varName, function(varContent) {
var vCurrentSelected = ''+varContent.qContent.qString;
if ( dimensions && dimensions.length > 0 ) {
if(vCurrentSelected.trim()=='')
{
vCurrentSelected=dimensions[0].qGroupFieldDefs;
//console.info('Setting initial: ' + dimensions[0].qGroupFieldDefs);
selectDimension(dimensions[0].qFallbackTitle, dimensions[0].qGroupFieldDefs, varName, divName);
}
for(var dim in dimensions) {
var vBGColor=dimensions[dim].qGroupFieldDefs==vCurrentSelected ? '#52CC52' : '#ffffff';
var vTextColor=dimensions[dim].qGroupFieldDefs==vCurrentSelected ? '#ffffff' : '#595959';
html += '<tr><td style="border-bottom: 1px solid #dddddd; padding: 5px; background-color: '+ vBGColor +'; color: '+ vTextColor +';" onclick="selectDimension(\'' + dimensions[dim].qFallbackTitle + '\', \'' + dimensions[dim].qGroupFieldDefs + '\', \'' + varName + '\', \'' + divName + '\')">';
html += dimensions[dim].qFallbackTitle;
html += "</td></tr>";
}
}
html += "</table>";
$element.html( html );
} );
}
};
} );
function selectDimension(dimText, dimName, varName, divName)
{
// if the varName is passed, put the dimension into the variable
if(varName)
_app.variable.setContent(varName, dimName);
// First locate the table, then set each td to a white background, finally filter the tds by dimension text and set to green background
$("#dimensionListTable_"+divName).find("td").css('background-color', '#ffffff').filter(function() {
return $(this).text() == dimText;
}).css('background-color', '#52CC52');
$("#dimensionListTable_"+divName).find("td").css('color', '#595959').filter(function() {
return $(this).text() == dimText;
}).css('color', '#ffffff');
}
