How To Create Editable Table In VBCS?

A brief overview of editable table

In VBCS, an editable table refers to a user interface component that allows users to view and manipulate tabular data in a web application. It provides a grid-like structure where users can enter, edit, and delete data within individual cells.

The main purpose of an editable table in VBCS is to provide a dynamic and interactive way for users to work with data.

Some common use cases for editable tables include:

1. Data entry:?Users can input data directly into the table, either by typing into empty cells or by copying and pasting from external sources.
2. Data editing:?Existing data within the table can be modified by users. They can select a cell and make changes to the content, such as updating text or changing values.
3. Data deletion:?Users can delete rows or individual cells within the table, allowing them to remove unnecessary or incorrect data.
4. Data validation: Editable tables can include validation rules to ensure that the entered data meets certain criteria. For example, you can enforce data types, numeric ranges, or mandatory fields, providing data integrity and consistency.
5. Sorting and filtering:?Users can sort the table by specific columns or apply filters to display a subset of data, making it easier to navigate and find relevant information.
6. Collaboration:?Multiple users can work with the same editable table simultaneously, allowing for real-time collaboration and updates.

Editable tables in VBCS typically provide a range of user-friendly features, such as inline editing, automatic cell resizing, column reordering, and pagination. They enable developers to create powerful data-driven applications that empower users to interact with and manage data effectively.

To make editable table in VBCS, these are the pre-requisites:

• Array Data Provider
• Custom Events
• Custom Java Script

We have developed a VBCS application that utilized the business object CarsDetails, which had already been constructed. Select the types, then create the variable.

Create an ADP, choose a type, and add the key attribute.

Create an event with the name “onPageLoad” after creating the ADP.

Choose the rest endpoint method as a get, then utilise one variable on the success side.

Take the endpoint body from the result side and map it to the carsDetailsADP data under the target.

To utilize later, make one object.

Create a table and enter the data for "carDetailsADP" in the table's properties. Then, choose the fields that the user will see.

We must also mention the template.

Since the template is not used for the Year of Model and Price fields, the user cannot alter their data.

Mention the variable in the text input data area.?

Select the table, then on the right, click the event drop-down menu, where you should choose ojBeforeRowedit.

Assign one variable.

After Choosing the table, construct the ojBeforeRowEdit action in the right-side event. Assign a variable to this action, then send rowData to the CarsRowData object that was previously created.

To update the edited data, create one more event. Next, you need to select the table in that ojBeforeRowEditEnd.

Choose Fire Data Provider Event from the action menu, and then provide the carsDetailsADP to the event target. then pick mutate as the type.

The parameter is now assigned, and parameter is used as an update.

Map the carsRowData object to the data listed in square brackets below the update.

Similarly, take the rowKey from the source and map it to the target's keys.

This relates to the actions we must follow to create an editable table.

Create a second object to be used later to store the updated value.

Create the button, then use the For each action to assign carDetailsADP data under the items.

Update previously constructed objects later by-passing current data to updateCarsDetails.

After choosing Call Rest, select Patch Endpoint.

The target side parameter is mapped to the primary key ID.

Now, from the right-side target, pass the updateCarsDetails object to the body.

This is the action chain?used to update the data in an editable table and add a user confirmation notification.

This reset action chain calls the onPageLoad action once more, just as it did at the end of the previous update action chain, after resetting the variable and refreshing the ADP.

Currently, we are applying filtering for that created modelNameSDP in order to improve the view application’s key element that was mentioned inside the properties.

Use a single select component inside the data map modelNameSDP, with the item Text having the model and the value also being mapped.

When constructing a search action, use CallRest first to select the get method endpoint and then apply the filter from the right-side properties.

Map the body elements to the carDetailsADP data based on the outcome.

This is the filtering criterion used to retrieve specific model data.

This is the filtering criterion used to retrieve specific model data.

Reset the carDetailsADP using the reset action before calling rest.

Let's launch the application and perform a search for any model name to obtain details for that specific model.

This is the result of the search action; the model year and price fields cannot be edited because there is no template for those fields.

Data are edited in the Fuel Type and Transmission fields. Diesel and manual were the prior values; now, petrol and automatic have been added.

Model name: Verna; Previous fuel type: Diesel

Edited fuel type: Petrol

The user can update the modified details and receive a notification by clicking the "Save" button.

The altered new values can also be seen in the first. By utilizing for each condition, we can update data from multiple columns and rows in a similar manner.

If you have any questions regarding editable tables in VBCS or are looking to develop a VBCS application, then get in touch with Conneqtion Group today or send an email to [email protected].

?

?