Qlik Sense Widgets, en introduktion och så kommer du igång

I och med Qlik Sense 3.0 lanserade Qlik en ny typ av tillägg, widgets. En widget är något som enklast kan beskrivas som ett extension light. En möjlighet att skapa egna visualiseringsobjekt baserat på HTML och CSS. I princip behövs ingen skript (javascript) programmering som annars är fallet vid extensions. Widget kategoriseras i bibliotek.

För att komma igång finns det dels ett exempel bibliotek ”widget-examples” samt tydliga instruktioner i utvecklarhjälpen (de hittar du här).

I det kommande exemplet kommer jag gå igenom om hur du kan skapa en rak tabell som tar 1 dimension och 1-3 olika mått där totalraden kan byta färg.

Skapa ett widget-bibliotek

Börja med att öppna dev-hub, https:///dev-hub/ och widget editor.

widgets1Skapa ett nytt bibliotek.widgets2

I detta exempel döper jag det till MyOwnWidgetLib med en kort beskrivning.

Lägg till en ny widget

Välj sedan i meny att skapa en ny widget.

widgets3

Nu får vi upp 4 olika ”rutor” eller arbetsområden.
• HTML – här gör vi vår visualisering mha av HTML kod.
• CSS – här applicerar vid stylesheet till vår visualisering
• Preview – Här kommer vår visualisering av visas som en preview efter att vi skapare den.
• Properties – Här kommer vår widgets inställningar att visas. Inställningar som vi själva kan skapa.

För att vi ska kunna (i alla fall underlätta) arbeta med vår widget behöver vi data. Därför behöver vi välja en applikation i högra hörnet för att använda data ifrån.

Definiera antal dimensioner och uttryck

Vi börjar med att definiera hur många dimensioner och mått vår widget ska hantera. Under inställningar, klicka på editera. Dra och släpp Data- Dimensions and measures till inställningspanelen. Klicka sedan på ikonen (kugghjul).

widgets4

Jag väljer att det ska finnas (tvingande) en dimension och mellan 1 – 3 mått för den här widgeten.

När jag sedan är klar klickar jag på checkboxen för att stänga inställningarna av inställningarna.

Därefter väljer jag en dimension och två uttryck/mått.

Addera HTML och CSS

Nu är det dags att börja visualisera. Jag kommer inte förklara HTML / CSS koden i sig. Men jag börjar med att skapa en DIV tag för att få en sk ”Wrapper”.

<div class="wrapper"> </div>

Om vi nu vill lägga till våra data/dimension/mått finns det en Insert som ger olika snippets. För att visa detta, välj Measures and values följt av insert. (Se till att markören hamnar innanför vår div tagg. För att endast visa CSS adderar vi följande,

.wrapper{ background-color:#ccc; };

Jag skapar sedan en html tabell med två rader, en total och en rad. Jag preparerar respektive rad och kolumn med css klasser.


<table>
<tbody>
<tr class="TotalRow">
<td class="TotalDimension">Total</td>
<td class="TotalMeasure1">{{data.totals[0].qText}}</td>
<td class="TotalMeasure2">{{data.totals[1].qText}}</td>
<td class="TotalMeasure3">{{data.totals[2].qText}}</td>
</tr>
<tr ng-repeat="row in data.rows track by $index">
<td class="Dimension">{{data.rows[$index].dimensions[0].qText}}</td>
<td class="Measure1">{{data.rows[$index].measures[0].qText}}</td>
<td class="Measure2">{{data.rows[$index].measures[1].qText}}</td>
<td class="Measure3">{{data.rows[$index].measures[2].qText}}</td>
</tr>
</tbody>
</table>

För totalraden använder jag totals arrayen för att hämta ut värden. För första kolumnen anger jag ”Total” istället för något värde.
Om jag nu tar bort css stylen för wrapper klassen kommer vi nu har få följande resultat i vår preview.

 

widgets6

 

Nu är nästa steg att applicera styling till tabellen.
När vi lägger till följande styling,

.TotalRow {border-bottom:1px solid #aaa;height:30px;color:white;background-color:#1F2A6D;font-weight:bold}
.TotalDimension {padding-left:15px;}
.TotalMeasure1 {padding-right:10px;text-align:right;}
.TotalMeasure2 {padding-right:10px;text-align:right;}
.TotalMeasure3 {padding-right:10px;text-align:right;}
.Dimension {width:60%;text-align:left;padding-left:15px;padding-top:10px;padding-bottom:10px;}
.Measure1 {padding-right:10px;text-align:right;}
.Measure2 {padding-right:10px;text-align:right;}
.Measure3 {padding-right:10px;text-align:right;}

Blir resultatet något mer attraktivt.

 

widgets7

 

Använd din widget i Qlik Sense

Så nu kan vi (efter att ha sparat) applicera denna visualisering i en applikation.
Öppna en befintlig eller skapa en ny. Välj sedan ”Custom objects”.

 

widgets8

 

Där dyker vårt bibliotek myownwidgetlib upp och även vår widget.
Lägger vi ut det och adderar dimension och uttryck får vi detta. (Jag skapar även en raktabell från Sense standard objekt med samma dimension och uttryck.

 

widgets9

Share on LinkedInTweet about this on TwitterShare on Google+Share on FacebookEmail this to someone

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *