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.

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.

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.

select * from RBACViewTreeMethod

 

 

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.

Tree

Description

Tree

Description

No Tree

No tree is shown, and you can select from a wide range of methods to return data for the page. 

Business Role all Organizations

The left panel contains a tree that shows Business Roles in all of the organizations in the enterprise.

Business Role

The left panel contains a tree that shows only Business Roles in the default organization.

Locations all Organizations

The left panel contains a tree that shows Locations in all of the organizations in the enterprise.

All Locations

The left panel contains a tree that shows Locations in only the default organization.

Active Directory Domains by Forest

The left panel contains a tree that shows Active Directory domains grouped by forest. 

Service Catalog Directories by Organization

The left panel contains a tree that shows service catalog directories grouped by organization.

SharePoint Site Collections

The left panel contains a tree that shows SharePoint Sites grouped by collection. 

Account Store Directories

The left panel contains a tree that shows Account Store directories. 

Active Directory Domains

The left panel contains a tree that shows service catalog directories grouped by organization. 

SharePoint Sites

The left panel contains a tree that shows service catalog directories grouped by organization. 

Protected Application Resource Tree

The left panel contains a tree that shows protected application resources. 

Protected Application Tree Start Node Specified

The left panel contains a tree that shows protected applications with start nodes. 

Application APIs

The left panel contains a tree that shows Azure system modules by resource system.

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.

 

Setting

Description

Setting

Description

Enable Search

Selected by default, this setting enables the basic search box at the top of the tab.

Is Search Panel Visible

Selected by default, this setting displays the basic search box at the top of the tab.

Edit Search Criteria

Empty by default, this opens a dialog where you can add fields to the advanced search panel.

 

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