Hello !
I am trying to achieve customization of a Form Inline-Repeat but struggling to find the right properties.
The result should be the presence of a button near the table (like in a subheader for instance), and this button would show/hide some rows based on a condition. (see screenshot for visual example)
This is basically similar to the front-end tutorial where we are taught to highlight the birthday date of people in an overview, so it should be done easily, but the problem is that I am working with an inline-repeat and not an overview.
So far, I haven’t not been able to do this the simple way, so I started to re-create a customized InlineRepeat where I manually convert my document data into rows and columns and use a Table widget.
The question is : is that the only way to implement my functionality or there is an easier way ?
Thank you !
Hi,
the form engine provides two APIs for customizing of the rendering.
The WidgetMap can not be used to customize the repeats, because the Table widget that is rendered for repeats is not part of that map.
However, the FormModelMap also provides a way for customizing repeats (on a higher level): You could add additional components (like a button) that way. Consider following example:
export const FormModelMapForWidgetMap: FormModelMap = {
...DefaultFormModelMap,
InlineRepeat: {
component: CustomRepeat
}
};
function CustomRepeat(props: FormModelMap.FormModelComponentProps<FormModel.InlineRepeat>) {
return (
<>
<Button onClick={() => /* something that changes/hides data */} />
<DefaultFormModelMap.InlineRepeat.component {...props} />
</>
);
}
Hello,
Thank you for your example. Could you detail what you would be your approach within the button’s anonymous function ? The result should show/hide only some table rows depending on some condition, but when I tried your suggestion I wasn’t able to get the data to display (and thus test it).
Within an overview component, I would write something like this in the component map :
TableBodyCell(cellProps) {
return (
<>
{checkSomeCondition(cellProps.row) && buttonToggleState ? (
<StyledHidden>
<InlineRepeatRow {...props} />
</StyledHidden>
) : (
<InlineRepeatRow {...props} />
)}
</>
);
}
So the UI would be like this when toggling the button :
But I don’t think it’s possible to go this far with your suggestion, because for the Form, there is no similar props as cellprops.row, am I wrong ?
The only way I see now, is to re-create a custom InlineRepeat component where I write my own render function using a Table Widget.
Hi,
depending on your conditions you might be able to re-use the filtering behavior of the repeats.
By dispatching an action like Command.changeRepeatState, you could then update the current filter state to influence which content is visible.
However, one limitation of this approach would be that you are limited to the constraints of the repeat filter types (see here). If your condition is “too complex” to be constructed with these, this solution might not be suitable.
Another idea would be to render the same repeat twice with different filter expressions (please scroll to the very end of the chapter, I cant link to it directly 
) and let some button toggle the visibility between them (so you always only see one of them, the other is hidden, but they share the same underlying data).
In the same way as above, your condition would be limited ( here by the capability of the filter expression).
Thank you ! It’s very helpful 
