USER INTERFACE IMPROVEMENTS Free Friday Tech Huddle 1 ▪ Internal Use - Confidential INTRODUCTION ▪Pre 6.7 release − Mega Menu limitations − Visual appearance challenges − Busy Record page − Lack of modern UI experience − Difficulty ramping up new user 2 ▪ Internal Use - Confidential WHAT HAS CHANGED ▪Clean, Modern and Intuitive User Interface ▪Improved Navigation in RSA Archer ▪Reduction in number of “clicks” to access commonly used functions ▪Better control over appearance and branding of RSA Archer ▪Better support for accessibility requirements ▪Transition to the newest technology – React and Material Design 3 ▪ Internal Use - Confidential WHAT IS NEW ▪Simple and intuitive Archer Global Navigation ▪Improved, Modern UI Appearance ▪Improved Record page Toolbar/header ▪Dashboard and iView modernization ▪New Landing Page – Global iView ▪Reimplemented Manage Language page 4 ▪ Internal Use - Confidential GLOBAL NAVIGATION 5 ▪ Internal Use - Confidential CHANGES ▪ Features introduced: - Environment Bar - Global Header and Navigation Menu - Access to commonly used features - Flex Workspace Management in Navigation Menu ▪ Features removed: - Mega Menu - "Show all workspaces" from Navigation Menu - Icons/images for workspaces in Nav Menu 6 ▪ Internal Use - Confidential GLOBAL HEADER AND NAVIGATION MENU Master Display control Environment Bar Header Logo Tasks & Activities Reports List Flex Workspace Workspace Contextual Menu Global Search Admin Menu Help User Menu 7 New in 6.7 Feature Parity ▪ Internal Use - Confidential ENVIRONMENT BAR ▪ Displays Environment identity to user (dev, test, etc.) − Once enabled, it will always be visible − Settings cannot be copied from an env to another − Preferred # Char <= 30 characters − Not recommended for use to communicate other messages Environment Bar 8 ▪ Internal Use - Confidential HEADER LOGO Header Logo ▪ Provides better branding opportunity − System will resize the logo image to fit in the height of Global Header − System will maintain aspect ratio while resizing the image − Ensure that selected image has proportional height and width dimension − Max height of logo image in Global Header is 36 px 9 ▪ Internal Use - Confidential HEADER DISPLAY CONTROL ▪ User can control visibility of Global Header/Nav Menu to increase the details viewing area ▪ Color is system defined (shade of blue) – to be in sync with colors of other actions ▪ Has no influence on display of Environment bar ▪ Short-cut key to toggle show/hide: Ctrl + Alt + H Show/Hide Control 10 ▪ Internal Use - Confidential TASKS AND ACTIVITIES ▪ Easy access to Task Driven Landing page while allowing customization of default home page ▪ Future release will split activities and task in separate icons/actions with independent drop-downs Activities Tasks 11 ▪ Internal Use - Confidential MASTER REPORT LIST ▪ Quick access to Master Report Listing Master Report List 12 ▪ Internal Use - Confidential FLEX WORKSPACE MANAGEMENT ▪ “Show all” is discontinued ▪ Functionality split in two places: − Flex workspace (new way of access to workspace) − Setting the order of workspace now available in “Workspaces Display” under “User Options” Flex Workspace Control Sequencing of workspaces 13 ▪ Internal Use - Confidential REORDERING OF WORKSPACE ▪ Two options are supported: Display workspace, Reorder sequence of workspace − Selecting a check-box will enable display of workspace − Clicking and dragging workspace name (or sort handle) up and down will allow reordering of work space − Once saved, all the workspaces not being displayed will always be sorted after the workspaces to be displayed Drag and drop for resequencing 14 ▪ Internal Use - Confidential 1. Select FLEX WORKSPACE MANAGEMENT workspace ▪ Control visible when workspaces to display is more than the space in Nav Menu − Reduces number of clicks when repeated access to the overflow 2. Issue Mgmt in Nav workspace Menu − The last workspace displayed in Nav Menu is in “Flex space” − User selects a workspace from overflow drop-down 3. Third Party Mgmt − The workspace now replaces the last moved to drop-down workspace displayed in “Flex space” − The same workspace will be displayed till Nav Menu is refreshed or another overflow workspace is selected by user 15 ▪ Internal Use - Confidential CHANGES TO NAV MENU DROP-DOWN ▪ Dashboards and Quick links are discontinued from drop-down − A click on workspace name takes user to default dashboard − Access to other dashboards and Quick links through Dashboard page − Questionnaires and apps are under workspace accordion − All quick actions are still available upon hover-over on application/questionnaire ▪ Workspace accordion status is saved in browser memory. − System will display expanded accordion till Nav Menu is refreshed 16 ▪ Internal Use - Confidential GLOBAL SEARCH, HELP AND USER MENU ▪ No changes to behavior of Global Search. Except… − If no match is found, the global search drop-down will not give option to display all results ▪ No changes to Contextual Help ▪ User Option changes: − Accordion view to the options − User Name is used as label (replaced the “First name with “User Name”) − Reports option shifted to Navigation Menu 17 ▪ Internal Use - Confidential ADMIN MENU ▪ One column collapsible accordion view ▪ Access to Administration dashboard through “Administration” option on top of the menu 18 ▪ Internal Use - Confidential DEMO 19 ▪ Internal Use - Confidential ENVIRONMENT BAR CONFIGURATION ▪ Configuration: − Go to Back Office: Appearance page − Check Display Environment bar box − Enter Instance Name, Select Background Color and Text color − Save the changes 20 ▪ Internal Use - Confidential HEADER LOGO ▪ Displaying the Logo − Go to Back Office: Appearance page − Select “Header” under Graphics − Save the changes 21 ▪ Internal Use - Confidential IMPROVED UI APPEARANCE 22 ▪ Internal Use - Confidential MANAGE APPEARANCE PAGE ▪ Environment bar section has been added. ▪ Primary and secondary color options are eliminated ▪ Graphics section labels are changed to Header and Footer. 23 ▪ Internal Use - Confidential RECORD PAGE WITHOUT AWF ▪ Default colors are set for buttons, section header, text, links and the background 24 ▪ Internal Use - Confidential SEARCH RESULT PAGE 25 ▪ Internal Use - Confidential ADMINISTRATION/BACK OFFICE PAGE 26 ▪ Internal Use - Confidential RECORD PAGE HEADER /FOOTER UPDATE 27 ▪ Internal Use - Confidential RECORD PAGE CHANGES Application: Record ID Sticky Edit/View Header Toggle Additional System Actions defined colors for • New action • Save buttons • Download • Email • Copy • Print System • Delete defined • Access neutral • Recalculate colors • Reference 28 ▪ Internal Use - Confidential RECORD PAGE WITH AWF TRACKER Save action in one click Action Drop-down Work Flow action and Save action 29 ▪ Internal Use - Confidential RECORD PAGE WITH AWF TRACKER Full history Workflow tracker 30 ▪ Internal Use - Confidential CONFIGURING AWF TRACKER DISPLAY ▪ Navigate to Application Builder -> Specific Application -> Advanced Workflow Tab − Select the ‘Enable Workflow Auditing’ ▪ Edit ‘Audit Settings Permission’ field − Do not set permission if all users is to see the tracker − Else select list of users who should be able to see tracker if so desired 31 ▪ Internal Use - Confidential DEMO 32 ▪ Internal Use - Confidential DASHBOARD AND IVIEW MODERNIZATION 33 ▪ Internal Use - Confidential DASHBOARD IMPROVEMENTS ▪ UI changes to Dashboards: − Aesthetically pleasing and accessibility compliant color scheme, font sizes, padding and other clean up − Sticky Dashboard Header − Dashboard selector in dashboard header − Addition of Share icon with two options: Copy the page link or Email the page link 34 ▪ Internal Use - Confidential IVIEW UI IMPROVEMENTS ▪ Relocated refresh icon ▪ Changed resizer icon ▪ Larger title font size ▪ Changed options button icon ▪ Options button and the resizer icons appear on hover ▪ Changed iView dropdown background color ▪ Increased all-around padding inside the iView 35 ▪ Internal Use - Confidential LINKLIST IVIEW CHANGES ▪ Supports only 1 column layout ▪ Size of the link image ▪ Font size and color of links has changed ▪ On hover, Link text changes the color and displays underline ▪ Layout of components on the iView 36 ▪ Internal Use - Confidential DEMO 37 ▪ Internal Use - Confidential LANDING PAGE IVIEW 38 ▪ Internal Use - Confidential LANDING PAGE IVIEW 39 ▪ Internal Use - Confidential CREATING A LANDING PAGE IVIEW ▪ Go to the Manage Global iViews page ▪ Click Add New ▪ Select Landing Page ▪ Click OK 40 ▪ Internal Use - Confidential LANDING PAGE IVIEW ▪ In the General Information section, enter the name and description. In the Folder field, select or create a folder. 41 ▪ Internal Use - Confidential LANDING PAGE IVIEW ▪ Complete the Options section. In the Background field, add a graphic. ▪ In the Title field, enter a title for the Landing Page iView 42 ▪ Internal Use - Confidential LANDING PAGE IVIEW ▪ In the Configuration section, click Add New to add a new link. ▪ Enter the Name, Link, and Primary Graphic. Primary Graphic can be a Standard Icon or Custom Image. 43 ▪ Internal Use - Confidential LANDING PAGE IVIEW ▪ (Optional) In the Documentation section, click Add New to add documentation ▪ Save the iView 44 ▪ Internal Use - Confidential LANDING PAGE IVIEW ▪ In the front office Dashboard drop-down menu, add the iView from “Add iView content”. Select created iView or create new from scratch. 45 ▪ Internal Use - Confidential SETTING AS HOME ▪ From the Landing Page iView menu, we can select Set as Home 46 ▪ Internal Use - Confidential .