Shay Shmeltzer's Oracle Development Tools Tips
-
Visual Builder
January 10, 2020
Edit Data In a Table in a Pop-Up Dialog - Revisited
I'm going to show you how to implement an editable table using pop-up dialog - a simple solution and design pattern that we use to provide a better editing experience for data. I've wrote a blog showing how to do this less than a year and half ago, but since then we introduced many enhancement to Visual Builder that further simplify the development experience. In fact, we cut the time it takes to implement this functionality by half (as you can see if you compare this video to the previous version).
The concept is that you create a dialog in the page that shows the details of the record you are editing, then when you select a record in the table we show the details in the dialog, where you can update them and save the data.
In the demo you'll see how to:
- Add an action link to a row in the table (0:33)
- Create a variable to host the current record (1:05)
- Assign the current record to the variable using the current.row parameter to the action chain (2:35)
- Add a dialog to your page and be able to visually edit it (3:30)
- Call component method to show and hide the dialog in an action chain (4:35)
Check it out here:
You can extend this functionality to add a similar dialog that adds a record to the table and calls the POST REST endpoint on the object.