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
Right-click the Stored Procedure folder and select Filter, then Filter Settings.
In the Filter Settings dialog, enter a Value, for example,
GetByOrgZoneID
.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 |
---|---|
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 |
---|---|
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%
Â