This page (revision-11) was last changed on 26-Nov-2021 10:22 by JMyers

This page was created on 26-Nov-2021 10:22 by JMyers

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
11 26-Nov-2021 10:22 6 KB JMyers to previous
10 26-Nov-2021 10:22 6 KB JMyers to previous | to last
9 26-Nov-2021 10:22 6 KB JMyers to previous | to last
8 26-Nov-2021 10:22 6 KB JMyers to previous | to last
7 26-Nov-2021 10:22 6 KB JMyers to previous | to last
6 26-Nov-2021 10:22 6 KB JMyers to previous | to last
5 26-Nov-2021 10:22 6 KB JMyers to previous | to last
4 26-Nov-2021 10:22 6 KB JMyers to previous | to last
3 26-Nov-2021 10:22 6 KB JMyers to previous | to last
2 26-Nov-2021 10:22 6 KB JMyers to previous | to last
1 26-Nov-2021 10:22 6 KB JMyers to last

Page References

Incoming links Outgoing links
SELF SERVICE 2.0...nobody
SELF SERVICE 2.0

Version management

Difference between version and

At line 3 changed 2 lines
The purpose of this document is to describe the technical aspects of the Self-Service 2.0 Layout. Self-Service 2.0 was designed and implemented with the following technical goals in mind: \\
#Should be free of the screen realty and browser-sizing issues, which plague the former Self-Service layout.
The Self-Service 2.0 layout was designed and implemented with the following technical goals in mind: \\
#Should be free of the screen realty and browser-sizing issues, which plagued the former Self-Service layout.
At line 7 changed one line
#Prototype should conform to High Line standard screen resolution of 800x600.
#Prototype should conform to system standard screen resolution of 800x600.
At line 10 changed one line
The first thing the user will notice is the layout itself. Gone is the over-crowding of boxes in the action bar, gone is the row of ambiguous Business Role icons and gone is the side navigation bar.\\
The first thing the user will notice is the layout itself. The over-crowding of boxes in the action bar, the row of ambiguous Business Role icons and side navigation bar have all been removed.\\
At line 13 changed 2 lines
Several things were done in the layout to maximize screen realty including trimming the action bar and Business Roles layouts, and changing the side navigation bar into a popup.\\
The Business Roles layout is now a widget, which displays the current Business Role and displays a drop-down menu of all available Business Roles when a mouse pointer hovers over it.\\
Several things were done in the layout to maximize screen realty including trimming the Action Bar and Business Roles layouts and changing the side navigation bar into a pop-up.\\
The Business Roles layout is now a widget, which displays the current business role and displays a drop-down menu of all available business roles when a mouse pointer hovers over it.\\
At line 16 changed 9 lines
The Action bar layout has been trimmed down to display only application-level buttons. The form action buttons (Save, Revert and Print) were relocated to just above the top-right corner of the content area and will be visible when a form is\\
open and hidden when the splash screen is displayed.\\
The show navigation menu button was relocated to the immediate left of the content title. \\
The side navigation bar has been replaced by a floating menu, which is hidden by default. The floating menu is “brought up” by clicking the show navigation button. The navigation menu floats over the content area and will display a submenu of menu items when hovering over a menu item in the first menu. The floating menu is dismissed by clicking anywhere in the layout not belonging to the menu layout. \\
!!Handling various browser-sizes and screen resolutions
The former Self-Service layout was “liquid” as it would stretch or contract to fit the dimensions of the browser window. Various browser-sizes and screen resolutions often cause issues in such layouts including unwanted wrapping of web objects or over-expanded text-areas. \\
The Action Bar layout has been trimmed down to only display application-level buttons. The form action buttons (Save, Revert and Print) were relocated to just above the top-right corner of the content area and will be visible when a form is open and hidden when the splash screen is displayed.\\
The Show Navigation menu button was relocated to the immediate left of the content title. \\
The Side Navigation bar has been replaced by a floating menu, which is hidden by default. The floating menu is “brought up” by clicking the Show Navigation button. The navigation menu floats over the content area and will display a sub-menu when your cursor hovers over an item in the parent menu. The floating menu is dismissed by clicking anywhere else in the layout. \\
!!Handling Various Browser Sizes and Screen Resolutions
The former Self-Service layout was “liquid”, meaning it would stretch or contract to fit the dimensions of the browser window. Various browser sizes and screen resolutions often cause issues in such layouts including the unwanted wrapping of web objects or over-expanded text areas. \\
At line 27 removed one line
800x600 1024x768 1280x1024 \\
At line 29 changed 2 lines
Browser Compatibility and following Web Standards actually go hand-in-hand. In order to be compatible with Mozilla FireFox 2, all HTML, CSS and JavaScript had to conform to current Web Standards. \\
The process of ensuring browser compatibility also involved making the layout completely frameless and replacing all HTML TABLE elements with DIV and SPAN elements. In addition, all HTML is completely styled using CSS ensuring a clear separation between style and content. \\
Browser compatibility and following Web Standards actually go hand-in-hand. In order to be compatible with Mozilla FireFox 2, all HTML, CSS and JavaScript had to conform to current Web Standards. \\
The process of ensuring browser compatibility also involved making the layout completely frameless and replacing all HTML TABLE elements with DIV and SPAN elements. In addition, all HTML is completely styled using CSS to ensure a clear separation between style and content. \\
At line 32 changed one line
Mozilla FireFox Microsoft Internet Explorer
!!Remove the Frame but Keeping the Functionality
It is also worth mentioning that although we didn’t want to work with Frame elements we wanted to keep the Frame functionality as it is very convenient to keep the application header static. \\
The content area sizes and re-sizes itself dynamically relative to the height of the browser window to ensure that the full height of the browser window is utilized.
At line 34 removed 6 lines
!!Ditching the FRAME but keeping the functionality
It is also worth mentioning that although we didn’t want to work with FRAME elements we wanted to keep the FRAME functionality as it is very convenient to keep the application header static. \\
The content area sizes and re-sizes itself dynamically relative to the height of the browser window to ensure that the full height of the browser window is utilized. This is best illustrated by viewing the layout in the 3 different resolutions in the previous section. In all 3 images, we see the content area dynamically sized relative to the browser window and never see the vertical scroll bar for the browser window, which allows the user to scroll through a form or splash menu but always keep the application header in view.
!!Frame action minus the FRAME.
At line 42 changed one line
*Browser Independent with compliance testing done on Mozilla Fire Fox 2, Microsoft Internet Explorer 7, and Apple Safari
*Browser independent with compliance testing done on Mozilla Fire Fox 2, Microsoft Internet Explorer 7, and Apple Safari
At line 47 changed one line
*Minimal usage of HTML Tables allowing for style to be separated from content
*Minimal usage of HTML tables allowing for style to be separated from content
At line 49 changed one line
*Conversion of JSP’s into Java Servlets to leverage java application architecture
*Conversion of JSP’s into Java Servlets to leverage Java application architecture
At line 54 changed 4 lines
*Form Specific Actions (Save, Revert, Print) have been removed from top action bar
*Role Bar now takes up less space
*Clicking on Role Bar will take you back to the splash screen for that role
*Clicking on Logo (top left) will take you back to the splash screen
*Form specific actions (Save, Revert, Print) have been removed from top action bar
*Role bar now takes up less space
*Clicking on the Role bar will take you back to the splash screen for that role
*Clicking on the Logo (top left) will take you back to the splash screen
At line 60 changed 4 lines
*Hover on Role Bar brings up vertical drop down
*Cursor Hand indicates that selection will change current role
*Shows list of all available business roles. No Limit.
*Role descriptions makes selecting role intuitive
*Hover on Role bar brings up vertical drop down
*To switch roles, the cursor becomes a hand to indicate that roles can be selected
*Shows list of all available business roles, with no limit to the amount of roles
*Role descriptions make selecting role intuitive
At line 72 changed 5 lines
*Staggered Splash Form loading – Ex. Pages loads immediately content loads as it is ready
*Improved Styling
*Rolling mouse over functions shows form name in Status Bar – good for AS, PS
*Stored preferences for Splash Menu Nodes Visibility by Self Service person
*(Identity,Candidate)
*Staggered Splash form loading (e.g. Pages load immediately; content loads as it is ready)
*Improved styling
*Hovering on functions shows the form name in the Status Bar – good for AS, PS
*Stored preferences for Splash menu nodes visibility by SS person (Identity,Candidate)
At line 79 changed 2 lines
!Better usage of loading animation
*Switching Roles
!Better Usage of Loading Animation
*Switching roles
At line 83 changed one line
*Clicking on Actions
*Clicking on actions
At line 85 changed one line
*Clicking from Tab to Tab
*Clicking from tab to tab
At line 89 changed one line
*Clear restore full list
*Clear will restore the full list
At line 101 changed 2 lines
*Layers LOV’s and Calendars more smoothly
*Drag-able
*LOV’s and Calendars are layered more smoothly
*Ability to drag the dialogs
At line 112 removed 2 lines
[{If var='loginstatus' contains 'authenticated'
At line 115 changed 4 lines
![Discussion|Edit:Internal.SELF SERVICE 2.0]
[{InsertPage page='Internal.SELF SERVICE 2.0' default='Click to create a new discussion page'}]
}]
![Notes|Edit:Internal.SELF SERVICE 2.0]
[{InsertPage page='Internal.SELF SERVICE 2.0' default='Click to create a new notes page'}]
This page (revision-11) was last changed on 26-Nov-2021 10:22 by JMyersTop