Declare routes with parameters

To display different information while using the same layout and components, applications can embed variables, known as page parameters, into the URL or route. Shopping websites often use this approach to display different products with a consistent format. This tutorial explains how to add these variables to routes and use them in individual components.

Copy link to this section

Add a parameter to a route

Wrap a variable name with double curly braces {{variable}} and insert it into the path. Define these routes in the {package}/metadata/UiSdlRoute/UiSdlRoute.csv file:

targetModuleName,targetPageName,name,urlPath
examplePackage,PageLayout,turbines-{{turbineId}},turbines-{{turbineId}}
examplePackage,PageLayout,turbines/{{turbineId}},turbines/{{turbineId}}

Both routes refer to a page about turbines that specify a turbineId. The application replaces {{turbineId}} with any value and assumes that application logic will handle the differences.

A single route can include multiple parameters. If any required parameters remain undefined, the page redirects to a 404 Not Found page. In the example above, navigating to turbines alone triggers a redirection to 404, since turbines is not a defined urlPath.

Copy link to this section

Use a page parameter

Components can use UiSdlDynamicValueSpecs to set field values dynamically. A UiSdlDynamicValueSpecParam allows retrieval of dynamic values, including page parameters, through a UiSdlPageParam.

A common use case involves using the page parameter to determine which entity to query for data. The example below retrieves a single WindTurbine using the turbineId parameter for a form:

/* examplePackage/ui/c3/meta/examplePackage.EditTurbineForm.json */
{
  "type": "UiSdlConnected<UiSdlForm>",
  "component": {
    /* other fields for the form */
    "dataSpec": {
      "dataType": "WindTurbine",
      "actionName": "fetch",
      "contextVars": {
        "turbineId": {
          "type": "UiSdlPageParam",
          "path": "turbineId"
        }
      },
      "actionArgs": {
        "filter": "id == ${turbineId}"
      }

      /* configuration for the rest of the dataSpec */
    }
  }
}

This approach ensures that the application dynamically retrieves and displays the correct data based on the route parameters.