Loading
Prepare for Email to Become the Default Login ExperienceRead More
US/Canada Toll-Free Callers Experiencing Silence After Agentforce Voice GreetingRead More
Deploy Card Template Changes with the Newport Design System (Managed Package)

You are here:

  1. Salesforce Help
  2. Docs
  3. Omnistudio for Managed Packages

Deploy Card Template Changes with the Newport Design System (Managed Package)

For the managed package runtime, the Newport Design System allows you to apply custom changes to the Newport templates that can then be applied to any Card using a Newport Design System template.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Cards using the Newport Design System are available for download in the Vlocity Process Library. To view an example of Cards using the Newport Design System, see Vlocity Digital Policyholder Self-Service.

Beginning with Spring '19, you can apply your customizations to the Newport templates by adding a Static Resource that overrides the Newport templates wherever they are present.

Before You Begin

  1. Edit the Newport Design System styles as needed. See Apply Global Branding to Vlocity Cards (Managed Package).

  2. Confirm that your Card's layout template and card templates support Newport.

  3. Create a distribution folder containing your changes by issuing the following command: npm run-script dist. The command creates a zip file in the /dist directory.

  4. In versions before Spring '19, navigate to (cd to) the dist folder and zip its contents. (Don’t zip the top-level dist folder: cd into it and zip its content).

  5. In your org, upload the zip file as a static resource. See Defining Static Resources.

  1. In your Salesforce org, go to Setup and, in the Quick Find box, enter Custom Settings.
  2. Find UISettings, clickManage, click New and configure the following settings:

    • Name: You must name this newportZipUrl for the changes to be applied.

    • Key: Enter any name.

    • Value: The relative URL for the static resource that contains your custom styles. To obtain the relative URL, go to the 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 question mark at the end. For example, the bold text would be copied in this URL: https://MyDomainName--c.vf.force.com/resource/16679825000/vloc_customNewport?

  3. To preview Card layouts that use the Newport Design System, in the Card designer:

    • For Angular Cards: Click Preview and add the following query parameter to the URL: vlocitytheme=newport. For example, https://vloc-oui-designer-dev.na90.com/apex/ConsoleCards?vlocitytheme=newport&layout=Grid&layoutId=a1a1K00000f25qe&previewMode=Universal.

    • For LWC Cards: In the Layout pane, click Enable Newport when LWC is enabled, and then click Preview.

    Important
    Important

    Your LWC Card layout template and card templates must support Newport.

 
Loading
Salesforce Help | Article