Skip navigation.

Andrejus Baranovski

Syndicate content
Blog about Oracle technology
Updated: 6 hours 31 min ago

Oracle JET and ADF Faces Integration in ADF

Thu, 2015-11-12 22:49
Oracle JET provides a set of UI components, based on a combination of HTML and JavaScript. ADF Faces is an Ajax-enabled rich JavaServer Faces component framework that uses JavaScript to render client-side components, implement rich component functionality, validate user input and convert user data input. Although it is not officially documented, but obviously Oracle JET components can be integrated into JSF pages implemented with ADF Faces. I think such integration provides many benefits to ADF Faces. Use cases where performance is critically important can be implemented with Oracle JET client components and rich functionality can be implemented with ADF Faces, all in the same ADF application. Probably I would not create dependencies between Oracle JET and ADF Faces components rendered on the same page. Oracle JET should render data coming from REST services, while ADF Faces should work with data obtained from ADF Bindings layer.

I have managed to implement Oracle JET component and ADF Faces UI in the same physical ADF page. Oracle JET group renders input text, user types text and this text appears in the output below (use case is described here - Getting Started Quickly without the JET QuickStart). ADF Faces UI group renders regular ADF data entry form with navigation and save/cancel buttons. It all works together on the same page:

Download sample application implemented with JDeveloper 12.2.1 - I did not delete Oracle JET libraries from the sample application, so you could download and directly run it. Download size is a drawback, Oracle JET is part of application and it occupies around 11 MB.

Some text is entered into Oracle JET field, on enter it is copied into output below:

ADF also works as expected, for example I can change Salary value and commit changes with Save button:

ADF validation also works fine, I remove value for mandatory field and try to save. Required validation message will popup:

Take a look into ADF application structure with Oracle JET elements inside. Basically I just copied Oracle JET files into ADF ViewController public_html folder:

There is Oracle JET JavaScript file, where function is implemented to handle text entry and output update, pretty simple one:

Here it comes the most important part - ADF page. Instead of using HTML page to implement Oracle JET, I'm using regular ADF page based on JSF and ADF Faces. Oracle JET CSS and RequireJS script for Oracle JET are defined in the top of the page, just above the form - this will make sure correct initialisation for Oracle JET:

Oracle JET UI (input text, together with output text) is defined inside ADF Faces Panel Header with HTML div. This is how Oracle JET is rendered inside ADF page, using HTML:

Stay tuned and I will be posting more use cases on Oracle JET integration topic.

ADF 12.2.1 Responsive Dashboard with Masonry Layout

Wed, 2015-11-11 11:07
ADF 12.2.1 is a breakthrough in responsive UI. Never before it was so easy to implement good looking and high performance ADF UI. Masonry layout component allows to develop responsive dashboard made from separate tiles. Tiles can be reordered, resized and even removed. Tiles layout is dynamically constructed based on available screen size.

You should see how it works, check video based on sample application - Tiles are reordered as I change screen size, and even more - I can reorder them by myself, just with drag and drop:

This is default dashboard layout with four tiles on wide screen:

As resize screen to be more narrow, tiles are recorded to occupy available space:

With even more narrow screen, tiles are reordered to occupy only one column:

User can scroll up/down on narrow screen to see all tiles:

I can move and reorder tiles manually with drag and drop. In this example I reordered tile with employee information to be below employees chart:

If screen width is resized to be even more narrow, ADF 12.2.1 responsive UI template (check my previous post about responsive UI improvements in ADF 12.2.1 - ADF 12.2.1 Responsive UI Improvements) will reorder facets and there will be only one column UI:

Implementation is simple, you should use new ADF Faces component - Masonry Layout. Add any number of UI layout components (tiles) inside. Manual reordering is handled with regular ADF Faces drag and drop functionality:

Each tile must be assigned with masonry layout style class, this will control tile dimensions:

You can watch OTN ArchBeat video, where I'm talking about ADF 12.2.1 and responsive UI:

Oracle JET - Rendering Table from ADF BC REST Service

Sat, 2015-11-07 22:09
Oracle JET - new tool for us to build UI applications with JavaScript. Right now there is no out of the box integration with ADF Faces, I heard on OOW there might be some sort of integration available in the future. At the end of the day this is only JavaScript and you can integrate it into existing ADF page by yourself. Probably you would not want this, ADF Faces offers very rich set of functionalities and there is no need in extra components. Unless you would like to use WebSockets in ADF and would like to push data from JavaScript into DVT components - it could be easier to do this with JET, instead of going through ADF Bindings layer.

JET comes with developer guide, this is the first source of information along with Cookbook examples. I have implemented sample application for today post, based on developer guide section - Creating a CRUD Application Using Oracle JET. Here you can download the sample - If you would like to run it, make sure to add JET JavaScript libraries, you can take them from JET QuickStart. Size of these libraries was too large, this is why I have removed them.

REST service is implemented with ADF BC, I have described it in previous post - ADF 12.2.1 ADF BC Support for REST.

This is how it looks a table rendered with JET from REST data supplied by ADF BC, with pagination support. JET is using Alta UI style, visually there is no much difference comparing to ADF Faces:

Data is displayed from REST generated on top of ADF BC:

Typical JET use case is implemented by combination of JavaScript and HTML files:

JavaScript function contains a logic to invoke and parse REST service, everything is handled by JET API and popular JavaScript modules (such as Knockout, etc.). You can see how REST resource URL is defined and there is parsing rule to apply to the fetch result. I have set to fetch up to 20 rows only:

There is main JavaScript file in JET. You need to include initialisation steps there:

The last step - UI. JET offers table component with pagination support. Pagination happens on client side, this means you should not fetch many rows anyway. UI structure is pretty simple:

I have recorded a video to show how table pagination works. All rows are on client side and still pagination is not super quick, as I would expect it:

For comparison, I have uploaded table pagination performance video for ADF 12c Alta UI. ADF Faces pagination support works pretty quick, if not faster:

I'm happy to have additional Oracle development toolkit available. We are going to use it in our projects in combination with ADF.

OOW'15 Session Slides - Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support

Wed, 2015-11-04 23:46
You can view slides from recent OOW'15 session (Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support [UGF2717]) on SlideShare:

I was explaining how to implement responsive layout and fast performance ADF 12c applications with Alta UI. New ADF 12.2.1 features were discussed. Session went pretty well, all demos were working without issues. I was happy with the feedback, for example a tweet from Grant Ronald:

Here you can download session demo application - This application includes high performance ADF Alta UI dashboard with WebSockets.

ADF 12.2.1 ADF BC Support for REST

Wed, 2015-10-28 13:46
ADF 12.2.1 provides out of the box support for REST. You should read about all available REST functionality in ADF BC here - 16 Creating RESTful Web Services with Application Modules. I have created very quick sample application to test how it works.

Before generating REST on top of ADF BC, you must configure release version for REST. This can be any number:

To generate REST, go to REST Web Service interface in Application Module and add new REST resource. Here you can select VO and provide REST resource name:

JDeveloper generates REST resource where you could configure attributes to expose, custom methods, etc.:

As soon as you generate REST resource on top of ADF BC, JDeveloper creates new project with web.xml. You could use this project to run/test REST (simply right click and choose Run to test on integrated WLS):

I can test REST through URL:, ADF returns well structured REST response:

ADF is smart to return only a subset of data, it offers a parameter to control how many rows to fetch in a single call, it also shows if there are more rows to be returned in the result set:

I can set limit parameter to retrieve only one row, this is how it works:

Download implemented sample application -

ADF 12.2.1 Responsive UI Improvements

Tue, 2015-10-27 15:30
ADF 12.2.1 provides much better responsive UI support comparing to previous version ADF 12.1.3. Previously we were using CSS media queries to hide/show facets. This worked, but it was not great from performance point of view. Same region was duplicated into different facets, both loaded into memory, but only one displayed. ADF 12.2.1 comes with new tag af:matchMediaBehaviour, this tag is using CSS media query to detect screen size, and it updates layout component property. No need anymore to use different facets, we can update properties directly.

This is how works, check in the video. Two blocks implemented with ADF regions are re-arranged into top-down layout, when screen size becomes too narrow to render left-right layout:

Here is the example of panel splitter layout component with af:matchMediaBehavior tags:

This tag contains three properties - propertyName, matchedPropertyValue, mediaQuery. You can define property of layout component to override through propertyName. New value for the property is defined by matchedPropertyValue. CSS media query is set to define condition, when layout component property value should be changed based on the screen size (if screen size is less than defined):

Two ADF regions are displayed right to left, when screen size is wide enough:

Same two regions are re-arranged to display in top to down layout:

Download sample application -

Customer References - Red Samurai ADF Performance Audit

Fri, 2015-10-23 05:54
We have collected many customer references for Red Samurai ADF Performance Audit Tool around the globe. You can browse through and check what other people are saying about this tool and our ADF work - Red Samurai ADF Performance Audit Tool.

Pretty happy to receive such strong feedback from different countries. This encourages us to implement new features and release new versions.

Some of the references, read more in the dedicated page:

Orlando Kelly, AMEC Foster Wheeler, Canada

Thanks for the new version of this tool. For any serious production web application, being able to instrument the application and then analyze the use and performance of it should be a mandatory practice for all web development shops. We have been using this tool on our application for the last few years and it has helped immensely in improving the performance and stability of our application to a global audience.

In any large ADF application, the ability to drill down to specific view objects that may be causing an issue or look at historic data to spot trends is a lifesaver.

I'm looking forward to utilizing this next version of the tool in the next few weeks.

Torben, TIA, Denmark

We are using this tool, both in production and also during development. Our product is a large ADF application with ~400 taskflows, utilizing UIShell from Oracle. RSA Audit tool has been an integral part of our product since version 2.6, and has really helped us a lot finding performance issues. By using this tool as an integral part of the application, we have a common reference when sorting out performance problems with our customers. Internally we have a single RSA database installation which collects data from all our development- and test environments. So the possibility to differentiate log-data from individual servers is essential - and Andrejus was quick to implement this feature when we requested it! This tool just gets better and better for each release! Thank you Andrejus, for providing the ADF community with such a great tool - we really appreciate it!

We are Hiring - Red Samurai ADF Team

Tue, 2015-10-20 00:08
We are expanding and hiring ADF developers. In particular we are looking for ADF developers from these countries: Lithuania, Latvia, Estonia and Poland.

Your tasks will be related to various interesting ADF use cases implementation and direct interaction with the customer. You will get a chance to work in different roles - expert ADF developer, technical architect, performance tuning specialist. This will be great new step for your career. Use your chance to join Red Samurai team and let's work together.

If you are interested, drop me email: abaranovskis at redsamuraiconsulting dot com

Switching Alta UI and Skyros on Runtime ADF 12c

Sat, 2015-10-17 06:10
Skyros UI can be useful for heavy data entry screens. Both Alta UI and Skyros can be integrated into one application, depending on the form/module opened - application UI can be switched and render based on selected skin. This could be good compromise for front end screens implemented with Alta UI and heavy data entry screens with Skyros.

Sample application -, by default is rendered in Alta UI:

When user clicks on Maintenance button, different page from the same application will be rendered using Skyros style. You can notice - much more content (form fields, table columns) can be fit into screen with Skyros (although it doesn't look as great as Alta UI). This can be useful for applications implementing both pretty front end pages and heavy data entry forms:

I have implemented simple navigation between two pages in outbounded ADF TF:

There is a session scope bean method responsible to return UI to use, by default it returns Alta UI:

Skin family is set dynamically in Trinidad file, reading current value from the bean:

Button contains property listener to update skin to use:

I hope demonstrated approach will be useful for smoother migration to Alta UI and ADF 12c.

OOW'15 Session Preview - Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support

Fri, 2015-10-16 07:53
This is preview post for my OOW'15 session - Oracle Alta UI Patterns for Enterprise Applications and Responsive UI Support [UGF2717]. I'm going to talk and demo various useful things about Alta UI and ADF. Title talks about UI, but there will be much more. I'm going to show you, Alta UI is not only about look and feel, it is totally new way of building enterprise applications. Certainly UI is very important, but you should not forget about such topics as performance, scalability and reusability. All this and modern UI would make your enterprise application successful.

One of the key topics I will be speaking about - high performance data integration into Alta UI. I will be using live data from Twitter and through WebSocket channel communicating it to Alta UI ADF 12c dashboard screen. I have recorded preview video, you can watch it here:

Dashboard UI with live Twitter data is based on my previous example - Dashboard Implementation with ADF 12c Alta UI. Twitter stream data is managed in ADF 12c application by JavaScript function, here I'm receiving message from WebSocket, parsing it with JSON and assigning values to to ADF UI components:

This is the result displayed in Alta UI:

I will cover these topics during session:

1. High performance dashboard implementation for Alta UI

2. Responsive UI support

3. ADF Regions usage and responsive UI

4. List component usage

5. Menu and Panel Drawer

6. Editable forms implementation in Alta UI

7. Dynamic editable forms implementation

8. Master-Detail implementation in Alta UI

9. Table pagination implementation

10. ADF BC auto-refresh functionality

11. Coexistence of Alta UI and previous ADF skins

See you soon in San Francisco !

Dashboard Implementation with ADF 12c Alta UI

Sat, 2015-10-10 06:03
Alta UI in ADF 12c provides great options for dashboard implementation. You can use so called 'info tiles' as blocks displaying summary information. These blocks are clickable and based on active tile, content can be rendered. It looks not only modern, but also user friendly.

I have implemented sample application - with Alta UI dashboard, based on code examples from Oracle WorkBetter application. You could download and run my sample, it renders two vertically aligned info tiles with summarised information:

Click on second info tile, main content will be changed:

Info tile block is implemented as ADF declarative component with a set of properties to make it generic and reusable:

Each info tile is defined as declarative component in the dashboard:

Declarative component requires to set several properties. Property 'selected' returns true/false if current tile should be rendered as selected. Each tile should be assigned with unique index, client listener method based on this index identifies selected tile:

Tile content is surrounded with panel group layout component. By default this component doesn't provide click support. However, click support can be implemented with client listener method (I will not go here into client listener implementation details, because this code is well documented in Oracle WorkBetter sample application referenced above):

Client listener invokes server listener method to pass user click request to the server:

Server listener method updates selected tile index and generates partial target refresh. This is how tile selection works:

Content area is rendered with ADF Faces deck component. This component allows to invoke transition between different UI blocks, based on currently selected tile:

DisplayedChild property identifies UI block to display. This property value is calculated from selected tile index:

First UI block contains ID = infd0. This corresponds to index of first tile:

Oracle Mobile Cloud Service - External SOAP Service Connector

Wed, 2015-09-30 13:14
These days everything is about MCS/MAF. I'm also looking into this new area, but I'm trying to mix traditional ADF topics and new things. Who knows may be MCS/MAF is a new big thing and its good time to learn it. I was testing how it works to define my own custom SOAP connector to calculate currency conversion rate.

MCS developer portal allows to create and use new connector. Special wizard helps to complete this task, just click on large CONNECTORS icon:

There is new option available to create new SOAP/REST connector:

Wizard reminds me JDEV interface, steps are similar as to generate SOAP connection in JDEV. You need to provide SOAP WSDL URL, name and description:

If create action is successful, General step is displayed with SOAP connector general details:

Port step provides information required when you would like to call SOAP service through the connector in custom code:

There is no security and in the last step I can test it. I'm checking for conversion rate from EUR to USD in the payload. Mobile backend should be specified to test connector SOAP call. I would understand Mobile backend something like Application Module in ADF BC, it is required to group business logic and expose interface:

SOAP service is invoked and I can see the response:

Connector is tested through mobile backend. Later in the diagnostics section we could see invocation statistics:

Next step would be to include connector call into custom API.

Smart Combo Box LOV Based on Description Attribute

Tue, 2015-09-29 11:35
I had a question from blog reader for my previous post about smart Combo Box LOV - Smart Combo Box LOV with Filter. Reader was asking if it is possible to define Combo Box LOV on description rather than ID attribute. ADF BC out of the box allows to define LOV on readonly description attribute. I had a post about it - Defining the LOV on a Reference Attribute in Oracle ADF 11g. Today I will test and describe how the same can be applied for Combo Box LOV in ADF 12c.

If you want to define Combo Box LOV on description attribute, first thing to do is to create Association between main EO and EO from where description attribute should come:

Based on association we can define left outer join and bring description attribute to the main VO:

Description attribute is readonly, since it comes from join:

Combo Box LOV should be defined directly for this readonly description attribute. We should return description and key - both attributes. ADF BC would display description on UI, but it would return key attribute in the background:

Combo Box is set to filter initial list based on criteria, same as in previous blog mentioned above:

UI implementation contains LOV Combo Box mapped with JobTitle attribute:

This is how it looks on UI. LOV Combo Box displays description attribute and in the background it updates JobId. Same works in both table and form UI:

Combo Box LOV displays multiple attributes and rows are filtered based on initial View Criteria:

Download sample application -

Master-Detail Pattern Implementation in ADF 12c Alta UI

Fri, 2015-09-25 09:14
ADF 12c and Alta UI change the way how we used to implement UI in ADF. Let's take a look into Master-Detail. Before Alta UI usual implementation for Master-Detail would be based on vertical layout with master on the top and details below. Alta UI provides different patterns like left-right, bottom-top for Master-Detail implementation - Oracle Alta UI Patterns. I would recommend to watch a demo from Shay Shmeltzer, he explains how to build left-right Master-Detail - Developing Your First Oracle Alta UI page with Oracle ADF Faces. In my post I'm taking a step further and explaining how to manage Master-Detail relationship between different regions.

Here you can watch a demo of sample application developed for today post:

Country list on the left acts as a menu. User can select any country and this will force regions displayed in the central area to refresh and show information based on selected country. I'm keeping regions in synch without Contextual Events, using simple solution described in this post - Simple (Effective) Refresh Approach for ADF Regions.

Selection changes in Menu region trigger list filtering in Employees Directory tab:

Detail data displayed in Profile tab is also filtered. In the top block is displayed additional information for Master record. Employees from selected country are displayed in the form with navigation controls. Overview block displays information about all employees from selected country:

If country selection is changed, detail data is refreshed to stay in synch:

Administration tab contains table with pagination support, also filtered based on Master record change in countries:

Countries menu block is implemented in separate region. Selection listener is overwritten to process menu item selection:

Listener updates session scope variable with a key of selected country. Region refresh approach is implemented based on the method described in the post mention above:

Content region is implemented by TF with a router. Here we check if Country ID TF input variable is not empty and execute detail records filtering:

Country ID is defined as TF input parameter:

Session scope variable updated by Countries menu listener is set as a input value for region parameter. Each time when session scope variable is changed (new country is selected), region with such input parameter will be refreshed:

Region will be refreshed, only if Refresh property will be set to ifNeeded:

It might be enough to reload only one region. If another region contains PPR supported components (tables, forms) - data can be reloaded automatically with ChangeEventPolicy = ppr set for iterator:

Download sample application -

Use Case of Auto Re-Execute Functionality in ADF BC

Thu, 2015-09-17 05:44
There are use cases, when data in DB is changed by background processes and we would like to display to the user latest data available. Very common implementation for this use case is to re-execute ADF iterator and VO each time when Task Flow or UI screen is accessed. Obviously this works, but performance would suffer - usually there is no need to re-fetch data each time, it must be re-fetched only when changes are detected in DB. ADF BC provides out of the box such functionality - it can detect changes in DB and re-execute VO through Database Change Notification. Make sure to grant CHANGE NOTIFICATION system privilege to the data source user.

Auto refresh functionality for ADF BC VO is working when DB pooling is disabled in AM tuning. This would mean you should use Auto refresh carefully and plan dedicated AM's.

I'm going to describe the use case and how you could benefit from VO auto refresh. Here is the example of typical ADF Task Flow with initial Method Call to re-execute VO and fetch fresh data from DB. In the next step UI fragment is rendered, where recent data is displayed:

This is how it works on UI. Departments TF is accessed by pressing Departments button in Employees table screen. This will trigger Execute action call in Departments TF and force VO to reload:

List of Departments will display recently fetched data from DB:

Each time when Departments TF is opened, VO executes SQL query and re-fetches data. This can be observed from the log:

While this works fine, it is not great from performance perspective. We should improve it by using VO auto refresh functionality. Change default activity in TF to UI fragment, we don't need to invoke VO re-execute:

Select AutoRefresh=true property in the VO settings, this will enable DB listener event for this VO and will force re-execution only when it is required:

We are ready to test it. Change Department Name column value:

Navigate to Departments from Employees table:

New data will be displayed automatically in Departments list, even without invoke initial Execute operation. If you would open the same TF, when there were no changes in DB, it will load data from cache, without re-executing VO and re-fetching the same data rows:

Download sample application -

ADF BC Inline View Criteria for Hierarchical Search

Tue, 2015-09-15 03:19
ADF BC View Criteria allows to implement Inline View Criteria to execute hierarchal search. This is especially useful, when you have Master-Detail relationship and want to filter Master records, based on attribute value from Detail. Keep in mind, Inline View Criteria for hierarchical search would not work, if VO is based on custom SQL query. It works only with declarative VO's.

This is how View Criteria with detail search option looks like. If there is View Link available, you can select depend VO from the list of attributes. JDeveloper automatically sets Inline View Criteria option and you can select any attribute from detail VO. All criteria attributes will be rendered in the single search block on UI:

Inline View Criteria is created based on View Link:

Make sure not to use custom SQL based VO, Inline View Criteria would work only with declarative or not custom SQL based VO:

Search filters Master results (departments), based on Detail filtering (employees). I'm searching for employees with salary greater or equal to 12000. This query returns only those departments, where employees with such salary are available:

If I search with lower salary, more departments are present in the result:

Download sample application -

ADF Alta UI 12c Responsive Layout Template

Tue, 2015-09-08 13:36
Alta UI in ADF 12c with combination of Tablet First template provides support for responsive UI. Often you would like to implement extra functionality for responsive layout, not available out of the box. I'm going to describe in this post, with very practical example, how this can be achieved. I will implement desktop and tablet view support with adjusted menu structure and header.

Tablet First template is shipped with ADF 12c and provides different facets (UI blocks) where developer could implement menu, content, header and footer. We could use CSS media query to dynamically react to the screen changes and adjust facets accordingly. In order to use CSS media query in the template, we need to have access to the Tablet First template code. This is easily achievable by creating custom UI template, based on out of the box Tablet First template. In the template creation wizard select Copy Existing Template option, this will copy template source code and you could adjust it:

This allows to save time and implement CSS media query in the template. If screen size is less than 950px, we are going to render narrow layout and vice versa:

Header area is going to be rendered for larger screens only, to save screen space on smaller ones. Wide style is assigned for the header block, this means with narrow CSS style it will stay hidden:

Wide CSS style is assigned to the core structure of the template - menu block, end and central block are displayed here:

Narrow CSS style is set to render UI structure suitable for tablet screen. Menu width is fixed to 30px, limiting size available for the menu:

Let's take a look at page based on the template. We are using different facets, but same regions are being reused in different UI blocks. Menu block for wide and narrow UI is using same region. This allows to reuse business logic, no matter on what screen UI is being rendered:

Same applies for central content block, same regions are being reused for wide and narrow UI.

ADF UI with narrow layout designed for tablet:

User clicks on menu icon and panel drawer loads menu list:

Wide layout renders menu on the left and it also displays header block:

Not only a list, but also editable form can be displayed pretty nicely with narrow layout:

Download sample application -

ADF 12c Dynamic Forms with ADF BC UI Categories

Tue, 2015-09-01 04:54
ADF 12c offers completely new way to implement UI forms. We can implement dynamic forms, based on static ADF BC components. Such approach could simplify form maintenance - when there will be changes in DB, developer would need to adjust only ADF BC EO/VO structure, without changing anything on UI. Bindings layers could determine data structure dynamically and dictate how to render UI blocks. ADF BC VO provides special metadata option to define how form UI should be rendered - UI Categories. Through categories we could group attributes and this would help to render dynamic UI with separate blocks and proper order.

Using UI Categories is straightforward, add category group and move attributes under the category. Label and tooltip can be defined, this will be a title for UI block:

ADF 12c is using general collection binding for dynamic UI, it doesn't depend on specific attribute binding:

Collection binding is generic, without a list of accessible attributes, it just points to the VO. This means we can change list of attributes registered in the VO at any time:

This is how looks dynamic form generated in ADF 12c. I have customised it a bit, but major part is generated automatically by JDeveloper 12c. There is global iterator over UI Categories, rendered UI blocks. Inner iterator renders UI Category attributes. Each attribute is rendered through ADF 12c dynamic component, this means there is no dependency related to attribute UI implementation (input text, LOV, choice list, etc.) - UI implementation is controlled from attribute UI hints in ADF BC:

It is easier to understand how dynamic form is organised from UI structure view:

This is the result - dynamic form is rendered with two blocks, based on defined UI Categories:

I have customised dynamic form rendering with metadata usage. Buttons are rendered only in the first block, identified by PersonalData:

Block identified by JobData is rendered with maximum 4 rows:

I hope this post will give you some new ideas about robust ADF UI implementation. Download sample application -

Red Samurai ADF Performance Audit Tool v 4.0 - Web Client Request Monitoring and Complete Query Analysis

Thu, 2015-08-27 03:12
I'm excited to announce, we have released a new version of our RSA audit tool. This is a major update after previous version released in February 2015 - Red Samurai ADF Performance Audit Tool v 3.4 - ADF Task Flow Statistics with Oracle DMS Servlet Integration.

It is already 3 years, since initial version - Red Samurai Performance Audit Tool - Runtime Diagnosis for ADF Applications. We are using it for many of our customers to monitor ADF performance in both test and production environments. Many new features were added during these years, more features to come.

RSA Audit v4.0 New Features

1. RSA Audit v4.0 dashboard is supporting ADF 12c and Alta UI look

2. Web Client Request Time monitoring. Supported with ADF 11g and 12c. Generic method tracks request time for all ADF UI components. Logged data can be analysed through ADF UI dashboard or directly in the DB. Request time represents complete time from user action in the browser, until request is completed. This includes real user experience - browser processing time, network time, server side time and ADF BC/DB processing times. Runs in VERBOSE logging mode

3. Detail information about ADF fragment, button or other ADF UI component involved into request is being logged together with request processing time and is accessible from audit dashboard. This helps to identify slow actions spanning from Web Client to DB

4. Information about each request is grouped, this allows to compare differences between multiple requests and identify bottlenecks in the application performance

5. Duplicate Queries. Allows to track all executed VO’s, very helpful to identify redundant VO’s executions. Groups VO executions per ECID, this helps to identify VO’s re-executed multiple times during the same request. Runs in MEDIUM logging mode

6. VO’s executed from the same ECID are automatically highlighted - this simplifies redundant queries analysis

7. Number of duplicate executions of VO’s per ECID is calculated and presented in the table and sunburst chart

8. We calculate top VO’s per AM. This helps to set priorities for SQL tuning and understand heavy used VO’s

9. Sunburst chart displays visual representation of duplicate and top VO’s per AM

Smart Combo Box LOV with Filter

Mon, 2015-08-17 17:47
Combo box LOV with filtering is simple, but effective feature not used often. You should rethink LOV design and apply combo box LOV with filtering where possible. Advantage of such LOV implementation is pretty clear - fast list items access, based on filter criteria. This will reduce number of times required to open LOV popup and improve performance of UI.

LOV VO should implement View Criteria, returning top items to be included into choice list. My example retrieves all jobs with minimum salary greater or equal than 10000. Users will see list items based on this criteria first:

I would recommend to use List UI Hints section of the LOV VO to define LOV UI definition. This will save time when assigning LOV for the attributes, do it once and reuse. I have specified Combo box LOV with filtering based on View Criteria - to include jobs with minimum salary greater than 10000 into initial choice list:

Time is saved when assigning LOV for the attribute - UI Hints are automatically set, based on LOV UI Hints definition:

This is how it looks on UI. Top records are displayed in the choice list, based on applied filter criteria.  All list items can be accessed through More... option:

This is how LOV popup looks by default in ADF 12c. Height is stretched automatically to occupy all possible display height, width is not stretched. Such layout is not good, users don't like it:

LOV popup can be made stretchable with little help of ADF UI CSS. We should use -tr-stretch-search-dialog CSS property to enable LOV popup stretching in ADF 12c (CSS sample is provided with example):

Another important thing to remember about LOV's in ADF 12c - List Range Size property. By default it is being set to -1. This is OK for simple choice lists, where you would like to show all data at once. But not suitable for LOV or combo with LOV, where we don't want to fetch all LOV items at first load:

I would set it to 10, this will populate only visible set of LOV records:

Take a look, how LOV popup window will look after improvements applied - it is stretchable by the user and only initial set of list item records is fetched:

Make sure to use combo LOV with initial filter criteria, to optimise LOV behaviour. Download sample application -