Code-Free Page Designer

In Workflow Studio, the Page Designer allows you to design your own web pages and reports using the same objects used in many existing EmpowerID pages without coding. These include,

Design Elements

• Grids

• Tabs

Data

• Stored Procedures (Methods)

• Parameters

User Input Controls

• Advanced Search Panels

• Trees

Each offers choices that you can customize to create exactly the page that you need.

The main component that every page shares is the grid. The grid displays data that you pull from the EmpowerID SQL database via an API endpoint using a method and, if applicable, parameters. 

In this topic, we explore these objects and how you can use them.

Grids 

The grid is the basis of every page that you create using the Page Designer. Each grid is populated with data pulled by either a stored procedure or a search method.

Open

You can elect to enable paging to keep from returning a long grid that can take time to load. This allows your users to select the number of items to display per page, like most existing grids in EmpowerID.

Columns

You can add, edit, delete, resize, and reorder columns within the grid using drag-and-drop functionality or context menus. There are also a number of pre-configured sets of columns that you can select by clicking Set to GridType. The default value for this is _Custom_, which allows you to add any combination of columns.

When you add or edit a column, you use the Field Selector dialog, where you can select the Field Name from those returned by the method, customize the column header label and data formatting, and select images if applicable. The edit button to the right of the Label field allows you to set a Locale Key for the column to allow users to localize the column header text.

Open

Tabs

By default, the designer starts you off with a blank page to which you can add one or more tabs. The simplest page that you can create is one with a single tab, no tree, and a method that pulls data to display in the grid. You can find an example of this type of page in the EmpowerID web UI by expanding Identity Administration > Specialized Systems and selecting White Pages from the navbar.

You can see examples of multi-tab pages throughout the application. The below example is the Find Applications page, which you can access from the navbar by expanding Apps and Authentication and selecting Applications.

Right-clicking a tab at design time reveals options that you can set on it. You can:

• edit the text that displays on the tab

• delete the tab

• select properties to include in the data returned by the stored procedure

• edit tree parameters (if applicable)

• select an Action tab to add

One grid displays per tab, so you can add more tabs if you need them, each with different trees (or no tree) and using different methods to populate their respective grids.

Methods

Each Workflow Studio tree method corresponds to a stored procedure in the EmpowerID SQL database.

If you run this SQL query in Microsoft SQL Server Management Studio, you can see all of the trees that you can use in pages.

Methods to list the data in the grid are enumerated via reflection so you must ensure you select a method that will work with the tree option you selected.

Parameters

Some trees have parameters, and many methods have parameters as well. 

In Microsoft SQL Server Management Studio, expand Databases, then EmpowerID, then Programmability to access the Stored Procedures folder containing all of the methods. You can filter the folder to work with a smaller subset of methods.

To filter the folder

1. Right-click the Stored Procedure folder and select Filter, then Filter Settings.

2. In the Filter Settings dialog, enter a Value, for example, GetByOrgZoneID.

3. Expand the folder, right-click a stored procedure, for example, dbo.Custom_GroupView_GetByOrgZoneID, and select Modify to view the stored procedure.
   
   

In each stored procedure, you can see all of the parameters in parentheses just below ALTER PROCEDURE.

You can hard code parameter values in the Page Designer if they are connected to the RBACViewMethod via an entry in the RBACViewMethodParameter table. All search methods have default parameters like ColumnsToSearch and TextToSearch. These are not parameters for which you can hard-code values, but others, like OrgZoneID or OrgRoleID, can be hardcoded in the Page Designer.

Trees

You can opt to use a tree in the left pane of any tab to allow the user to scope the data displayed in the grid.

Here is a table of the included trees and their related methods.

Advanced Search Panels

In EmpowerID find pages, there is often an advanced search panel that you can drop down to search for objects by specific fields, such as Department or Manager.

In the Page Designer, you can create your own custom advanced search panel. There are several related settings in the UI for each tab.

Click the Edit Search Criteria button to open the Edit Search Details dialog.

Here you can select the Is Advanced Search Enabled setting that adds the drop-down panel for advanced search fields. You can add new fields individually or select a Grid Type that already has the fields you want. To select a predefined grid type, click the Set to GridType button and then select the desired type of grid.

To view your new page, you’ll need to run the publishing workflow and select the *.pub file for your new page. After this, you’ll be able to browse your new page at the following URL: https://%YOURSERVERNAME%/ui/#Common/pages/viewbyname?name=%YOURPAGENAME%

Create a simple page with advanced search

Create a Multi-Tab Page

Custom CSHTML Report Page Creation