Create a Simple Page with Advanced Search

The Page Designer enables you to create custom UI pages for the EmpowerID web interface using a visual, code-free approach. This tutorial shows you how to create a simple page with a data grid and advanced search functionality.

What You'll Build

In this tutorial, you'll create an Account Usage page that displays:

• A searchable grid of account data
• Multiple columns with different data types
• An advanced search panel with custom search fields
• Pagination for large datasets

Prerequisites

• Workflow Studio installed and configured
• Access to create UI pages in your target package
• Basic understanding of EmpowerID data concepts (accounts, people, etc.)

Create the Page

1. Open Workflow Studio and select the Solution Explorer.
2. Click the Workspace tab.
3. Right-click the package where you want to create the page.
4. Select Add New Item > User Interface > UI Page.

info

The new page is stored in the selected package under User Interface > UI Pages.

5. In the Add New UI Page dialog, enter a name for the page (e.g., AccountUsage).
6. Click OK. The Page Designer opens with an empty page.

Add a Tab

1. Click Add Tab. A new tab appears named No Tree by default, with controls along the top.

2. Right-click the tab name and select Edit Name.

3. Enter a descriptive name that matches your page purpose (e.g., Account Usage).

4. Click OK.
   

5. Leave the Tree dropdown set to No Tree for this simple page.

   tip

   For information about adding trees to pages, see Create a Multi-Tab Page.

Configure the Data Source

1. Click Edit Method in the controls along the top of the tab.
2. In the Select an RBAC View Method dialog, click Search to see all available methods.
3. To narrow the results, enter a search term (e.g., AccountView for account-related data).
4. Click Search.
5. Select the appropriate method for your data (e.g., GetAllSearch).
6. Click OK. The method name now appears to the left of the Edit Method button, and additional controls appear along the bottom of the grid.

Grid Types

If you want to replicate an existing grid with predefined columns, click Set To GridType and select the grid you want. This replaces any columns you've already added.

For this tutorial, leave the default value of Custom.

Enable Pagination

Since the GetAllSearch method can return large amounts of data, enable pagination to improve page load times:

1. Below the grid, select the Is Paging Enabled checkbox.

Add Grid Columns

Add columns to display the data you want users to see:

1. Click Add New Column.
2. In the Field Selector dialog, configure the first column:
   • Field Name: AccountID
   • Label: Account ID
   • Value Format: (leave as default)
3. Click OK. The column is added to the grid.

Editing Columns

Right-click any column to edit or delete it.

4. Repeat the process to add these additional columns:

   Active Column:

   • Field Name: Active
   • Label: Active
   • Value Format: BooleanCheckBox

   Logon Name Column (with hyperlink):

   • Field Name: LogonName
   • Label: Logon Name
   • Value Format: Hyperlink
   • URL: view/Account/{AccountID}
   Required Property

   To enable the hyperlink, you must include the property on the tab:

   1. Right-click the tab above the tree pane
   2. Select Included Properties
   3. Scroll down and check LogonName

   Responsible Person Column (with hyperlink):

   • Field Name: OwnerFriendlyName
   • Label: Responsible Person
   • Value Format: Hyperlink
   • URL: view/Person/{PersonID}

   Usage Type Column:

   • Field Name: AccountUsageTypeFriendlyName
   • Label: Usage Type

5. Use your mouse to resize column widths as needed.

Add Advanced Search

The basic search box is enabled by default at the top of the page. To add custom search fields:

1. Below the grid, click the Edit Search Criteria button.
2. In the Edit Search Details dialog, select Is Advanced Search Enabled at the bottom left.
3. Click Add New to add a search field.
4. Configure the first search field:
   • Field to Search: Select a field from the dropdown
   • Display Name: Enter the label users will see
   • Search Type: Select the data type (e.g., String, Date, Boolean)
5. Repeat for each field you want users to search by.

Reuse Existing Search Fields

If you want to use the same search fields as an existing EmpowerID page, click Set to GridType and select the grid with the desired search configuration.

6. Click OK when finished adding search fields.

Include Search Properties

For search fields to function, you must include them as properties on the tab:

1. Right-click the tab.
2. Select Included Properties.
3. Check each field you added to the advanced search.

Properties that are included show a checkmark in the list.

Publish the Page

1. Right-click the UI Page tab and select Save Changes.
2. Click the Compile and Publish button above the UI Page tab.
3. In the UI Page Publishing wizard, click Next.
4. Select the server hosts where you want to publish the page. The default host is your current server.
5. Click Next.
6. When the success message appears, click OK.
7. When prompted to restart services, click No. You do not need to restart services to view new or updated pages.

View the Page

To access your newly created page:

1. Open Microsoft SQL Server Management Studio.

2. In the Object Explorer, expand Databases and select EmpowerID.

3. Click New Query in the toolbar.

4. Execute the following query:

   SELECT * FROM RBACView

   

5. In the results, find the row for your package.

6. Note the RBACViewID value for your page.

7. In a browser where you're logged into EmpowerID, navigate to:

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

   Replace your-server.com with your EmpowerID server URL and YOUR_RBACVIEWID with the ID from the database query.

Your custom page loads with the grid, columns, and advanced search functionality you configured.

Related Topics

• Add multiple tabs to your pages - see Create a Multi-Tab Page