Vizlib Home Try Vizlib
Welcome
Login

Vizlib Advanced Text Object Guides - HTML Referenc

TABLE OF CONTENTS


Tips and 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?

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



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.