Vizlib Home
Welcome
Login

Vizlib Advanced Text Object - HTML Snippets / Tips & Tricks

Example DescriptionCode

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





P
Piers is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.