Tutorial - Create Dynamic Page and a Redirect Link

Search…

This tutorial guides you on how to add a redirect link in your SDLDemoMachine table.
Step 1 - Create the dynamic route
Inside the page.csv , add the routes for the dynamic page. 
In our id and urlPath, we add a dynamic route by appending {{machineId}}, the SDLDemoMachine's id. The targetPageName must refer to the file name of the desired page. 
1
targetModuleName,targetPageName,id,urlPath
2
exampleUI,Home,/home,/home
3
exampleUI,SDLDemoMachineDetail,/sdldemoMachine/{{machineId}},/sdldemoMachine/{{machineId}}
Copied!
Step 2 - Create redirect link
For more information on links, run c3ShowType(UiSdlLinkTemplate) in the static console. 
Now, we can turn the field name in our table we previously added to the home page into a redirect link. The desired route is <vanityurl>/sdldemoMachine/<{{machineId}}>. 
Go to the table and add the redirectLink field for the name fieldname. The redirectLink field is at the same level as label, fieldName, inputElement.
1
"redirectLink": {
2
     "targetPage": "SDLDemoMachineDetail",
3
     "href": "/sdldemoMachine/{{machineId}}",
4
     "internal": true,
5
     "pageVariable": "machineId",
6
     "pageVariableFilterField": "id"
7
}
Copied!
It is possible to create multi-variable routes and external links as well. 
Additional ways to create different routes -  Multi-variable in routes
It is possible to have multiple variables in your routes. In order to create a route with multiple variables, it is important to remove pageVariable and pageVariableFilterField. 
1
"redirectLink": {
2
  "internal": true,
3
  "href": "/SDLDemoMachineDetail/{{SDLDemoMachine.id}}/machine-performance/{{SDLDemoMachine.performance}}"
4
}
Copied!
For both single and multi-variable route, the href must be the same as the urlPath found in UiSdlRoute. 
Additional creation of routes - External link 
It is also possible to refer to an external link. The following code block shows an example of an external link referring to a Wikipedia link. 
1
"redirectLink": {
2
  "href": "https://en.wikipedia.org/w/index.php?search={{id}}",
3
  "internal": false,
4
  "pageVariable": "id",
5
  "pageVariableFilterField": "id"
6
}
Copied!
Step 3 - Create the dynamic page
Create a file named uiDemoExample.SDLDemoMachineDetail.json in order to create your dynamic page. If you placed a different targetPage, create a page file with the following syntax: <targetModuleName>.<targetPageName>.json. 
This is the code block for the layout of the SDLDemoMachineDetail page. You must also create the files that are referred to in the layout. 
exampleUI.SDLDemoMachine.json
1
{
2
    "type": "UiSdlConnected<UiSdlLayoutNavigation>",
3
    "pageTitle": {
4
        "id": "Specific SDLDemo Machine Page" 
5
    },
6
    "component": {
7
        "navigation": {
8
            "id": "exampleUI.ApplicationNavMenu"
9
        },
10
        "content": {
11
            "id": "exampleUI.sdldemocontent"
12
        }
13
    }
14
} 
Copied!
View the Output
Provision and bundle your changes.
Once provision and bundle have been completed, see your changes on UI IDE.
At this point, the column name should be a redirect link and redirect you to the dynamic page. Although the dynamic page is blank, the URL should change when you click on the redirect link with an id appending to the end of your URL. 

Tutorial - Create your mini app - Previous

Tutorial - Add a Table to the Home page

Next - Tutorial - Create your mini app

Tutorial - Add a pre-filled form component

Last modified 2mo ago

Export as PDF

Copy link

Contents

Step 1 - Create the dynamic route

Step 2 - Create redirect link

Step 3 - Create the dynamic page

View the Output