Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
...
Add a Custom HTML form element in the form and use the following Javascript code to dynamically adjusts the content of the "Continent" and "Climate" dropdown menu based on user edits in the table. It removes values from the dropdown if they are edited to be non-empty and adds them back if they are edited to be empty.
The 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" & " Climate" ONLY) 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)
Code Block |
---|
<script> $(function(){ var orig_pool = []; // we will keep a copy of "removed" element for restoring later var hot = FormUtil.getField("field1").data("hot"); source_continent = hot.getSettings()['columns'][1]['source']; // we get all the dropdown option from column #1 of the table ("Continent"), call it "source" source_climate = hot.getSettings()['columns'][2]['source']; // p.s, column count starts from 0. so column #1 = second column hot.addHook('afterChange', function(change,type){ // set a hook / event listener to trigger after any change on the table if(type == 'edit'){ // if the change type is of type "edit", we proceed data = { // prepare the data object source : source_continent, change : change, orig_pool : orig_pool } if(change[0][1] == 'continent'){ data.source = source_continent; } if(change[0][1] == 'climate'){ data.source = source_climate; } if(change[0][3] != ''){ removeSource(data); } // if the changed value is not empty, we remove the data from the "source" else{ addSource(data); } // otherwise, the change value is empty, meaning it is removed from the table // we need to add it back to the "source" } }) }) function removeSource(data){ slice_index = data.source.indexOf(data.change[0][3]); // find the index of the continent in the "source" array data.orig_pool.push(data.source.slice(slice_index,slice_index + 1)); // copy this value to our "original pool" of country // for use later in addSource() data.source.splice(data.source.indexOf(data.change[0][3]),1); // splice the value out from "source" array } function addSource(data){ data.orig_pool.splice(data.source.indexOf(data.change[0][2]),1) // splice the value out from "original pool" array if(data.change[0][2] != ''){ // if the initial value of the cell is not empty, data.source.push(data.change[0][2]); // we add the value back to "source" array data.source.sort(); // sort the source array so it looks nice. } } </script> |
...
The value under the " Continent" & "Climate" 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
...
Do explore the attached Sample App below and adjust according to your user specification.
View file | ||||
---|---|---|---|---|
|