"How can I customize the Application Header in vFlow, including settings for the logo, user section, side navigation options, and other properties?"

vFlow
1

“How can I customize the Application Header in vFlow, including settings for the logo, user section, side navigation options, and other properties?”

2

In vFlow, there are 5 templates of Application header which can be configured in the same way.
Each Application header template consists of the following section.

Logo Section - It displays the application logo.

User Section - It displays user name, user role and user image of the logged in user.
Sidebar Section - It displays the Side menu of the Application Header.

Please find below the steps:

  1. Go to the App Tab from the side menu.
  2. Navigate to the CUSTOM PAGE tab.
  3. Add or edit the CUSTOM PAGE header Entity.
  4. Select template from the template dropdown List.

1366×768 98.9 KB

  1. Under configuration section, set User section and Display Logo Property to true if we want to add user section and logo to our selected application header.
  2. For Application Logo, Select type as IMAGE and add any https or base64 URL.

1366×768 103 KB

  1. For the User Section, we configure the following properties.
  2. Primary Text Source - It displays the user name.It can be hardcoded string or name to be picked from master object using getVal statement.For Ex
    If Logged in user name to be picked then write getVal(‘userId’) or getVal(‘PATH_IN_MASTER_OBJECT’).
  3. Secondary Text Source - It displays the user role.It configured the same way as Primary text source.
  4. User Section Image - It displays user image or user initials for the obtained username from the Primary Text Source.
    Set Display User Image or Display User Initials to true.Please note that only one is selected at a time.
    For Display User Image - Set Display Image Source same way as wet set Primary Text Source.As its an Image, we can only accept any HTTPS or base64 URL.
    For Display User Initials- Set Display User Initials same way as wet set Primary Text Source.

1366×768 113 KB

  1. For the Side navigation option, we use ELEMENT as buttons for the Application Header.It can be configured in following way
  2. Go To ELEMENT tab and select BUTTON from the Add Element dropdown menu.
  3. Enter basic details and select SIDENAV from the usedFor Property menu.

1366×768 93.2 KB