Qlik Community

Ask a Question

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
QlikWorld Online 2021, May 10-12: Our Free, Virtual, Global Event REGISTER TODAY
cancel
Showing results for 
Search instead for 
Did you mean: 
danelooman
Contributor III
Contributor III

Custom Visualization not rendering as Master Viz

I have a custom extension that makes an ugly chart similar to the excel chart my client is used to. It works great but I tried to make it a master visualization and it is not rendering. Has anyone ran into this before? I have plenty of other custom extensions that do work as master vizs but I can't seem to figure out why this one does not.  Below is the paint function.

        paint: function ( $element, layout ) {
            itr++;
            $element.empty();
            this.backendApi.getProperties().then(function(reply){       
                let id = layout.qInfo.qId + `_${itr}`,
                hypercube = layout.qHyperCube,
                rowcount = hypercube.qDataPages[0].qMatrix.length,
                colcount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length,
                dims = [],
                measures = reply.qHyperCubeDef.qMeasures,
                bordersStr = layout.borders,
                groupings = [];      
                let borderArray = bordersStr.split(",")
                if(layout.hasOwnProperty("groupings")){
                    groupings = layout.groupings
                }
                let html = `<table id="${id}_main" class="ERA_Hier_Main"><thead><tr><th style="border-right:1px solid black;"> <button id="${id}_print">Print</button></th>`
                if(groupings.length > 0 ){
                    let groupTotalSpan = 0
                    groupings.forEach(group => {
                        groupTotalSpan += group.colSpan
                        let bgColor = '#fff',
                            textColor = '#000000'
                        if(group.hasOwnProperty("color")){
                            bgColor = group.color.color
                        }
                        if(group.hasOwnProperty('textcolor')){
                            textColor = group.textcolor.color;
                        }
                        html += `<th colspan="${group.colSpan}" style="background-color:${bgColor};color:${textColor}";>${group.label}</th>`
                    })
                    let empties = measures.length - groupTotalSpan
                    if(empties > 0){
                         html += `<th colspan="${empties}"></th>`
                    }
                    html += `</tr><tr><th style="border-right:1px solid black;"></th>`
                }

                hypercube.qDimensionInfo.forEach(function(row){
                    let title = row.qFallbackTitle
                    if (row.hasOwnProperty("title")){
                        title = row.title
                    }
                    dims.push({ fields: row.qGroupFieldDefs,
                        title: title})
                })
                hypercube.qMeasureInfo.forEach(row => {
                    let bgColor = '#fff',
                        textColor = '#595959';
                    if(row.hasOwnProperty('color')){
                        bgColor = row.color.color
                    } 
                    if(row.hasOwnProperty('textcolor')){
                        textColor = row.textcolor.color
                    }
                    html += `<th style="background-color:${bgColor};color:${textColor};">${row.qFallbackTitle}</th>`
                })
                html += `</tr></thead>`
                for (let i = 0; i < dims.length; i++) {
                    html += `<tbody id="${id}_${i}" class="ERA_Hier_Sub"></tbody>`
                }
                
                html += `</table>`
                $element.html( html );
				
                if(groupings.length > 0){
                    borderArray.forEach(colNum => {
                        $(`#${id}_main > thead > tr:nth-child(2) > th:nth-child(${colNum})`).css("border-right", "1px solid black") ;
                    })
                    $(`#${id}_main > thead > tr:nth-child(1) > th`).css("border-right", "1px solid black") ;
                } else {
                    borderArray.forEach(colNum => {
                        $(`#${id}_main > thead > tr > th:nth-child(${colNum})`).css("border-right", "1px solid black") ;
                    })
                }
                
                $(document).ready(function() { 
                    var firstheight = $(`#${id}_main > thead > tr:nth-child(1) > th:nth-child(2)`).innerHeight();
                    $(`#${id}_main > thead > tr:nth-child(2) > th`).css("top", "25px")
                });          
                cubeMaker(dims, measures, id, borderArray)
				$(`#${id}_print`).off()
				$(`#${id}_print`).on('click', function(e){
                    $(`#${id}_main`).addClass("ERA_Hier_Print ")
                    $(`#${id}_main`).printThis();
				})
			});

			return qlik.Promise.resolve();
        }

 

0 Replies