Dynamic Navigation Between Portals (Cross Sell)

  • Updated

Dynamic Navigation Between Portals (Cross Sell)

Status

Release Available

Status

Framework Name

3.9CurrentTBC

General

During a cross-sell from Solution A to Solution B, there should be separate Portals corresponding to each Solution and a user can switch between Portals as needed. This also allows data to pass between Portals when a user switches to another Portal.

In addition, "Solution A" should be aware of "Solution B" portal data and pass on the required values, so that Solution B can use the data passed either to populate the fields on it or perform any logic based on it.

Currently, the Portal flow contains a navigation structure, stages, and actors. With this release, the framework code supports storing multiple Navigation structures and their corresponding styles without overlapping each of them.

Note:

  • As a good naming convention, always prefix all the actor names with a key specific to your project and this is a prerequisite for cross-portal navigation to work without any issues. For example, SMB_PersonalInfo/TO_PersonalInfo.

  • The "Save" functionality of the portal builder will save the config details of the current portal only.

    Sowhile integrating the portals make sure the change done for the current portal is saved beforemoving to next portal.

Switching between Portals

To support the navigation between portals/Navigation structures, enhanced an existing config named "next". Before this enhancement "next" is of string data type, now it accepts an Object in the below format:

Note:
  • "stageName" & "data" are optional.
  • If "stageName" is not mentioned then the default stage in the next Navigation structure will be loaded
  • If "data" is not mentioned, the next navigation structure has no data available for it to use from the current navigation structure.
"next": {
                "navName": "<Next Navigation Structure Name>",
                "stageName": "<stage Name within the next Navigation structure>",
                "data" : {
                    "field1" : "value1",
                    "field2" : "value2",
                    ...
                }

            }

Examples

Switching between portals with many stages and passing some data to the next portal

Code JSON
"next": {
                "navName": "buttons_reorder_2",
                "stageName": "home",
                "data": {
                    "global1": "$global.attr(nav1Global1);",
                    "newAccountInfo": "$state(nav1HomeStageNewActor);"                }
            }

Switching between portals with many stages

Example 1
"handler": {
            "next": {
                "navName": "buttons_reorder",
                "stageName": "Home"            }
        }
Example 2
"handler": {
            "next": {
                "navName": "buttons_reorder",
                "stageName": "Home"            }
        }

Switching between the stages within the same portal using the existing configuration

Code JSON
"handler": {
            "next": "newStage"        }

Passing the data from one portal to another If there are many actors within a portal

If there are many actors within a portal, then the user has to pass all the other actor's objects within the respective actor handler in order to retrieve all other actor's data in the next portal. In the code JSON mentioned below, the "newAccountInfo" and "newAccountInfo1" are used as objects in the current actor.

Code JSON
"handler": {
            "next": {
                "data": {
                    "newAccountInfo": "$state(nav1HomeStageNewActor);",
                    "newAccountInfo1": "$state(CurrencyCS);",
                    "global1": "$global.attr(nav1Global1);"                },
                "stageName": "newStage",
                "navName": "buttons_reorder_2"            }
        }

Passing the data from one portal to another for the record actions

For record actions, to pass the data from one portal to another, the user needs to specify under record action handler with "$this;" attribute.

Code JSON
 "handler": {
            "next": {
                "data": {
                    "newAccountInfo10": "$this;",
                    "newAccountInfo": "$state(nav1HomeStageNewActor);",
                    "newAccountInfo1": "$state(CurrencyCS);",
                    "global1": "$global.attr(nav1Global1);",
                    "newAccountInfo4": "$state(SaveSample22);"                },
                "navName": "CL_Portal_Title"            }
        }

Using data passed from one Portal to another

When switching from one Portal to another, if some data is passed on then it can be used either to populate the fields on it or perform any logic based on it.

For a simple data access

Simple data access
$interNav.attr(<key>);

For a nested data access

Nested data access
$interNav.attr(<key>).attr(<key>);

Examples

Print the data as part of the Title, textBefore, or textAfter

Access the field data using $interNav.attr(<fieldName>) syntax.

To pre-populate a panel component(Nav2_account_actor) with some data from the previous Navigation Structure

Create an init Actor with an automatic button with the handler configured as below:

Note:

After the configuration is all done, we can hide this init actor using CSS.

Code JSON
"handler": {
            "assignments": [
                {
                    "field": "$state(Nav2_account_actor);",
                    "value": "$interNav.attr(newAccountInfo);"                }
            ]
        }

To pre-populate a detail-view component(My_Account)(which queries data from the backend) with some data from the previous Navigation Structure

Add "loaded" general Handler with the field level assignments as below:

Code JSON
"assignments": [
                {
                    "field": "$state(My_Account).attr(AccountNumber);",
                    "value": "$interNav.attr(newAccountInfo).attr(AccountNumber);"                },
                {
                    "field": "$state(My_Account).attr(AnnualRevenue);",
                    "value": "$interNav.attr(newAccountInfo).attr(AnnualRevenue);"                },
                {
                    "field": "$state(My_Account).attr(Name);",
                    "value": "$interNav.attr(newAccountInfo).attr(Name);"                },
                {
                    "field": "$state(My_Account).attr(AccountSource);",
                    "value": "$interNav.attr(newAccountInfo).attr(AccountSource);"                }
            ]

To retrieve the data for a Panel

For a panel to retrieve the data user has to create a init actor and fetch the value. In the code JSON mentioned below the Nav2_account_actor is an actor name that fetches the data from newAccountInfo (an object from the previous portal).

Code JSON
 "handler": {
            "assignments": [
                {
                    "field": "$state(Nav2_account_actor);",
                    "value": "$interNav.attr(newAccountInfo);"                }
            ]
           
        }

To fetch or use the data from the previous portal for a record action

For record actions, to fetch or use the data from the previous portal, the user needs to use the below configuration:

Code JSON
 "handler": {
            "assignments": [
                {
                    "field": "$this.attr(CheckboxAsSwitch__c);",
                    "value": "$interNav.attr(newAccountInfo11).attr(CheckboxAsSwitch__c);"                },
                {
                    "field": "$this.attr(CheckboxField__c);",
                    "value": "$interNav.attr(newAccountInfo11).attr(CheckboxField__c);"                }
                      
              
            ]
        }

In This Article