Different Row Actions in Heterogeneous Overview

Engines Overview Engine
1

Hello everyone,
we have a heterogeneous overview with two subtype document models and would like to have different row actions depending on the document model, but since the overview model only references the supertype, I can only define generic row actions that are applied to each row. Is there a way to achieve different row actions depending on the subtype, and if so, how?

2

Hi @konstantin-rugged-stone,

I have only technical solutions in mind for usage with full a12 frontend using the a12 client package, but maybe these will help in your case.

Dependent if you only need a dedicated behavior for your row action or if your need a dedicated button you can either just adapt the row action handler of your (customized) overview engine or you have to hook into the row action rendering to prevent rendering of not necessary buttons.

dedicated behavior for your row action

  1. create a custom overview engine for example by using the ViewViews.OverviewEngineView of client-core
  2. create a custom handler for eventHandlers={{onRowButtonClick: (params) => {/*Custom Handling*/}}}. In params you have access to the documentId which is in fact the docRef (Document Reference in a format of DocumentModel/DocumentId like stated in here (Link))

dedicated button
To filter and/or change buttons by row you can hook into the rendering by utilizing the componentMap property of the overview engine

  1. create a custom overview engine for example by using the ViewViews.OverviewEngineView of client-core
  2. create a custom componentMap that will adapt the creation of RowActionGroup
<ViewViews.OverviewEngineView
  {...props}
  componentMap={{
    ...DefaultComponentMap,
    RowActionGroup: rowActionProps => {
      // HINT: here you also have access to the whole OverviewEngine context if necessary
      // const context = useOverviewEngineContext((context) => context);

      // Filter out some row actions
      const filteredRowActions = rowActionProps.rowActionGroupModel?.actions?.filter((rab: Button) => {
        // filter for example by button with event `event_delete` and current model to not get a  delete action for that model
        return !(rab.event === "event_delete" && rowActionProps.row.modelId === "YOUR_DESIRED_MODEL_NAME");
      })

      // Update the props
      const newProps: React.PropsWithChildren<RowActionGroup.Props> = {
        ...rowActionProps,
        rowActionGroupModel: {
          ...rowActionProps.rowActionGroupModel,
          ...(filteredRowActions ? {actions: filteredRowActions} : undefined)
        }
      }
      return <DefaultComponentMap.RowActionGroup {...newProps} />
    }
  }}
/>
3

Hi @konstantin-rugged-stone

Beside the option to modify row action via the ComponentMap that @markus-agile-fog suggested above. OverviewEngine also offers ability to configure the visibility for each row action via RowActionState API, this can be passed into like this:

<ViewViews.OverviewEngineView
    {...props}
    rowActionState={{
        rows: {
            "DomainSubType/1": { "event_delete": { hidden: true }},
            "DomainSuperType/2": { "event_delete": { hidden: false, disabled: true }},
            "DomainSubType/3": { "event_delete": { disabled: true }},
            "DomainSubType/4": { "event_delete": { hidden: true }},
        }
    }}
/>

With the usage of the RowActionState API, you can still have dedicated behavior for your row action with full modeling support (e.g.: styling, labeling…), while also not requiring you to dive deeper into the view’s customization part of the Overview Engine.

Note: the list of document IDs can be retrieved from Overview Engine’s activity, e.g.:

const documents = Activity.findDefaultDataHolder(props.activity)?.data.documents;
const ids = documents.map(document => document.id);
4

Hey @markus-agile-fog and @tri-sheer-boulder, thanks a lot for the quick answers and solutions. I’m glad that there are ways to achieve the dedicated buttons. Maybe if its not to much to ask, would it also be possible to use these solutions for deciding if a row gets a multiselect checkbox, because another requirement together with defined buttons for different rows is that only certain rows should be allowed for multiselection.

5

To answer your 2nd question @konstantin-rugged-stone,

With multi-selection, you will only have the option to customize these via the ComponentMap API. You will want to look into the RowCheckbox & OverallCheckbox components, where you can override and render null instead of the default ones.

6

Ah, good to know. Thanks @tri-sheer-boulder for the quick answer