Overview
Introducing a new mosaic feature in the application which contains multiple small interactive widgets that provide users with specific information or functionality. It can display live data, offer shortcuts, or allow users to perform simple tasks, making the user interface more dynamic and convenient.
These widgets are configurable, meaning users can adjust them to fit their needs, move them around, choose among different sizes , or change the content to match their preferences, helping to create a personalized experience and can create new widgets as per their requirement.
Pre-requisites for Mosaic Library
Vienna Advantage Framework 6.1.2.0
Vienna Advantage Base Files 2.4.1.0
Vienna Advantage Market 3.1.12.0
...
To enhance the widget, the first step is to create it using the Mosaic Library screen, where you can choose either a customized or dynamic widget. Once created, the user can bind it to the home page or any specific screen.
MOSAIC LIBRARY
The Mosaic Library is a helpful feature that enables users to create, manage, and personalize widgets for their applications.
...
Widget Library
Widget Translation
Size
Access
Field
Field Translation
1.1 Tab1: Widget
Click on the “Mosaic Library Screen” to open the " Mosaic Library" from the menu.
The new screen has been opened.
Click on the ‘Add New record’ button, a screen will appear as shown in the screenshot below:
...
Log in with SuperUser credentials.
Navigate to the Screen Configuration screen.
Search for the specific screen, such as, “Product Category”.
The Screen configuration screen will open.
There is a checkbox named "Landing Page". Mark this checkbox as True.
Save the record.
Go to Menu & search for the screen (e.g., “Product Category”) after logging in with Tenant Credentials.
The Product Category screen will open with the landing page enabled.
...
1.2 Tab2: Widget Translation
Click on the ‘Widget translation’ tab, than below screen will open.
...
Widget
| The widget is auto-populated with the name specified in the parent tab. |
Language
| It shows the available language in the system
|
Display Name
| It clearly indicates that the column will show the names or titles of the widget as they appear to users in the specific language.
|
Description
| Add a description about the widget in the specific language |
Comment
| Add any comments related to the created widget in the specific language |
Translated
| By marking this checkbox as true, it will be translated into the selected language
|
Save the record.
1.3 Tab3: Size
Click on the ‘Add New record’ button, than below screen will open.
...
Widget
| The widget is auto-populated with the name specified in the parent tab. |
Sequence
| The sequence indicates the order in which the widget size will appear in the Mosaic library on the homepage. The system will give priority as per the sequence of the Size. The small number would be given higher priority.
|
Height
| This specifies the Vertical dimension or widget height
|
Width
| This specifies the Horizontal dimension or widget width |
Default
| By marking the checkbox as true, the widget will by default be shown on the home page or Landing page of the specified screen if widget is accessible to the login Role until user customize the home page or landing page.
|
Image
| The image will be displayed on the widget if selected from the system. Otherwise, the system will default to showing a generic image on the widget. |
Classname
| If the widget type is Dynamic widget, the system will automatically display the class name in the Class Name field i.e. VIS.dynamicWidget
However, if the widget type is a Customized widget, you must enter the class name defined for that particular widget. |
Save the record
1.4 Tab4: Access
Go to the Access tab; the system will display the access permissions for all the roles.
...
Widget
| The widget name is auto-populated as per selected widget on the parent tab.
|
Role
| Select role to give access to the widget. |
1.5 Tab5: Field (This tab is enabled when the selected widget type is "Dynamic Widget)
Click on the ‘Add New record’ button, than below screen will open.
...
Widget
| The widget name is auto-populated as per selected widget on the parent tab. |
Name
| Name of the field. |
Control Type
| The Control type indicates how you want to design or present this field to the end user on the widget. To handle this design system provide four control type. There are 4 different types of control.
Badge: By using this Badge control type user can display this field on the widget as a badge, which typically used to show a count or number. It generally refers to a user interface element that present badges within an application.
Button: By using the Button control type, users can display this field on the widget as a button, which is typically used to trigger actions or navigate to different sections. It refers to a user interface element that allows users to interact with the application through button clicks. Label: By using the Label control type, users can display this field on the widget as a label, which is typically used to show static text or descriptions. It generally refers to a user interface element that presents labels within an application
Link: By using the Link control type, users can display this field on the widget as a link, which is typically used to navigate to another page or resource. It generally refers to a user interface element that provides clickable links within an application. |
Images
| Select the Image icon from the dropdown value and use to show image with field on the widget. |
HTML Style
| User can use this column for styling of the field. The defined style will be applied to the particular field on the widget. User has to enter CSS properties here and these properties will be applied to the field. Example: background:gray;font-size:20px;color:black |
Sequence
| The sequence determines the order in which widget fields will appear within a particular widget on the homepage. The system will give priority as per the sequence of the field. The small number would be given higher priority. |
On Click
| The "On Click" column in a widget field typically refers to an event handler or action that is triggered when a user clicks on a specific element within a widget. The On Click action works only for the Button and Link control types. The following parameters are used in the "On Click" field. { "IsHideHeaderPanel": "true", "IsHideTabPanel":"true", "IsHideToolbar":"false", "IsHideTabLinks":"false", "IsHideActionbar":"true", "IsHideGridToggle":"true", "IsHideSingleToggle":"false", "IsHideCardToggle":"false", "IsHideRecordNav":"true", "IsTabInNewMode":"false", "Card_ID":1000321, "TabWhereClause":"write where condition", "TabLayout":"C", // 'N' [Grid], 'Y'[Single],'C' [Card] (If enter "C" than data will appear in the Card view, If enter "Y" than data will open in single record, If enter "N" than data will appear in the Grid view) "IsDeleteDisabled":"true", "IsReadOnly":true, "IsShowFilterPanel":"false", "tabIndex":"0", "ActionType":"W", //{'W'[Window/Screen], 'X'[Form], 'P'[Process]} (W" is used for Window/Screen, "X" is used for Forms, and "P" is used for Process, as indicated by the action names provided below) "ActionName":"yourWindow/Screen/process/FormName" } Note: Remove comments Here, we used a product category screen example for these parameters. { "IsHideHeaderPanel": "true", "IsHideTabPanel":"true", "IsHideToolbar":"false", "IsHideTabLinks":"false", "IsHideActionbar":"true", "IsHideGridToggle":"false", "IsHideSingleToggle":"false", "IsHideCardToggle":"false", "IsHideRecordNav":"true", "IsTabInNewMode":"false", "TabWhereClause":"M_Product_Category.ProductType='S'", "TabLayout":"Y", "IsDeleteDisabled":"true", “IsReadOnly":"true", "IsShowFilterPanel":"true", "TabIndex":"0", "ActionType":"W", "ActionName":"Product Category" } |
Badge Checkbox
| This checkbox is used only with the Button or Link control type. It decides if the badge value and style are shown or hidden. |
Badge Value
| If the Badge checkbox is true, then Badge Value column is enabled. This badge value represent a specific status, count, or piece of information. It would be written in an SQL query or a numeric value For e.g: @SQL=SELECT COUNT(*)FROM AD_Test |
Badge Style
| If the Badge checkbox is true, then Badge Style column is enabled. User can use this field for styling of Badge value appearance. The defined style will be applied to the defined badge value. User has to enter CSS properties here and these properties will be applied to the defined badge value. Example: background:gray;font-size:20px;color:black |
Same line
| The Same Line checkbox indicates that the field will display on the same line as the previous field. |
Apply Data Source
| This checkbox is used to displaying a list of the most frequently used items and providing a way to search or view them within a specific screen or area. By marking the checkbox as true, further column is enabled i.e. Top, Tab, Field, Prefix, Suffix. It will only work if the widget is bind with single screen, which means that the user must select one specific screen on parent tab for this widget. |
Top
| This column we define the range of the value. The range will be from one to ten. The system will display a list of the most frequently used items in a specific screen on the widget, prioritized based on the values in the 'Top' column |
Tab
| It displays the parent tab of the screen that the user selects in the screen field in the widget header. |
Field
| It displays all the fields used in the specific tab of the screen. |
Prefix
| The Prefix specifies the characters to be displayed before the data source field. |
Suffix
| The Suffix specifies the characters to be added at the end of the data source field. |
Save the record.
HOMEPAGE WIDGET
The 'Edit Home' feature gives users the ability to rearrange and adjust widget settings, enabling them to create a homepage layout that matches their individual preferences.
...