Reuse UI component instances

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

Copy link to this section

Reuse existing UI component instances

By declaring a dependency on an existing application package, your application inherits all the UI component instances 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 UI component instances available in the dependent packages automatically become available as part of reliability.

Copy link to this section

Override existing UI component instances

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

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

In this example, the jobs package defines the Jobs.Dashboard UI component instance either through JSON or TSX. Then, the Reliability package overrides that implementation, by redeclaring a component instance with the same ID.

At runtime, when the component Jobs.Dashboard is instantiated in the UI, the definition available in the reliability package is used since that package is higher up in the package tree, thus taking precedence.