This documentation supports the 23.3 version of BMC Helix Innovation Suite (AR System and BMC Helix Innovation Studio).

To view an earlier version, select the version from the Product version menu.

Creating search menus with better readability in Progressive Web Applications

As an application developer, you can create search menus for Progressive Web Applications (PWA). These search menus improve the user experience by providing suggestions that help application users with populating fields. 

search menus with display property set to Menu Section present diverse information with better formatting compared to search menus set to Section Panel.  Search menus displaying multiple types of information with better formatting have improved readability and easier navigation. 

Scenario

At Apex Global, Seth the developer wants to create an Assigned to field that enables application users to assign a ticket to an employee in Apex Global.  Seth has found that application users search by using either the username, employee name, or email ID. To improve the search experience, Seth wants to create search suggestions in the Assigned to field which shows the username, employee name, and email ID, so that application users find it easier to search for the appropriate employee.

Example smart menu

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.
    User form
  2. Create a Progressive View.

    1. Select Form > Create New View.
      The Create New View dialog box opens.
    2. In the View Type list, select Progressive
      Create New View dialog box
      Developer Studio automatically creates a Section Panel.
  3. 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.
  4. Name the new panel holder and panel as.
    In this example, the names are Panel Holder4 and Panel 4.
  5. Select Panel4 and in Properties, set Display > Type to Section Panel.

  6. Inside Panel4, create another flow panel holder.
  7. Name the panel holder and panel.
    For example, Panel Holder5 and Panel5.
  8. Create another panel within PanelHolder5.
    You can see the two new panels within the panel.
    Illustration showing new panels
  9. Select the two newly created panels.
  10. 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 
  11. 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.
    Fields added to the panels
  12. 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

  13. Change the Label and Name property of the view to sample.
    Label and Name properties

To create the search menu

  1. Create a search menu.
    New Search Menu option 
  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.
    example smart menu

Important

The following table helps you understand the differences between the Menu Section property and the Section Panel property so that you can decide the appropriate option:

Property

Behavior

Menu Section

A panel with the Display > Type property set to Menu Section retains the relative positions of the fields that it encloses when displayed on the PWA screen. The following example illustration shows two fields within the menu section positioned one above another in Developer Studio are displayed one above another on PWA screens as well. 


Section Panel

A panel with the Display > Type property set to Section Panel does not retain the relative positions of the fields it encloses when displayed on PWA screens. The following illustration shows an example of two fields arranged one above another in Developer Studio. However, on a PWA screen, they are displayed side-by-side.


Was this page helpful? Yes No Submitting... Thank you

Comments