Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The EmpowerID web user interface is made up of the pages within the UI container role as well as the user interfaces provided by the microservices applications (e.g. IT Shop, My Identity, etc.). The user interface within the UI container role adheres to a defined structure which is helpful to understand when supporting the EmpowerID platform and communicating with EmpowerID support staff.

Overview

  • The pages in the UI container role are a responsive design web application built using Microsoft ASP.NET MVC and HTML5

  • The user interface is themeable/ brandable and can be branded and styled using CSS and JavaScript

  • Out-of-the-box pages can be “overridden” with custom pages by copying your custom page of the same name into a mirrored folder structure called “Overrides”

  • Pages can be classified based on a few specific templates that are repeated for different types of objects (e.g. People, Groups, etc.)

Navigation Sidebar

  • The Sidebar is how you navigate the pages of the EmpowerID Web site and search for people and other types of resources.

  • The sidebar is “security trimmed” which means that the number of sections and links in the sidebar that a user can see will differ according to the amount of access your organization has given them.

  • The sidebar also contains the Global Search control

    Image AddedImage Added
Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>About the Navigation Sidebar</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/NavSidebar.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

...

Find Pages

  • Each type of object in the EmpowerID system has a Find page that lists the objects of that type stored or referenced in the Identity Warehouse

  • The URL for Find pages is: https://%yourserver%/ui#Common/Find/%ObjectName%

  • On the server Find pages are located under %InstallFolder%\EmpowerID\Web Sites\EmpowerID.Web.PortableAreas.Common\Views\ObjectTypeSearch

  • Find pages typically contain one or more tabs listing objects of that type

  • Find pages can optionally also include a Tree pane of locations on the left and an action pane of workflows and page actions on the right

    Image Added


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Find Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/FindPages.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

...

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n

...

<h3>Management Role Find Page</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/FindPageExample.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

View One Pages

...

  • View One pages are what display a single instance of any object. For example, when clicking on the link for a group in the Find Group page the next page to load is the

...

  • View One page for that group

...

  • View One pages are typically read-only and are used to display information about an object and any related data

  • More than one

...

  • View One page can exist for a specific type of object in order to show only relevant fields in cases where a single type might have many subtypes – e.g. Account for AD versus Account for Office 365

  • The specific

...

  • View One page to be loaded is defined by logic on the SQL view and configured in what is called ResourceTypeFormIdentitifiers that define each subtype and the

...

  • View One and Editone to load

...

  • View One pages are located:

    • %InstallPAth%Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\ViewOne\Details

    Image Added


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>View One Page</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/ViewOnePages.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

...

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>View One Page Example</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/ViewOnePageExample.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth: 50%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Edit One Pages

...

  • Edit One pages are what display a single editable instance of any object. For example, when clicking on the link for a group in the group’s

...

  • View One page, the next page to load is the

...

  • Edit One page for that group

    • More than one

...

    • Edit One page can exist for a specific type of object in order to show only relevant fields in cases where a single type might have many subtypes – e.g. Account for AD versus Account for Office 365

    • The specific

...

    • Edit One page to be loaded is defined by logic on the SQL view and configured in what are called ResourceTypeFormIdentitifiers that define each subtype and the

...

    • View One and

...

    • Edit One to load

...

    • EditOne pages are located:

      • %INSTALLPATH%\Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\EditOne

    • Each

...

    • Edit One page will send its edited data to one or more workflows for processing

    Image Added


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Edit One Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/EditOnePage.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

...

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Edit One Page Example</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/EditOnePageExample.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

...

ResourceTypeFormIdentifiers

The specific

...

View One page or

...

Edit One page that loads for an object is defined by logic on the SQL view and configured in what

...

EmpowerID calls “ResourceTypeFormIdentitifiers.” These define each subtype and the

...

View One and

...

Edit One to load.

They can be seen and configured

...

in the EmpowerID UI at the following URL: https://%yourserver%/ui#Common/Find/ResourceTypeFormIdentifier

Image Modified


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Resource Type Form Identifiers</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/FormIdentifiers.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Report Pages

Report pages use the same template as Find pages and are designed to show some specific view of the data

Image Modified


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Report Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/ReportPages.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Run Workflow Page

  • Workflows are run either as anonymous or authenticated

  • Anonymous workflows run from:

    • https://%yourserver%/ui#aw/%workflowname%

  • Authentication workflows run from:

    • https://%yourserver%/ui#w/%workflowname%


Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Run Workflow Page</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/RunWorkflowsPage.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Branding the UI Role Container Web Site

  • The default look and feel of the UI role container web application (not microservices) can be changed by overriding the CSS rules and images used for this website.

  • The theme of the UI role container web application can be changed globally or even have a different theme for each URL you expose.

  • First, create a new folder named after the FQDN or fully resolvable DNS of the tenant in the Overrides/Tenants directory of the EmpowerID Web CDN. E.g. "%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\CustomTenantFolder," where "CustomTenantFolder" is the name of the folder you are creating.

  • Once you have added the folder, you need to do the following:

    • Create a child folder named Themes in the custom folder. For example, if you are creating a custom FQDN folder for a Tenant with a FQDN of sso.andysbeans.com, you first create a sso.empowerid.com folder in the above-mentioned directory, then create within that folder the Themes folder.

    • Create a child folder named EmpowerID in the Themes folder.

    • Create a child folder named Images in the EmpowerID folder.

...

  • Custom images can be placed in:

    • "%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\<YourCustomTenant>\Themes\EmpowerID\Images

  • Custom CSS can be added to the blank overrides.css file in:

    • %INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\<YourCustomTenant>\Themes\overrides.css

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n

...

<h3>Branding the Site</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/Branding.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}

...

\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r

...

Custom images can be placed in:

  • "%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\<YourCustomTenant>\Themes\EmpowerID\Images

Custom CSS can be added to the blank overrides.css file in:

...

\n\r\n\r\n\r\n\r\n\r\n}"}

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Inserting Custom Images and CSS</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/BrandingProcess.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 20px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}

Overriding Out-of-the-Box Pages

  • When customizing Web pages, it is recommended that you use EmpowerID's Override technology rather than modifying the original pages.

  • This allows you to quickly revert back to the original pages if the custom pages are no longer needed.

  • To use the Override technology, you add your pages to an Overrides folder structure in the EmpowerID Web Sites directory and place your custom pages within that directory.

  • The Overrides structure mirrors the shipping page directory structure so that pages copied into the corresponding location with the same names will be loaded preferentially

  • E.g.. for

...

  • View One pages:

    • EmpowerID.Web.Overrides\Areas\Common\Views\ViewOne\Details

Warning

Never customize any shipping pages or JavaScript files outside of the overrides

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<article>\r\n <div class=\"cont\">\r\n <h3>Overriding Pages</h3>\r\n </div>\r\n <audio controls>\r\n <source src=\"https://docs.empowerid.com/assets/audio/Overrides.wav\" type=\"audio/wav\">\r\n</audio>\r\n \r\n</article>\r\n","javascript":"","css":"@import 'https://fonts.googleapis.com/css?family=Lato';\r\n\r\n\r\nbody {\r\n\t\r\n\tfont-family: 'Lato';\r\n}\r\n\r\narticle{\r\n\tbackground: #343436;\r\n\twidth:

...

80%;\r\n\ttext-align: center;\r\n\tpadding: 30px 5%;\r\n\tbox-sizing: border-box;\r\n\tbox-shadow: 0 0 21px 0px rgba(0,0,0,0.3);\r\n\tborder-radius: 10px;\r\n\tmargin-left: 40px;\r\n}\r\n\r\n.cont h3{\r\n\tfont-family: 'Lato';\r\n\tfont-size: 22px;\r\n\tmargin: 0 0 10px 0;\r\n\tcolor: #ccc;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n}"}