Reuse UI pages

C3 AI Platform allows you to build complex front-end applications by composing multiple packages.

Copy link to this section

Reuse existing UI routes

By declaring a dependency on an existing application package, your application inherits all UI routes and UI component definitions declared in the package tree.

You can leverage this to quickly build new applications by composing functionality from existing packages.

As an example, let's say you have two packages already available to you:

• The alerts package which implements an alerting dashboard.
• The jobs package, which implements both a dashboard and list view for jobs.

Once you create a new package reliability package and declare a dependency on the two existing packages:

{
    "name": "reliability",
    "dependencies": {
        "alerts": "1.0.0",
        "jobs": "1.0.0"
    }
}

All the routes available in the dependent packages automatically become available as part of reliability.

Copy link to this section

Override existing UI routes

Depending on the use case you might not want to use the route from an existing package as is. You might want to change it.

C3 AI Platform allows you to override routes, by re-declaring the route in a package that sits higher on the package tree.

In this example, the jobs package defines the /dashboard route by creating the jobs/metadata/UiSdlRoute/{routes}.csv file:

targetModuleName,targetPageName,name,urlPath
Jobs,Dashboard,/dashboard,/dashboard

To override the implementation inherited from the jobs package, you can re-declare the dashboard route in reliability/metadata/UiSdlRoute/{routes}.csv:

targetModuleName,targetPageName,name,urlPath
Reliability,Dashboard,/dashboard,/dashboard

Now that the route is re-declared and mapped to Reliability.Dashboard, you just need to implement a UI component definition with that ID.

At runtime, when the user navigates in their browser to {environment}/{app}/dashboard, they are presented with the UI component with ID Reliability.Dashboard.