Create a Multi-Tab Page

The Page Designer enables you to create custom pages with multiple tabs, each displaying different data views with their own search criteria, columns, and actions. This tutorial demonstrates how to build a simplified Groups management page with two tabs, location filtering, and context-sensitive actions.

What You'll Build

This tutorial shows you how to create a Groups management page with:

• Two tabs - All Groups and Groups I Manage
• Location tree - For filtering groups by organizational location
• Advanced search - Custom search fields for each tab
• Action panels - Context-sensitive operations based on selected group
• Custom columns - Displaying only the data users need

Plan Your Page Elements

Before building the page, identify which elements from the existing EmpowerID Groups page you want to include. For this example:

All Groups Tab:

• Location tree for filtering
• Four search fields: Logon Name, Display Name, Description, Email
• Four columns: Logon Name, Display Name, Description, Email
• Group action panel

Groups I Manage Tab:

• No location tree
• Three search fields: Logon Name, Display Name, Description
• Six columns: Display Name, Logon Name, Notes, Description, Allow Access Requests, Email
• Group action panel

Create the Page

1. Open Workflow Studio and click Solution Explorer.

2. Select the Workspace tab.

3. Right-click the package where you want to add the page.

4. Select Add New Item > User Interface > UI Page.

   

5. In the Add New UI Page dialog, enter a name (e.g., CustomGroups).

6. Click OK.

   

An empty page design area appears.

Create the First Tab

1. Click Add Tab.

2. Right-click the default No Tree tab that appears.

3. Select Edit Name.

   

4. Name the tab All Groups.

5. Click OK.

   

The tab now shows a tree panel and controls along the top.

Add the Location Tree

1. At the top of the tree panel, click the arrow button.

2. Select All Locations tree.

   

The tree panel label changes from No Tree to Organizational Zone.

Configure the Data Source

1. Click Edit Method.

2. In the Select an RBAC View Method dialog, enter groupview in the search box.

3. Click Search to see all group-related view methods.

   

4. Select GetByOrgZoneID (this method retrieves all groups for a selected location).

5. Click OK.

   

The method name appears beside the button and the grid UI displays with additional controls.

Configure Search

1. Above the grid, clear the Enable Tags checkbox (we're not using tags).

2. Ensure the Enable Search checkbox is selected.

3. Below the grid, ensure Is Search Panel Visible is selected.

4. Click Edit Search Criteria.

5. In the Edit Search Details dialog, select Is Advanced Search Enabled.

   

6. Click Add New and configure the first search field:

   • Field to Search: LogonName
   • Display Name: Logon Name
   • Search Type: String

7. Repeat for these additional fields:

   • Display Name (field: FriendlyName)
   • Description (field: Description)
   • Email (field: Email)

8. Click OK when all fields are added.

   

Add Grid Columns

1. Click Add New Column.

2. In the Field Selector dialog, configure:

   • Value Format: Auto
   • Label: Logon Name
   • Field Name: LogonName

3. Click OK.

   

4. Repeat for these additional columns:

   • Display Name (field: FriendlyName)
   • Description (field: Description)
   • Email (field: Email)

Add Action Panel

1. Right-click the All Groups tab.

2. Click the No Action Tab arrow.

3. Scroll down and select the Group action panel.

   

The action panel provides context-sensitive operations based on the selected group.

Create the Second Tab

1. Above the existing tab, click Add Tab.

   A new tab named No Tree appears.

   

2. Click the new tab to open its workspace.

3. Right-click the tab and select Edit Name.

4. Change the name to Groups I Manage.

5. Click OK.

6. Leave the Tree setting as No Tree (this tab doesn't need location filtering).

7. Clear the Enable Tags checkbox.

Configure the Data Source

1. Click Edit Method.

2. Enter groupview in the search box and click Search.

   

3. Select GetGroupsIManage.

4. Click OK.

   

The method name appears and the grid displays with controls.

Configure Search

1. Ensure Enable Search is selected above the grid.

2. Ensure Is Search Panel Visible is selected below the grid.

3. Click Edit Search Criteria.

4. Select Is Advanced Search Enabled.

   

5. Add these search fields:

   • Logon Name (field: LogonName)
   • Display Name (field: FriendlyName)
   • Description (field: Description)

6. Click OK.

   

Add Grid Columns

Add these columns using Add New Column:

1. Display Name (field: FriendlyName)
2. Logon Name (field: LogonName)
3. Notes (field: Notes)
4. Description (field: Description)
5. Allow Access Requests (field: AllowAccessRequests)
6. Email (field: Email)

Configure each column:

• Value Format: Auto
• Label: (column display name)
• Field Name: (field name listed above)

Add an Action Tab

For a unified view of available operations:

1. Above the tabs, click Add Tab.
2. Right-click the new tab.
3. Select Action Tab.
4. Select Group to match the grid type.

The action tab displays available operations and updates based on the selected item in either tab.

Publish and View the Page

1. Right-click the UI Page tab and select Save Changes.
2. Click Compile and Publish above the UI Page tab.
3. In the publishing wizard, click Next.
4. Select the server hosts for deployment.
5. Click Next and wait for successful publication.
6. Click No when prompted to restart services.

Access Your Page

1. Open SQL Server Management Studio.

2. Connect to your EmpowerID database.

3. Execute this query:

   SELECT * FROM RBACView

4. Find your package in the results and note its RBACViewID.

5. Navigate to:

   https://your-server.com/UI/#common/pages/view/YOUR_RBACVIEWID

Your custom Groups management page loads with both tabs, the location tree, search functionality, and action panels.

Tips for Multi-Tab Pages

Tab Organization:

• Group related data views in separate tabs
• Use consistent naming conventions
• Consider the most frequently used view as the first tab

Trees and Filters:

• Add trees when users need to filter by organizational structure
• Location trees work well with "GetByOrgZoneID" type methods
• Consider whether each tab needs its own tree

Search Configuration:

• Match search fields to the data users actually search for
• Include properties on the tab for search fields to function
• Advanced search is optional - basic search may suffice for simple tabs

Action Panels:

• Action panels automatically show relevant operations
• They update based on the selected item
• Use the same action panel type across tabs for consistency

Column Selection:

• Display only columns users need to see
• Consider column width when adding many columns
• Use hyperlinks for navigational columns (requires included properties)

Related Topics

• Create a Simple Page with Advanced Search - Learn the basics of page creation