Embedded Files
Improving UX by Custom Popups in Oracle Apex
Hi all,
Recently, I had a requirement that I should find a way for users to understand the hierarchy better when selecting a value from List of Values.
To give you a better context, we have a hierarchical structure of Systems and Elements. And when creating a rule, user needs to select an element. Using the traditional List of Values and Select list item, we can of course list all the elements. However, the requirement was to show these elements in a way that user can see which ones are sibling and who is the parent of each.
After some discussions and research, I came up with the solution of using custom popup. Here is the initial look of how it looks:
In the image above, you see a inline dialog page that is a Tree region. I have a display-only page item and a button attached to it. The goal was to imitate the select-list look:
A good way to have this look is this plugin. Of course, you can also use custom CSS rules to achieve the same look without plugins. On the click event, we can then show the inline dialog region simply by a dynamic action.
As mentioned earlier, inline dialog region is a tree region. The source and attributes of it should be adjusted per need but essentially, the source has the following structure:
Now we have the inline dialog and a button to show it; the trickier part comes: setting the page item when a value is selected from the tree. To do so, we build up a dynamic action on Tree of type "Selection Change [Tree]", selection type "Region" and region "Tree Region".
Then we need to create a true event: "Execute Javascript Code"
And then we need another True event of type "Close Region" as selection type "Region" and region "Tree Region".Â
With that, we have implemented a simple custom popup where we imitate a pop-up LOV look and Tree region functionality. I hope you find is useful for user experience.
Google Sites
Report abuse