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.
...
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.
...
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
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.
...
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, static content will be included. Header Field Label: In this text boxSystem 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.
...
Field Label Style: This text box allows users to apply a specific style to the label, enhancing the visual presentation.
...
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.