Creating anchorable fields in Progressive View

As a developer, create anchorable fields in Progressive View by using Developer Studio. This improves navigation in Progressive Web Applications (PWA) and custom applications.

The following video (1:47) walks you through the steps to create anchorable fields in Progressive View:

Before you begin

Enable Progressive View for forms by using the centralized configuration. To learn more, see Enabling Progressive Views for forms by using Centralized Configuration Settings.

Task 1: To create anchorable fields in Progressive View

1. In Developer Studio, create a new regular form.
   For more information, see Creating form views.
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. 
      
3. To add a flow panel holder, right-click the form and select Create a New Field > In Current View > Flow Panel Holder.
   
4. In the Properties pane, set Orientation to Vertical and Enable Anchor Navigation to True.
   
5. In the Outline pane, right-click the Panel Holder and select Add New Panel.
   Add several panels inside the panel holder to structure your form.
   
6. To add fields in the panel, select a panel and right-click > Create a New Field > In Current View > Character.
   Insert the necessary fields into the panels you created.
   
7. To label the field, open the Properties pane and select Display > Label, then enter the field name.
8. Set the Anchorable property to True to enable anchoring for each panel.
   Each panel is now anchorable, enabling navigation links to each section.
   
9. Click Save.
10. Open the Mid Tier configuration tool and sync the cache.
    http://<MidtierHostName>:<PortNumber>/arsys/shared/config/config_cache.jsp
    For more information, see Synchronizing Mid Tier cache.

Task 2: To test and review the anchorable fields in Progressive Web Application

1. Log in to the PWA in a browser.
   (On-premises) http://<midtierHostName>:<portNumber>/arsys/pwa/#/login
   (SaaS) http://<helixBaseURL>/arsys/pwa/#/login
2. Modify the URL to include the Progressive View form you created in Developer Studio.
   (On-premises) http://<midtierHostName>:<portNumber>/arsys/pwa/#/forms/<AR_Server_Name>/<formName>/
   (SaaS) http://<helixBaseURL>/arsys/pwa/#/forms/<AR_Server_Name>/<formName>/
3. Confirm whether the anchorable fields are visible in the Progressive Web Application.

Related topics

• Developing Progressive Web Applications
• Flow panel holders for Progressive Web Applications
• Creating a Progressive View in Developer Studio to create Progressive Web Applications