Adding @mention for fields in Progressive Web Applications

To support the @mention component for Progressive views, the following properties are added in Developer Studio:

To configure the @mention component

1. On the Progressive view of a form, double-click a Character field.
2. On the Properties panel, under the Display property group, for the Enable Menu Hotkeys property, select the True value.
3. In the Value column for the Menu Hotkeys property, click the ellipsis button.
   The Menu Hotkeys dialog box is displayed.
   
   
   
   

4. Click Add, and then perform the following steps:

   Column	Step
   Hotkey	Click the first row in this column, and then select a character from the list.
   Menu Name	Click the first row in this column, and then click the ellipsis button to select a menu from the Menu Selector dialog box.
   Active Link	Click the first row in this column, and then click the ellipsis button to select an active link from the Active Link Selector dialog box. The active link that you attach to a hotkey must be an existing one and associated with the current form.
   Labels	Click the first row in this column, and then in the box, type in labels that are separated by a semicolon.
   Auto Complete Key Stroke #	Enter an integer value.

5. Click OK.

Parameters for hotkey definition

The following parameters can be a part of any hotkey definition:

There are scenarios when you want the users of your application to have the option of selecting the type of content that they see in an autosuggest list when using @mention. You can create such a search field by using the CHANGE_HOTKEY_MENU command.

To enable users to select the type of content displayed in @mention 

In the following example scenario, as an application developer, you add the CHANGE_HOTKEY_MENU command to enable the application users to decide the type of content in the @mention list. However, note that real-world implementations can vary considerably depending on your business needs. 

Before you begin

Make sure that you fulfil the following conditions before you perform the steps for creating fields where users can switch between @mention content.

• In Developer Studio, you must have a form that contains usernames and a form that contains asset names.
• You must have predefined search menus of type Search.

Process for creating fields where users can switch between @mention content

The following diagram shows a high-level overview of the steps required to create fields where users can switch between different types of @mention content:

Create two buttons and a character field. The character field consists of a default @mention menu. The buttons are assigned active links and menus which should replace the default @mention menu when the buttons are clicked by application users.
The following animation explains a high-level concept of the use case:

To create the field and buttons

In this procedure, we create a character field with a default menu, two buttons that contain an active link that uses the CHANGE_HOTKEY_MENU.

1. In Developer Studio, create a New Regular Form.
   

2. Create a Progressive View.

   Steps (2)

   1. Form > Create New View.
      
      The Create New View dialog box opens.
   2. In the View Type list, select Progressive. 
      
3. Add two buttons to the view.
4. Name the buttons as Assets Only and Users Only.
5. (Optional) Add a new section panel.

To define the hotkey for the character field

1. Add a character field and add a hotkey associated with a search menu to it.
   1. From the Palette, drag Character into the view or the section panel.
      Developer Studio assigns it a default name such as Character Field_c.
      
      
   2. Select the character field and rename it to Character Field.
      
   3. In the Properties tab, click Display > Enable Menu Hotkey and select True.
      This enabled you to set a hotkey for the character field.
   4. Below the Enable Menu Hotkey property, click the ellipsis () button next to Menu Hotkeys.
      The Menu Hotkeys dialog opens.

   5. Click Add.
      Developer Studio adds @ in the Hotkey column.

      Best practice
      To fetch email IDs in the @mention options, you must add # as the hotkey instead of @ in the Hotkey column to avoid errors.

   6. In the Menu Name column, click the ellipsis () button.
      The Menu Selector dialog opens.
   7. Find the search menu that lists usernames and assets you want to associate with the hotkey and click OK.
   8. In the Auto Complete Key Stroke # column, add 3. 
      The autosuggest is activated when application user types at least three characters. 

   9. In the Properties tab, set a value in pixels for the Hotkey Menu Max Height property.
      This is the maximum height of the @mention list when it displays a large number of results. The default value of the Hotkey Menu Max Height property is 200.

      Best practice
      We recommend a value between 200 to 500 pixels for the Hotkey Menu Max Height property.

2. Save the form with a name.
3. In this example name the form as ChangeHotkeyMenu.

To create a search menu that contains usernames

1. Create a new search menu.
   
2. Select AR System Navigator > aRServerName > All Objects > Menus > New Search Menu.
   
   The hotkey supports only search menus. 
3. Click the ellipsis () button next to Form Name.
   The Form Selector dialog opens.
4. Find and add the user form that contains all usernames, and click OK.
5. Save the search menu.
   In this example, name the menu as ChangeHotkeyMenuM1.

To create a search menu that contains asset names

1. Create another search menu and name it as ChangeHotkeyMenuM2.
   This menu must list all asset names.
2. Click the ellipsis () button next to Form Name.
   The Form Selector dialog opens.
3. Find and add the form that contains all asset names, and click OK.
4.  In the Label Fields section, click Add.
   The Field Selector dialog opens.
5. Select Asset Name, and click OK.
6. Save the search menu.
   In this example, name the menu as ChangeHotkeyMenuM2.

To create an active link for the Users Only button

1. Create an active link for the Users Only button named ChangehotkeymenuAL1.
2. Select New > Active Link.
   

3. Add the following settings to the active link:

   Setting	Value, selection, or function	Additional details
   Associated Forms > Add	ChangeHotkeyMenu
   Execution Options > Button/Menu Field	Users	This is the button that triggers the active link.
   Run If Qualification	1=1	This triggers the run process in the If Actions without exception.
   If Actions > Add action > Run Process	CHANGE_HOTKEY_MENU fieldID @ changehotkeymenuM1 $NULL$ $NULL$ 3	Make sure that there is a single space between each attribute. fieldID is the ID of Character Field.  changehotkeymenuM1 is not dynamic and must always be hardcoded (static). This active link runs when you type three characters, that is, when you type @ in the Character Field and it fetches information from the ChangehotkeymenuM1 search menu.

To create an active link for the Assets Only button

1. Create another active link for the Assets Only button named ChangehotkeymenuAL2.
2. Select New > Active Link.

3. Add the following settings to the active link:

   Setting	Value, selection, or function	Additional details
   Associated Forms > Add	ChangeHotkeyMenu
   Execution Options > Button/Menu Field	Assets	This is the button that triggers the active link fetches and uses it to replace the default menu of the character field.
   Run If Qualification	1=1	This triggers the run process in the If Actions without exception.
   If Actions > Add action > Run Process	CHANGE_HOTKEY_MENU fieldID @ changehotkeymenuM2 activeLink1 labelsToShow 3	Make sure that there is a single space between each attribute. fieldID is the ID of Character Field.  changehotkeymenuM2 is not dynamic and must always be hardcoded (static) with the menu name. This active link runs when you type three characters, that is, when you type @ in the Character Field and it fetches information from the ChangehotkeymenuM2 search menu.

4. Save the changes.

Validating the character field in PWA

View the form in the progressive web application screen to check whether it works as intended.

1. In a browser, log in to PWA.
   For example, <serverName>:8080/arsys/pwa/#/login
2. Change the URL to include the Progressive View form that you created in  Developer Studio.
   <serverName>:8080/arsys/pwa/#/forms/<serverName>/<formName>/<progressiveViewName>
3. The PWA screen displays the character field and the buttons.
   
4. In Character Field, type @ followed by three characters.
   The field displays users and assets.
5. Click Users Only and type @ followed by three characters.
   The field displays usernames.
6. Click Assets Only and type @ followed by three characters.
   The field displays assets names.

Where to go from here

Learn more about the syntax and additional options within the process command in the Process-commands topic.