Embed a Qlik Sense object in a popup

Sense's API allows the import of objects from Sense in to a web page. Since QlikMaps popups are HTML web pages, a  Qlik Sense object can be viewed in a pop up.

NOTE: As of Sense 2.1.1+Build:22.origin/release/ms13 , all external source objects must exist in a separate application to function properly.

Get the Object ID to be displayed

The following site provides detailed information on how to obtain Object ID

https://help.qlik.com/sense/1.0/en-us/developer/Subsystems/Workbench/Content/BuildingWebsites/HowTos/qswb_mup_obtainobjectid.htm

Here's a short version:

  1. Navigate to http://localhost:4848/dev-hub/single-configurator
  2. Select the application that contains object.
  3. Select the Object
  4. Copy the URL

The URL in the example is

http://localhost:4848/single?appid=C%3A%5CUsers%5CTrey%5CDocuments%5CQlik%5CSense%5CApps%5CQlikMapsPoints.qvf&obj=ZFVS&select=clearall

 

Modify the URL

The returned URL has many user specific values that need to be modified so the application will work normally when put on the server.

The example was changed from

http://localhost:4848/single?appid=C%3A%5CUsers%5CTrey%5CDocuments%5CQlik%5CSense%5CApps%5CQlikMapsPoints.qvf&obj=ZFVS&select=clearall

to

../single.html?appid=QlikMapsExamples.qvf&   // AppID on the server is different from the desktop client. See notes below.
		obj=ZFVS&
		opt=nointeraction&
		select=clearall&
		select=Zip,'' & Zip &'' "
  • The absolute URL was changed to a relative URL.
  • The absolute appid was changed to a relative appid.
  • A new select was added that set the dimension used in the map (zip) to the value of the zip that was selected to render the popup.

NOTE: The Sense Server uses a different AppID than the desktop client. To find the AppID on the server, open the application containing the object to be placed in the popup on the server and copy the AppID from the URL.  Use the AppID from the server in place of the name of the application following 'appid'.

Provide formatting for the popup

Additional formatting is necessary to create the pop up.

The reformatted URL was changed from

../single?appid=QlikMapsExamples.qvf&
		obj=ZFVS&
		opt=nointeraction&
		select=clearall&
		select=Zip,'' & Zip &'' "

to

'
''
<div style="overflow:hidden">
	<iframe style="width:300px;height:300px;margin-top:0px" 
		src="../single?appid=QlikMapsExamples.qvf&
		obj=ZFVS&
		opt=nointeraction&
		select=clearall&
		select=Zip,'' & Zip &'' "
		frameborder="0">
	</iframe>
</div>
''
'

Please note that additional formatting can be added using basic HTML to customize the look and feel of the object.