Swipe Action to Edit a List View in Oracle Visual Builder

In this article, we’ll show you how to use the swipe action to edit a list view in Oracle Visual Builder.

In Oracle Visual Builder, adding swipe actions, validation checks, and custom rules makes your app feel smoother and more reliable. Swipe actions let users quickly interact with data, while validation ensures they enter the right values. Storing changes locally before syncing with the server also makes the app faster and more responsive, providing a better overall experience.

Following are the steps to complete this use case:

1. Develop a VB Application by entering the application name and choosing the Redwood Starter Template from the available options as shown in the following screenshot:
2. When crafting a VB application utilizing the Redwood Starter Application template, it generates a ‘vbredwoodapp’ with the default flow set to ‘main’.
3. Click on +icon beside the main and select Create Page as shown in the following screenshot. A dialog box will prompt us to input the page ID. Upon scrolling to the bottom, we’ll encounter the Welcome Page Template. Select it and click on the Create button as shown in the following screenshot:
   
4. Now click on main flow, switch to the settings tab, and change the default page from main-search to main-listview as shown in the following screenshot:
5. Before we start with the UI let’s create an Employee business object, create the required fields, and add data to it.
6. Now navigate to the main-search Page Designer tab, switch to Properties of the page, and add the Page Title as Employee Details as shown in the following screenshot:7. Click on the Data tab below the components, select Employees BO, drag and drop to the default slot, and select List under rendering options as shown in the following screenshot:
   8. Select List Item Template from the available layouts and click on Next button as shown in the following screenshot:
   
   9. Select fields as per your wish and click on Next button followed by Finish button as shown in the following screenshot:
   
   10. Now Click on Structure tab expand the layout structure of the page. search for <li> element ,drag and drop it after Row Template and make sure oj-list-item-layout in child element of <li> as shown in the following screenshot:
   
   11. Now Search for Swipe actions, drag and drop it after <li> as shown in the following screenshot:
   Insert the following code after the list item layout, just before closing the Swipe Action.

    <template slot="end">
   
   <oj-option value="rightedit" class="oj-swipeactions-default">Edit
   
   <span slot="startIcon" style="width: auto;" class="oj-ux-ico-hand-up"></span>
   
   </oj-option>
   
   </template>

   12.Click on List view, go to properties and switch to Quick Start tab and click on Add Edit Page as shown in the following screenshot:
   
   13. In Select the End Point Structure page, select the fields to be updated in the page and click on Finish button as shown in the below screenshot:
   
   14. The edit page is now complete, and the “Edit Employees” button is visible at the top of the table. We’ll use this action for a different purpose.

   Next, click on the Swipe Action and go to its properties. Switch to the Events tab, then click on +Event Listener and select +Create event, as shown in the screenshot below:
   
   15. Select ojAction under Swipe Actions Events and click on Select button as shown in the following screenshot:
   16. Select the navigateToEditEmployeesChain under Page Action Chains and click Select Action Chain button as shown in the following screenshot:
   17. Once the Action chain is mapped set default employeesId as $current.data.id as shown in the following screenshot:
   18.When you run the application, you should see a screen displaying a list of employee details. By swiping a record from right to left, the current record’s data will navigate to the next screen, where the user can update the information. After making changes, the user can click Save, and the record will be updated, as shown in the screenshot below:

   
   When User try to swipe record from right to left we can see edit Option showing up which will take us to Edit Employee screen.
   
   When the user updates employee details and clicks on the Save button , data will be updated in the backend table.

   This is how to use the swipe action to edit a list view in Oracle Visual Builder Cloud Services.

   If you liked the article, please like, comment, and share.

   Watch the video below to see all the steps presented on the same template:

   Please look at my YouTube channel for Oracle Integration-related videos and don’t forget to subscribe to our channel to get regular updates.

   Further Readings

   Creating a search page using Oracle Visual Builder Redwood

   Using Redwood General Overview Page Template in Oracle VBCS

   Configuring Simple Create and Edit Page Template | Oracle Redwood

   Configure General Drawer Template in Oracle Redwood

   How to Customize the Lock Screen in Oracle Visual Builder

   Merging two CSV files into a single file in Oracle Integration