Monday, 1 February 2016

Dynamic Region in Oracle ADF

Explanation: To switch contents displayed in the region dynamically, while dropping task flow on to the page, we select the Dynamic Region for holding the task flow. The af:region components generated in the JSF page remains same for both the static and dynamic regions. However, when we choose a dynamic region as a container for task flows, the taskFlowId referenced by the corresponding task flow binding will be pointing to an EL expression that evaluates to the task flow ID at runtime. 
When you drop a bounded task flow onto a JSF page to create an ADF dynamic region, JDeveloper adds an af:region tag to the page. The af:region tag contains a reference to a task flow binding. The sample of the metadata that JDeveloper adds to the JSF page is shown below:

Requirement: I have a dynamicRegionDemo.jspx page. On that page I will have two sections:
  1. left section where we will have three af:button named as Show view1.jsff, Show view2.jsff, and Show view3.jsff.
  2. right section which will have display the dynamicRegion based on the af:button clicked.
Solution: For solution to the above requirement follow the steps as shown below

Step 1: Create an Oracle ADF Fusion Web.Name the application as dynamicRegionDemo.

Step 2: Create three bounded task flows: btf1, btf2, and btf3.

Open btf1 and drag and drop view activity form the component palette on the btf1. Name the view activity as view1. Double click on the view1 view activity to create the view1.jsff. Inside view1.jsff drag and drop af:outputText and set the value as value="view1.jsff".

Open btf2 and drag and drop view activity form the component palette on the btf2. Name the view activity as view2. Double click on the view2 view activity to create the view2.jsff. Inside view2.jsff drag and drop af:outputText and set the value as value="view2.jsff".

Open btf3 and drag and drop view activity form the component palette on the btf3. Name the view activity as view3. Double click on the view3view activity to create the view3.jsff. Inside view3.jsff drag and drop af:outputText and set the value as value="view3.jsff".

Step 3: Create dynamicRegionDemo.jspx page. Drag and drop af:panelSplitter. Set splitterPosition="100". The af:panelSplitter will have two f:facet named as first and second.

Inside the first facet drag and drop af:panelGroupLayout and set layout="vertical". 

Drag and drop three af:button inside af:panelGroupLayout and named the af:button as "Show view1.jsff", "Show view2.jsff", and "Show view3.jsff".

Step 4: Create class having pageFlowScope. In class create private String currentTaskFlow = "btf1"; and also generate the accessors of currentTaskFlow as shown below:

Step 5: Inside the first button that is drag and drop af:setPropertyListener. When we drag and drop af:setPropertyListener from the component palette we will get the below popup:

Click on the icon beside To and we will get the below popup where we will set the expression as #{pageFlowScope.MyBean.currentTaskFlow}

Set From as btf1 and Type as action and Click OK.

Set the af:setPropertyListener  for the other "Show view2.jsff" af:button as to= "#{pageFlowScope.MyBean.currentTaskFlow}" from=“btf2“ and type=“action“.

Also set the af:setPropertyListener  for the other "Show view3.jsff" af:button as to="#{pageFlowScope.MyBean.currentTaskFlow}" from="btf3" and type="action"

Step 6: Drag and drop btf1.xml inside the second facet as a Dynamic Region as shown below:

When we click on Dynamic Region we will get the below popoup where we will select Managed Bean as MyBean and Click on OK.

Then we will get the below popup where we will simply click OK

Thus the corressponding code gets created in By default String taskFlowId and its accessors get created. Now we will change the name of the String taskFlowId to view1TaskFlowId. This is just for simplification purpose. Also we will make the changes for the accessors as well as shown below:

Now we will go to the getDynamicTaskFlowId  method and modify the code as shown below:

Similarly drag and drop the othetr two bounded task flows that is btf2.xml and btf3.xml as a Dynamic Region as shown below. We can see that it it throwing error. Reason is we have have only one Dynamic Region not three. So I will comment the two of the dynamiicRegions: dynamicRegion2 and dynamicRegion3.

Now change the String taskFlowId1 and String taskFlowId and its accessors also.

Step 7: Thus the complete code is shown below:

package com.susanto;


import oracle.adf.controller.TaskFlowId;

public class MyBean implements Serializable {
       private String currentTaskFlow = "btf1";
       private String view1TaskFlowId = "/BTF/btf1.xml#btf1";
       private String view2TaskFlowId = "/BTF/btf2.xml#btf2";
       private String view3TaskFlowId = "/BTF/btf3.xml#btf3";

       public MyBean() {

       public TaskFlowId getDynamicTaskFlowId() {
              if (this.getCurrentTaskFlow().equalsIgnoreCase("btf1")) {
                     return TaskFlowId.parse(view1TaskFlowId);
              } else if (this.getCurrentTaskFlow().equalsIgnoreCase("btf2")) {
                     return TaskFlowId.parse(view2TaskFlowId);
              } else if (this.getCurrentTaskFlow().equalsIgnoreCase("btf3")) {
                     return TaskFlowId.parse(view3TaskFlowId);
              } else
                     return TaskFlowId.parse(view1TaskFlowId);

       public void setDynamicTaskFlowId(String taskFlowId) {
              this.view1TaskFlowId = taskFlowId;

       public void setCurrentTaskFlow(String currentTaskFlow) {
              this.currentTaskFlow = currentTaskFlow;

       public String getCurrentTaskFlow() {
              return currentTaskFlow;

       public TaskFlowId getDynamicTaskFlowId1() {
              return TaskFlowId.parse(view2TaskFlowId);

       public void setDynamicTaskFlowId1(String taskFlowId) {
              this.view2TaskFlowId = taskFlowId;

       public TaskFlowId getDynamicTaskFlowId2() {
              return TaskFlowId.parse(view3TaskFlowId);

       public void setDynamicTaskFlowId2(String taskFlowId) {
              this.view3TaskFlowId = taskFlowId;

Step 8: Thus the complete dynamicRegion.jspx code is shown below:
Step 9: Save all and run the application. Thus the ran application is shown below:
Click on the Show view2.jsff button then view1.jsff gets changed to view2.jsff.

Click on the Show view3.jsff button then view2.jsff gets changed to view3.jsff.

Hence, the solution to our requirement.

If you like the post please comment, share and like me on Facebook.

Thanks & Regards,
Susanto Paul