Example menu item

In this section, you will learn how to create a Users management menu item, and how to use Vendor Portal’s UI Builder to build a custom UI page.

You will learn how to:

• Create a table.

• Populate the table using data initializer callback.

• Create a table action and attach a callback to it.

To create the menu item

1. Open the Version.

2. Select Main menu from the left-hand menu.

3. [Optional] Click Enable to enable the extension point.

4. Click Add item to create a new menu item.

5. Enter the name “Users management” for the menu item.

6. Enter a description for the menu item.

   Note

   This is for your reference only.

7. In the Parent menu item drop-down menu, select “Management”.

8. Specify a unique Code for your menu item.

   Note

   For more information on CTI codes, see CTI.

9. Click Save changes.

To build the custom UI page

1. Click UI builder.

   The UI builder will open.

   Note

   For more information on the UI Builder, see UI Builder

2. In the right pane specify a Form name for the UI page.

To create the data table

1. In the left pane, expand the Table section, and drag a Table element into the UI builder.

2. Select the Table element to edit the table attributes.

3. Specify a unique alphanumeric ID for the table. For example, users-table.

   Note

   This will be used in the callback request/response mapping.

4. Under Table columns, click New column.

   This will be the Username column.

   1. Specify a name for the column. For example, Username.

   2. Specify a unique alphanumeric ID for the column. For example, username.

      Note

      This will be used in the callback request/response mapping.

5. Click New column again to add another new column for the users’ emails.

   1. Specify a name for the column. For example, Email.

   2. Specify a unique alphanumeric ID for the column. For example, email.

      Note

      This will be used in the callback request/response mapping.

   

6. [Optional] Click Preview to preview the table.

7. Click Save.

To populate the table using data initializer callback

1. Create a callback called Read users.

   For our purposes, consider the following callback example:

   • Callback name: Read users.

   • Callback request schema, which does not define any structure:

     {}
     

   • Callback response schema, which defines an object containing an array of objects with the username and email fields:

     {
         "$schema": "http://json-schema.org/draft-04/schema",
         "type": "object",
         "properties": {
             "items": {
                 "type": "array",
                 "items": {
                     "type": "object",
                     "properties": {
                         "username": {
                             "type": "string"
                         },
                         "email": {
                             "type": "string"
                         }
                     }
                 }
             }
         }
     }
     

   Note

   For more information, see Adding a callback.

2. Click anywhere in the empty area of the UI builder.

3. In the right pane:

   1. Select your Read users callback in the Data initializer callback dropdown.

   2. Click Configure response mapping.

   3. Under Response mapping, click Add mapping entry.

      • In the left-hand dropdown, select items (array).

        This is the field defined in the response schema of your callback.
      • In the right-hand dropdown, select users-table (table).

        This is the ID your specified for the table, whose value will include the value received from the response.
   

   With this configuration, the items array is explicitly mapped to the table while array items (table rows) are mapped to the table columns using corresponding domain property names:

   

4. Click Save.

To attach a callback to the table action

1. Create a callback called User invite.

   For our example, consider the following callback:

   • Callback name: User invite.

   • Callback request schema, which defines an object containing the email field:

     {
         "$schema": "http://json-schema.org/draft-04/schema",
         "type": "object",
         "properties": {
             "email": {
                 "type": "string"
             }
         }
     }
     

   • Callback response schema, which does not define any structure:

     {}
     

   Note

   For more information, see Adding a callback.

2. Select the Table element and in the right pane:

   1. Under Action buttons, click New action button:

      1. Enter a Label for the action button. For example, Re-invite user.

      2. Select the Availability from the dropdown. For example, If one row is selected.

         This is the condition under which the action button may be clicked.

      3. Select Callback from the Action type dropdown.

      4. Select User invite from the Callback Name dropdown.

      5. Under Request mapping, click Add mapping entry.

         1. In the left-hand dropdown, select users-table (table).

         2. In the right-hand dropdown, select email (string).

            This is the field defined in the request schema.
   

   With this configuration, when one row is selected, the Re-invite user button will become active and will execute the User invite callback with the email of the selected row:

   

   Note

   If your action allows for multiple rows to be selected, the ID of the column must be mapped to an array of objects.

   This will result in the following correspondence between table row selection and the resulting payload:

   

3. Click Save.