TABLE OF CONTENTS
Tips and Tricks
| Example | Description | Code |
| iFrames | HTTP & HTTPS do not mix well, due to same-origin policy constraints. Links included in frames should match the HTTP protocol of your Qlik Sense environment. See below Desktop = HTTP access and HTTP only frames Server = HTTPS access and HTTPS only frames Code example: https://codepen.io/GBora/pen/VLYyzY | <header> Welcome! </header> <div> (your local weather) </div> <iframe src="http://www.weather.gov/" frameborder="0"> </iframe> |
| Ticker Text | Ticker text example (inspired by BBC News) | =
'<table style=" position:relative; left: -1%; width: 102%; height: 60px !important; "><tr style="background-color: #9C0A0D;">'&
//Image Tile Section
'<th style=" text-align: left; max-height=100%;">'& '<img src="'& 'https://cdn.mediaborne.co.uk/uploads/integral/image/file/51/bbc-logo-small.jpg' &'" style=" max-width: 160px; height: 40px">' &'</th>'&
//Ticker Section
'<th>'&
'<marquee behavior="scroll" direction="left" scrollamount="15" style="vertical-align: middle;line-height: 40px; ">'&
'<b>LATEST NEWS: <b/>' &
/*IMAGE*/ //'<img src="'& maxstring(urlToImage) &'" height="auto" width="auto"> '&
/*TITLE*/ 'Title' &
/*DATE*/ date(Today()) &
'</marquee>'&
'</th>'&
'</tr></table>'
|
| Load Custom CSS/JS to Qlik Sense | As an alternative to using Vizlib Sheet Menu's custom CSS, you can use the advanced text object on specific sheets to load custom css, or load in JS scripts. | <style> /* INSERT CSS HERE */ </style> <script> /* INSERT JSHERE */ </script> |
| Infographics | Infographics help communicate data interactively for a more impactful,emotive and memorable experience. Why not use some existing templates and connect your data to them?  | See more info here: https://codepen.io/pcameron/details/vEEbBw Don't forget to follow the method above to include style and script tags where applicable |
| Animations | Animations are extremely useful in telling stories with data, particularly in infographic style animations. | See more info here: https://codepen.io/pcameron/details/vEEbBw Don't forget to follow the method above to include style and script tags where applicable |
Sourcing Code Snippets
Code snippets can be found in a number of resources. Codepen is a great resource, which we have used in some of our example apps. See below for how we used codepen snippets to create an endlessly customisable and dynamic HTML button.
= '<div style=" box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); border-radius: 3px; background-color: #eceff1;'& 'background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 2s ease infinite;width:100%;height:95%">' & '<br><h2><br>Exporting '& '123' // Num(Count(TransLineID),'#,##0') & ' rows ⬇? </h2>' &'<br> across ' & 'ABC' // replace(GetSelectedCount(_Dimensions.Label), '0', '<u>all</u>') & ' dimensions and<br>' & 'ABC' // replace(GetSelectedCount(_Measures.Label), '0', '<u>all</u>') & ' measures.' & '<br>‍</div>'