Cell Styling

JavaScript
,
1

I am not even sure if this is possible in LEAF, however, we have the need to style table cells having no context of the data itself.

example:
At design time I create a base data-object with id, code, name. It is expected that a domain, or even a customer at runtime can later extend this bean definition and create new types to be used for views.

In our UI, by default we know the base props id, code, name will be styled as a hyperlink to open the detail of the instance the row represents. However, there are needs to make sure the cell itself has rendering rules post deployment. The customer may have a number field that is keyed in but they need to render it “RED” or “GREEN” based on its value compared to another field. I know we can do this at design time, but it would be nice to have (even if simple but prefer definable) that we could add this somewhere in configurations for grid views.

2

The product will have BI tools that allow for this post processing and dumping of DCE’s, but in our UI module, users have requested some visual indicators for looking at subsets of live data as well.

3

There is nothing baked in like this. If I am understanding the use case correctly you should be able to achieve what you want with a DataObject to act as table configuration and then create a custom cell renderer that renders based on that configuration.

For example say you have a DataObject of type TableConfiguration. You could add a set of strings property called coloredPropNames to track which properties need to be rendered “RED” or “GREEN”. You could then create a custom control to allow authorized users to add/remove columns to/from the set on the TableConfiguration. And then with the DataObjectTable component you can alter which renderer to use based on the set containing the propName.

let myTableConfig; // ... get table configuration from server

function columnDefHook(columns) {
  return columns.map(c => {
    const shouldBeColored = myTableConfig.coloredPropNames.includes(c.colId);
    return {
      ...c, 
      cellRendererFramework: shouldBeColored ? MyCustomRenderer : undefined
    }
  }
}

// ...

<DataObjectTable
    // other props
    columnDefHook={columnDefHook}
/>
4

I will pass this along, but that was a simple concept. But your answer tells me that we have finally hit the limitation of LEAF in what we are trying to create where we want to push as much configuration off the the end user. We have already considered pulling even more logic out of LEAF DataObject Services into third party apps for rules and workflow, we may revisit the UI now as well. I was shown demos of a BI that basically allowed the user (aka customer) to build out views and dashboards on either a Lake or a DW decoupled from the data services. I will investigate this path as well.

Thank you

5

Posting a summary of a solution we talked through for posterity.

FieldMetadata have a tagsCsv property that can be used to add arbitrary information about a FieldMetadata. This can be used to mark particular fields ( or in the case of table, columns ) to have certain meaning. This means you can render a particular render based on a value in on the FieldMetadata.tagsCsv