Add a UI Component to Your Page

Add a UI component to a page by defining a layout, configuring a data grid, and integrating the component into the page structure.

Copy link to this section

Define a page layout

Create a UI layout component in {package}/ui/c3/meta:

examplePackage
├── examplePackage.c3pkg.json
└── ui
    └── c3
        └── meta
            └── examplePackage.PageLayout.json

The name of the file needs to follow the convention {packageName}.{componentId}.json.

Add the following configuration to the {packageName}.{componentId}.json file:

/* examplePackage/ui/c3/meta/examplePackage.PageLayout.json */
{
  "type": "UiSdlConnected<UiSdlGridLayout>",
  "component": {
    "gridStyle": "FLUID",
    "gutter": 8,
    "display": "VERTICAL",
    "children": []
  }
}

Learn more about UiSdlGridLayout.

• type field specifies which UI component to render. This example renders a grid layout component, indicated by UiSdlGridLayout. The component is connected to the client-side state management store, indicated by UiSdlConnected<>.
• gridStyle defines whether the grid adjusts dynamically.
• gutter sets spacing between elements.
• display determines whether elements align horizontally or vertically.
• children indicates the components that should be rendered as a part of this layout, and we will discuss this more as part of the next section.

Copy link to this section

Add a data grid

To create a new component instance, add a new file in the {package}/ui/c3/meta directory:

examplePackage
├── examplePackage.c3pkg.json
└── ui
    └── c3
        └── meta
            ├──  examplePackage.PageLayout.json
            └──  examplePackage.TurbineGrid.json

Define examplePackage.TurbineGrid.json:

/* examplePackage/ui/c3/meta/examplePackage.TurbineGrid.json */
{
  "type": "UiSdlConnected<UiSdlDataGrid>",
  "component": {
    "dataSpec": {
      "dataType": "WindTurbine",
      "columnFields": [
        { "fieldName": "id", "label": "ID" },
        { "fieldName": "manufacturer", "label": "Manufacturer" },
        { "fieldName": "location", "label": "Location" }
      ]
    }
  }
}

Learn more about UiSdlDataGrid.

• type specifies which UI component to render. This example renders a grid (table) component. The component is connected to the client-side state management store.
• dataType references the backend entity type.
• columnFields specifies the fields displayed in the table.

Copy link to this section

Add the component to the layout

Modify examplePackage.PageLayout.json:

/* examplePackage/ui/c3/meta/examplePackage.PageLayout.json */
{
  "type": "UiSdlConnected<UiSdlGridLayout>",
  "component": {
    "gridStyle": "FLUID",
    "gutter": 8,
    "display": "VERTICAL",
    "children": ["examplePackage.TurbineGrid"]
  }
}

For more layout details, see Grid Layout Overview.