Using extended data

This page explains how to leverage data injected into presentation data objects using extended data rule to customize information shown in our UIComponents.

Customize tree node item icon

In order to add icon for TreeNodeItem based on ECInstance we need to assign node icon with Presentation Rules. This is achievable using ExtendedDataRule:

...
{
  "ruleType": "ExtendedData",
  "condition": "ThisNode.IsOfClass(\"SomeClass\", \"SomeSchema\")",
  "items": {
    "iconName": "\"my-custom-icon\""
  }
}
...

Now Node created using Presentation Rules will have extendedData property with icon name. In order to map this icon name onto TreeNodeItem we need to provide customizeTreeNodeItem function to PresentationTreeDataProvider:

const dataProvider = new PresentationTreeDataProvider({
  ...providerProps,
  customizeTreeNodeItem: (treeNodeItem, node) => {
    treeNodeItem.icon = node.extendedData?.iconName;
  },
});

Customize tree node item checkbox

In order to add checkbox for TreeNodeItem based on ECInstance property value we need to define which property should be used with Presentation Rules. This is achievable using ExtendedDataRule:

...
{
  "ruleType": "ExtendedData",
  "condition": "ThisNode.IsOfClass(\"SomeClass\", \"SomeSchema\")",
  "items": {
    "showCheckbox": "TRUE",
    "isChecked": "this.SomeProperty",
    "disableCheckbox": "ThisNode.IsOfClass(\"SomeDerivedClass\", \"SomeSchema\")"
  }
}
...

Now Node created using Presentation Rules will have extendedData property set with checkbox data. To map this data onto TreeNodeItem we need to provide customizeTreeNodeItem function to PresentationTreeDataProvider:

const dataProvider = new PresentationTreeDataProvider({
  ...providerProps,
  customizeTreeNodeItem: (treeNodeItem, node) => {
    treeNodeItem.isCheckboxVisible = node.extendedData?.showCheckbox;
    treeNodeItem.checkBoxState = node.extendedData?.isChecked ? CheckBoxState.On : CheckBoxState.Off;
    treeNodeItem.isCheckboxDisabled = node.extendedData?.disableCheckbox;
  },
});

Customize tree node item style

In order to change TreeNodeItem style based on ECInstance we need to define style with Presentation Rules. This is achievable using ExtendedDataRule:

...
{
  "ruleType": "ExtendedData",
  "condition": "ThisNode.IsOfClass(\"SomeClass\", \"SomeSchema\")",
  "items": {
    "isBold": "this.SomeProperty",
    "isItalic": "TRUE",
    "color": "iif(ThisNode.SomeOtherProperty, 128, 0)"
  }
}
...

Now Node created using Presentation Rules will have extendedData property set with style data. To map this data onto TreeNodeItem we need to provide customizeTreeNodeItem function to PresentationTreeDataProvider:

const dataProvider = new PresentationTreeDataProvider({
  ...providerProps,
  customizeTreeNodeItem: (treeNodeItem, node) => {
    treeNodeItem.style = {
      isBold: node.extendedData?.isBold,
      isItalic: node.extendedData?.isItalic,
      colorOverrides: {
        color: node.extendedData?.color,
      },
    };
  },
});

Last Updated: 18 May, 2022