Step 12: Design a confirmation screen (tutorial)
In this step, we'll work on our second form, which is essentially a confirmation screen for the user create portion of this app. This will involve an advanced item that we haven't seen yet: the Name-Value List.
- Go back to the Forms tab and load the name_generation form.
- Drag and drop a Static Text item beneath the separator. Set its properties as follows: - margin trbl: _2 - styles: font-weight:bold; - text: Name Generation
- Drag and drop another Static Text item beneath the previous one, and set its properties as follows: - margin trbl: _3 - text: The account will be created with the following names
- Drag and drop a Name-Value List beneath the static text item, and set its properties as follows: - column width: 8 - item name columns: 3 - item name font weight: bold - item value columns: 5 - item value font weight: light
- Now, we have to set the list's items property, which is the tricky part.
- Click the Value cell of the items property. The Configure Name-Value List dialog box is shown. By default, the list is populated with a single item (example_item_value).
- Click the default list item's Name cell and rename it to
Username. - Change its Value Type to javascript.
- Click the list item's Value cell. The JavaScript Evaluation dialog box is shown.
- Enter
return data['ng_sAMAccountName']. This fetches the value of the name generator's ng_sAMAccountName output field. - Click Save.
- Click Add to add a second list item, and repeat the above process to set its properties as follows: - Name: userPrincipalName - Value Type: javascript - Value:
return data['ng_userPrincipalName'] - Finally, click Add to add a third and final list item. Set its properties as follows: - Name: cn - Value Type: javascript - Value:
return data['ng_cn'] - Click Save. The name-value list now previews the generated names that this app will use to create an AD account.
- We'll click Save to save our progress so far.