Vizlib Advanced Text Object Guides - HTML Reference

Ameena Ahsan Pirbhai

Modified on: Thu, 22 Sep, 2022 at 11:04 AM

TABLE OF CONTENTS

Tips and Tricks
Sourcing Code Snippets

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 infographic 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

Back to Contents

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>&#8205;</div>'

Back to Contents

Tips and Tricks

Sourcing Code Snippets

Related Articles