Vahana Release - 2.5.16.0


27th March 2024

What’s New in vDesigner 2.0?

Note: To reflect the new changes please trigger the fresh Build

Set Configuration Task

Problem Statement: Currently, in vDesigner 2.0, users lack the capability to dynamically alter the UI properties of elements during runtime.

Solution: To address this limitation, we have introduced a new task known as “Set Configuration” empowering users to modify element properties in real-time.

Key Features:

  • Users can modify the UI properties of Row, Column, Card, Stack, Button, and Text elements.

Limitation:

  • The Set Configuration task allows users to change the properties of only one element at a time.
  • During the configuration of the Set Configuration task, users will have visibility of the elements present on the current page.

Fig3: This figure represents the Set Configuration Task.

Fig 4: represents the button color change in real time using a set configuration task.

Enhanced URL Navigation with Input Parameters and Smart Selector in Download File Task

In vDesigner 2.0, significant enhancements to the Download File task, aimed at providing users with more control and precision in URL navigation. With the introduction of Input Parameters and Smart Selector, users can now effortlessly navigate to specific URLs with accuracy and efficiency.

Improved Functionality:

  • Input Parameters: Empower users to open desired URLs with pinpoint accuracy by specifying input parameters. This feature allows users to define key-value pairs to navigate to specific destinations or points of interaction within a URL.
  • Smart Selector: Enhance the user experience with the Smart Selector in the Enter URL field.Now, user can provide the URL path through entities, static functions, and elements, which promotes the URL entry process and minimizes errors.

Fig 5: This figure represents the Download File Task.

Debugger Enhancement

Problem Statement: The current debugger in vDesigner 2.0 lacks clarity in presenting detailed log information, making it challenging for users to understand the provided data effectively.

Solution: To address this issue, we have implemented information structural enhancements in the debugger logs, aiming to provide comprehensive information in a more organized manner.

  • Detailed Information Display: Each task or action will now display detailed information to provide better context and understanding.
  • Inclusion of Parameters: Log entries will include essential parameters such as the triggering action element/page reference name, Business Rule (BR) condition and result, task name along with input configuration parameters, and task execution result.
  • Accurate Search Capability: Users will have the ability to conduct precise searches within the task information hierarchy, facilitating efficient navigation and retrieval of relevant data.

Fig 6: represents the Debugger Logs.

New properties introducing in Radio Group and Checkbox Element

Problem Statement: In order to cater to a wide range of UI use cases, there is a requirement to enhance the functionality of the “Radio Group and Checkbox” elements. This enhancement should include enabling multiple properties for these elements to better meet diverse user needs.

Solution: To address this requirement effectively, we propose the implementation of the following enhancements to the “Radio Group and Checkbox” element’s property panel:

  • Select Color: The color chosen by users to highlight or represent the selected state of an option. For example, when a user clicks or selects an option, the select color is applied to indicate its active state.
  • Unselect Color: The color chosen by users to represent the unselected or inactive state of an option. When an option is not clicked or selected, the unselect color is applied to visually distinguish it from selected options.
  • Border Radius: Border radius refers to the roundedness of the corners of an element’s border. It determines how much curvature or roundness is applied to the corners of a rectangular element, providing a softer or more stylized appearance.
  • Box Shadow: Box shadow is a visual effect that adds a shadow behind an element. It creates the illusion of depth, making the element appear lifted from the surface, and can be customized in terms of color, size, blur, and position.
  • Alignment: Alignment specifies the positioning of an element within its container. For the “Option,” alignment options include “Left,” “Center,” and “Right,” determining the horizontal placement of the element within its designated space.
  • Padding: Padding is the space between the content of an element and its border. Users can set padding to control the internal spacing within the “Option,” providing visual separation between the content and the border.
  • Checkbox Position: Checkbox position allows users to specify whether the checkbox associated with the “Option” appears on the left or right side of the content. This customization helps in accommodating different design preferences.
  • Checkbox/Radio Hide: The ability to hide the radio button associated with the “Option.” This feature allows users to choose whether the radio button should be visible or hidden, providing flexibility in design and functionality.
  • Background Select Color: The background color chosen by users for the selected state of the entire “Option.” This color is applied to the background behind the content and border when the option is selected.
  • Background Unselect Color: The background color chosen by users for the unselected state of the entire “Option.” This color is applied to the background behind the content and border when the option is not selected.

Fig 7: This figure represents the property panel of the Radio Group element.

Introducing Autofill/ Wrap/ Manual in Text element

Problem Statement: Currently, users are unable to adjust the width of the text element through the property panel. Additionally, users are restricted to utilizing only 100% of the available space on the canvas or within containers.

Solution: To address this issue comprehensively, we propose enabling the Manual, Autofill, and Wrap properties within the text element’s property panel:

  • Manual: This feature will empower users to set the width of the text element explicitly via the property panel. Users will have the flexibility to define the width in either pixels or as a percentage.
  • Autofill: With the Autofill property enabled, the text element will automatically adjust its size to utilize the available space on the canvas or within containers. This ensures efficient utilization of available screen real estate.
  • Wrap: enabling the Wrap property will dynamically adjust the size of the text container based on the content inside it. This ensures that the text container accommodates varying content lengths appropriately, optimizing readability and aesthetics.

Limitations: Text alignment will not work for a single-line wrap or autofill text on preview and build.

Fig 8 : This figure represents the Text element’s property panel.

Introducing Loaders

Problem Statement: Users often encounter difficulties navigating through screens due to the absence of a loader when network interruptions occur, especially in cases of API failure. This lack of visual feedback leaves users stranded on screens without indication of ongoing loading processes.

Solution: To address this issue and enhance user experience during network interruptions, we propose the implementation of loaders across multiple modules and functionalities, including creating Data Model, Creating entity, creating enumeration, creating themes, smart selectors in the vDesigner, Br, Task Groups etc.

Fig 9 : This figure represents the “Loaders” at the page level.

Task Group inside Task Group

In vDesigner 2.0, we have introduced a new functionality within the task group feature. Now, users are permitted to create task groups that include other task groups. This means users can easily organize their tasks by nesting task groups within one another. Users can simply drag existing task groups into the task execution panel to include them within another task group.

Limitation:

  • Users are not permitted to call recursive task groups. This means that a task group cannot contain itself directly or indirectly within its own structure.
  • Users are only allowed to drop task groups into the task execution panel. To make changes to a specific task group, users need to open that particular task group separately for editing.

Offline Application Messaging

Problem Statement: Currently, applications built on vDesigner 2.0 require an internet connection to operate seamlessly. However, when interruptions occur in the data connection or when the mobile device is not connected to the internet via WiFi or mobile data, users are not provided with any indication or loader message. This leads to confusion and frustration as users are unaware of the connectivity issues.

Solution: To address this issue and enhance user experience during offline scenarios, we propose implementing two types of messages:

Data Connection Interruption:

If the data connection is interrupted while the application is running, a message will be displayed to inform the user about the connectivity issue. This message will prompt users to check their network connection and attempt to reconnect.

Mobile Device Not Connected to the Internet:

Before launching the application, a message will be displayed if the mobile device is not connected to the internet via WiFi or mobile data. This message will notify users to establish an internet connection before proceeding with the application.

Fig 10: represents the offline messaging

Data Table component

In vDesigner 2.0, we have introduced a new component called Data Table which enables users to easily display structured data in a tabular format within their applications.

Key Benefits & Feature:

  • Drag-and-Drop Interface: Users can effortlessly add a data table and column to their application canvas and customize it according to their requirements through an intuitive drag-and-drop interface.
  • Configurable Columns: Easily define columns and their properties such as column attribute Id to get the listing of the data in the particular column, width, and Column text alignment to adjust column’s data to desired position.
  • Data Binding: Seamlessly connect the data table to various data sources including Data Model’s entity through Data store, and static JSON for static data population.
  • Sorting: Enable users to interact with the data table by implementing sorting functionality, data will get sorted on the basis of ASCII value of the data, also users are required to click on the header of the column to obtain the sorted order of the column.
  • Pagination: The addition of pagination allows for efficient handling of large datasets by splitting them into manageable chunks, enhancing performance and user experience, that’s why vertical scroll is not present on the data table user required to provide the pagination while configuration for the large data set.

Limitation:

  • Users are not allowed to color a particular cell of the data table.
  • To obtain the sorted ordered data from the column, users are required to click on the particular header of the column.
  • Vertical scroll is not present in the data table. However, users are required to enable pagination for larger datasets.

Fig1: This figure represents the Data Table and Data table column on the vDesigner2.0.

Fig2: This figure represents the Data table examples using static JSON.

Bug Fixes

Designer 2.0

UI Fixes

  • Implemented UI enhancement to display relevant information when a task group is empty, improving user experience and clarity.

Data Modeler

  • Resolved the issue within the Data Modeler module for improved functionality and stability.
  • Implemented a restriction preventing users from deleting entities linked with the Data Model in Data Modeler, ensuring data integrity.

Design System

  • Implemented fixes to restrict themes to individual applications, preventing unintended application-wide theme changes.

Elements and Page

  • Fixed the text overflow issue, ensuring that text remains contained within the Card boundaries.
  • Resolved the size adjustment issue of header/footer conveniently through the canvas interface.
  • Enhanced the UI rendering of radial progress bars in the style viewer for improved visual representation.
  • Resolved alignment discrepancies occurring during header copying, ensuring consistent element alignment across pages.
  • Implemented fixes to prevent automatic width adjustments, ensuring stable element dimensions even when adjusting other elements horizontally.
  • Implemented fixes to allow users to adjust the border radius of dropdowns as desired.
  • Resolved the UI display issue to ensure that long data model names do not disrupt the appearance of the “Link Entity” button.
  • Fixed the issue of enable/disable option within the carousel component.

Tasks

  • Resolved the issue where users were able to move values inside the smart selector within BRM.
  • Fixed scrolling issue to ensure smooth navigation and configuration within the service task interface.
  • Implemented fixes to prevent the disappearance of popup pages when height is not specified, ensuring consistent visibility on the canvas.
  • Implemented enhancements to VDesigner 2.0, enabling users to map sub-entities accurately within the output location of the Invoke SDK task.
  • Fixed the functionality of the Dynamic Open Web task to ensure proper operation on both web and Android platforms when integrated with elements.
  • Fixed the issue causing duplicated pasting of content in static functions within the copy data task, ensuring content is pasted only once as intended.
  • Fixed the functionality of the “data masking” property in input fields to ensure it operates correctly during preview, providing users with accurate data masking capabilities.
  • Implemented a fix to ensure that the ‘message name’ updates correctly after editing it within the message library.
  • Fixed the issue, allowing users to select child entities seamlessly within the API Widget in Designer 2.0.
  • Resolved the issue, ensuring that task group names update correctly for all task groups in Designer 2.0.
  • Improved the performance of the task manager module, enhancing overall responsiveness and efficiency.
  • Implemented indexing for tasks displayed in the Info Panel, facilitating easier navigation and access to relevant information.

Canvas

  • Implemented fixes to prevent the display of unnecessary error messages when dropping a row on the canvas, ensuring a smoother user experience.
  • Corrected the alignment of suffix assets, ensuring they align properly according to the specified settings on the canvas.
3 Likes

Good explanation @Jay_Sharma.

2 Likes