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.
Now Vienna Advantage has introduced new panel called Header Panel to display information in more representable way. End user can create header panel without writing a single line of code. The only thing required is that user should be able to search CSS properties from google. All the guidelines are explained in this document. End Users must follow these guidelines to ensure the smooth working of application.
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:-
Header Layout
Window, tab and Field
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.
Header Layout
Grid Header
Items
Each of these tabs has specific purpose for header panel creation. All the required information need to be inserted in these tabs for successful creation of tab panels. Fields of these tabs are explained below.
2.1.1 Header Layout
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.
2.1.3 Items
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
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.
To create Header Panel, first of all open Header Layout window. This window will be available with System Administrator role. After that enter information in first tab like we have entered to create header panel for Business Partner window. Check information in Header Layout (section 2.1.1). In this section name of header panel is Business Partner. Style field contains background property. Padding is 10px; alignment is horizontal due to which header panel is displayed above the grid. Last field contains height which is 200px.
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.
In this tab, start row, row span, start column and column span defines the position of item in block.
For example:
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 which defines alignment of item vertically. This dropdown has 3 items.
Top
Center
Bottom
Next field on this tab is Justify Items which defines alignment of item horizontally. This dropdown has 3 items.
Center
Left
Right
Next Field is style which a user can use 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”.
Font Color defines color of font 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”. Here in above image font color is rgba(var(--v-c-primary),1) which means system will primary color defined for the current theme. User can use color name like ‘red’ as well.
Font Size defines the size of font 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. Font size must be given in pixels like 10px.
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.
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.
For Example: @img::height:60px;width:60px;font-size:20px;border-radius:50%|<br>|@value::color:gray;font-size:10px
In above example, we are formatting image and value of that particular field in header panel. @img:: is used for image formatting. In this example, height and width is defined for image. In this, value for font-size is 20px. As we know, font size will not work for image, but in case if image is not available for any record, then system will display first character of next identifier value. To set font-size of that character we used font-size in @img:: tag. So we can set properties of image and first character in @img::
In order to separate properties of image and value tag, we have to use | symbol.
<br> tells system that next item(image or value) of current field will be displayed under previous item. In this example, value will be displayed under image.
@value:: is used to set properties for value of that field in header panel. In this example, value will be displayed with gray color with 10px font size.
If user wants to set properties of label, then that can be set from item tab of header layout window.
If we write @value::color:gray;font-size:10px
|<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.
For example, User want to show currency ISO code and currency name on header panel based on Currency id in current tab.
User need to create header items in Header Layout window.
Item1 :
Item 2:
Output:
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 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.
Header Field Value: In this field, users can input the static value they wish to display. This value can be in the form of text, an icon, or an image. If using an image, it should be encoded in base64 string format.
Field Value Style: Users have the option to apply a specific style to the 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.