Have you faced situations in which editing in an Interactive Grid became ‘not ideal’. Maybe because your IG is having a large number of columns. Or your users don’t like the switching between display values and the input items. Or you just want to give the user a dedicated region to insert and edit his data.
I’ve designed several BPM (workflow) and Case Management applications. For simple cases and fast data entry, we edit in a grid. For more serious data, we offer a dedicated form region.
Of course we have the IG Single Row View (SRV). But not ideal for a large number of columns. It’s contained within the dimensions of the IG. Or we can use a regular form region. Disadvantage then is we are mixing 2 different technology styles, in which the form region is not connected to the IG model. The form data needs to be submitted separately to the server, and then the IG needs to be refreshed, serving you page 1.
How about if we could take the Single Row View out of the IG, giving it it’s own region, and add a bit of extra (layout) configuration. And utilize the APEX standard region functionality to have a region modelled as an inline dialog or drawer.
The IG Single Row View is implemented using the recordView widget. It’s part of the official APEX JavaScript API. And it enables you to instantiate the widget with the same model and same fields configuration as the model and columns configuration of the Interactive Grid. So I started to write a small wrapper around this widget as to enable a region plugin for the same, which we can configure and connect to the IG of our choice, having it as a region external to the IG. Below I share the result with you. The power of model/view separation which APEX offers here was very helpful.
Illustrating you the result by using a page from the Sample Interactive Grids Application (click to enlarge):
The IG grid won’t be editable anymore in the grid itself. Also the SRV feature is disabled. By double click on a row you enter the External Row View (ERV) in edit mode and focus will be given to it. You still can use the IG row menu, for example to delete multiple rows. Both in the IG and in the ERV, you can paginate. The selected record in both views will be kept in sync. Any edits in the ERV immediately do get reflected in the IG grid, including validation errors.
Lets start to adjust the layout a bit. We can add Column Groups in the IG as to have them appear as collapsible groups in the ERV. Also we can add classes for fields to reduce the width. Result:
Notice the extra button in top to Collapse/Expand all groups. Classes are available to reduce a field width to 25%, 50% or 75%.
We can also use the Column Groups to style the layout to a columns layout. So with 2 groups, we get:
By default, the width of the label part of a field is 30%. The plugin enables you to configure this to a different percentage or number of pixels. Above has 100px configured.
Lets return to one column, and change the region template from ‘Standard’ to ‘Inline Drawer’. Result:
And using ‘Inline Dialog’:
The drawer and dialog are inline regions, from which they show up instantly. As the IG and the ERV do share the same columns/fields configuration, they also share the related dynamic actions and validations. Also the ‘Row Initialization’ event is available.
I hope one day APEX will have a modern form region widget component which can be used standalone or combined with IG (FR-2117). Until then, for IG editing, I think the recordView, externalized, is a nice alternative.
Thanks for reading! For further technical details, see the github page. And here you find a demo page.