Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
This use case will enable the Spreadsheet Cascading Drop-Down List to hide a value that has been selected on the row before. It is vital to ensure that the value will not be shown as an option for the next row. It will hide the user's value for the prior row. This will be useful to prevent the user from selecting the same value on the next row. However, it will not delete the value from the database table and can still be used for the next form updating usage.
Figure 1 : Spreadsheet Form Element Properties - UI - Custom Settings
Each option in the spreadsheet is a list of data from another form with a Form Data Store configuration. This tutorial will guide you step by step on configuring the Spreadsheet Form Element for this use case.
Enable the Handsontable instance to be interactable by pasting the following code into the html elements from form builder > spreadsheet configuration > UI > Custom Settings (JSON)' (See Figure 2)
Figure 2: Enable handsontable instance
orig_pool array is used to keep track of removed values for potential restoration. It is designed with a Handsontable instance, where the goal is to manage the content of a dropdown menu ("Continent") based on changes made in the table. The code dynamically adds or removes items from the dropdown menu source based on user interactions with the table. (See Figure 3)
The value under the " Continent" table will only show the value that has not been selected by user. Hence, the selected value from the prior row will be hidden for the next row selection. ( Figure 4)
Figure 4 : Expected Outcome
This tutorial is closely related to the existing topic on creating a Spreadsheet Cascading Drop-Down List. It is also using the same app on that topic and had been adjusted according to the steps shown above.
Do explore the attached Sample App below and adjust according to your user specification.