Step 18: Add the second grid item (tutorial)
In this step, we'll add & configure the second grid item, as well as some buttons.
Drag and drop another grid to the right of the buttons, and set its properties as follows:
id: add_memberships
selection: multiple
column width: 5
margin trbl: __3_
search enable: yes
Tip
We're calling the right grid add_memberships because it will represent all the groups in AD that the created user should be a member of.
Now, set the dnd grid ("drag 'n drop") property of the left grid to add_memberships (the id of the right grid), and the dnd grid property of the right grid to remove_memberships (the id of the left grid).
Add a new action to the "Add" button, with the following properties:
Action Type: Grid drag-and-drop update
Target Grid: add_memberships
Add a new action to the "Remove" button, with the following properties:
Action Type: Grid drag-and-drop update
Target Grid: remove_memberships
Since the buttons are displayed too high relative to the grids, let's place an Empty Column item above the "Add" button and set its properties as follows:
height: 120px
Tip
Since there is no green drop zone above the "Add" button, you will first need to drop the Empty Column beneath the Remove button. After that, you can drag it up above the Add button.
Finally, drag and drop a button at the bottom of the form, and set its properties as follows:
alignment: right
button style: success
button text: Update Memberships
margin trbl: __3_
We'll configure this button's action later.
We'll click Save to save our progress so far.