Window UI Enhancement
- Gaurav
1. Overview
Vienna Advantage has redesigned windows in terms of controls and UI. Old fixed 2 columns layout is changed to 4 columns layout. Toolbar is also redesigned. User can display control in multiple rows and space can also be added in between the fields.
Themes are also introduced in this version of Vienna Advantage.
Now user can use Vienna fonts and font awesome 4.7 in image Field.
Note: Functionality provided on new fields will applied base on setting mentioned in section (5. Framework Version) at the end of document.
2. System Image
System Image window can be accessed using System Administrator role. In this window, user can upload image and use it in other windows. Here, added new feature of Font Name In this version. Now, user can upload image using Binary Data button and can also use font icon in the system by giving its respective class name in Font Name field. Here, Vienna provided a Font icon library for copy class name from Vienna fonts or font awesome 4.7 and paste them in Font Name field.
To use Vienna Fonts use this link: https://www.viennaadvantage.com/fonts/
To use Font Awesome library fonts use this link: https://fontawesome.com/v4.7.0/icons/
It is recommended to use Vienna Fonts over Font Awesome as well as Uploading image for displaying with field and window name. Here priority is given to Font Name field if system found both Font Name and binary Data image.
Note: In this version, introduced new option to show images/icon with fields on window/tab and along with window name in task bar. For this purpose, there is Image field available in Window and Field tabs of Window, Tab and Field.
2.1 Vienna Fonts
In order to use Vienna fonts, open the given URL in browser and find the font (Image) you want to display. For example, we are looking for mail icon, and then search Mail in browser and browser will highlight all the fonts containing Mail word.
Now copy the class name for the icon you want to use in System Image window. For example, copy vis-email and paste it in System Image in given format: vis vis-email. Here user must append vis before the actual font name.
Fonts are case sensitive, so font name should be in small case.
2.2 Font Awesome 4.7
In order to use Font Awesome fonts, open the given URL in browser and find the font (icon) you want to display. For example, we are looking for mail icon, and then search Mail in browser and browser will highlight all the fonts containing Mail word. Suppose user want to use envelope icon marked in image below.
Click on that icon, browser will redirect to next page and show class name.
Copy the class name (fa fa-envelope) and paste it in font name field of System Image.
Now link this image with any field or window, and this mail icon will be displayed.
3. Window, tab and Field
In window Window, Tab and Field, new fields are introduced on Tabs (window, Tab and Filed level). These fields are used by Vienna Framework to display UI according to the settings in these fields. Fields of each tab are explained below.
3.1 Window
On the window tab, Image field is used already present. Now user can select image in this field and that image will be displayed along with window name in task bar. For example, in this image
Email icon is linked with Mail Configuration window. Now when user opens this window from menu, Email icon will be displayed in task bar.
3.2 Tab
In Tab, three new fields are introduced.
Tab Panel Alignment
Header Panel
Header Layout
Field Name | Description |
| In previous versions, if user creates any tab panel then framework displays these panels in right side of window. Now in new version, user can set alignment of the Tab Panel. There are two options for user.
If alignment is vertical, then the Tab Panel will be displayed in right side. If alignment is horizontal, then the Tab Panel will be displayed at the bottom of window. |
Header Panel | This checkbox is available in the Header Layout field group. If this checkbox is checked, then system will display Header Layout Field. Note - This field is visible for parent tab(zero level) only. |
Header Layout | In this dropdown, System will display all the available header layouts created in Header Layout window. User can choose any of the header panel to link it with current tab. |
3.3 Field
In Field Tab, several new fields are introduced. Some of these fields are to be used by fields in window and some fields are for the Header Panel setting. These fields are explained below.
Field Name | Description |
Show Icon | If this checkbox is checked and an image is linked with Image field, then system will display image with field. |
Line Break | If this checkbox is checked, then system forces the next field to be displayed in next line. It will override the Same Line checkbox and clear all current row spans. |
Cell Space | Cell space defines the blank space before current field. Its value will be between 0 and 3. This version of Framework has 4 columns layout. If suppose you have added 1 field in column1 and then on next field, value of Cell Space field is 1. Then system will left column2 blank and add new field in column 3. |
Display Breadth | It defines that no. of rows the current field will use to be displayed. For more detail refer point number 4.2 in Examples Section. |
Display Length | This is existing field and enhanced to support for 4 columns layout. This property is used to set column span (width) of field. 0-9 = 1 column 20-29 = 3 columns 10-19 = 2 columns > 30 = 4 column (long field) |
Image | This dropdown will display all the images from System Image field. Choose any image in this dropdown and that image will be displayed along with field in window. Note- Depend on show icon check box. |
HTML Style | User can use this field for styling of the field. Whatever the style is defined here, will be applied to the current field. User has to enter CSS properties here and these properties will be applied automatically by framework to the field control. Example: background:gray;font-size:20px;color:black |
Header Panel Item | If this checkbox is checked, then System considers this item to be displayed in Header panel. Other fields related to Header Panel will be displayed only if this checkbox is checked. |
Header Seq. No | This field is used to link current field with item of Header Panel window. System will match the Header Sequence no. of field with Sequence no. of item in Header Panel linked on tab. Suppose Header Sequence no of field is 20 then system will find item with sequence number in header panel. If any item is available then system will display field according to setting of rows and column on item. For more information please read VA Header Panel Document. |
Header Override Reference | This field is used to override the reference of field with new reference type.(future release) |
Header Style | This field is used for styling of the field inside the Header Panel. Whatever the style is defined here, will be applied to the current field. User has to enter CSS properties here and these properties will be applied automatically by framework. Style defined in this field will only be applied to field value of header panel, not on icon or field heading. Example: background:gray;font-size:20px;color:black |
Show Header Heading only | If value of this field is Yes, then System will display only Heading and hide icon in header panel.
|
Show Header Icon Only | If value of this field is Yes, then System will display only icon and hide heading in header panel.
|
NOTE:- | If Show Header Heading only and Show Header Icon Only are left blank, then both icon and heading will be displayed. If Show Header Heading only and Show Header Icon Only are set to Yes, then both icon and heading will be hidden.
|
In new UI, there is
icon with every control. When user clicks on this icon, it will display description and help related to that control.
4 Examples
In this section working examples are given for deep understanding of each field to develop better UI for window.
4.1 Cell Space and Display length
In above image, there is gap between Name and Description fields. This gap between the controls is taken care by Cell Space field on “Field” tab. For this field, default value is 0 and max value is 3 (4 column layout). For the above example, Description field is having 1 in Cell Space field on ”field” Tab.
Notice the width of Name field that is double in compare to description field. Width is defined in Display length field of “Field” Tab. To be compatible with older version, we defined new value range to control width of controls. This range is defined below.
0-9 | 1 out of 4 columns |
10-19 | 2 out of 4 columns |
20-29 | 3out of 4 columns |
>30 | 4 out of 4 columns |
In above pic Name field has value in between 10-19 , Description field has some value in between 0-9 and Comment field has value greater than 30.
4.2 Field Breadth and Line Break
Like Display Length, system introduced new field Display Breadth. It defines the row span/height of control or its container.
Some Display type (controls) like Text, Memo, Image, Text long have minimum height, height can be fixed to minimum value or can be variable depend on column length property in “Column” tab.
For Image Field, there is fixed minimum height defined in framework, so image control will always be displayed in minimum height. But if user set Field Breadth for image field, then this field can expand up to defined field breadth.
For Text, Memo and Text long Field, there is variable minimum height defined in framework, so these control will always be displayed in minimum height according to the column length. But if user set Field Breadth for these fields, then they can expand up to defined field breadth.
For these display types, if Field Breadth is more than 1, other fields can be displayed in parallel (Only if Line break checkbox is unchecked).
If the Field Breadth for any of these field is more than 1 but there is no further fields to be displayed in parallel, then these fields will take their default height.
In this pic, Comment and Image button both have Display breadth set to 3 that means both expand up to 3 rows.
Line Break: As name state, it breaks current line and all running row span layout for the field and add control in new line and first column. E.g. if someone want to show description field (control) in next new line and column 1 then set line break field true in “field “tab.
Usually this property can be avoided if one pre-planned the layout of windows fields and its displayed sequence with proper value of field breadth value.
4.3 Show Icon and Image fields
One can show icon with field control like in below image. For this, one need to link image in Image field on “Field” tab and need to set show Icon property true.
5. Framework Version
User can run system in old and new UI by doing setting on "System Config" window. Steps are mentioned below:
Login with system administrator role
Open "System Config" window
Search for key 'FRAMEWORK_VERSION' record. If its value is "2" or more, only then New Window UI, all new fields and header panel functionality will work. If its value is "1" then system will ignore all new applied settings and run with exiting Window UI.