How to serialize mashup code for Qlik Sense

[Damien_Villaret]

For testing or for performance optimization, it may sometimes be useful to serialize the whole code or part of it.
This article includes an example of how to serialize API calls used in mashup.

Environments:

• Qlik Sense Enterprise on Windows 

Resolution:

This sample is based on the "Basic single page mashup" template available in the dev-hub.

HTML (id corresponds to the object ID of the Qlik Sense object to display in the div)

...
	<section class="content-section-b">
		<div class="container">
			<div class="row">
				<div class="col-lg-4 qvplaceholder borderShadow qvobject" id="VfYx">

				</div>
				<div class="col-lg-4 qvplaceholder borderShadow qvobject" id="xnYCy">

				</div>
				<div class="col-lg-4 qvplaceholder borderShadow qvobject" id="pnvz">

				</div>
			</div>
		</div>
	</section>
...

Javascript file

...

	//open apps -- inserted here --
	//get objects -- inserted here --
	
	async function init(){
            const app = await qlik.openApp("a42b62d6-cd67-4edd-b726-827a42c2a44d");
            const Ids = Array.from(document.querySelectorAll('.qvobject')).map(node=>node.getAttribute('id'));

            for (let index = 0; index < Ids.length; index++) {
                const vis = await app.visualization.get(Ids[index]);
                await vis.show(Ids[index]);
            };
        }
        init();

...