To open the Single configurator tool, just click on the Single configurator menu option in the main Dev Hub screen.
This tool allows you to create mashup pages without having to write a single line of code! You can choose the application containing the objects you want to include in your mashup. The configurator will do all the heavy lifting for you. Drag and drop the objects to the main screen, select the desired settings, and Single configurator will return:
- A URL that will point to the object.
- An <iframe> code that can be used in an HTML file. This is useful when embedding objects into web pages.
The following simple but jaw-dropping example will be enough for me to show you how powerful this tool is.
Once you are in the Single configurator, select an existing application from the drop-down list on the left. I will use Customer Sales.qvf for my example. After this, all the sheets and objects from the Customer Sales application will populate in the left section, Sheets and objects. Select the sheet or object that you would like to include in your mashup, and drag and drop them in the center pane. I will drag and drop the visualization Sales Rep Variance (TY vs LY).
The following image shows what the Single configurator screen will look like after dragging and dropping the object:
The center pane previews the object you selected and right, above it, the URL and iFrame code that you can use within your HTML file. To preview it, click on the View icon on the right, or copy the URL and paste it into a browser.
To the right-hand side of the object preview, you will find the Options menu. Use this to define whether you want your chart to be clickable, among other options. The Single configurator also allows you to pre-define selections in the charts by using the Apply selection option in the Selections menu on the right. Each option you select or deselect will modify the URL and iFrame. Make sure you always use the latest version.
Now, what do we do with this? Anything you want! You can use the URL to link it to your blog, for example, as long as all the licenses and permissions are in place, or you can share it internally with work colleagues, or anything else you can think of.
You can also integrate the iFrame code in a web page. To achieve this, create a blank Notepad document and name it Mashup.html. You then copy the following code:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> My first mashup using Single Configurator </TITLE>
</HEAD>
<BODY>
<DIV style="height:500px;">
<iframe height="500" src='http://localhost:4848/single/?appid=C%3A%5CUsers%5Cjuan_%5COneDrive%5CDocuments%5CQlik%5CSense%5CApps%5CConsumer%20Sales.qvf&obj=prgzES&select=clearall' style='border:none;'></iframe>
</DIV>
</BODY>
</HTML>
Save the file, then double-click on it to open it with a web browser. You should now be able to see your mashup with the Qlik Sense object in it.