Often it happens that data on an application page changes. This can happen through the user himself, for example, when he changes a data record through a modal dialog, or through other users or events on the same system. Let's imagine we are on an application that deals with campaigns. On this page you can see all the dependent data. The campaign itself can be edited through a modal dialog. And just in this dialog we can change the title of the campaign.
If we close this dialog now, we are still on a campaign with the "old" name. In the standard APEX world, it is now considered that this page needs to be reloaded, and thus one would rather choose a branch to the parent page here, instead of just closing the dialog.
Here, however, the region titles unfortunately do not belong. So this article is about how you can integrate this reactivity into your applications with simple means and by using Knockoutjs.
As already announced I use Kockout.js for this. Knockout is a free open source library, which is always included in the Oracle Jet part of APEX. Therefore it is easy to include this library in our site or application.
Knockout is mainly about databinding and reactivity. For this Knockout uses the MVMV principle. Data from the model is stored in a ViewModel and bound to a view by data binding.
Knockout then takes care of updating the data in the ViewModel and in the view. And if we imagine the whole thing dynamically in our APEX world, it might look something like this.
The content of the AJAX callback can then look like this, for example. The end result is that the campaign name is returned as JSON.
Now to update the campaign name in the page by knockout, it is enough to bind it to the text property of a span-element inside the region header.
As I said, for the example updating only one value. Knockout is probably a bit overkill. But let's imagine that there is more than one element to be updated. In this moment the use of Knockout makes sense, because here only the minimal additions are necessary.
Who has the will, just have a look at the Knockout page. https://knockoutjs.com