Loading
Newport Design System -järjestelmän käyttäminen

Olet tässä:

  1. Salesforce-ohje
  2. Asiakirja
  3. Omnistudio

Newport Design System -järjestelmän käyttäminen

Newport Design System sallii sinun mukauttaa Omniscript-elementtien ulkoasua ja toimintatapaa. Newport sisältää Storybook.js-tiedoston, joka on selainpohjainen esikatselutyökalu, jonka avulla voit nähdä suunnittelusi muutokset toiminnassa.

Ennen aloittamista

Jos et ole tottunut käyttämään komentorivikäyttöliittymiä, katso lisätietoja Komentosarja 101 -oppaasta.

Järjestelmävaatimukset:

Newport Design Systemin asentaminen:

  1. Kloonaa vlocityinc/newport-design-system -säiliö GitHubista käyttämällä komentorivikäyttöliittymää. Tarkasta käyttöliittymän/komponenttien hakemiston sisältö nähdäksesi, mitä komponentteja Newport tarjoaa.
  2. Muuta nykyiseksi hakemistoksi newport-design-system: 
    cd newport-design-system
  3. Siirry vastaavaan haaraan käyttääksesi Salesforce-paketin oikeaa versiota: 
    git checkout release_version
  4. Riippuvuuksien asentaminen: 
    npm install
  5. Käynnistä Storybook.js-esikatselu: 
    npm start
  6. Käytä tarinan esikatselua tarkastaaksesi käytettävissä olevat komponentit ja kokoonpanot.
  7. Lisää teemaasi mukautuksia. Lisätietoja on kohdassa Omniscriptien mukauttaminen Newport Design Systemin avulla.
  8. Sovella mukautuksiasi joko yksittäisille Omniscripteille tai globaalisti koko organisaatiollesi. Lisätietoja on kohdassa Globaalien tyylimuutosten käyttöönotto ja soveltaminen käyttämällä Newport Design System -järjestelmää.

Omniscriptien mukauttaminen Newport Design -järjestelmällä

Jos haluat mukauttaa Omniscriptien ulkoasua, muokkaa CSS- ja HTML-tiedostoja sen hakemiston käyttöliittymän alahakemistosta, jossa kloonaasit Newportin.

Teemat tallennetaan design-tokens-kansioon. Uuden teeman luominen Omniscripteillesi:

  1. Kopioi vlocity-newport-skin-kansio uuteen kansioon.
  2. Muokkaa uuden kansion tiedostoja tarvittaessa.
  3. Jos haluat muuttaa väripalettia, muokkaa color.yml-tiedostoja. Värit määritetään käyttämällä heksadesimaalinen RGB-koodeja tai valtuuksia, jotka ratkaisevat heksadesimaalisiin arvoihin, jotka on määritetty tiedostossa aliases/color.yml.
    Jos haluat esimerkiksi muuttaa tietyn komponentin väriä, kuten elementin oranssia alaviivaa:
    1. Edit design-tokens/vlocity-newport-skin/background-color.yml.
    2. Päivitä COLOR_BORDER_INPUT_ACTIVE toiseen väritunnukseen, joka on määritetty kohdassa /aliases/color.yml. Kun muutat värejä, Newport-komponentit kerätään uudelleen, joten muutoksesi näytetään hieman myöhässä esikatselussa. Tarkasta muutoksesi tarkastelemalla input-komponenttia käyttämällä esikatselua.

      Jos haluat suorittaa optimaalisen renderöinnin kaikilla sovellusalustoilla, määritä ohjaavan leveydeksi 6. Pienemmät leveydet eivät välttämättä renderöidy oikein kaikilla sovellusalustoilla.

  4. Newport Design System -tyylien vaikutuksen esikatseleminen Omniscriptissa:
    1. Muokkaa komentosarjakokoonpanoa ja liitä ylätason CSS-tiedoston polku (oletusarvoisesti xxx.css) Mukautetut HTML-mallit -kenttään.
      Newport-esikatseluohjelma sallii sinun nähdä, miten komponentit renderöityvät tietokoneilla, tableteilla ja älypuhelimilla.
    2. Esikatsele elementtiä tai apukohdetta valitsemalla se vasemmanpuoleisesta ikkunasta. Jos haluat nähdä sen takana olevan koodin, napsauta </>.
    3. Käytä komponenttihierarkiassa rajoitushakemistoa, joka näyttää elementin määritelmät perustoteutuksista johdettuihin toteutuksiin.
    4. Jos haluat nähdä tietyn määritelmän, napsauta sitä vastaavaa noodia rajoitushakemistosta.

Globaalien tyylimuutosten käyttöönotto ja soveltaminen Newport Design Systemin avulla

Tee muutoksia Newport Design System -järjestelmään lisäämällä staattinen resurssi, joka korvaa Newport-teeman aina, kun se on käytettävissä. Kun se on ladattu palvelimelle, muutoksia sovelletaan kaikkiin Newport Design System -järjestelmässä oleviin Omniscripteihin.

  1. Lataa Newport Design System. Lisätietoja on kohdassa Globaalin brändäyksen soveltaminen Omniscripteihin.
  2. Luo jakelukansion, joka sisältää muutoksesi, antamalla tämä komento: npm run-script dist
  3. Jos versio on voimassa ennen Vlocity Spring '19 -julkaisua, siirry (cd) dist-kansioon ja pakkaa sen sisältö pakettiin. (Älä pakkaa ylätason dist-kansiota: cd siihen ja pakkaa sen sisältö zip-tiedostoon).
  4. Lataa zip-tiedosto palvelimelle Salesforcessa staattisena resurssina.
  5. Avaa Salesforce-organisaatiosi Määritykset-valikko ja kirjoita Pikahaku-kenttään Mukautetut asetukset.
  6. Etsi UISettings ja napsauta Hallinta &gt; Uusi .
  7. Määritä nämä asetukset:
    • Nimi: Syötä käytettävien muutosten newportZipUrl.
    • Avain : Kirjoita mukautettu nimi.
    • Arvo: Syötä suhteellinen URL-osoite staattiselle resurssille, joka sisältää mukautetut tyylisi. Jos haluat nähdä tämän URL-osoitteen, avaa Staattinen resurssi (katso Ennen aloittamista -osion 4 kohta), siirrä kursorisi Näytä tiedosto -linkin ylle, napsauta hiiren oikealla painikkeella ja kopioi URL-osoite. Syötä suhteellinen URL toimialuenimen jälkeen, poistamalla kyselymerkkijono (kysymysmerkki) lopusta, jättäen vain suhteellisen polun. Esimerkiksi lihavoitu teksti kopioidaan tähän URL-osoitteeseen: https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport?
  8. Jos haluat ottaa Omniscriptissa käyttöön Newport- tai Newport-tarinan teeman, avaa Omniscript ja valitse suunnitteluohjelman esitysalueen tai Esikatselu-sivun alasvetovalikosta Newport tai Newport Storybook.

Kun olet valinnut Newport-teeman suunnitteluohjelman esitysalueelta, Omniscript näytetään automaattisesti Newport-teemassa, kun sitä esikatsellaan. Lightning siirtyminen esikatselusivulla näyttää Omniscriptin suunnitteluohjelman esitysalueen Lightning.

Huomautus
Huomautus

Kun luot uuden Omniscript-version, joka on luotu alunperin Newport-teemalla, uusi versio avautuu suunnitteluohjelman esitysalueelle ja Lightning on valittuna oletusarvoisesti.

 
Ladataan
Salesforce Help | Article