SmartUX Demo Application

Welcome to the step-by-step guide on how to use the Demo application. In this guide, we’ll walk through a demonstration of a web client application created in SmartUX Studio.

To design a sample application using SmartUX, we plan to develop it in XPA Studio. Here are the tables utilized in the development of the web client application.

Similarly, we also have a compilation of programs necessary for the development of the web client application in XPA Studio.

This is not an actual live preview but a representation of the live preview on the canvas, illustrating how the screen of the demo application will appear during runtime.

We’ve crafted a compact sample project to showcase SmartUX, featuring a list of members. In this demonstration, you can add, remove, and modify members, enhancing their information as needed.

This represents the expanded mode of the member list form, where the table and its properties are configured according to the specifications. As mentioned, SmartUX offers low-code development, enabling most functionalities needed for each component or widget through the properties section. This includes tasks such as adding a paginator and configuring its properties, as well as making necessary adjustments for the visibility of a particular widget.

For adding and modifying the members list, a droppable widget named “accordion” was employed here. This widget serves the purpose of grouping, allowing the content to be collapsed or expanded as needed.
Create and Modify members are almost similar screens.

Here is the second section of the sample project, introducing an event list. Currently, there are no events in the list, but you have the option to create events using the provided “Create Event” feature.

By selecting “Create Event,” you can generate events and link particular members to each event by selecting the “Select Member” option.

When choosing the “Select member” option, the details of members from the member master table are presented for selection.

Similarly to creating a member, you have the ability to modify and delete events from the event list.

To build this sample application, the screens are crafted using SmartUX, including Member List and Member Card. Logic is implemented through the property sheet to showcase or display information. Additionally, the MContact screen utilizes the contact table of members. For the events section, screens include the Event List, Event Card, and Registered Members.