Brugerdefineret visualisering i LuckyTemplates: Lær hvordan du kontrollerer skrifttypeegenskaber i DAX

Til dette blogindlæg vil jeg gerne bruge lidt tid i dag og introducere dig til en brugerdefineret visualisering i LuckyTemplates, som jeg er begyndt at bruge, som giver en masse fleksibilitet og muligheder, som ikke er mulige i indbyggede LuckyTemplates-visuals. Du kan se den fulde video af denne tutorial nederst på denne blog.

Jeg ved, at vi har talt meget om Deneb på det seneste og med god grund, men denne giver også en masse fleksibilitet. At bruge de to sammen giver et ret kraftfuldt par. Den brugerdefinerede visual, jeg taler om, kaldes K Team Solutions' HTML & CSS Viewer .

Der var for nylig en beskrivelse af, hvordan man kontrollerer både farve- og rich text-formateringsattributterne for et kortvisual baseret på en DAX-måling. Farve er bestemt ikke et problem; det er noget, vi kan gøre ret nemt igennem i LuckyTemplates.

At kontrollere attributter for tekster som fed og kursiv gennem DAX-mål er noget, du ikke kan gøre med native LuckyTemplates, men det er ret nemt at gøre med denne HTML CSS-fremviser. Du kan også bruge det visuelle til at skabe nogle visuelle effekter og lave en omfattende KPI-korttilgang.

Lad os tage et kig på forumindlægget. Grundlæggende havde medlemmet en simpel kortvisuel baseret på en målestok, og de ønskede at ændre tekstens attributter.

Vi springer ind i LuckyTemplates for at genskabe dette scenarie. Vi sætter målingen op baseret på praksisdatasættet fra det eksterne værktøj, som vi bruger til at lave mockups.

Vi vil sætte det på en måde, så hvis det samlede årlige salg var større end 40 millioner, vil det være fed og rødt.

Og hvis det var mindre end det, vil det være blåt og ikke fed.

Indholdsfortegnelse

• Download af HTML CSS Viewer Custom Visual i LuckyTemplates
• Ændring af skrifttypeegenskaberne med en brugerdefineret visualisering i LuckyTemplates
• Brug af den brugerdefinerede app på forskellige måder
• Tilføjelse af animationer og GIF'er til din rapport
• Konklusion

Download af HTML CSS Viewer Custom Visual i LuckyTemplates

Jeg vil vise dig, hvordan dette kan gøres. Den første ting at gøre er faktisk at få det visuelle. Gå til AppSource og indtast HTML CSS Viewer.

Dette vil være en betalt visualisering, og indtil videre kan du få en gratis prøvelicens fra deres hjemmeside indtil udgangen af ​​september 2022. Du har et par måneder til at teste dette gratis.

Når vi har indlæst det i LuckyTemplates, kan vi se det fra den visuelle rude. Vi kan fastgøre det som et permanent billede, hvis vi bruger det ofte.

Ændring af skrifttypeegenskaberne med en brugerdefineret visualisering i LuckyTemplates

Hvis vi ser på tekstboksen, er der to hovedmål, vi bruger her: et HTML-mål og et CSS-mål. HTML giver den generelle struktur på websiden, mens CSS giver formateringen.

Det, vi har her, er et HTML-tag, og så er ID=containeren et tilbagekald til CSS. Hovedindholdet i dette er kun titlen i tekstboksen.

Og hvis vi så går til CSS, er det her, tingene bliver lidt mere komplekse.

Den generelle struktur, jeg bruger, er Style 1 som en variabel, og derefter Style 2 som en variabel.

Dette efterfølges af en simpel hvis-erklæring , der siger "hvis det samlede salg er større end 40 millioner, bruger det stil to; hvis ikke, bruger den stil 1." Det eneste tunge løft, der udføres, er at definere disse to stilarter.

Brug af den brugerdefinerede app på forskellige måder

Appen kommer også med en meget detaljeret rapport, der viser dig de mange forskellige ting, du kan gøre med denne visualisering.

Som jeg har nævnt tidligere, her er de kort, du kan lave.

Du har også mulighed for at oprette detaljerede tabeller, når du bruger denne visualisering.

Du kan også oprette en tekstdomineret visualisering.

På landingssidemuligheden kommer du også til at bruge en tekstrulle med skrifttype- og baggrundsindstillinger.

Hvis vi gennemgår det meste af Changing Text CSS-koden, er det meget intuitivt. Vi kan foretage ændringer på skrifttypevægt, skriftstørrelse og skriftfarve.

Vi kan kopiere dette ind i skabelonen og derefter bruge det som grundlag for den anden foranstaltning. Hvis vi går tilbage til vores fil, har vi Card Title CSS, som styrer formateringen.

Vi indsatte den kode, vi kopierede, så vi har den blå farve og den letteste skriftvægt til Style 1. Derefter den samme skrifttype i Style 2 med en rød farve og den tungeste skriftvægt for at skabe den fede effekt.

Vi sætter dette gennem IF-sætningen, og afhængigt af værdien af ​​foranstaltningen, vil den vælge stilen. Vi tager bare disse to foranstaltninger og slipper derefter HTML og CSS i disse pladser.

Med denne teknik har du mulighed for nemt at formatere rich text-attributter ved hjælp af HTML og CSS.

Tilføjelse af animationer og GIF'er til din rapport

Udover muligheden for at bruge brugerdefinerede skrifttyper, har vi også muligheden for at bruge animation og GIF'er. Jeg fandt på en simpel foranstaltning, hvor jeg brugte en HTML til den tilpassede titel.

Og så brugte jeg denne CSS-fil til at oprette tre stilarter med forskellige brugerdefinerede skrifttyper.

Disse er bare ægte skrifttyper eller åbne skrifttyper, som jeg downloadede gratis. Stilen er standard, hvilket betyder, at der ikke er valgt noget i udsnitsværktøjet.

Ud over det har jeg et GIF-mål. Jeg inkorporerede tre GIF-filer, som jeg uploadede til imgbb-webstedet , brugte derefter de direkte URL'er og satte dem i HTML-tagget ved hjælp af formatet i eksempelrapporten for HTML CSS-visualen.

Så brugte jeg et simpelt SWITCH TRUE-mål til at vælge den rigtige GIF. Hvis der ikke er valgt noget, vælger den blot et tomt felt.

Sådan ser det ud med blanken og med intet valgt i skæremaskinen.

Og hvis vi så foretager en markering i skæremaskinen, er det det, vi ser.

Ved at bruge denne brugerdefinerede visualisering kan vi nu vælge brugerdefinerede skrifttyper. Vi kan også tilføje GIF'er og derefter gøre disse GIF'er betinget af udsnitsvalg og DAX-mål. Disse vil ændre sig dynamisk afhængigt af valget i din slicer.

Der er dog en vigtig begrænsning. Når du udgiver dette til tjenesten, skal skrifttypen være installeret på den lokale maskine, for at brugeren kan se den.

Hvis skrifttypen er installeret på den lokale maskine, vil den blive vist korrekt gennem HTML-fremviseren, når du udgiver den i LuckyTemplates-tjenesten. Hvis skrifttypen ikke er indlæst på den lokale maskine, vil den gå tilbage til standard skrifttypefamilien.

Konklusion

K Team Solutions' HTML & CSS Viewer er en fantastisk tilpasset visualisering i LuckyTemplates og giver en tilpasselig og interessant måde at ændre det visuelle i dine rapporter. Jeg opfordrer dig bestemt til at downloade denne app og lege med den.

Glem heller ikke at abonnere på LuckyTemplates tv-kanal. Vi har en enorm mængde indhold, der kommer ud hele tiden fra mig selv og en række indholdsskabere, alle dedikeret til at forbedre den måde, du bruger LuckyTemplates og Power Platform på.

Til sidst, tjek LuckyTemplates hjemmeside for flere ressourcer og yderligere læring, som du nemt kan få adgang til.