Loading
Feature Degradation | Agentforce Voice Read More
Table of Contents
Filter by (0)Add
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

            Search all of Salesforce Help
            Search all of Salesforce Help
            Use the Newport Design System

            You are here:

            1. Salesforce Help
            2. Docs
            3. Omnistudio

            Use the Newport Design System

            The Newport Design System allows you to customize the appearance and behavior of Omniscript elements. Newport includes Storybook.js, a browser-based preview tool, that enables you to see your design changes in action.

            Before You Begin

            If you're unfamiliar with using command-line interfaces, refer to the Command Line 101 guide.

            System requirements:

            Install the Newport Design System:

            1. Clone the vlocityinc/newport-design-system repository from GitHub using a command-line interface. To see what components are provided by Newport, check the contents of the UI/components directory.
            2. Change your current directory to newport-design-system: 
              cd newport-design-system
            3. To work with the correct version of the Salesforce package, switch to the corresponding branch: 
              git checkout release_version
            4. Install the dependencies: 
              npm install
            5. Launch the Storybook.js preview: 
              npm start
            6. Use the Storybook preview to review the available components and configurations.
            7. Add customizations to your theme. See Customize Your Omniscripts Using the Newport Design System.
            8. Apply your customizations either to individual Omniscripts, or globally across your organization. See Deploy and Apply Global Styling Changes using the Newport Design System.

            Customize Your Omniscripts Using the Newport Design System

            To customize the appearance of your Omniscripts, edit the CSS and HTML files in the UI subdirectory of the directory where you cloned Newport.

            Themes are stored in the design-tokens folder. To create a new theme for your Omniscripts:

            1. Copy the vlocity-newport-skin folder to a new folder.
            2. Edit the files in the new folder as required.
            3. To change the color scheme, modify the color.yml files. Colors are defined using hex RGB codes or tokens that resolve to hex values, which are defined in the aliases/color.yml file.
              For example, to change the color of a specific component, such as the input element’s orange underline:
              1. Edit design-tokens/vlocity-newport-skin/background-color.yml.
              2. Update COLOR_BORDER_INPUT_ACTIVE to a different color token defined in /aliases/color.yml. When you change colors, the Newport components are recompiled, so there is a slight delay before your changes are reflected in the Previewer. To verify your change, view the input component using the Previewer.

                For optimal rendering on all platforms, set the control width to 6. Smaller widths may not render correctly on every platform.

            4. To preview the effect of Newport Design System styles on an Omniscript:
              1. Edit the Script Configuration and paste the path to the top-level CSS file (by default, xxx.css) into the CUSTOM HTML TEMPLATES field.
                The Newport Previewer allows you to see how components render across desktops, tablets, and smartphones.
              2. To preview an element or utility, choose it from the lists on the left pane. To view the code behind it, click </>.
              3. To navigate the component hierarchy, use the restriction tree, which shows element definitions from base to derived implementations.
              4. To view a specific definition, click the corresponding node in the restriction tree.

            Deploy and Apply Global Styling Changes using the Newport Design System

            Apply modifications to the Newport Design System by adding a static resource that overrides the Newport theme wherever it's available. After it's uploaded, the changes are applied to all Omniscripts that are on the Newport Design System.

            1. Download the Newport Design System. See Apply Global Branding to Omniscripts.
            2. Create a distribution folder containing your changes by issuing this command: npm run-script dist
            3. In versions before Vlocity Spring '19, change (cd) to the dist folder and zip its contents. (Do not zip the top-level dist folder: cd into it and zip its contents.)
            4. In Salesforce, upload the zip file as a static resource.
            5. In your Salesforce org, go to Setup and, in the Quick Find box, enter Custom Settings.
            6. Find UISettings, click Manage > New.
            7. Configure these settings:
              • Name: Enter newportZipUrl for the changes to be applied.
              • Key: Enter a custom name.
              • Value: Enter the relative URL for the static resource containing your custom styles. To get this URL, go to Static Resource (see 4 in the Before You Begin section), hover over the View File link, right-click and copy the URL. Enter the relative URL after the domain name, removing the query string (question mark) at the end, leaving just the relative path. For example, the bold text would be copied in this URL: https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport?
            8. To enable Newport or Newport Storybook theme on an Omniscript, open an Omniscript and select Newport or Newport Storybook from the dropdown on the designer canvas or Preview page.

            After selecting the Newport theme in the designer canvas, the Omniscript automatically appears in the Newport theme when previewed. Switching to Lightning in the preview page displays the Omniscript in the Lightning theme in the designer canvas.

            Note
            Note

            When creating a new version of an Omniscript originally built with the Newport theme, the new version opens in the designer canvas with the Lightning theme selected by default.

             
            Loading
            Salesforce Help | Article