Loading
Använd Newport Design System

Du är här:

  1. Salesforce-hjälp
  2. Dokument
  3. Omni-Channel

Använd Newport Design System

Newport Design System låter dig anpassa utseendet och beteendet för Omniscript-element. Newport innehåller Storybook.js, ett webbläsarbaserat förhandsgranskningsverktyg, som låter dig se dina designändringar i användning.

Innan du börjar

Om du inte är bekant med att använda kommandoradsgränssnitt, se Kommandorad 101-guiden.

Systemkrav:

Installera Newport Design System:

  1. Klona arkivet vlocityinc/newport-design-system från GitHub med ett kommandoradsgränssnitt. För att se vilka komponenter som tillhandahålls av Newport, kontrollera innehållet i katalogen UI/components.
  2. Ändra din nuvarande katalog till newport-design-system: 
    cd newport-design-system
  3. För att arbeta med rätt version av Salesforce-paketet, växla till motsvarande gren: 
    git checkout release_version
  4. Installera beroendena: 
    npm install
  5. Starta förhandsvisningen av Storybook.js: 
    npm start
  6. Använd förhandsvisningen av berättelseboken för att granska de tillgängliga komponenterna och konfigurationerna.
  7. Lägg till anpassningar till ditt tema. Se Anpassa dina Omniscripts med Newport Design System.
  8. Tillämpa dina anpassningar antingen på enskilda Omniscripts eller globalt i hela din organisation. Se Distribuera och tillämpa globala stylingändringar med Newport Design System.

Anpassa dina Omniscripts med Newport Design System

För att anpassa utseendet på dina Omniscripts, redigera CSS- och HTML-filerna i användargränssnittets underkatalog i den katalog där du klonade Newport.

Teman lagras i mappen design-tokens. Skapa ett nytt tema för dina Omniscripts:

  1. Kopiera mappen vlocity-newport-skin till en ny mapp.
  2. Redigera filerna i den nya mappen efter behov.
  3. För att ändra färgschemat, ändra filerna color.yml. Färger definieras med hex-RGB-koder eller tokens som löses till hexvärden, som definieras i filen aliases/color.yml.
    Till exempel, för att ändra färgen på en specifik komponent, som indataelementets orange understrykning:
    1. Edit design-tokens/vlocity-newport-skin/background-color.yml.
    2. Uppdatera COLOR_BORDER_INPUT_ACTIVE till en annan färgtoken som definieras i /aliases/color.yml. När du ändrar färger kompileras Newport-komponenterna igen, så det finns en liten fördröjning innan dina ändringar återspeglas i förhandsgranskningen. För att verifiera din ändring, se indatakomponenten med hjälp av förhandsgranskningen.

      För optimal återgivning på alla plattformar, sätt kontrollbredden till 6. Mindre bredder kanske inte återges korrekt på alla plattformar.

  4. För att förhandsgranska effekten av Newport Design System-stilar på ett Omniscript:
    1. Redigera skriptkonfigurationen och klistra in sökvägen till den översta CSS-filen (som standard xxx.css) i fältet EGNA HTML-MALLAR.
      Med Newport-förhandsgranskningen kan du se hur komponenter återges på stationära datorer, surfplattor och smartphones.
    2. För att förhandsgranska ett element eller verktyg, välj det från listorna i den vänstra rutan. För att se koden bakom den, klicka på </>.
    3. För att navigera i komponenthierarkin, använd begränsningsträdet, som visar elementdefinitioner från grundläggande till deriverade implementeringar.
    4. För att se en specifik definition, klicka på motsvarande nod i begränsningsträdet.

Distribuera och tillämpa globala stiländringar med Newport Design System

Tillämpa ändringar av Newport Design System genom att lägga till en statisk resurs som åsidosätter Newport-temat där det är tillgängligt. När det har laddats upp tillämpas ändringarna på alla Omniscripts som finns i Newport Design System.

  1. Ladda ner Newport Design System. Se Tillämpa global varumärkning för Omniscripts.
  2. Skapa en distributionsmapp som innehåller dina ändringar genom att utfärda detta kommando: npm run-script dist
  3. I versioner innan Vlocity Spring '19, ändra (cd) till dist-mappen och paketera dess innehåll. (Packa inte den översta distmappen: cd i den och komprimera dess innehåll.)
  4. I Salesforce, ladda upp zip-filen som en statisk resurs.
  5. I din Salesforce-organisation, gå till Inställningar och skriv Egna inställningar i rutan Snabbsökning.
  6. Hitta UISettings, klicka på Hantera &gt; Ny .
  7. Konfigurera dessa inställningar:
    • Namn (Namn): Ange newportZipUrl för ändringarna som ska tillämpas.
    • Nyckel : Ange ett eget namn.
    • Värde: Ange den relativa URL:en för den statiska resursen som innehåller dina egna stilar. För att hämta denna URL, gå till Statisk resurs (se 4 i sektionen Innan du börjar), håll markören över länken Visa fil, högerklicka och kopiera URL:en. Ange den relativa URL:en efter domännamnet och ta bort frågesträngen (frågetecknet) i slutet, så att endast den relativa sökvägen kvarstår. Till exempel skulle texten i fetstil kopieras i denna URL: https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport?
  8. För att aktivera temat Newport eller Newport Storybook i ett Omniscript, öppna ett Omniscript och välj Newport eller Newport Storybook från rullmenyn på designerarbetsytan eller förhandsgranskningssidan.

När du har valt temat Newport på designerarbetsytan visas Omniscript automatiskt i temat Newport när det förhandsvisas. Att växla till Lightning på förhandsgranskningssidan visar Omniscript i temat Lightning på designerarbetsytan.

Anteckning
Anteckning

När du skapar en ny version av ett Omniscript som ursprungligen byggts med temat Newport öppnas den nya versionen på designerarbetsytan med temat Lightning valt som standard.

 
Laddar
Salesforce Help | Article