diff --git a/.storybook/static/StatusBadge_Configuration_1.jpg b/.storybook/static/StatusBadge_Configuration_1.jpg new file mode 100644 index 0000000..1421328 Binary files /dev/null and b/.storybook/static/StatusBadge_Configuration_1.jpg differ diff --git a/.storybook/static/StatusBadge_Configuration_2.PNG b/.storybook/static/StatusBadge_Configuration_2.PNG new file mode 100644 index 0000000..240a9ac Binary files /dev/null and b/.storybook/static/StatusBadge_Configuration_2.PNG differ diff --git a/.storybook/static/StatusBadge_Configuration_3.png b/.storybook/static/StatusBadge_Configuration_3.png new file mode 100644 index 0000000..5355a78 Binary files /dev/null and b/.storybook/static/StatusBadge_Configuration_3.png differ diff --git a/src/components/Pega_Extensions_StatusBadge/Docs.mdx b/src/components/Pega_Extensions_StatusBadge/Docs.mdx index 57ea3e6..feca0a9 100644 --- a/src/components/Pega_Extensions_StatusBadge/Docs.mdx +++ b/src/components/Pega_Extensions_StatusBadge/Docs.mdx @@ -20,3 +20,16 @@ The value of field will be matched again each variant of the regular expression. Constellation has a special handling for the field ID 'pyStatusWork' - to use this component, select a different field (like pyLabel) and set the input property to 'pyStatusWork' instead. ![Example of using the Status Badget component](StatusBadge_Configuration.png) + +If you are using this component in the table, you will need to manually author the view [using the following procedure](https://support.pega.com/discussion/how-add-custom-dx-component-listview-table-constellation-application). This should be done with caution since manually editing the view could introduce upgrade issues. +Make sure that the property correctly renders as text first in your table and then edit the Json - Do not use @L for the statuses and do not forget to set the input property. + +Here is an example of the JSON snippet + +![Example of using the Status Badget component](StatusBadge_Configuration_1.jpg) + +![Example of using the Status Badget component](StatusBadge_Configuration_2.png) + +in order to render the following table: + +![Example of using the Status Badget component](StatusBadge_Configuration_3.png)