I was researching ways to implement edit functionality for dashboard created with ADF 12.2.1 masonry layout. Check my previous post, where dashboard was implemented - ADF 12.2.1 Responsive Dashboard with Masonry Layout. I have decided to use panel drawer component, which would bring editable fields in the context of data displayed in the dashboard.
Panel drawer icon is displayed in the top right corner of the dashboard:
User can click on the icon and this shows editable form for the data rendered in the dashboard:
Dashboard is implemented with masontry layout, it makes it possible to re-arrange tiles. This proves to be useful when editing data. I can move tile with the chart and change salary value. Chart is synched and new value becomes visible. Two actions are done at once - data update and change review in the chart:
One more use case - validation. While editing salary, we can check tile with minimum and maximum salary values. This could help to understand, what salary value can be accepted. For example, if too low salary is set, validation error is returned. User can cross check this in the chart with minimum and maximum values:
Panel drawer is defined in the same group, where masonry layout block is located:
Edit form is rendered through ADF region, this means it can be reusable:
Panel drawer icon is displayed in the top right corner of the dashboard:
User can click on the icon and this shows editable form for the data rendered in the dashboard:
Dashboard is implemented with masontry layout, it makes it possible to re-arrange tiles. This proves to be useful when editing data. I can move tile with the chart and change salary value. Chart is synched and new value becomes visible. Two actions are done at once - data update and change review in the chart:
One more use case - validation. While editing salary, we can check tile with minimum and maximum salary values. This could help to understand, what salary value can be accepted. For example, if too low salary is set, validation error is returned. User can cross check this in the chart with minimum and maximum values:
Panel drawer is defined in the same group, where masonry layout block is located:
Edit form is rendered through ADF region, this means it can be reusable:
Download sample application - DashboardApp_v4.zip.
No comments:
Post a Comment