Creating search menus with better readability in Progressive Web Applications

Before you begin

You must have a form that has the data required by the search menu with display property set to Menu Section .  

To create smart menus in Progressive Web Applications

The following video (3:28) and procedure describe the example of creating a search menu with display property set to Menu Section by using data from the User Form.

 https://www.youtube.com/watch?v=1QHi28coXqw

To create the panels with fields

1. In Developer Studio, open the User Form.
   

1. Create a Progressive View.

   Steps (2)

   1. Select Form > Create New View.
      The Create New View dialog box opens.
   2. In the View Type list, select Progressive. 
      
      Developer Studio automatically creates a Section Panel.
2. Right-click within the section panel and create a flow panel holder in the current view.
   Create a New Field > In Current View > Flow Panel Holder
   
   Adjust the panel size to allow the addition of more panels. You can see in the Outline pane that a new panel holder and panel are created.
3. Name the new panel holder and panel.
   In this example, the names are Panel Holder4 and Panel 4.
   
4. Select Panel4 and in Properties, set Display > Type to Section Panel.
   

1. Inside Panel4, create another flow panel holder.

1. Name the panel holder and panel.
   For example, Panel Holder5 and Panel5.
2. Create another panel within PanelHolder5.
   You can see the two new panels within the panel.
   

1. Select the two newly created panels.
2. In Properties, set Progressive Desktop > Progressive Width.
   In this example, the value is set to 6/12. These two panels occupy half the screen according to the 12-column layout. You can set Progressive Width to any other value based on how you want to 
3. Add the Login Name, Full Name, and Email Address fields by navigating to Form > Add/Remove Fields in View.
   These are the fields that are displayed by the search menu with display property set to Menu Section.
   

1. Select the two panels containing the Login Name, Full Name, and Email Address fields and in Properties, set Display > Type to Menu Section.

   Best practice
   When creating search menus with display property set to Menu Section, include only the following fields or objects within the view:

   • Character
   • Trim Text
   • Check Box
   • Radio Button
   • Date
   • Panel
   • Drop-Down List
2. Change the Label and Name property of the view to sample.
   

To create the search menu

1. Create a search menu.
    
2. In the search menu, in the Form Name field, type User, and in the View Name field, type sample.
   The View Name must refer to the view that we just created and named as sample.
3. Under Label fields, add the three fields Email Address, Full Name, and Login Name. 
4. In Value Field, type Login Name.
5. In Qualification, type 1=1.
6. Save the menu as sample_menu.
7. Create a form in Progressive View with a character field.
   Name the form and the field.
8. Select the character fields and change the Menu Name property to sample_menu. 
9. Set the Chunk Size property to 5.
   Chunking helps with the performance of the search menu with display property set to Menu Section.
10. Save the changes.
11. Open the Mid Tier configuration tool and sync the cache.
    http://<MidtierHostName>:<PortNumber>/arsys/shared/config/config_cache.jsp

To validate the search menu in Progressive Web Applications

1. In a browser, log in to PWA.
   (On-premise) http://<midtierHostName>:<portNumber>/arsys/pwa/#/login
   (helix) http://<helixBaseURL>/arsys/pwa/#/login
2. Change the URL to include the Progressive View form that you created in Developer Studio.

3. (On-premise) http://<midtierHostName>:<portNumber>/arsys/pwa/#/forms/<AR_Server_Name>/<formName>/

   (helix) http://<helixBaseURL>/arsys/pwa/#/forms/<AR_Server_Name>/<formName>/

4. In the character field, start typing any name.
   The search menu displays search suggestions consisting of multiple types of information in a well-formatted way.