Design a confirmation screen

App tutorial · Step 12 of 25

Build a three-form app that creates an Active Directory user and manages its group memberships.

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.

1. Go back to the Forms tab and load the name_generation form.

2. Add a Static Text item beneath the separator:

   Property	Value
   Margin TRBL	__2_
   Styles	font-weight:bold;
   Text	Name Generation

3. Add a second Static Text item beneath it: Margin TRBL: __3_; Text: The account will be created with the following names.

4. Add a Name-Value List beneath the static text:

   Property	Value
   Column width	8
   Item name columns	3
   Item name font weight	Bold
   Item value columns	5
   Item value font weight	Light

5. Now, we have to set the list's items property, which is the tricky part.

6. 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).

7. Click the default list item's Name cell and rename it to Username.

8. Change its Value Type to javascript.

9. Click the list item's Value cell. The JavaScript Evaluation dialog box is shown.

10. Enter return data['ng_sAMAccountName']. This fetches the value of the name generator's ng_sAMAccountName output field.

11. Click Save.

12. 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']

13. 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']

14. Click Save. The name-value list now previews the generated names that this app will use to create an AD account.

15. We'll click Save to save our progress so far.