As I was working on an app that displays live data, I was called to display the time when the QVF was created. In Qlik Sense we have the function ReloadTime(), but how do we call that in our script from the API and how do we display that based on our region since, our server may very well be in another one?In an earlier post, I showed how do connect to our app with qsocks and the Engine API Engine API and qSocks - Connecting and getting a list of available apps‌ After we establish our connection and create the session, we will create our HyperQube of a simple ListObject. var obj = { "qInfo": { "qId": "LB02", "qType": "ListObject" }, "qListObjectDef": { "qStateName": "$", "qDef": { "qFieldDefs": [ "Round" ], "qFieldLabels": [ "Round" ], "qSortCriterias": [{ "qSortByExpression": -1, "qExpression": { "qv": "" } }] }, "qInitialDataFetch": [{ "qTop": 0, "qLeft": 0, "qHeight": 100, "qWidth": 2 }] } This only returns one field, in this case the "Round". In order to get the time we will need to create an expression and get it as a second field. So we add right after "qInitialDataFetch" , "qExpressions": [{ "qExpr": "=ReloadTime()" }] So now we can create our session and grab all of the fields. For now, we will just focus on the time so here we will take it from the array returned and store it in a global variable reloadTime. qsocks.Connect(app.config).then(function(global) { global.openDoc(id).then(function(app) { app.createSessionObject(obj).then(function(list) { list.getLayout().then(function(layout) { reloadTime = layout.qListObject.qDataPages[0].qMatrix[0][1].qText; }); }); }); }); Now we need to display this on our page but based on the timezone of the user.First we need to create the returned date as a javascript date so we can work with it, var lastReloadTime = new Date(reloadTime); Get the time server/user time difference in hours. var timeDiff = lastReloadTime.getTimezoneOffset() / 60; Now set the time to the users time. lastReloadTime.setHours(lastReloadTime.getHours() - timeDiff); Finally Display it. $('#lastReloadTime').html('LAST UPDATE: ' + lastReloadTime.toLocaleTimeString()); ...View More

If you had loaded data from the web into QlikView then you probably know well how “for … next” loops work. When working with Web Files frequently you need to loop through your code to load more than one URL in a single load. For example let's say I want to analyze an online publication, similar to this blog, where different authors contribute with articles. The URL is composed by a constant piece and a variable ‘http://<publicationurl>?start=1’, ‘http://<publicationurl>?start=15’ I want my script to dynamically load all the possible Urls from start=1 to start=375 In QlikView my code will look like this: fori=1 to 375 LOAD pageUrl, title, author, Postdate, Numberofviews, Numberofcomments FROM [http://publicationurl.com?start=$(i)] (html, codepageis 1252, embeddedlabels, tableis @1); next; The script execution will loop 375 times letting me capture all the post written in this particular publication. To do so I’m using a simple variable expansion in the FROM statement. If you want to perform a similar operation in Qlik Sense you might find some difficulties due variables not expanding when dealing with Web Files in Qlik Sense. But there’s a workaround, it’s called Legacy Mode. What's Legacy Mode? Legacy mode is a way to force Qlik Sense to reuse old load scripts that refer to absolute or relative file paths as well as library connections, and it's just what we need in order to successfully run our example script. In Qlik Sense Desktop, you can set standard/legacy mode in Settings.ini. Do the following: Open C:\Users\{user}\My Documents\Qlik\Sense\Settings.ini in a text editor. Change StandardReload=1 to StandardReload=0. Save the file and start Qlik Sense Desktop, which will run in legacy mode. The available settings for StandardReload are: 1 (standard mode) 0 (legacy mode) For instructions on how to activate the Legacy Mode in Qlik Sense server check Qlik help: http://help.qlik.com/sense/2.0/en-US/online/#../Subsystems/Hub/Content/LoadData/disable-standard-mode.htm Please note that enabling Legacy Mode in Sense Server might have security implications in Sense Server meaning that you won't be able to manage the paths/connection strings in QMC anymore. ...View More

I started out writing this blog post with the intent of explaining a relatively simple technique for making sure charts display when building a mashup with tab navigation. However, it turned into a bit more. We'll go through that initial thought, in addition to installing and using a mashup template, and building a mashup using our newly installed template that's like this https://s3.amazonaws.com/demo-root/tabdemo/index.html.Let’s start with the original intent and kind of work our way through a few topics. When building a mashup with tab navigation, any charts that render or re-render while their tab is not active end up not displaying when their tab is active. This is true of any situation in which a chart renders while its container element’s display property is none. The way to handle this is to use the qlik.resize() method when the tab is active and the chart’s container element is displayed.I thought it would be a good idea to build a simple mashup template that implements tab navigation so you could see what I was talking about as I explained the problem above. And I did. Then I realized that it would probably be a good idea to cover how to install and use a mashup template. So let’s do that quickly.You’ll find a .zip file attached to this post. Download it. If you're using Sense Desktop, then unzip it. Find the unzipped folder, which should be titled “bootstrap-template”. Navigate to C:\Users\{{username}}\Documents\Qlik\Sense\Extensions\Templates, and put the unzipped “bootstrap-template” folder into the templates folder. For Sense Enterprise, navigate to the QMC and click on “Extensions” in the left-bar navigation, then click “Import” and import the zipped “bootstrap-template” folder.Once installed, navigate to the workbench. On Sense Desktop, by default this is localhost:4848/workbench, and on Sense Enterprise it’s at the \workbench subdirectory. Now that you’re at the workbench, click on “Create New,” name your mashup whatever you’d like, and from the template dropdown menu you should now see and be able to select “Basic Bootstrap Template.” Then click on the puzzle icon with the title you just gave your new mashup, and then click “Edit.”Now you can choose an app in the upper left corner, and start dragging charts into your mashup. If you’re unfamiliar with this step, refer to https://community.qlik.com/blogs/qlikviewdesignblog/2015/05/22/creating-a-webpage-based-on-the-qlik-sense-desktop-mashup-api.Assuming that everything went well with the installation, let’s discuss this template a bit. While I was building this template I realized that I couldn’t actually navigate tabs while in the workbench, so by default, all three (Sheet 1, Sheet 2, and Sheet 3) are displayed. This is so you can drag and drop charts into all three. Once you are done dragging charts into them, click on the .js file in the top bar, look for var tabs = false; and change it to var tabs = true;Now the tab functionality is active and you can click “View” to view your creation. If you’d like to change your charts using the Layout editor, you will have to revert that last change you made. Now you should have a mashup with tab navigation and 3 views.Back to how this blog post started. When you switch from “Sheet 1” to “Sheet 2” or “Sheet 3”, some charts are hidden and others are displayed. Without the qlik.resize() method, the charts that were hidden when they were rendered wouldn’t display. You can test this out if you’d like by going back to the .js file and commenting out the qlik.resize() method that is being called every time you switch tabs. If you’re not that familiar with web technologies, some of this stuff can be a little confusing, so please ask any questions you have! ...View More

In an earlier post, i have demonstrated how to connect to our app using Mashup API and displaying the objects on our webpage without much coding (https://community.qlik.com/blogs/qlikviewdesignblog/2015/05/22/creating-a-webpage-based-on-the-qlik-sense-desktop-mashup-api).In one of my projects‌‌, I had to create custom charts one of which is to compare two golf players versus one measure. That means that I had to have a chart with 2 lines, one for each player, compared hole by hole This kind of visualization does not exist yet in Qlik Sense so I decided to build everything with qSocks and the Engine API.I think this is the best solution for custom projects like this, since the Engine API is faster and it is loading only raw data.qSocks is a wrapper intended to make our life easier on communicating with the Engine.(QSocks - Engine API wrapper).In this first tutorial, I will show you how to connect to your Qlik Sense server and get a list of the available apps with qSocks.In your html header, add qSocks that you downloaded from the link above and your js file. <script src="js/qsocks.bundle.js"></script> <script src="js/index.js"></script> In your index.js, or however you have named your js file, add the connection configuration. var config = { host: 'yourserver.com', isSecure: true }; Establish a connection with the server based on that configuration. qsocks.Connect(config).then(function(global) { Get the list of all available apps on the server. global.getDocList().then(function(docList) { If you want to view the available apps on your console, do a forEach loop on that docList. docList.forEach(function(doc) { Here is what the console will output if you do "console.log(doc)"Here is the full code: var config = { host: 'yourserver.com', isSecure: true }; function connect() { qsocks.Connect(config).then(function(global) { global.getDocList().then(function(docList) { docList.forEach(function(doc) { console.log(doc.qDocId) }); }); }); }; connect(); In the next tutorial I will show you how to use the app id (qDocId) to connect to the app and get the available objects to display ...View More

I recently wrote about How to embed a Qlik Sense chart on your website using the single configurator tool that comes with Sense. Single Configurator is a fantastic tool to share charts and it also helps a lot when it comes to create super-simple iframe mashups.On that post, Cristina Messana asked the following: How can I create a button to clear selections? I'm trying to embed objects from an app but I can't embed clear selections. That’s a fair question, Single Configurator will let us to share or embed a chart or an entire sheet. We can choose to include the selections bar into our chart which will get us the clear selections button and much more, it's a great option but sometimes we just need a simple button to help users to undo a selection in a single chart mashup.How to create an HTML button to Clear Selections, step by step guide:1 Open Qlik Sense Desktop, open your browser and type in: http://localhost:4848/workbench If you don’t know what Workbench‌ is for, please check this blog post.2 Create a new Mashup, name it and pick a default template. “Basic Mashup Template with Absolute Positioning”. Click on the new created mashup and edit it.3 Select one apps from the drop down list on the left hand side of the screen.4 Drag and drop one of the charts into one of the six gray placeholders.5 Go to the HTML tab and add the html code for the button to one of the empty placeholders so your button gets properly situated in the page. In the example I'm adding the button to the first placeholder QV01 <div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvplaceholder"> <button class="clear_selections" href="#">Clear Selections</button> </div> Please note that it’s important to add a class or an ID to the button.6 Add the following code to the js file at the line 28: $('.clear_selections').on('click',function(){ app.clearAll(); }) We are targeting all the elements in the HTML file that have a class called clear_selections, our button belongs to that class so on click it will execute the API method clearAll(). Please check Qlik Sense Developers Help site for complete API reference.7 Click on View button on the Workbench top bar to open a new browser tab and check the generated site.You should be able to get the source files at: C:\Users\YOURUSER\Documents\Qlik\Sense\ExtensionsNow is the time for you to create your own mashup project, toy with the CSS properties, add HTML headers, text paragraphs and more Qlik Sense objects to compose a complete data web site.Enjoy! ...View More

A small quirk I have experienced while working with the Qlik Mashup API is that the selection toolbar “floats away” from its corresponding chart the further the page is scrolled down.This isn’t a problem if your page does not scroll, or if you position all of the charts with absolute positioning, the default positioning if you use the default mashup template, but if your page scrolls and you are not using absolute positioning on the charts, then you will likely run into this problem too when creating a mashup.An easy fix for this is to create a container div for all of the page content, set its height equal to the body height, and move the overflow property from the body tag to the container div tag. Let’s walk through this.First, let's wrap our content in a container div, remove any overflow styling that's on the body, and add overflow styling to the container div. <body> <div id="scroll-container" style="overflow:auto;"> <!-- YOUR CONTENT HERE --> </div> </body> Then, we'll need to add some scripting so that the height of the container div is set correctly. <body> <div id="scroll-container" style="overflow:auto;"> <!-- YOUR CONTENT HERE --> </div> <script> $(document).ready(function() { // Sets the container div height correctly on page load $("#scroll-container").height($("body").height()); // Will reset the container div height correctly if window size changes $(window).resize(function() { $("#scroll-container").height($("body").height()); }); }); </script> </body> And that should do it! Now when you scroll your page, if you click on a chart, the selection toolbar should be correctly positioned atop the chart. ...View More

When building business intelligence solutions one problem is that data usually contains errors, e.g. attributes are written in different ways so that data cannot be grouped correctly. The attribute could be written in upper case or not; it could be abbreviated or not; and sometimes several synonyms exist for the same thing. For instance, ‘United Kingdom’ could be referred to as ‘UNITED KINGDOM’, ‘United Kingdom’, ‘Great Britain’, or just ‘UK’. As a consequence, what the users really think of as the same instance will appear on several rows in a list box, or be displayed in several bars in a bar chart. This will cause problems in the data analysis, since selections and numbers displaying totals often will be incomplete. But there are ways to solve this. The best way, is of course to correct it in the source data. But this is not always possible, so it may be that the correction must be made elsewhere. In QlikView and Qlik Sense there are several ways to do this. The most obvious (but not the best), is to use a hard-coded, conditional expression in the script: Similar constructions can be made using Replace() or Pick(). These all work and will do the job. But they are not manageable. Should you want to add more cases or change some previous ones, you will soon realize that this isn’t a good method. The expressions will become too long and they will be error-prone. So I strongly recommend not doing this. There is however a solution which is both manageable and simple: Mapping Load. The first step is to create a mapping table with all changes you want to make: Then you load this table using the Mapping prefix: MapTable: Mapping Load ChangeFrom, ChangeTo From MapTable.xlsx (...) ; Now you can use this table in the script to correct all field values. The simplest way to use the Map statement: Declare the mapping early in the script before any of the relevant fields are loaded, and the corrections will be made automatically: Map Country, Department, Person Using MapTable ; Alternatively, you can use either ApplyMap() or MapSubstring() when you load the field, which both will make a lookup in the mapping table and if necessary make the appropriate replacement, e.g.: ApplyMap( 'MapTable', Country ) as Country , The mapping table will be discarded at the end of the script run and not use any memory in the final application. Using a mapping table is by far the best way to manage this type of data cleansing in QlikView and Qlik Sense: It is easy to add new corrections and to change the old ones The mapping table can be stored separately from the script; in an Excel sheet or even in a database Good Luck! HIC Further reading related to this topic: Don't join - use Applymap instead Mapping as an Alternative to Joining ...View More

One of my favorite features of Qlik Sense is the ability to create and reuse Master Items. Master Items (seen in the image on the left) are dimensions, measures and visualizations that have been saved in the Asset panel in a Qlik Sense app. During the development process, Master Items can be used to create visualizations and once the app is published, the Master Items are available in the Library panel (seen in the image on the right) for others to use. When creating apps, it is common to use the same dimensions and/or measure in more than one chart – that is why Master Items are so useful. I can create a Master Item measure such as Sales (Sum([Sales Amount])) and then use this measure in multiple charts. I do not need to copy and paste the measure every time I need to use it. All I need to do is drag it to my chart or select it from the list of measures. If I decide that I need to make a change to the measure, all I have to do is edit the measure in the Master Items and the change will be made anywhere the measure is used. This saves time and keeps the app/measures consistent. The same can be done with dimensions that are used often in an app. Create it once and use it wherever needed. The Asset panel also has an area for visualizations that can be created by the developer and saved giving users the ability to drag a pre-made visualization to their sheet. In this blog, I will focus on the dimensions and measures section of the Master Items.There are a few ways you can create a Master Item. Let’s first take a look at how you can create a dimension. There are three ways you can create a dimension.From the Fields section in the Asset panelFrom the Master Items section in the Asset panelFrom the Data Model ViewerFor a closer look at how to create dimension, check out this documentCreating Dimensions and Measures.Measure can be created in a similar way as the dimensions.From the Fields section in the Asset panelFrom the Master Items section in the Asset panelFrom the Data Model ViewerFor a closer look at how to create measures, check out this documentCreating Dimensions and Measures.Once the dimensions and measures are created, they can be used to create visualizations. When you are prompted to add a dimension or a measure to a chart, the dimensions and measures that were added to the Master Items will be listed first.Here is what you see when prompted to add a dimension:Here is what you see when prompted to add a measure:You can simply select the dimension/measure or you can drag the dimension/measure from the Master Items section to the chart.Dragging Customer dimension to a bar chart:Dragging Sales measure to a bar chart:If you find the need to edit or change a dimension and/or measure, you can make the change in the Edit window and save. This change will be applied to all charts using the dimension and/or measure. So no more copying and pasting a measure change to all charts using the measure. This also ensures that the dimension and/or measure is updated consistently throughout the app.Once the app is published, users can make use of the dimensions and measures in the Library to build their own visualizations or to edit existing visualizations. The user can drag and drop the dimensions and measures onto their charts and they do not need to worry about the expression or syntax because it is already done for them.As you can hopefully see, it is very easy to add dimensions and measures to the Master Items and by taking the time to do so before creating your charts will prove to be quite valuable. Not only will it save you time when developing because of the reuse capabilities, it will aid you in creating a clean app that is consistent and easy to maintain. Once the app is published, it provides users self-service capabilities to build their own visualizations. If you do not create Master Items, I recommend you start. It is a great feature that in the end makes your job as the developer easier.Thanks,Jennell ...View More

"Innovation - distinguishes between a leader and a follower." - Steve Jobs Steve Jobs said it best. Since April, #TeamQlik has been hard at work delivering innovative capabilities in our products and today we get to share it with the world. I am pleased to announce the general availability of Qlik Sense Enterprise 2.0, Qlik DataMarket and the Qlik Analytics Platform. (applause) By taking these solutions to market, we continue to meet our commitments to our customers and partners,and STILL challenge the norm by disrupting the business intelligence space. It should be no surprise that Qlik is in a unique position in this saturated BI pool. Between outdated BI stacks, and data visualization tools that don't tell the whole story, Qlik delivers a visual analytics platform that puts insight and data at the point where it adds most value, the point of decision. Our associative data indexing engine empowers users to see the whole story that lives in their data, unlike other, shall I say, tools. And it’s only Qlik that is proven in its ability to deliver true agility for the business user, along with governance, trust and scale for IT. Now enough tooting our horn, let me summarize what's new in Qlik Sense 2.0 by not just telling you but showing you with the power of video. (below videos requires YouTube access)To learn more about these great innovations and experience them for yourself, download Qlik Sense Desktop for free and visit our New to Qlik Sense Videos page on the Qlik Community forum, where you can learn how to use these new features, create apps, build visualizations and much more. Enjoy!Michael TaralloSenior Product Marketing ManagerQlik Follow me: @mtarallo-------------------------------------------------------------------------------------------------------------------------------------------------(NOTE: To increase resolution or size of the video, select the YouTube logo in the bottom right of the player. You will be brought directly to YouTube where you can increase the resolution and size of the player window. Look for the 'settings' gears icon in the lower right of the player once at YouTube.)Qlik Sense 2.0 - What's New in 90 seconds (Turn your speakers up and get pumped!)Qlik Sense 2.0 - What's New Presentation (3 min)Introduction to Qlik DataMarket (90 secs)Getting Started with Qlik Sense Webinar (50 mins)Additional How To Videos:Using Qlik DataMarketUsing Smart Data LoadUsing Smart Data Compression ...View More

From my previous blog Creating a webpage based on the Qlik Sense Desktop Mashup API, we've learned how to get the objects from our app and display them on our website with the Mashup API. These are individual objects though and most likely we would like to display them as we do in the app sheet.For this blog we will use the sheet from the "How European are you" app. So here is the sheet with objects.Make sure you add bootstrap css and js references in your html. <!-- CSS --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="https://sense-demo.qlik.com/resources/autogenerated/qlikui.css"> <link rel="stylesheet" href="https://sense-demo.qlik.com/resources/assets/client/client.css" media="all"> <!-- Custom --> <link rel="stylesheet" href="css/style.css"> <!-- JS --> <!-- Latest compiled and minified JavaScript --> <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script src="https://sense-demo.qlik.com/resources/js/external/requirejs/require.js"></script> <!-- Custom --> <script src="js/index.js"></script> In my previous blog in step 7, I used app.getObject(), to place the object into a specific div id. Now, we will go one step further and we will just use the object id from the app as our html data-qvid and we will let jquery handle the rest.So we start by laying out the grid for the above sheet. We need 3 columns and for the 3nd column we will need three rows. <div class="container"> <div id="template"> <div class="row"> <!-- Left Column --> <div class="col-md-2"> <article style="height: 600px" class="qvobject" data-qvid="ZZpXPE" id="filterCountry"></article> </div> <div class="col-md-2"> <article style="height: 600px" class="qvobject" data-qvid="TrjNJ" id="filterYear"></article> </div> <!-- Right Column --> <div class="col-md-8"> <div class="row"> <article style="height: 300px" class="qvobject" data-qvid="KtCKy" id="lifeCostByCountry"></article> </div> <div class="row notification"> Select a category in the chart below to see individual product cost details </div> <div class="row"> <article style="height: 300px" class="qvobject" data-qvid="jsmEE" id="avgLifeCost"></article> </ </div> </div> </div> We overwrite bootstrap's css for some elements that do not show up properly, like the icons below with: .sel-toolbar-span-icon { top: -10px; } and we make sure that all of the qlik sense objects are visible by setting their width to match bootstraps grid. .qvobject { width: 100% } Now we add in our js jquery's $.each method to display the objects in our grid. $('#template').find('.qvobject').each(function() { var qvid = $(this).data("qvid"); app.getObject(this, qvid); }) Finally, we need to add a clear selection button to mimic the app. In our html we add the button. <div class="row"> <div class="col-md-12"> <a id="clear" class="btn btn-default" href="#">Clear Selections</a> </div> </div> and in our js catch the click event with jquery and use the app.clearAll() method. $('#clear').on('click', function(event) { event.preventDefault(); app.clearAll(); }); There are times that you will want to use many objects in your page and you just do not want to split them up in multiple pages. If you see that there is not scrolling on the page, you need to add the following in your css. body { overflow: auto !important; } Here is our final page that looks exactly like we have the objects in our Qlik Sense Desktop SheetThat's it! I Hope you have fun with your webpages!Project Files: yianni-ververis/how-european-are-you · GitHubWebsite: Qlik Demos: See Qlik Sense in Action | Sense-Demo.Qlik.Com ...View More