1. Overview
Vienna Advantage represents data in windows in many ways like in single view, grid view, card view and map view. Then further with single view and grid view, we can show tab panel and included tab.
...
Note: New Header Panel functionality will work base on setting mentioned in section (5 Framework Version) at the end of document.
...
2. Header Panel
User can create header panel and link with first tab of any window. For this, user must login with System Administrator role. To create a header panel and link with tab, following windows are involved:-
...
First of all, user must create a design of header panel using header layout window. After that search for the window in “Window, Tab and Fields” with which you want to link this header panel. User can link header panel with first tab only, but this will be visible on all the tabs. Detailed description of this process is explained below.
2.1 Header Layout
This window used to create header panel. You have to link header layout with tab in Window, Tab and Fields. This window contains 3 tabs.
...
This is first tab of header layout window. User insert name and other information needed for panel. Name of header layout will be displayed on tab of Window, Tab and Fields.
Field Name | Description |
Name | This field defines name of header panel. |
Style | User can use this field for styling of header panel. Whatever the style is defined here, will be applied to whole header panel. User has to enter CSS properties here and these properties will be applied to header panel. Example: background:gray;font-size:20px;color:black |
Padding | Padding defines the space between header panel border and its content. It can be defined in pixels. Padding can equal or different from all sides. Example for same padding from all side: 10px. This means padding from all sides is 10px. Example for different padding from all side: 10px 5px 10px 5px. This means 10px from top, 5px from right side, 10px from bottom, 5px from left side. |
Alignment | Header panel can be displayed vertically or horizontally. When alignment is vertical, then width field and header panel will be displayed on the left side of window. When alignment is horizontal, then height field and header panel will be displayed on the top of window. |
Height | Set Height of header panel. Default value is 200px. |
Width | Set width of header panel. Default value is 250px. |
2.1.2 Grid Header
...
Grid header defines a block which contains items. Here user defines structure of each block of header panel. A header panel can have one or more blocks. Each block contains items.
Field Name | Description |
Header Layout | This is foreign key of parent tab. It will display name of parent record. |
Sequence | This field defines the sequence no. of block in header panel. |
Name | Name of block to identify each block. |
Total Rows | Defines the total no. of rows current block will have. |
Total Columns | Defines the total no. of columns current block will have. |
Style | User can use this field for styling of each block in header panel. Whatever the style is defined here, will be applied to current block of header panel. User has to enter CSS properties here and these properties will be applied the items of block. Example: background:gray;font-size:20px;color:black |
Padding | Padding defines the space between header panel border and its content. It can be defined in pixels. Padding can equal or different from all sides. Example for same padding from all side: 10px. This means padding from all sides is 10px. Example for different padding from all side: 10px 5px 10px 5px. This means 10px from top, 5px from right side, 10px from bottom, 5px from left side. |
Style and Padding fields of block, overrides the respective fields of header layout for current block.
...
Items tab contains settings of all the items of corresponding grid header (block). Sequence field is used to link item to field.
Field Name | Description |
Grid Layout | This is foreign key of parent tab. It will display name of parent record. |
Sequence | This field defines the sequence no. of item in each block. |
Start At Row | It defines the row number at which this item will be added. |
Row Span | Defines the total no. of rows current item will cover. |
Start at Column | It defines the column number at which this item will be added. |
Column Span | Defines the total no. of columns current item will cover. |
Align Items | This field defines the vertical alignment of item in parent block. |
Justify Items | This field defines the horizontal alignment of item in parent block. |
Style | User can use this field for styling of each item in parent block. Whatever the style is defined here, will be applied to current item. Style will be applied to field icon, field value and field label. Field value style can be overridden in field tab of “Window, tab and Field”. User has to enter CSS properties here and these properties will be applied the items of block. Example: background:gray;font-size:20px;color:black |
Font Color | Font Color of the item. Font Color will be applied to field icon, field value and field label. Field value style can be overridden in field tab of “Window, tab and Field”. User has to mention name of color like red, or hex decimal code of color like #FF6347 or in decimal code like RGB(255,99,71). |
Font Size | Font Size of the item. Font Size will be applied to field icon, field value and field label. Field value style can be overridden in field tab of Window, tab and Field. |
Padding | Padding defines the space between header panel border and its content. It can be defined in pixels. Padding can equal or different from all sides. Example for same padding from all side: 10px. This means padding from all sides is 10px. Example for different padding from all side: 10px 5px 10px 5px. This means 10px from top, 5px from right side, 10px from bottom, 5px from left side. |
Style and Padding fields of item, overrides the respective fields of grid header (block) for current block.
2.2 Window, Tab and Fields
To link Header panel with window, new fields are introduced in Tab and Field tab of “Window, tab and Fields” window. Functionality and use of these fields are explained below.
2.2.1 Tab
...
Field Name | Description |
Header Panel | If this checkbox is checked, only then Header Layout field will be displayed. |
Header Layout | Choose the header layout you want to link with current tab. |
These fields will be displayed only for first tab.
2.2.2 Fields
...
Field Name | Description |
Image | User can select image from this field and this image will be displayed as icon along with field in header panel. |
Field Name | Description |
Header Panel Item | If this checkbox is checked, only then rest of the fields of parent field group will be displayed. |
Header Seq No. | It defines the sequence number of field in Header Panel. Framework will match sequence no. of field with sequence no. of item of header panel and based on settings of item of header panel current field will be displayed. |
Header Override Reference | This field is used to change the reference type of field for header panel. |
Header Style | If user want to override style defined at item of header panel window, then provide style here. User has to enter CSS properties here and these properties will be applied the items of block. Example: background:gray;font-size:20px;color:black |
Show Header Heading only | If this checkbox is checked, then only heading will be displayed with field in header panel. |
Show Header Icon Only | If this checkbox is checked, then only icon will be displayed with field in header panel. |
| 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. |
3 System Image
Got to link for understand System Images Images
4 Example To Create Header Panel
In this example, we are going to explain how to add an item in header panel. In Overview section, there is an image of business partner window having header panel displayed with it. We are going to explain, how this header panel is created and then explain one of items of header panel.
...
After insertion of information in the first tab, navigate to the Grid Header Tab (section 2.1.2). In this section, we have inserted information for one of the fields block. In this tab, sequence number defines the order in which blocks will be placed in header panel. That means lower sequence number block will be displayed first. Total rows defines total number of rows will this block have. In this example, there are 2 rows. Total columns are also 2. So the total cells for this block will be 2 * 2 = 4 like this image below:
| Column 1 | Column 2 |
Row 1 |
|
|
Row 2 |
|
|
Next step is to add Items (section 2.1.3) to block. In this tab, sequence number is not used for order of items in block. Sequence number is used to link item with Field (in Window, tab and Fields). If a field is having Header sequence number 20 and item is also having sequence number 20, then these two are linked with each other.
...
For the above settings, item will be displayed in cell 3.
| Column 1 | Column 2 |
Row 1 | Cell1 | Cell2 |
Row 2 | Cell3 | Cell4 |
...
Next field on this tab is Align Items whichdefines alignment of item vertically. This dropdown has 3 items.
...
Example for different padding from all side: 10px 5px 10px 5px. This means 10px from top, 5px from right side, 10px from bottom, 5px from left side.
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.
Enhancements In Framework Version 4.4.6.0
In order to provide more flexibility in Header Panel design, Vienna has provide few more options. Using these options, designing in Header Panel can be more easy and it will provide more ways to setup items.
Display Identifier Image
If any column having reference image is marked as identifier in any table, and reference of that table is used in another table. Now if that refence column is used in header panel, then image will be displayed in header panel (only if image is available with linked with parent record ID). If image is not available with parent record ID, then first character of next identifier column's value will be displayed in place of image.
Display Image with LOV in header Panel
If you want to display LOV value in header panel and an image is linked with that value, then that image will be displayed in header panel along with value.
Alignment of Image in Header panel item
By default, Image in header panel for any field is displayed on left side of value. If you wants to change image position, then you have to write some code in Header Item Style field in Screen Configuration window.
...
|<br>|@img::height:60px;width:60px;font-size:20px;border-radius:50%, then value will label will be displayed above image.
Show External value based on Dynamic SQL Query
There is new field called ColumnSQL on Header item tab. Till now user have to create virtual column in Column tab and a field in Filed tab to show data of foreign referenced column in Current tab. Now onwards user can write Sql based on related referenced values on header item directly to show runtime data in header item and there is no need to create field for this header item. For this type of Item, on window record change , system will parse column value from context and execute query and show executed value in header item.
...
Note: User can also write static/fix value in Column Sql column of item.
Hide Header Panel In Multi View (Grid) mode.
In this version, introduce an option to hide header panel in multi view mode (grid mode). To achieve this provided new filed on Window : Window, Tab and Fields -> Tab as shown in below
Window, Tab and Fields -> Tab
Provided new field name
Field Name | Description |
Do Not Show Header in Multi Row | This filed will only display if Header Panel check is true. If this checkbox is checked, Header panel only show on single layout otherwise show on both single and multi row. |
Enhancements In Framework Version 5.6.3.0
Vienna has introduced a feature that allows users to incorporate static content into the Header Panel. This provides greater flexibility in designing the header, enabling users to display fixed content of their choice.
...
To facilitate this, Vienna has added five columns in the Item Tabs section under the header layout:
Is Static Content: This checkbox determines whether static content will be displayed in the header panel. When checked, System will display below fields as shown in below screen shot too.
Header Field Lable
Header Lable Field Style
Header Field Value
Header Value Style
...
Header Field Label: In this text box, users can enter the label name for the static content.
Here, users can either enter any label string or can enter Message Key, Which are available in the message window. At run time System will match the entered string label to Message key (from Message table) and show the Message as available in the Message table according to login culture if message key is not found, the original text provided by the user will be displayed.
For example : In the image below, There is message key "ASI" and the corresponding message text is "Attribute Set Instance".
...
In the image below, we are using same message key in the Header Field Value.
...
So at run time, System will displays the message text as shown in the image below.
...
Same way It works for Header field value.
Field Label Style: This text box allows users to apply a specific style to the Label described above, which enhancing the visual presentation. How to apply style for this please navigate to section 4.
Header Field Value: In this section, users have the option to input the desired static content they want to showcase. This content can take the form of either text, an icon, or an image.
Show string value : If user want to show string text, then it will work as the same way described above for Header Field Lable.
Show image : For display image, it should be encoded in base64 string format. To convert an image to base64, users can utilize the following link: https://www.base64-image.de/. Where, user need to upload the specific image and it will return base64 string that user can insert here.
Show Icon : For display Icon, users can choose between the Vienna icon or Font Awesome 4.
For Vienna Fonts, please refer to this link: https://viennaadvantage.com/fonts. Rember to use the 'va' prefix, such as va<space>FontName.
For Font Awesome library fonts, please consult this link: https://fontawesome.com/v4.7/icons.s Remember to use the 'fa' prefix, such as fa<space>FontName.
Field Value Style: Users have the option to apply a specific style to the above mentioned static value, further customizing its appearance in the header.
This new feature empowers users to tailor the header to their specific needs, offering a more personalized and dynamic user experience.