he The EmpowerID web Web user interface comprises pages within the UI container role as well as the and user interfaces provided by microservices applications (e.g., IAM Shop, My Identity, etc.). Understanding the defined structure of the user interface within the UI container role is beneficial for supporting the EmpowerID platform and communicating with EmpowerID support staff.
Key
...
Features of
...
UI Pages
Responsive Design: Built using Microsoft ASP.NET MVC and HTML5.
...
Brandable Interface: Customizable and styleable using CSS and JavaScript.
...
Override Capability: Out-of-the-box pages can be overridden with custom pages by
...
placing them in a mirrored folder structure called "Overrides."
...
Template-Based: Pages are classified based on
...
specific templates that are
...
reused for different types of objects (e.g., People, Groups
...
Navigation SidebarThe Navigation Sidebar is the primary tool for navigating through the pages of the EmpowerID website and searching for people and various types of resources. Notably, the sidebar is "security trimmed," meaning that the number of sections and links visible to a user depends on the level of access granted by your organization. Additionally, the sidebar includes the Global Search control for quick and easy searches. Image ModifiedImage Modified
| 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 PagesIn the EmpowerID system, each object type has a Find page that displays 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 usually consist of one or more tabs listing objects of that specific type Optionally, Find pages can also feature a Tree pane of locations on the left and an action pane of workflows and page actions on the right. Image Modified
| 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 PagesView One pages display a single instance of any object. For example, when clicking on a group link in the Find Group page, the next page to load is the View One page for that group. Key characteristics of View One pages include: They are typically read-only and used to display information about an object and any related data. Multiple View One pages can exist for a specific object type to display only relevant fields when a single type has various subtypes (e.g., Account for AD versus Account for Office 365). The specific View One page to be loaded is determined by logic on the SQL view and configured in ResourceTypeFormIdentifiers, which define each subtype and the View One and Editone to load. View One pages are located: Image Modified
| 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: 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}"} |
---|
| |
|
Edit One PagesEdit One pages display a single editable instance of any object. For example, when clicking on a group link in the group's View One page, the next page to load is the Edit One page for that group. Key characteristics of Edit One pages include: Multiple Edit One pages can exist for a specific object type to display only relevant fields when a single type has various subtypes (e.g., Account for AD versus Account for Office 365). The specific Edit One page to be loaded is determined by logic on the SQL view and configured in ResourceTypeFormIdentifiers, which define each subtype and the View One and Edit One to load.
Edit One pages are located at: %INSTALLPATH%\Root\UI\Web Sites\EmpowerID.Web\EmpowerID.Web.PortableAreas.Common\Views\EditOne
Each Edit One page sends its edited data to one or more workflows for processing. Image Modified
| 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}"} |
---|
| |
|
ResourceTypeFormIdentifiersResourceTypeFormIdentifiers determine the specific View One and Edit One pages to load for an object, based on the logic configured in the SQL view. These identifiers define each subtype and their corresponding View One and Edit One pages. You can view and configure ResourceTypeFormIdentifiers in the EmpowerID UI by visiting 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 PagesReport 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 PageWorkflows in EmpowerID can be executed as either anonymous or authenticated: Anonymous workflows run from the following URL: https://%yourserver%/ui#aw/%workflowname% Authenticated workflows run from the following URL: 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 SiteTo customize the look and feel of the UI role container web application (excluding microservices), you can override the default CSS rules and images used for the website. You can change the theme globally or have different themes for each exposed URL. Follow these steps: Create a new folder named after the FQDN or fully resolvable DNS of the tenant in the EmpowerID Web CDN Overrides/Tenants directory: "%INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants\CustomTenantFolder ", where "CustomTenantFolder" is the name of the folder you create. Create a child folder named "Themes" within the custom folder. Create a child folder named "EmpowerID" within the "Themes" folder. Create a child folder named "Images" within the "EmpowerID" folder.
To customize images, place them in: %INSTALLPATH%\Web Sites\EmpowerID.Web.Cdn\Overrides\Tenants<YourCustomTenant>\Themes\EmpowerID\Images
To add custom CSS, edit the blank "overrides.css" file located 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\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 PagesTo customize web pages without altering the original pages, use EmpowerID's Override technology. This allows you to easily revert to the default pages if needed. Follow these steps to use the Override technology: Create an "Overrides" folder structure within the EmpowerID Web Sites directory that mirrors the shipping page directory structure. Place your custom pages with the same names as the original pages in the corresponding locations within the Overrides folder structure. EmpowerID will load the custom pages preferentially.
For example, to override View One pages, place your custom pages in: EmpowerID.Web.Overrides\Areas\Common\Views\ViewOne\Details
Warning |
---|
Always use the Overrides folder for customizations and avoid modifying shipping pages or JavaScript files outside of the Overrides directory. |
| 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}"} |
---|
| |
|
Macrosuite divider macro |
---|
dividerWidth | 80 |
---|
dividerType | text-with-icon |
---|
emoji | {"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"} |
---|
textColor | #000000 |
---|
dividerWeight | 3 |
---|
labelPosition | middle |
---|
textAlignment | center |
---|
iconColor | #0052CC |
---|
iconSize | medium |
---|
fontSize | medium |
---|
text | Related Topics |
---|
emojiEnabled | false |
---|
dividerColor | #DFE1E6 |
---|
dividerIcon | font-awesome/VoteYea |
---|
|
...