Retrieve and display a single entity instance

Filters refine data retrieval by ensuring that only relevant information is fetched and displayed. The dataSpec attribute in UiSdlDefinitionList uses the UiSdlDefinitionListDataSpec type and supports:

• entityId: Identifies the specific entity instance to retrieve.
• fields: Lists the fields to display from the selected entity.

Copy link to this section

DataSpec configuration example

The UiSdlDefinitionList component displays field values from one record. It uses UiSdlConnected to retrieve and render the selected entity instance.

The example below retrieves the WindTurbine entity with entityId set to 1 and displays two fields: manufacturer and location.

/* examplePackage/ui/c3/meta/examplePackage.DefinitionList.json */
{
  "type": "UiSdlConnected<UiSdlDefinitionList>",
  "component": {
    "dataSpec": {
      "dataType": "WindTurbine",
      "entityId": "1",
      "fields": [
        {
          "label": "Manufacturer",
          "fieldName": "manufacturer",
          "labelIcon": "info-circle",
          "subInfo": {
            "type": "UiSdlDefinitionListSubInfoFieldSetting",
            "fieldName": "manufacturerDate",
            "placeholder": "--"
          }
        },
        {
          "label": "Location",
          "fieldName": "location",
          "labelIcon": "map",
          "subInfo": {
            "type": "UiSdlDefinitionListSubInfoFieldSetting",
            "fieldName": "manufacturerDate",
            "placeholder": "--"
          }
        }
      ]
    },
    "orientation": "HORIZONTAL",
    "divider": true
  }
}

This configuration retrieves one entity instance and renders selected fields using labels, icons, and optional sub-information. Each field is defined explicitly in the fields array.

Copy link to this section

Filtering behavior

Filtering in UiSdlDefinitionListDataSpec selects a single record using entityId. The backend fetches only the specified entity and includes only the requested fields in the response.

Copy link to this section

Row-Level selection

Row-level selection uses entityId to identify the specific record. The backend retrieves exactly one record.

Copy link to this section

Column-Level selection

Column-level selection uses the fields array to define which attributes to include in the response. Each entry in fields specifies a label, fieldName, optional labelIcon, and optional subInfo settings.

• Reduces payload size by limiting the response to required fields.
• Improves clarity by customizing field labels and presentation.
• Supports placeholder values for empty fields.

Copy link to this section

Data binding and display

The JSON configuration binds the UI component to the backend API. When the component loads, the system issues a request for the specified entityId. The backend returns only the fields listed in the configuration.

The component displays values using the defined labels and icons. The layout uses the orientation attribute to organize items horizontally or vertically. The divider setting adds visual separation between items.

Use this approach to present a summary or detail view for one record. This setup works well for detail panels, read-only views, or compact layouts.

For other display needs, consider using table components for multiple records or chart components for metrics and time series.

A future article will cover data flow architecture in detail, including how components interact with backend data services.