Brugerdefineret tema i LuckyTemplates

Til dagens indlæg vil jeg lave en hurtig gennemgang af de tilpasninger, du kan foretage ved direkte at redigere og anvende en JSON-temafil. Dette er faktisk ikke en beskrivelse af, hvad der kan gøres i selve LuckyTemplates, men snarere som et eksempel på, hvad der kan opnås uden for LuckyTemplates, når du laver brugerdefinerede temaer. Du kan se den fulde video af denne tutorial nederst på denne blog.

Dette emne er ikke beregnet til LuckyTemplates-rapportforbrugere eller tilfældige LuckyTemplates-udviklere, men snarere for dem, der er fortrolige med og er fortrolige med at redigere og oprette JSON-koder direkte.

For at implementere brugerdefinerede temaer skal du være fortrolig med syntaksen og strukturen af ​​JSON-filer og også udviklingsmiljøværktøjerne. Jeg vil bruge Visual Studio-kode til at udvikle JSON-temafiler.

Lad os tage et kig på de tilgængelige tilpasninger, der allerede er indbygget i LuckyTemplates desktop-applikation. For det første har vi brug for et lærred til at fremvise vores arbejde. Jeg har brugt LuckyTemplates praksisdatasæt, som er et simpelt salgsdatasæt, hvor visuals nemt kan konstrueres. En demonstrations-PBIX-fil er en enkelt rapportside, og tilpassede dimensioner på 1600 x 900 er blevet brugt til at give lidt mere plads end standardrapporten på 1280 x 720.

Indholdsfortegnelse

• Brug af standardtemaet
• En hurtig gennemgang af JSON Basics for Custom Theming
• Ændring af baggrunden for brugerdefinerede temaer
• Ændring af titeltekstbaggrund
• Tilføjelse af skygger til visuals
• Tilføjelse af titeltekst
• Andre ting at huske i brugerdefinerede temaer
• Konklusion

Brug af standardtemaet

Lad os se på vores standardtema her. Hvis vi søger efter temaer og anvender standardtemaet...

… vi kan se, at det bare bruger standardfarverne blå, orange og lilla.

Og hvis jeg vælger temaet Hvid tekst på mørk baggrund …

… dette er det tema, vi vil se.

En hurtig gennemgang af JSON Basics for Custom Theming

Dette er bestemt ikke en omfattende gennemgang af, hvordan man udvikler en JSON-fil til LuckyTemplates, men snarere et par hurtige kommentarer til JSON-filer.

JSON står for JavaScript Object Notation ; dette er et klart tekstformat til datafiler, der består af indlejrede objekter eller kodeblokke. Hver af disse har sin egen samling af navn-værdi-par.

Koloner bruges til at adskille navn-værdi-par. Seler bruges til at omgive en genstand. Listeelementer er adskilt med kommaer, og lister kan slettes. En liste kan også være en matrix, som i dette tilfælde er omgivet af firkantede parenteser.

En LuckyTemplates JSON-fil består normalt af tre hovedsektioner: navn , farver og billeder . Navneafsnittet er faktisk det eneste nødvendige afsnit, og som du kan se, er det her, vi starter vores undersøgelse i dag.

Lad os bare anvende denne temafil ved at søge efter temaer.

Vi går efter standardtemaet. Du vil se, at standardfarverne bruges.

Lad os gå til kodebloksektionen og kopiere sættet af alternative farver.

Vi kan indsætte det i vores JSON-temafil ved at tilføje et komma efter navneblokken og derefter indsætte koden.

Vi gemmer JSON-temafilen, går tilbage til LuckyTemplates og anvender scratch-temaet.

Nu kan vi se, at farverne har ændret sig.

Den visuelle sektion er langt den største, og det er her, vi laver resten af ​​vores arbejde. Du kan nemt ændre teksten, herunder skrifttype, familiestørrelse og farve.

Lad os gå over til vores notesblok for at kopiere kodeblokken til vores tekstklasser og skrifttyper sat til forskellige størrelser.

Så går vi over til Visual Studio Code, tilføjer en kolonne til adskillelse af koderne og indsætter derefter koden.

Endnu en gang gemmer vi vores temafil. Så går vi tilbage til LuckyTemplates og anvender temafilerne. Vi kan se, at alle teksterne nu er blevet blå.

En af de ting, vi nemt kan gøre, er at ændre tekstfarven. Lad os gå tilbage til JSON-filen igen, vælg den blå farve og erstatte den med rød.

Lad os gemme det igen, gå tilbage til LuckyTemplates og importere JSON-temafilen en gang til. Nu kan vi se, at alle teksterne er ændret til røde.

Ændring af baggrunden for brugerdefinerede temaer

Lad os nu se på sidens baggrund og indstille den til den næstmørkeste farve i vores palet. Vi går over til Notepad++, griber vores sidebaggrundskodeblok og kopierer den.

Og så går vi over til Visual Studio Code og indsætter koden der.

Gå derefter til LuckyTemplates og anvend igen scratch-temaet for at se den nye baggrund.

Ændring af titeltekstbaggrund

Lad os færdiggøre vores demo ved at ændre vores titeltekstbaggrund til den mørkeste temafarve og tekstfarven til hvid. Som du kan se, har jeg ikke fundet ud af den rigtige syntaks til at indstille tabel- og matrixstilen via JSON-temafilen. Så jeg brugte grænsefladen til at ændre stilen på begge billeder til ingen .

Lad os gå tilbage til Notepad++ for at kopiere JSON-kodeblokken til vores titelbaggrund.

Og så går vi over til Visual Studio Code for at indsætte koden der.

Igen vil vi gemme vores tema, gå tilbage til LuckyTemplates og anvende temaet en gang til.

Tilføjelse af skygger til visuals

Jeg har også et par små selvstændige demoer, der viser et par temamuligheder. Lad os nulstille vores tema tilbage til standardindstillingen. Hvis vi vil tilføje skygger til alle vores visuals, kan vi bruge syntaksen visualStyles og dropShadow.

Hvis vi går over til LuckyTemplates og anvender den temafil, vil du se, at alle vores billeder har skygger.

Tilføjelse af titeltekst

Hvis vi vil sikre, at alle vores visuals har titeltekst, kan vi tilføje noget pladsholdertiteltekst ved hjælp af visualStyles, titel, show og tekstsyntaks i Visual Studio Code.

Hvis vi går over til LuckyTemplates og anvender den temafil, vil vi bemærke, at kun én af vores billeder er ændret, fordi alle de andre allerede er ændret med titler.

Hvis vi skal gå til en ny side, oprette en ny tabel og hente de kanaler og mål, vi ønsker, har vi standard titeltekst.

En anden ting, vi kan gøre, er at påvirke den måde, nye billeder skaleres til deres beholder. Hvis vi nulstiller til standardtemaet og indsætter et billede, vil vi se, at det bevarer sit billedformat.

Hvis vi vil bruge en temafil til at indstille billedskaleringen, kan vi bruge syntaksen visualStyles, image, imageScaling og image ScalingType.

Hvis vi bladrer over til LuckyTemplates og tilføjer det tema, vil vi se, at billedformatet nu kan ændres for det eksisterende visuelle.

Og hvis vi tilføjer nye visuals, kan vi igen se, at skaleringen nu er indstillet til at passe.

Andre ting at huske i brugerdefinerede temaer

Indstillingen for sidebaggrundsgennemsigtighed i JSON-filen ser ikke ud til at blive taget i betragtning, så jeg brugte grænsefladen til at indstille sidebaggrundsgennemsigtighedsniveauet til 0, før demoen startede.

Indstillingerne for tabel- og matrixstil ser ikke ud til at blive taget i betragtning også. Så jeg brugte grænsefladen til at indstille tabel- og matrixstilen til ingen.

Rækkefølge ser ud til at være vigtig i JSON-temafiler, så hvis du opdager, at en bestemt indstilling ikke bliver taget i betragtning, kan du prøve at omarrangere indstillingen af ​​interesse højere eller tidligere i koden.

Eksisterende visuals reagerer muligvis ikke fuldt ud på temafiler, især hvis de allerede har haft nogen formatindstillinger anvendt.

Konklusion

Hvis du er en relativ nybegynder i JSON-kodning, især i LuckyTemplates, så tag venligst alle de eksempler, jeg har brugt, med et gran salt. Jeg forventer, at de mere erfarne og fortrolige med JSON-temakodning i LuckyTemplates vil producere meget bedre og mere læselig kode.

Til sidst ville jeg bare dele nogle af mine første erfaringer og fremvise et par af de tilpasninger, jeg har fundet i brugerdefinerede temaer. Der er et væld af indstillinger tilgængelige for LuckyTemplates JSON-tema, og de, der er villige til at investere tid og kræfter på at undersøge de tilgængelige onlineressourcer, kan iterativt udvikle nyttige temafiler.

Et godt udgangspunkt er egenskabsfanen i PowerBI.tips' avancerede temagenerator, hvor du kan bruge deres brugergrænseflade til at generere JSON-temafiler til alle eller specifikke visuelle typer. Forhåbentlig kan du tilføje tilpasset JSON-temakodning til din LuckyTemplates-værktøjskasse, og det kan både hjælpe med at standardisere dine rapporter og spare dig selv for noget arbejde i fremtiden.

Greg