Tutorial - Create Dynamic Page and a Redirect Link
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!
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.
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.