Creating a custom declarative component in ADF

When we are developing any web application, we might use some components as a group. Instead of grouping these components every time, ADF provides us a feature to create a custom declarative component using the existing ADF faces components. We can reuse them across multiple projects and applications as required.

This blog will explain you how to create a custom declarative component and use them in an application.

1. Create a new ADF application. Right click on the ViewController project, click on new, choose JSF --> JSF Declarative component.

2. Give a name for the component to be created, and add a library to be stored in.

3. Add any facets if required. In this example, I gave one facet.

4. Add attributes to be used as below.

5. Add methods, if any required. Give method declarations in the below format.                                                          void method(javax.faces.event.ValueChangeEvent)
             void method(javax.faces.event.ActionEvent)

6. A jspx page will be created and you can create a custom component by grouping some components in the page like below. Here I enclosed three af:inputtext's in a Panel box.

7. For the value of the af:inputtext, choose the attributes we created.

8. Create a facet ref in the panel box to refer the facet we created.

9. In the value change Listener of the Country Id, choose the Declarative Component methods. Similarly, create a button and point the action listener method to the defined method.

10. Now, we are done with the creation of the declarative component and now we have to see how to use it in an application. For that, first we need to create a deployment profile and generate a ADF Library JAR file.

11. Once the deployment is done, we get a JAR file. We need to add this as a file system to any project we want to use in.and add that to the project.

12. Now, create a new page in the project and select the custom created library in the component palette. Drop the component on the page.

13. Point the values of CountryId, Country Name and Region Id to the bindings.

14. Write the below code in the bean to get the new value. (we can add any logic here, if needed)

15. Point the button action to the "Next" method of the VO. (To navigate through the records)

16. We can see the new facet created and we can put any elements if required. Here I added an output text.

Let's run the page and see the output.

SOP statement gets printed in the value change and Next button makes you navigate to the next record.

So, we have created a custom component and used it in an application.

Hope this helps :)

Creating a Custom column filter in ADF

af:table provides column filtering feature when filtering is enabled in the table. Sometimes, we want to override the filtering feature with our custom business logic.

Examples of some of the business scenarios are explained below.

Usecase 1:

We should not allow the user to enter anything in the field provided for filter, instead we want him to choose from a list of values already provided and perform filter on only them.

Usecase 2:

We do not want to allow characters and force him to enter only numbers in the filter field.

Usecase 3: (Most people need)

When a default filter is invoked, ADF fetches the data from the database. If the table is an editable table and if there are any modifications performed, all the changes will be lost because the data is fetched from the DB. Most of the times, we do not want to lose the data and want to perform a filter on the existing view state.

This blog explains these features.

1. Create an EmployeeEO and EmployeeVO. (using the default hr schema in this example)
2. Create a jspx page and drop the EmployeeVO as an af:table with filtering enabled.

 3.  Every af:column is provided with a default filter facet.  Whatever you drop in the filter facet will override the default column filter input text.

   

       4. Now, drop an af:inputText in the EmployeeId filter facet.

       5. Bind the af:inputtext to the bean.

     6. If you want to override the filter feature, we need to override the QueryListener on af:table.

       7. In the bean, write the below code.

       8. This query mode will help in performing In-memory query without a need of a DB hit and hence we don’t lose any modifications done in the UI.

       

       9. As below, I have modified the Employee name from Steven to Stevenaaa.

.     10.  And performed a search for EmpId 130.

      11. Again, ran a query to fetch EmpId 100. If you see the modification still exists and the data is now not fetched from DB. Instead it is fetched from the cache.

In the similar way, If we want to have an LOV in the filter facet, have an af:selectOneChoice. If we want to restrict the user input, we can restrict it in bean or in the UI by using regular expression.

Hope this helps :)

Model level LOV Switcher

In this post, I will be describing how to use Model driven LOV Switcher. 

Sample Use case 1:

Say, user can choose whether he has to search the data using Regions or Countries.

So, You have a check box with values Country or Region.

If user selects Country, We have to show Countries LOV and 

if the user selects Region, We have to show Regions LOV.

So, there are many ways to do this. The usual way is having two attributes in VO and having LOV's defined on them. Conditionally rendering them on the UI based on the selected value.

But, this is not required. With one VO attribute itself we can do this using LOV switcher.

Sample Use case 2:

We have a EO Based VO, We have to store either country or Region in the DB table based on the selected value. So, we use LOV switcher here to implement this case also just as above.

Demo:

1. Create two read-only VO's based on Countries and Regions from the HR Schema.

2. Create a transient VO having two attributes.

3. Create a static VO having two values, Country and Region.

4. Create List of values on the Filter attribute pointing to Static VO and select Boolean radio group in the UI hints.

5. Create an LOV for SearchBy Attribute pointing to the CountriesVO and name the LOV as country. By clicking on the + again, we can create one more LOV for the same attribute. Now create it on RegionsVO.

This automatically creates a LOV switcher.

6. Choose the List of Values Switcher to Filter attribute. (It means, we are going to swith the LOV's based on value of filter attribute). Shown in above screenshot.

7. Now, drop the Filter attribute on UI as radio group and drop the SearchBy attribute as Select one choice. Put auto submit property true on the Radio group. Put partial trigger on the SelectOneChoice to Radio group.

Now, When you select Country  in radio group. Countries LOV will be shown, else Region LOV will be shown.

           

Hope this helps :)