Utforma ett flexkort

Konfigurera utseendet och känslan för ett Flexkort genom att styla enskilda element, fält inuti element och hela lägen. Konfigurera bakgrunder, text och kanter, justera dimensioner och elementavstånd, tillämpa klasser och infogade format, gör ditt element responsivt, med mera.

1. Sök fram och öppna Flexkort i Appstartaren.
2. Utöka ett Flexkort och välj en version.
3. Inaktivera vid behov Flexkort för redigering av Flexkort.
4. På fliken Format, välj ett eget format som du har sparat eller konfigurera formatinställningar efter behov.
5. För att spara dina inställningar för återanvändning, under Egen stil, klicka på och välj sedan Spara som.

• Lägg till villkorliga stilar i ett flexkortelement
  Visa den mest relevanta informationen för dina användare genom att villkorligt tillämpa format på ett Flexcard-element. Ändra formatfunktioner som textfärg, bakgrundsbild och respons när ett villkor baserat på värdet i ett datafält uppfylls. Lägg till exempel till en röd kant runt ett faktureringsflexkort när räkningsstatusen har passerats.
• Konfigurera dimensioner för flexkortelement
  Ange dimensionerna för Flexkortet enligt ditt företags eller institutions stil. Ange höjdegenskaperna för Flexcard-element genom att använda CSS-värden. Slå på respons så att bredden justeras dynamiskt till sidans synliga område. Utöka till exempel bredden på fälten för en kontakts för- och efternamn till den fullständiga sidbredden på mindre enheter. Och för bättre användarupplevelse, begränsa bredden till 50% på större enheter som laptops och stationära datorer.
• Skapa egna CSS-klasser för ett flexkort
  Utöka förkonfigurerade formatalternativ genom att skapa egna CSS-klasser i en kodredigerare när du konfigurerar ditt Flexcard. Omnistudio sparar CSS-klasserna i en Salesforce-bilaga varje gång du sparar Flexcard. Efter att du har aktiverat Flexkort lägger Omnistudio till en CSS-fil i det Lightning som skapas. CSS-filen är tillgänglig för andra Flexcard-element eller för fält inuti element som stöds.
• Tillämpa egen CSS för ett flexkort
  Tillämpa CSS-klasser från formatmallar som det globala Salesforce Lightning Design System (SLDS) och Newport. Eller tillämpa klasser som du skapar när du bygger ditt Flexkort.
• Skriv över globala SLDS eller Newport-stilar
  Tillämpa din egen varumärkning genom att skriva över ett Flexcards globala SLDS stilar. Till exempel, om ditt Flexkort kräver ett specifikt utseende över flera komponenter, skapa egna SLDS stilar och läs in dem till ditt Flexkort som en statisk resurs. För mindre formatändringar på element rekommenderar vi att du använder inställningarna från fliken Format.

Konfigurera dimensioner för flexkortelement

Ange dimensionerna för Flexkortet enligt ditt företags eller institutions stil. Ange höjdegenskaperna för Flexcard-element genom att använda CSS-värden. Slå på respons så att bredden justeras dynamiskt till sidans synliga område. Utöka till exempel bredden på fälten för en kontakts för- och efternamn till den fullständiga sidbredden på mindre enheter. Och för bättre användarupplevelse, begränsa bredden till 50% på större enheter som laptops och stationära datorer.

1. Välj ett element på Flexkort.
2. På fliken Format, för att ställa in en fast standardbredd i förhållande till vyporten, justera reglaget eller dra i elementets kant på arbetsytan.

   Ett elements bredd är en till 12 delar av ett rutnät med 12 kolumner. Om du till exempel väljer 6 tar elementet upp 50 % av det tillgängliga horisontella utrymmet.

   

   Anteckning

   Det går endast att justera ett lägeselements dimensioner när det är på ett underordnat kort och genom att använda reglaget.

3. Slå på Responsiv om det behövs och ange sedan bredden för varje vyport.

   När du gör elementet responsivt justerar Omnistudio elementets bredd till den minsta brytpunkten för vyporten för användning på mobila enheter som den nya standarden.

4. Om det behövs, testa elementets respons genom att välja olika enheter från kombinationsrutan Viewport på arbetsytan.
   

   

   Tips

   Identifiera enkelt responsiva element genom att hålla markören över eller välja ett element. Responsiva element visar bredvid sina namn på arbetsytan.

Responsivt ämne och CaseId-fältelement

För ett givet konto vill du visa fältelementen Subject och CaseId bredvid varandra i de medelstora och stora vyportarna och staplade i de små och mindre vyportarna.

Ange dimensionerna för elementet Ämne till dessa inställningar:

• Responsiv: På

• Stora och medelstora reglage: 10

• Små och mindre reglage: 12

Ange CaseId-elementets dimensioner till dessa inställningar:

• Responsiv: På

• Stora och medelstora reglage: 2

• Små och mindre reglage: 12

Skapa egna CSS-klasser för ett flexkort

Utöka förkonfigurerade formatalternativ genom att skapa egna CSS-klasser i en kodredigerare när du konfigurerar ditt Flexcard. Omnistudio sparar CSS-klasserna i en Salesforce-bilaga varje gång du sparar Flexcard. Efter att du har aktiverat Flexkort lägger Omnistudio till en CSS-fil i det Lightning som skapas. CSS-filen är tillgänglig för andra Flexcard-element eller för fält inuti element som stöds.

Varning

Använd egen CSS med försiktighet och undvik att rikta in dig på DOM-element i komponenter du inte äger. Ändringar av en komponents interna struktur kan bryta din CSS. Salesforce kan när som helst uppdatera komponentimplementeringar och Salesforces support kan inte hjälpa till med egna CSS-problem.

1. I sidhuvudet för Flexkort, klicka på och välj sedan Lägg till egen CSS.
2. Ange dina egna klasser.
3. För att läsa in dessa format som en formatmall i sidans sidhuvud, slå på Läs in som global CSS.

   Om du inte gör det läser Omnistudio endast in formatet i Flexcards sidhuvud.

4. Spara dina ändringar.

Tillämpa egen CSS för ett flexkort

Tillämpa CSS-klasser från formatmallar som det globala Salesforce Lightning Design System (SLDS) och Newport. Eller tillämpa klasser som du skapar när du bygger ditt Flexkort.

1. Välj ett element på Flexkort.
2. På fliken Stil, under Egen CSS, ange CSS-klassnamn efter behov.
   

   Anteckning

   Infogade CSS-stilar åsidosätter behållar- och elementklasser.

3. För att tillämpa en egen klass för ett element, ange en CSS-klass som en ytterligare eller extra klass i panelen Egenskaper.

   Omnistudio har stöd för egna klasser för ikoner, datatabeller, bilder och växlar.

Grupperat datatabellelement med alternativa bakgrundsfärger

Du har en datatabell som visar kontokundcase grupperade efter kundcasetyp.

• Alternativa bakgrundsfärger för brödtextrader och ange en annan bakgrundsfärg för grupprubriken:
  1. Skapa dessa egna CSS-klasser:

     • alt-table-rows för datatabellelementet

     • alt-bg-group-wrapper för grupprubriken

     .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å fliken Format, i Egen klass, ange alt-table-rows.
  3. I Egenskaper, ange alt-bg-group-wrapper som tilläggs- eller tilläggsklass.

Skriv över globala SLDS eller Newport-stilar

Tillämpa din egen varumärkning genom att skriva över ett Flexcards globala SLDS stilar. Till exempel, om ditt Flexkort kräver ett specifikt utseende över flera komponenter, skapa egna SLDS stilar och läs in dem till ditt Flexkort som en statisk resurs. För mindre formatändringar på element rekommenderar vi att du använder inställningarna från fliken Format.

Viktig

Att läsa in egna Newport-stilar direkt på Flexcard skriver över egna globala Newport-stilar.

1. Få globala stilar för ditt Flexcard-tema:
   • SLDS: Se Lightning Design Systemnedladdningar.
   • Newport: Se Tillämpa global varumärkning för Omniscripts.
2. Anpassa stilar efter behov.

   Se Lightnings appar och komponenter.

3. Ladda upp de egna stilarna från en zip-fil som en statisk resurs.

   Se Skapa en statisk resurs.

4. I Inställningar, utöka sektionen Stilalternativ och ange namnet på den statiska resursen.
   Se Konfigurera Flexkortinställningar.