Set Up Visual Navigator

Visual Navigator, once configured, enables you to show a grid of tiles on a page to facilitate navigation within and outside of the Digital Customer Service application.

When you drop the component on a page in the DCS application, you must configure the component before anything appears in the UI. You must determine the number of grid tiles, the image and text that displays in each tile along with the action that's taken when each tile is clicked.

Find the Visual Navigator component in the list of Digital Customer Service components in the Components palette. Drag and drop the component from that location onto the page where you would like the Visual Navigator to appear. When you drop the component on the page, a NavigatorLoadAction action chain is created at the page level. You will need to modify this action to configure the items the navigator displays. A number suffix is added to the name if more than one navigator is added to a given page.

Specify Items for an Array

To configure the navigator items you must first specify the items that you want the navigator to show in an array. You can specify this either by an action chain variable or using a separate JSON file.

Specify Items for the Action Chain Variable

Now you specify the items as an action chain variable. You edit the NavigatorLoadAction and set the default value of the action chain variable items to be an array.

From the page flow that you dropped the Visual Navigator component on, select the Actions icon.
From the list of Actions, select NavigatorLoadAction.
Click the Action Chains - Variables tab.
Select the items array from the list of variables
In the Default Value field, enter your code.

See the following example as reference.

[
    {
        "title": "Happy Holidays",
        "description": "Wishing all our customers a happy holiday season!",
        "type": "info",
        "icon": "fa fa-5x fa-glass-cheers"
    },
    {
        "title": "Setup your Nimbus 3000",
        "description": "How do I configure my Nimbus 3000?",
        "type": "knowledge-article",
        "id": "1003002",
        "icon": "fa fa-5x fa-question"
    },
    {
        "title": "My Service Requests",
        "type": "service-request",
        "operation": "list",
        "icon": "fa fa-5x fa-ticket-alt"
    },
    {
        "type": "product",
        "id": "CRMITEM-AS54888-00182744",
        "icon": "fa fa-5x fa-desktop"
    },
    {
        "type": "my-profile",
        "title": "My Profile",
        "description": "View your account information.",
        "icon": "fa fa-5x fa-user"
    },
    {
        "type": "url",
        "title": "Google",
        "icon": "fa fa-5x fa-search",
        "params": {
            "url": "https://www.google.com"
        }
    }
]

Work With the JSON File

Create a JSON file on your local file system using the same format as the previous example. From the web application navigator in Visual Builder upload the JSON file in a folder under the application's resource folder. Do this by either dragging and dropping the file or by right-clicking the folder you want to upload the JSON file to and selecting Import from the menu.

If you need to edit the NavigatorLoadAction use these steps:

Add a Call Module Function action as the first action in the chain.
Set the Call Module Function to call the application level loadJSON function.
Set the path input parameter of the function to be the relative path of the JSON file under the resources directory.
Add an Assign Variables action after the newly added Call Module Function action.
Assign the result of the call module function to flow level items variable.

Navigation Items

The supported types and operations are defined in the NavigateAction on the shell page. By default, the following types and operations are supported but these can be extended by adding additional cases to the shell page's NavigateAction. If no operation is specified it defaults to details.

The supported types and operations are listed in the following table:

Description	Type	Operation	ID	Parameters	Additional Information
Static information	info
Navigate to the Contact Us Page	contact-us
Navigate to the Home page.	homepage
Visit a knowledge article	knowledge-article		Knowledge article identifier. The kmContentId URL parameter when viewing the article in DCS.
Navigate to the user's profile page	my-profile
Navigate to the product page	product		Item number of product		The title of the navigation item will be the product's name loaded from Fusion Service.
Product Group	product-group		ProductGroupId of the product group		Title of the navigation item will be the product group's name loaded from Fusion Service.
Category	category		CategoryId of the category		Title of the navigation item will be the category's name loaded from Fusion Service.
Navigate to the service request create page.	service-request	create
Navigate to the service request list page.	service-request	list
Navigate to the work order list page	work-order	list
Open a URL in a new tab	url			`{ "url": "https://www.samplewebpage.com" }`

Icons and Images

Items can have either an icon, such as a Font Awesome icon, or an image.

To apply an icon set the icon property of the item and specify the style classes required as its value, for example, fa fa-5x fa-user.

To use an image set the imageUrl property to the image's URL. Just a reminder, image names are case sensitive. Here's an example:

"imageUrl": "[[ $application.path + 'resources/images/service-request/SR0000038250.png' ]]"

Translations

To specify a key in the application resource bundle set the title or description of the item to the key prefixed with an exclamation mark, for example, !bundle_key.

Here's an example:

{
        "type": "my-profile",
        "title": "!homepage_visual_navigator_myProfile_title",
        "icon": "fas fa-4x fa-address-card odcs-home-visual-navigator-card-icon"
    }