Webcomponent Qlik-embed redesign

gistfile1.md

HTML file

CSS class d-none to hide qlik-embed element (same about display: none)

<div class="qlik-embed-home d-none" id="qlik-embed-kpi1">
    <qlik-embed
        ui="analytics/chart"
        app-id="{{ APP_ID }}"
        object-id="{{ OBJECT_ID }}"
        id="kpi1"
    ></qlik-embed>
</div>

Javascript file

// Function to set up KPI
async function setupKpi(kpiId, displayId) {
    let kpiElement = document.getElementById(kpiId);
    const refApi = await kpiElement.getRefApi();
    const obj = await refApi.getObject();
    let displayElement = document.getElementById(displayId);

    let objLayout = await obj.getLayout();
    let data = objLayout.qHyperCube.qDataPages[0].qMatrix[0][0].qText;
    displayElement.innerHTML = `${data}`;

    obj.on('changed', async () => {
        objLayout = await obj.getLayout();
        data = objLayout.qHyperCube.qDataPages[0].qMatrix[0][0].qText;
        displayElement.innerHTML = `${data}`;
    });
}
    
// Call function
setupKpi('kpi1', 'kpi1-display');

// delete element to the DOM
const elementKPI1 = document.getElementById('qlik-embed-kpi1');
elementKPI1.remove();