Donnerstag, 25. Juni 2015

Refreshing UI component in Parent TF from nested Child TF

Consider a scenario in which you want to refresh some component present in consuming task flow (parent task flow) upon some action in consumed task flow (child task flow).

To elaborate, you have a task flow and its page fragment (lets say ParentTF.xml and parentPF.jsff). Inside parentPF.jsff there are two components:

  1. An output text component
  2. Another task flow in the form of a region with its own page fragment (lets call it ChildTF.xml and childPF.jsff). There is a command button titled “Refresh” inside childPF.jsff fragment.

Now the requirement is such that when you hit “Refresh” button in child fragment, you want to immediately update the output text value on the parent fragment.

It is a very simple scenario but it can be complicated if there are many levels of child task flows included one inside another. Having multiple parent activity call for all nested task flows is cumbersome. Also, using a complex approach like contextual events for such a simple use case may probably be the last thing in the world you would like to try out.

In this blog we will look at a simple approach of how this can be achieved.

Step 1: Create a bean which will have binding for the output text present on parentPF.jsff and a method to partial trigger the output text. Important thing to note is that this bean is created for this particular special use case and will be registered with ParentTF in request scope. All other UI side logic should be written in separate managed bean.





As you can see there is output text binding added to the bean alongwith a static method refreshParentOutputText().

The beauty here is, anywhere in the application this static method can be called which will refresh the output text, provided the bean is initialized.

Step 2: In the managed bean of ChildTF call the refreshParentOutputText() upon “Refresh” button click. As you can see we are first capturing the input text value in a view scope variable and on “Refresh” button click we are passing the same to refreshParentOutputText() method.




When we run the Index.jspx we will see following:





In above screenshot, the output text component “Refreshed value:” belongs in ParentTF which has ChildTF as a region. Inside ChildTF we have the input text component and Refresh button.
Enter some value in the input text and hit Refresh to see the desired result:




That’s it! You can download the complete application attached with the blog.

Happy Coding!

1 Kommentar: