Mosaic
- Gaurav
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.
Only users with the System Administrator role can access the Mosaic Library screen.
To navigate the Mosaic library screen below given steps are needed to be followed:
Go to the main menu of the VA System. > Find the Search Utility in the menu. > Type "Mosaic Library" into the Search Utility. > Press Enter or click the search icon. > The Mosaic Library screen will appear at the top of the search results:
There will be six tabs in this screen as mentioned below:
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:
Enter the data into the fields.
Name
| Name of the widget. |
Display Name
| It clearly indicates that the column will show the names or titles of the widget as they appear to users.
|
Module Info
| The user can select a specific module from the dropdown, and then the widget will be displayed under that module on the home page.
|
Widget Type
| The User can choose the type of the widget from the dropdown. It can either be a Customized or a Dynamic widget
A Customized widget is a design element based on the define class in size tab that you can modify to fit your specific needs. It allows you to adjust its appearance and function to better suit your application.
Whereas, Dynamic widget is a pre designed element that updates automatically based on configuration and real-time data. After selecting the Dynamic widget, system will enable the Field tab |
Html Style
| User can use this field for styling of widget. The defined style will be applied on that specified widget. User has to enter CSS properties here and these properties will be applied to the widget.
For Example: background:gray;font-size:20px;color:black
|
Show field in random color
| If the widget type is selected as Dynamic widget, then this checkbox get enabled.
By marking the checkbox as true, fields specified by the user under the widget in the field tab will be displayed in a random color, indicating that the system gives prioritizes this checkbox |
Homepage
| By marking the checkbox as true, the widget will be visible on the home page. |
On Screen
| By marking the checkbox as true, the widget will become visible on the specified screen's landing page ( screen field will enable disable on this setting) |
Screen
| Select the screen where the user wants to display the widget on the landing page.
If this field is empty, the created widget will be visible on all screen landing pages, provided the landing page checkbox is marked as true for that specific screen |
Show advance
| If the widget type is selected as Dynamic widget & On Screen checkbox is true then this checkbox is enabled.
By marking this checkbox as true, the saved advance search filter for the specified screen landing page will be visible on the specific widget
|
NOTE: If the On Screen checkbox is marked as true, then the user needs to enable the landing page for the specified screen from the Screen configuration.
For this follow below steps:
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.
By default, the record should be shown in the available languages.
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.
Enter the data into the fields.
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.
Enter into the fields.
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.
When user log in to the system, it opens the homepage as shown in the screenshot below.
All the widgets prepare for homepage (i.e marked homepage checkbox as true on the widget tab) will appear in the right-side panel of the home page according to the access to login role defined in the mosaic library screen on Tab named "Access" or directly widget access on role screen.
In our case, we have marked the checkbox Homepage as true, so the widget will be displayed on the homepage.
The widget will appear on the right side of the homepage under mosaic library as shown above image.
In the top right corner, there is search field where we can search for widget by their names as shown in above.
Next, there are two icons: the Refresh icon and the Cross icon are shown in above image.
Refresh icon: Use to refresh widget listing i.e. If user makes any changes in the mosaic library screen and then clicks on the Refresh icon, the system will refresh all the widgets available in the library and dashboard.
Cross Icon: This icon is used to close the mosaic library from the right side, allowing only the widget to be displayed on the homepage dashboard.
In Mosaic library, all widgets are displayed under their respective module names as defined in the mosaic library screen which are shown in above image.
In the mosaic library, the system displays the size of the widget in the top corner of the name, as defined in the mosaic library screen under the Size tab are shown in above image
The User can drag the widgets to the left side of the dashboard & use it.
If the User wants to remove the widget from the dashboard screen, they can click the Delete button located in the top corner of the widget.
Now, the widget will appear on the left side after being dragged from the mosaic library to the dashboard screen.
The customized and dynamic widgets will appear on the dashboard screen based on the widget types defined in the mosaic library screen.
Note: If any widget has its default checkbox set to true under the Size tab in the Mosaic Library screen, then that widget will be displayed by default on the homepage dashboard and landing page after login and when the screen is opened
Customized widget: In the Customized widget, all data records are displayed on the widget. For Example, we can consider the workflow widget, which is used as a customized widget.
For this workflow widget, data will come from the different screens where the workflow runs on those records are shown in above image.
In this widget, the workflow total record count will be displayed as shown in above image.
The User can use the search icon located in the top right corner of the Workflow customized widget.
The user can go to the data record screen by clicking the zoom icon on the workflow widget as shown in above image.
In the top right corner of the workflow widget, there is a Refresh icon, which is used to refresh the individual widget on the dashboard which are shown in above image.
Dynamic Widget: This dynamic widget automatically updates based on real-time data or user interactions
Widgets displayed on the dashboard have three dots in the top corner. Clicking them reveals the Refresh icon, which allows the user to refresh the individual widget on the dashboard are shown in above image.
All fields listed under the Field tab will appear on the widget, whether they are buttons, badges, links, or labels are shown in above image.
All data source fields listed under the Field tab will be shown on the widget on the homepage dashboard.
Clicking on this data source field will redirect the user to the specific screen, which has parameters defined in the 'On Click' column under the Field tab.
The user checks the data in the screen based on the count available in the data source field on the widget which are shown in above image.
The prefix and suffix are shown on the widget as defined for the records of the specific data source field which are shown in above image.
If there is an error in any field record created in the Mosaic Library screen, the system will display an error icon in the top left corner of the dynamic widget.
If the user wants to view the Mosaic Library alongside the dashboard screen, they can click the Edit icon in the top right corner. This will open the Mosaic Library on the right side of the screen
LANDING PAGE WIDGET
When a user login to the system, all widget will appear by default on the right side under the Mosaic Library on the homepage.
If the user wants all widget to appear on a specific screen, they should check the 'On Screen' checkbox as true in the Mosaic Library screen, which will display the widget on the screen's landing page
There are several steps to follow in order to display the widget on a specific screen.
Marking true checkbox of the “On screen” in the mosaic library screen.
After checking the ‘On screen’ checkbox, the ‘Show Advanced’ is enabled
This ‘Show Advanced’ option is used only for the landing page.
Now, select the Screen name from the Screen field.
Before displaying the widget on the Product Category landing page, first mark 'Landing Page' checkbox as true under the Screen Configuration screen.
For this:
Log in with SuperUser credentials.
Go to the Menu & search “Screen Configuration”
In the Screen configuration screen, search for “Product Category”
The System will display the Product Category screen, open it.
Check the checkbox for “Landing Page” to mark it as true as shown in screenshot below.
Login with the tenant user & go to the Product Category screen. Open the Product Category screen, the system will display the Landing page of the Product Category.
In this screen, the Add icon is located below the landing page dashboard, while the Edit icon is in the top right corner. Clicking the Edit icon opens the Mosaic Library.
In the Mosaic Library, all widgets are displayed under their respective module names, as defined in the Mosaic Library screen where the 'On Screen' checkbox is checked.
Users can drag the widget on the dashboard screen, just as they can with the widgets on the homepage.
The view of all widgets on the landing page is the same as those on the homepage, and users can interact with them accordingly.
Customized and dynamic widgets will appear on the landing page based on the widget types defined in the Mosaic Library screen, similar to the homepage dashboard, where the 'On Screen' checkbox is set to true.
Under the Field tab in the Mosaic Library screen, there is a 'Show Advanced' checkbox, which is enabled after the 'On Screen' checkbox is marked as true.
This show advanced checkbox is only displayed on the dynamic widgets on the landing page.
To use the ‘Show Advanced’ option for the dynamic widget on the landing page, follow the steps below to add advanced search filters to the widget.
First, open the Product Category screen from the menu.
The system will display the Product category screen as shown below:
The system opens the landing page for the first time.
Next to the landing page icon, there is another icon, the grid view icon.
Click on this, and the system will opens the Product category screen in grid view data.
On the right side, there is a filter icon that we can use to apply filter
Click on this filter icon, and the system will open the filter panel on the left side of the screen.
Here, the system displays the Name column, Custom Condition button, save option, save as option and Clear All option.
In this filter panel, click on the Custom condition button. Additional columns will be displayed, included Tab, column, operator and Add button.
Add a filter by entering data in the Tab, Column & Operator fields.
The system will display the data in the right-side grid according to the applied filter.
Now save the filter name by clicking on the Save icon in the filter panel.
By clicking on the Save icon, system enables the Enter filter Name field.
After entering the filter name, there is an Add button to save the filter name & a Cross button to remove it.
Enter the filter name & click on the Save button, the system will save the filter name successfully.
After adding the filter name, the system will display the saved filter name in the right – side search field.
Now, click on the Add Lookup Record icon shown below.
A pop-up screen opens, displaying the landing page settings data.
Here, mark true for the selected records where the user wants to display those filters as an advanced search on the widget.
After marking true on the selected filter names, click the OK button below & then system will display a message.
Click the close button to close the pop-up screen.
Return to the landing page and refresh that particular widget, The system will update the advanced search data on the widget which as shown below:
The system will display the count value along with the advanced search data according to the applied filters.
Now the user can use this advanced search record by clicking on it, & the system will redirect to the respective data records, showing data according to the applied filters.