Formater et Flex Card

Konfigurer udseendet og funktionaliteten af et Flex Card ved at formatere individuelle elementer, felter i elementer og hele tilstande. Konfigurer baggrunde, tekst og kanter, juster dimensioner og elementinterval, anvend klasser og indbyggede typografier, gør dit element responsivt mm.

1. Fra Appstarter skal du finde og vælge Flexcards.
2. Udvid et Flex Card, og vælg en version.
3. Hvis der er behov for det, kan du deaktivere Flex Card til redigering af Flex Card.
4. På fanen Typografi skal du vælge en tilpasset typografi, som du gemte, eller konfigurere typografiindstillinger efter behov.
5. Hvis du vil gemme dine indstillinger til genbrug, skal du under Tilpasset typografi klikke på og derefter vælge Gem som.

• Føj betingede typografier til et FlexCard-element
  Vis de mest relevante oplysninger for dine brugere ved betinget at anvende typografier på et FlexCard-element. Rediger typografifunktioner, f.eks. tekstfarve, baggrundsbillede og responsivitet, når en betingelse, der er baseret på værdien af et datafelt, opfyldes. Tilføj f.eks. en rød kant omkring et faktureringsflexkort, når faktureringsstatussen er forfalden.
• Konfigurer Flexcard-elementdimensioner
  Angiv dimensionerne på FlexCard i henhold til dit firmas eller institutionens typografi. Angiv højdeegenskaberne for FlexCard-elementer ved brug af CSS-værdier. Aktiver responsivitet, så bredden justeres dynamisk til sidens synlige område. F.eks. kan du udvide bredden af felterne for en kontakts for- og efternavne til den fulde sidebredde på mindre enheder. Og for at få en bedre brugeroplevelse kan du begrænse bredden til 50 % på større enheder som bærbare og stationære computere.
• Opret tilpassede CSS-klasser for et Flex Card
  Udvid forudkonfigurerede typografiindstillinger ved at oprette tilpassede CSS-klasser i en kodeeditor, når du opsætter dit FlexCard. Omnistudio gemmer CSS-klasserne i en Salesforce-vedhæftning, hver gang du gemmer FlexCard. Når du har aktiveret FlexCard, føjer Omnistudio en CSS-fil til den genererede Lightning webkomponentpakke. CSS-filen er tilgængelig for andre FlexCard-elementer eller for understøttede felter i elementer.
• Anvend tilpasset CSS på et Flex Card
  Anvend CSS-klasser fra typografiark som det globale Salesforce Lightning Design System (SLDS) og Newport. Eller anvend klasser, som du oprettede, da du opbyggede dit FlexCard.
• Overskriv globale SLDS eller Newport-typografier
  Anvend din egen branding ved at overskrive et FlexCard' globale SLDS. Hvis f.eks. dit Flex Card kræver et specifikt udseende på tværs af flere komponenter, skal du oprette tilpassede SLDS og indlæse dem på dit Flex Card som en statisk ressource. For mindre typografiændringer på elementer anbefaler vi, at du bruger indstillingerne fra fanen Typografi.

Konfigurer Flexcard-elementdimensioner

Angiv dimensionerne på FlexCard i henhold til dit firmas eller institutionens typografi. Angiv højdeegenskaberne for FlexCard-elementer ved brug af CSS-værdier. Aktiver responsivitet, så bredden justeres dynamisk til sidens synlige område. F.eks. kan du udvide bredden af felterne for en kontakts for- og efternavne til den fulde sidebredde på mindre enheder. Og for at få en bedre brugeroplevelse kan du begrænse bredden til 50 % på større enheder som bærbare og stationære computere.

1. Vælg et element på FlexCard.
2. På fanen Typografi skal du for at angive en fast standardbredde i forhold til visningsområdet justere skyderen eller trække kanten af elementet på lærredet.

   Et elements bredde er en til 12 dele af et 12-kolonners gitter. Hvis du f.eks. vælger 6, optager elementet 50 % af den tilgængelige vandrette plads.

   

   Bemærk

   Du kan kun justere et statselements dimensioner, når det er på et underordnet kort, og ved at bruge skyderen.

3. Hvis der er behov for det, skal du aktivere Svar og derefter angive bredden for hver visningsport.

   Når du gør elementet responsivt, justerer Omnistudio elementets bredde til det mindste visningsafslutningspunkt til brug på mobilenheder som den nye standard.

4. Hvis der er behov for det, kan du teste elementets responsivitet ved at vælge forskellige enheder fra pluklisten viewport på lærredet.
   

   

   Tip

   Identificer nemt responsive elementer ved at holde musen hen over eller vælge et element. Responsive elementer viser ud for deres navne på lærredet.

Responsivt emne og CaseId-feltelementer

For en given konto ønsker du at vise feltelementerne Emne og CaseId ved siden af hinanden i de mellemstore og store visningsporte og stablet i de små og mindre visningsporte.

Indstil emneelementets dimensioner til disse indstillinger:

• Responsiv: Til

• Store og mellemstore skyderer: 10

• Små og mindre skyderier: 12

Indstil CaseId-elementets dimensioner til disse indstillinger:

• Responsiv: Til

• Store og mellemstore skyderer: 2

• Små og mindre skyderier: 12

Opret tilpassede CSS-klasser for et Flex Card

Udvid forudkonfigurerede typografiindstillinger ved at oprette tilpassede CSS-klasser i en kodeeditor, når du opsætter dit FlexCard. Omnistudio gemmer CSS-klasserne i en Salesforce-vedhæftning, hver gang du gemmer FlexCard. Når du har aktiveret FlexCard, føjer Omnistudio en CSS-fil til den genererede Lightning webkomponentpakke. CSS-filen er tilgængelig for andre FlexCard-elementer eller for understøttede felter i elementer.

Pas på

Brug tilpasset CSS omhyggeligt, og undgå at målrette mod DOM-elementer i komponenter, du ikke ejer. Ændringer af en komponents interne struktur kan afbryde dit CSS. Salesforce kan opdatere komponentimplementeringer når som helst, og Salesforce Support kan ikke hjælpe med tilpassede CSS-problemer.

1. Klik på i FlexCard-sidehovedet, og vælg derefter Tilføj tilpasset CSS.
2. Angiv dine tilpassede klasser.
3. Hvis du vil indlæse disse typografier som et typografiark i sidehovedet, skal du aktivere Indlæs som global CSS.

   Hvis du ikke gør det, indlæser Omnistudio kun typografien i sidehovedet på FlexCard.

4. Gem dine ændringer.

Anvend tilpasset CSS på et Flex Card

Anvend CSS-klasser fra typografiark som det globale Salesforce Lightning Design System (SLDS) og Newport. Eller anvend klasser, som du oprettede, da du opbyggede dit FlexCard.

1. Vælg et element på FlexCard.
2. På fanen Typografi under Tilpasset CSS skal du angive CSS-klassenavne efter behov.
   

   Bemærk

   Indbyggede CSS-typografier tilsidesætter beholder- og elementklasser.

3. Hvis du vil anvende en tilpasset klasse på et element, skal du i panelet Egenskaber angive en CSS-klasse som en yderligere eller ekstra klasse.

   Omnistudio understøtter tilpassede klasser for ikoner, datatabeller, billeder og omskiftere.

Grupperet datatabelelement med alternative baggrundsfarver

Du har en datatabel, der viser kontosager grupperet efter sagstype.

• Hvis du vil skifte baggrundsfarver for brødtekstrækker og angive en anden baggrundsfarve for gruppesidehovedet:
  1. Opret disse tilpassede CSS-klasser:

     • alt-table-rows for det daterbare element

     • alt-bg-group-wrapper for gruppepost

     .alt-table-rows .tableRow:nth-child(even) {
         background:#cccccc;
     }
     
     .alt-table-rows .tableRow:nth-child(odd) {
         background:#ebebeb;
     }
     
     .alt-table-rows .alt-bg-group-wrapper.tableRow {
         background-color: #000000;
         color: #ffffff;
     }
     
     .branded-header {
         font-variant: small-caps;
         border-top: 1px dotted #8d1818;
         border-bottom: 1 px dotted #8d1818;
         padding: 1rem;
         color: #999999;
     }
     

  2. På fanen Typografi skal du skrive alt-table-rows i Tilpasset klasse.
  3. I Egenskaber skal du angive alt-bg-group-wrapper som den ekstra eller ekstra klasse.

Overskriv globale SLDS eller Newport-typografier

Anvend din egen branding ved at overskrive et FlexCard' globale SLDS. Hvis f.eks. dit Flex Card kræver et specifikt udseende på tværs af flere komponenter, skal du oprette tilpassede SLDS og indlæse dem på dit Flex Card som en statisk ressource. For mindre typografiændringer på elementer anbefaler vi, at du bruger indstillingerne fra fanen Typografi.

Vigtigt

Indlæsning af tilpassede Newport-typografier direkte på FlexCard overskriver tilpassede globale Newport-typografier.

1. Få globale typografier til dit FlexCard-tema:
   • SLDS: Se Lightning Design System Downloads.
   • Newport: Se Anvend global branding på Omniscripts.
2. Tilpas typografier efter behov.

   Se Lightning-apps og -komponenter.

3. Upload de tilpassede typografier fra en zippet fil som en statisk ressource.

   Se Oprettelse af en statisk ressource.

4. Fra Opsætning skal du udvide afsnittet Formateringsindstillinger og angive navnet på den statiske ressource.
   Se Konfigurer FlexCard-indstillinger.