Web-based Master-Detail Grid Form Design
Master-detail forms are a special kind of forms that join some tables into one page view. In this way, it is possible to see and edit some related records easily on the same page. Desktop applications have much more complicated master-detail form capabilities
compared with ordinary web forms.
First problem of master-detail web forms is to display and edit detail tabs. Loading all detail tabs at once is not a neat solution. For this reason every time we click a detail tab we have to go to server. Another problem is grid component for detail editing. Grid component is very difficult to implement in web applications. The only possible way to implement it was to use AJAX technology and DOM manipulation. Inline-cell-editing is achieved with DOM manipulation and edited row data is sent to server with AJAX. Most of the web grid implementations don’t have master-detail form or server-side integration. We could design both and I’ll give you some conceptual tips.
Our implementation is as following:
![MasterDetailForm1]()
1- Master (Header) may have some other tabs like detail tab. Since we display detail grid at the bottom of the page, there may not be enough space to put all master fields at the top section.
2- Some header fields may need to be disabled after header AJAX post. For example, if user is inserting a new record, we may lock (made un-editable) some certain header fields when user clicks the detail grid.
3- There may be multiple detail grids. Most of the web-based master-detail forms I see don’t have this feature. Designing these detail tabs as JSP pages is tricky. Header section may repeat in each JSP page. We solved this problem by using partial JSP pages.
4- Insert row; this is the most important element in this component. User adds new records with this input line. There is no edit link or new link to click (Most of the grids bring this extra click costs). It is ready to use. This insert line is also used for update row format.
5-6- Any type of elements can be used as cell type including popup input, checkbox, combobox etc. Reference codes can be selected by opening lookup popup. We can disable some columns if required.
Another important feature is to be able to update the row when row is clicked. If user completes update, then the row is converted to un-editable form. Just before this conversion the updated data is sent to server via AJAX. If no server-side error occurs, then it is converted to un-editable form.
![MasterDetailForm2]()
1- Update row; user can make editable any row by clicking or by using keyboard up-down keys like Excel editing. Some grid implementations make all rows editable, but this is a heavy process if grid contains hundred of rows, assume that it may also contain many columns. One update row is also useful for differentiating the editable row.
2- Disabled cells; some can be disabled in some circumstances.
3- A very useful function when editing is auto-complete. Like in Excel, when user enters a text matching with current column values, it is automatically completed. Just by pressing enter key, cell is filled with that value.
We may have multiple detail tabs. When a detail tab is clicked, current detail tab row edit data is posted to server. If no error is received then user is navigated to other tab. To achieve this, we have to control tab clicks by blocking user clicks then re-running with JavaScript:
![MasterDetailForm3]()
Master or header tabs may also be multiple. When user clicks a master tab, then all detail grids are closed and only the clicked tab is open. In the example below, we used secondary tab for detail of master record since all fields may not be filled on the same page with detail grids.
![MasterDetailForm4]()
First problem of master-detail web forms is to display and edit detail tabs. Loading all detail tabs at once is not a neat solution. For this reason every time we click a detail tab we have to go to server. Another problem is grid component for detail editing. Grid component is very difficult to implement in web applications. The only possible way to implement it was to use AJAX technology and DOM manipulation. Inline-cell-editing is achieved with DOM manipulation and edited row data is sent to server with AJAX. Most of the web grid implementations don’t have master-detail form or server-side integration. We could design both and I’ll give you some conceptual tips.
Our implementation is as following:
1- Master (Header) may have some other tabs like detail tab. Since we display detail grid at the bottom of the page, there may not be enough space to put all master fields at the top section.
2- Some header fields may need to be disabled after header AJAX post. For example, if user is inserting a new record, we may lock (made un-editable) some certain header fields when user clicks the detail grid.
3- There may be multiple detail grids. Most of the web-based master-detail forms I see don’t have this feature. Designing these detail tabs as JSP pages is tricky. Header section may repeat in each JSP page. We solved this problem by using partial JSP pages.
4- Insert row; this is the most important element in this component. User adds new records with this input line. There is no edit link or new link to click (Most of the grids bring this extra click costs). It is ready to use. This insert line is also used for update row format.
5-6- Any type of elements can be used as cell type including popup input, checkbox, combobox etc. Reference codes can be selected by opening lookup popup. We can disable some columns if required.
Another important feature is to be able to update the row when row is clicked. If user completes update, then the row is converted to un-editable form. Just before this conversion the updated data is sent to server via AJAX. If no server-side error occurs, then it is converted to un-editable form.
1- Update row; user can make editable any row by clicking or by using keyboard up-down keys like Excel editing. Some grid implementations make all rows editable, but this is a heavy process if grid contains hundred of rows, assume that it may also contain many columns. One update row is also useful for differentiating the editable row.
2- Disabled cells; some can be disabled in some circumstances.
3- A very useful function when editing is auto-complete. Like in Excel, when user enters a text matching with current column values, it is automatically completed. Just by pressing enter key, cell is filled with that value.
We may have multiple detail tabs. When a detail tab is clicked, current detail tab row edit data is posted to server. If no error is received then user is navigated to other tab. To achieve this, we have to control tab clicks by blocking user clicks then re-running with JavaScript:
Master or header tabs may also be multiple. When user clicks a master tab, then all detail grids are closed and only the clicked tab is open. In the example below, we used secondary tab for detail of master record since all fields may not be filled on the same page with detail grids.
No comments:
Post a Comment