HTML Reference
This topic contains the following sections:
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?
|
Sites like Codepen are great sources of examples. 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 inforgraphic style animations.
|
Sites like Codepen are great sources of examples. 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>'