Header Panel

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. 

Open

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. 

1. Header Layout 

2. Grid Header 

3. 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 

Open

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. 

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. 

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.  

 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 

These fields will be displayed only for first tab.  

2.2.2          Fields 

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: 

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. 

Next field on this tab is Align Items which defines alignment of item vertically. This dropdown has 3 items.  

1. Top  

2. Center  

3. Bottom 

Next field on this tab is Justify Items which defines alignment of item horizontally. This dropdown has 3 items.  

1. Center  

2. Left  

3. 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: 

1. Login with "System Administrator"  role 

2. Open "System Config" window 

3. 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. 

4. 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  

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: 

1. 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.

   1. Header Field Lable

   2. Header Lable Field Style

   3. Header Field Value

   4. Header Value Style

2. 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.

3. 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.  

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. 

   1. Show string value : If user want to show string text, then it will work as the same way described above for Header Field Lable.

   2. 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. 

   3. Show Icon : For display Icon, users can choose between the Vienna icon or Font Awesome 4.

5. 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.