Framework Enhancement 5.11.1.0

Owned by Gaurav
Last updated: Aug 07, 2024
14 min read

1. Enhanced Filter Panel with Random Color Display for Filter Tags:

Overview:

In this new enhancement to filter panel we have introduces a dynamic visual element aimed at improving user experience. When a condition is applied to the filter panel, the filter tags will now display in random colours. This feature makes the interface look lively and helps users quickly see and differentiate between filter conditions. 

 

This tag of colors helps user to in quick identification and differentiation of multiple filter tags, making it easier for users to navigate and manage their filters.

image-20240805-101144.png

In the above image, I have added some conditions. Each filter tag will be assigned a random color when a condition is applied. This makes the interface visually appealing and helps each tag stand out clearly.

 

2. Enhanced single scroll layout for Composite view in window and  right Tab panel in Horizontal view. 

Overview:

Earlier in our system we have two scrolls in  the composite view, In this new enhancement we have Implemented  the single scroll  layout for Composite view in window and  right Tab panel in Horizontal view.

image-20240805-102356.png

In the above image, Single scroll  layout for Composite view in window and  right Tab panel in  Horizontal  view.

 

3. Show process, form and workflow in right configurator info which is not bind in group. 

Overview:

We have introduced to show the Process, Form & Workflows information which is not bind in the respective group. Previously, it showed the list of process, form, workflow which is bind to the respective group. Now it shows the process, form and workflow which is not bind with red colour. In the below image, group info popup  User would easily understand what are bind and what are not bind.

 

4. Integrate React and webpack:

Introduction:  

We have enhance our coding and minifi patterns in our framework by introducing support for Webpack and React for form development. This document provides a guide for configuring Webpack to bundle CSS and JavaScript, and to integrate React.js, with step-by-step instructions and code snippets.

For more information click here.

 

5. Added New Feature to pass Parameter with Button:

Overview:

In this recent update, we have introduced a new field called "Action Param" at the field level, which helps users hide or display controls within the tab while navigating through Action button

 

Pre-requisites:
Vienna Advantage Framework: 5.11.1.0 and VIENNA Advantage Base Files 2.3.7.0

 

Note: This functionality will work for buttons whose 'action' checkbox is marked as true in the Database Schema window.

 

Step 1: Action performed before using the Action Param functionality: 

To use this functionality, the user must mark the "Action" checkbox as true on buttons in the column level. Then user must select "Move to Tab" from the action dropdown field and set the tab index value (tab Index will work in combination with the Action button at the column level, causing the system to move focus to another tab based on the defined tab index number) as shown in below image. 

Here 'Tab Index' value Start form 0. 

Step 2: How can we use Action Param on buttons in Field Level: 

  • Log in with the System Administrator role. Open the Screen Configuration window from the menu. 

  • For example, let's take Sales Order screen. 

  • Search for the Sales Order screen, navigate to the Tab level, select a tab, move to the Fields tab, and select the action button. 

  • In the Action button field, you will find the Action Param field where you can pass parameters accordingly. 

Below is a list of all the parameters that we can use in the Action Param field. 

 

Syntax: - 

{ 
"IsHideHeaderPanel": "true",   

"IsHideTabPanel":"true",  

"IsHideToolbar":"false",  

"IsHideTabLinks":"false"  

"IsHideActionbar":"true",  

"IsHideGridToggle":"true",  

"IsHideSingleToggle":"false",  

"IsHideCardToggle":"false",  

"IsHideRecordNav":"true",  

"IsTabInNewMode":"false", 

"IsDeleteDisabled":"true",  

"IsReadOnly":true,  

"IsShowFilterPanel":"false, 

"TabLayout":"C", or "N" or "Y" 

"TabWhereClause":"Sql Conditions", 

"Card_ID":"Card_ID/Export_ID",
} 

 

Here, we use the sales order window as a reference to help users understand how to use this functionality. If any property is not defined in the action parameters, the system not consider the property  as action parameter. 

 

2.1 Steps to Hide/Display Header Panel with the help of button: 

Users can hide and display the header panel by using parameters in the Action Param field. 

 

(i) "IsHideHeaderPanel": "true"= This property is used to hide the header panel when the action button is clicked. 

After applying this property, the system will hide the header panel when navigating to the next tab using the action button, as shown in the image below.

(ii) "IsHideHeaderPanel": "false"= This property is used to display the header panel when the action button is clicked. 

After applying this property, the system will display the header panel when navigating to the next tab, as shown in the image below. 

 

2.2 Steps to Hide/Display Tab Panel with the help of button. 

Here users can hide and show the tab panel by using parameters in the Action Param field. 

 

(i) IsHideTabPanel":"true": This property is used to hide the tab panel whenever the action button is clicked. 

After applying this property, the system will hide the tab panel when navigating to the next tab using the action button, as shown in the image below 

(ii) IsHideTabPanel":"false": This property is used to display the tab panel whenever the action button is clicked. 

After applying this property, the system will display the tab panel when navigating to the next tab, as illustrated in the image below. 

 

2.3 Steps to Hide/Display Tool Bar with the help of button. 

Users can hide and display the toolbar by using parameters in the Action Param field. 
 

(i) "IsHideToolbar":"true": This property is used to hide the tool bar whenever we clicked on the action button. 

After applying this property, the system will hide the toolbar when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsHideToolbar":"false": This property is used to display the tool bar whenever we clicked on the action button. 

After applying this property, the system will display the toolbar when navigating to the next tab using the action button, as shown in the image below. 

2.4 Steps to Hide/Display Tab Name with the help of button. 

Users can hide and display the tab name by using parameters in the Action Param field. 

 

(i) "IsHideTabLinks":"true" : This property is used to hide the tab name whenever we clicked on the action button. 

After applying this property, the system will hide the tab name when navigating to the next tab using the action button, as shown in the image below. 

(ii) "IsHideTabLinks":"false":  This property is used to hide the tab name whenever we clicked on the action button. 

 

After applying this property, the system will display the tab link when navigating to the next tab using the action button, as shown in the image below. 

 

2.5 Steps to Hide/Display Action Bar with the help of button:

Users can hide and show the action bar by using parameters in the Action Param field. 

 

(i) "IsHideActionbar":"true": This property is used to hide the action bar whenever we clicked on the action button. 

After applying this property, the system will hide the action bar when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsHideActionbar":"false":  This property is used to display the action bar whenever we clicked on the action button. 

After applying this property, the system will display the action bar when navigating to the next tab using the action button, as shown in the image below. 

 

2.6 Steps to Hide/Display Grid Toggle with the help of button:

Users can hide and show the grid toggle by using parameters in the Action Param field. 

 

(i) "IsHideGridToggle":"true" : This property is used to hide the grid toggle whenever we clicked on the action button. 

 

After applying this property, the system will hide the grid toggle when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsHideGridToggle":"false" : This property is used to display the grid toggle whenever we clicked on the action button. 

 

After applying this property, the system will display the grid toggle when navigating to the next tab using the action button, as shown in the image below. 

 

2.7 Steps to Hide/Display Single Toggle with the help of button:

Users can hide and show the single toggle by using parameters in the Action Param field. 

 

(i) "IsHideSingleToggle":"true" : This property is used to hide the single toggle whenever we clicked on the action button.

 

After applying this property, the system will hide the single toggle when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsHideSingleToggle":"false" :- This property is used to display the single toggle whenever we clicked on the action button. 

After applying this property, the system will display the single toggle when navigating to the next tab using the action button, as shown in the image below. 

 

2.8 Steps to Hide/Display Card Toggle with the help of button:

Users can hide and show the card toggle by using parameters in the Action Param field. 

 

(i) "IsHideCardToggle":"true" : This property is used to hide the card toggle whenever we clicked on the action button. 

 

After applying this property, the system will hide the card toggle when navigating to the next tab using the action button, as shown in the image below. 

(ii) "IsHideCardToggle":"false" : This property is used to display the card toggle whenever we clicked on the action button. 

After applying this property, the system will display the card toggle when navigating to the next tab using the action button, as shown in the image below. 

 

2.9 Steps to Hide/Display Record Navigation button with the help of button. 

Users can hide and show the record navigation buttons by using parameters in the Action Param field. 

 

(i) "IsHideRecordNav":"true" This property is used to hide the record navigation button whenever we clicked on the action button. 

After applying this property, the system will hide the record navigation buttons when navigating to the next tab using the action button, as shown in the image below. 

(ii) "IsHideRecordNav":"false" This property is used to display the record navigation buttons whenever we clicked on the action button. 

 

After applying this property, the system will display the record navigation buttons when navigating to the next tab using the action button, as shown in the image below. 

 

3.0 Steps to Enable/Disable in Auto New Record with the help of button:

Users can enable or disable the automatic creation of new records by using parameters in the Action Param field. 

 

(i) "IsTabInNewMode":"true" : This property is used to enable the new record functionality whenever we clicked on the action button. 

 

After applying this property, the system will enable the creation of a new record when navigating to the next tab using the action button, as shown in the image below. 

(ii) "IsTabInNewMode":"false" : This property is used to disable the auto new record whenever we clicked on the action button. 

After applying this property, the system will disable the automatic creation of a new record when navigating to the next tab using the action button, as shown in the image below. 

3.1 Steps to Hide/Display Delete button with the help of button:

Users can hide or display the delete button by using parameters in the Action Param field. 

 

(i) "IsDeleteDisabled":"true" : This property is used to hide the delete button whenever we clicked on the action button. 

After applying this property, the system will hide the delete button when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsDeleteDisabled":"false" This property is used to display the delete button whenever we clicked on the action button.  

After applying this property, the system will display the delete button when navigating to the next tab using the action button, as shown in the image below. 

 

3.2 Steps to Hide/Display Filter Panel with the help of button: 

Users can hide or display the filter panel by using parameters in the Action Param field. 

 

(i) "IsShowFilterPanel":"true" : This property is used to hide the filter panel whenever we clicked on the action button. 

After applying this property, the system will hide the filter panel when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsShowFilterPanel":"false" :  This property is used to display the filter panel whenever we clicked on the action button. 

After applying this property, the system will display the filter panel when navigating to the next tab using the action button, as shown in the image below. 

3.3 Steps to make tab Read-only with the help of button:

Users can make a tab read-only by using this parameter in the Action Param field. 

 

(i) "IsReadOnly":"true" : This property is used to tab as read-only whenever we clicked on the action button. 

After applying this property, the system will make the records read-only when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "IsReadOnly":"false" :  This property will work as default view whenever we clicked on the action button. 

After applying this property, the system will display the records in their normal view when navigating to the next tab using the action button, as shown in the image below. 

3.4 Steps to display Card View, Single View, and Grid View in a TabLayout, using a single parameter, with the help of a button:

Here, users can define the TabLayout in various ways, allowing the system to display the tab view according to the configuration specified in the Action Param field. 

 

(i) "TabLayout":"C" :  This property is used to display card view whenever we clicked on the action button. 

After applying this property, the system will display the default card view when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "TabLayout":"N" :  This property is used to display window in grid view whenever we clicked on the action button. 

 

After applying this property, the system will display the tab in grid view mode when navigating to the next tab using the action button, as shown in the image below. 

 

(ii) "TabLayout":"Y" :  This property is used to display window in single view whenever we clicked on the action button. 

 

After applying this property, the system will display the tab in single view mode when navigating to the next tab using the action button, as shown in the image below. 

 

3.5 Steps to add where conditions in tab with the help of button:

Users can add conditions as needed by using parameters in the Action Param field. 

 

(i) "TabWhereClause":"Condition" :  This property is used to display records based on the conditions specified in the Action Param field. 

For example: "TabWhereClause":"C_UOM_ID=100"  

According to the above example, the system will display records with a unit of measurement is "Each" whenever the action button is clicked. 

 

After applying this property, system will display only the records with a type of 'Each' when you navigate to the next tab using the action button, as shown in the image below.

It will give first preference to the action param parameter. If no action param is defined in the action button, it will then give preference to the where conditions at the tab level. 

 

3.6 Steps to display a specific card from the Card View using a button:

Users can display a specific card from multiple cards by using parameters in the Action Param field. 

 

(i) "Card_ID":Card_ID/Export_ID : This property is used to display only the card whose Card ID/Export ID is mentioned in the action param field whenever the action button is clicked. 

 User can get the card id from card view screen. 

 

After applying this property, the system will display the mention card in card view when navigating to the next tab with the help of the action button, as shown in the image below. 

(ii) "TabLayout":"C","Card_ID": Card_ID/Export_ID : This property will display a tab from Grid View to Card View with the selected Card ID or Export ID mentioned in the Action Param field. 

 

After applying this property, the system will display default card view when navigating to the next tab with the help of the action button, as shown in the image below.