Passing in dynamic values into your component configuration

The C3 AI Platform allows users to iterate and quickly build UI through .json component configurations. This enables developers to compose UI components and build rich applications without having to write any code.

However, there are cases where users need to pass dynamic values to their components. For example, a user may want to set the title of a modal to contain the current user's name. In order to correctly set the page title, we need to retrieve the information from the Redux state.

Copy link to this section

Derived Props

Derived props allow users to specify how to set a dynamic value for a component's props. To better understand what props are, please refer to: https://react.dev/learn/passing-props-to-a-component. In order to find what props your component uses, refer to the fields in the .c3typ definition associated with the component.

In the example below, you can use derivedProps to dynamically determine the value for the header.text prop on the modal. It will retrieve the user.name field from the SDL.DefaultSite component and pass that value into the header.text prop. When the component is rendered, the title will be set to the current user's name.

{
  "type": "UiSdlConnected<UiSdlModal>",
  "derivedProps": {
    "header": {
      "text": {
        "type": "UiSdlComponentStateParam",
        "id": "SDL.DefaultSite",
        "path": "user.name"
      }
    }
  },
  "component": {
    "size": "SMALL",
    "children": [
      {
        "id": "SDLDemo.UserInfo"
      }
    ]
  }
}

Below is an example of how to use derivedProps with UiSdlMultiDynamicValueParam. You would use this when you need to dynamically set the value for multiple fields on a prop. Here we can set both the title and the closeIcon fields on the UiSdlSidePanel header field.

{
  "type" : "UiSdlConnected<UiSdlSidePanel>",
  "derivedProps" : {
    "header" : {
      "type" : "UiSdlMultiDynamicValueParam",
      "params" : {
        "title" : {
          "type": "UiSdlComponentStateParam",
          "id": "SDL.DefaultSite",
          "path": "user.firstName"
        },
        "closeIcon" : {
          "type": "UiSdlDefinedValueParam",
          "value": "times"
        }
      }
    }
  },
  "component" : {
    "alignment" : "RIGHT",
    "position" : "PUSH",
    "open" : true,
    "closeBehavior" : "HIDE",
    "sections" : [ {
      "id" : "SDLDemo.MainContent"
    } ]
  }
}

Copy link to this section

Limitations

Derived props support inputs of UiSdlDynamicValueSpecParam and UiSdlMultiDynamicValueParam. UiSdlDynamicValueSpecParam should be used if you want to dynamically set the value of one property on an object. UiSdlMultiDynamicValueParam should be used if you want to dynamically specify multiple properties of an object.

The derived prop only changes the prop's value within the context of the component. The original state value of the prop in Redux state will stay the same regardless of how it was modified by the derived prop.

Additionally, if a component triggers an action to change the value of a derived prop, that change will not be dynamically reflected.

Copy link to this section

Learn more

UiSdlUseDerivedProps UiSdlDynamicValueSpecParam UiSdlMultiDynamicValueParam