The intention of this project is to extend the existing Qlik Sense Mashup API by adding further functionality. At present the following functionality is added -
A new object that has been added to the 'app' object returned by qlik.openApp(). The storytelling object contains the following methods -
- getStoryList(callbackFn)
- returns a JSON array of Story objects to the given callback function.
- getSlideList(storyId, callbackFn)
- returns a JSON array of Slide objects for the specified storyId to the given callback function.
- getSlideItemList(slideId, callbackFn)
- returns a JSON array of SlideItem objects for the specified slideId to the given callback function.
Example Usage -
app.storytelling.getStoryList(function(stories){
console.log(stories);
});A new function has been added to the 'app' object return by qlik.openApp(). The getSlide function will render the slide specified (by slideId) into the given element (the element Id or a reference to the element are both accepted. NOTE: At present the getSlide function does NOT support snapshot objects with highlighting. Highlighting is applied but no labels are present.
A new function has been added to the 'app' object return by qlik.openApp(). This returns a JSON array of Snapshot objects to the given callback function.
##Implementation: The extended version of the API is implemented in the same way as the standard Mashup API.
- Copy the extended-mashup-api.js file from the build directory into your project.
- Ensure you have loaded the requireJS file into your page.
- Configure the Require object as normal.
- Instead of loading the 'js/qlik' file, load the 'extended-mashup-api.js' file from your project.
- You can now use the returned object in the same way as the standard Mashup API but with additional functionality.
##Modification: If modifying the solution, to create the 'build' version of the 'extended-mashup-api.js' you will need run the "grunt include" command. To do this -
- Open a command window and browse to the project directory.
- Ensure the correct node packages are installed by running npm install.
- Now run "grunt includes"
- The 'build' directory will now contain the latest built version of the file.
Example Usage - HTML
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Qlik Sense: Mashup</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="cleartype" content="on">
<!--Add host to these 3 links if the mashup is on another webserver than qlik sense static content-->
<link rel="stylesheet" href="/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="/resources/assets/client/client.css" media="all">
<script src="/resources/assets/external/requirejs/require.js"></script>
<script src="storytelling.js"></script>
<style>
article.qvobject
{
position:absolute;
overflow: hidden;
padding: 10px;
}
</style>
</head>
<body style="overflow:auto">
<div id="story">
</div>
</body>
</html>JS
var config = {
host: window.location.hostname,
prefix: "/",
port: window.location.port,
isSecure: window.location.protocol === "https:"
};
require.config( {
baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources"
} );
require( ["./extended-mashup-api.js"], function ( qlik ) {
qlik.setOnError( function ( error ) {
alert( error.message );
} );
var app = qlik.openApp('Helpdesk Management', config);
app.model.waitForOpen.promise.then(function(){
app.storytelling.getStoryList(function(stories){
app.storytelling.getSlideList(stories[0].qInfo.qId, function(slides){
var storyElement = document.getElementById('story');
for (var i=0;i<slides.length;i++){
var e = document.createElement('div');
e.classList.add('slide');
e.style.width = "100%";
e.style.height = ((storyElement.clientWidth)/(16/9)) + "px";
storyElement.appendChild(e);
app.getSlide(e, slides[i].qInfo.qId);
}
})
})
});
});