C3 AI Documentation Home

Add a UI Page to Your Application

This topic explains how to:

  • Extend an existing application package.
  • Create a new route to define application URLs.
  • Configure a UI component to fetch and display data in a table.

Prerequisites

Ensure your local machine meets the setup requirements.

Update dependencies

Before adding UI pages, update the application package configuration file (<packageName>.c3pkg.json) with the necessary dependencies:

  • uiComponentLibraryReact: Enables front-end development.

Refer to the topic on package versioning to learn more about dependencies.

Confirm that the back-end Types and data exist. Follow the steps in Add Data to Your Application.

Create a new page

A page consists of:

  • Routes: Define the application's URLs and determine which components load for each URL.
  • UI components: Define the application's appearance and behavior. Components fetch data from the back end and display it to users. Components can nest inside other components to build complex layouts.

A page includes:

  • A unique URL.
  • The component to display when the user navigates to the URL.
  • Optionally, the roles allowed to navigate to that URL. Unauthorized users are redirected to a "not authorized" page.

To create a new page:

  1. Define a new route that maps a URL to a component.
  2. Configure a UI component instance. The next tutorial explains how to define a UiSdlGridLayout.

Create a new route

A UI component must have a route before users can access it. Define a route to map a URL to a component.

Create the metadata/UiSdlRoute directory if it does not exist:

Text
examplePackage
├── examplePackage.c3pkg.json
├── metadata
│   └── UiSdlRoute
│       └── UiSdlRoute.csv
└── ui/c3/meta

Add the following routes to the UiSdlRoute.csv file:

CSV
targetModuleName,targetPageName,name,urlPath
examplePackage,PageLayout,/,/
examplePackage,PageLayout,/home,/home

At this point, two routes have been created: / and /home. Both routes load the same examplePackage.PageLayout component. Users can navigate to either https://{domain}/{env}/{app} or https://{domain}/{env}/{app}/home and see the same page layout.

To continue this tutorial by defining examplePackage.PageLayout and adding components to the page, see Add a UI Component to Your Page.

Was this page helpful?