Creating Reusable Custom UI Components - Input text with action buttions

 This post gives you access to one of my recent articles published on Oracle blogs.

Creating Reusable Custom UI Components in Oracle VBCS.

https://blogs.oracle.com/vbcs/post/creating-reusable-custom-ui-components

In this article, you will learn how to create a custom component with an example of input text with two action buttons Accept and Cancel. 

This article covers, how to

• create a custom component
• complete actions for the button elements on the UI
• create a custom event and pass the result value to the calling component

Warning: SelectSingle: could not fetch data for selected value

Many times you may see this warning while working in the combination of ADP (ArrayDataProvider) with SingleSelect components in Oracle VBCS or Oracle JET. 

Warning: SelectSingle: could not fetch data for selected value

In this post, we will see how to resolve this.

We get this warning when we input an ADP variable as a data value to a SingleSelect component. 

It will not give any error. However, it may not work as expected many times. 

The reason for this is, for the ADP properties, if the Data is set to "Assign Data Later", then the "Item Type" should not be blank. It is expected to bind to a "Type". Hence, define a type for the objects of ADP holdings and assign the type here. 

Difference between Array Data Provider and Service Data Provider in Oracle VBCS

 In this post, we will learn the difference between data providers available in Oracle VBCS.

A data provider is to hold a collection of data from the backend that can be bound to collection components such as listView and table on UI. In VBCS, we have two types of data providers, which are ArrayDataProvider and ServiceDataProvider.  We will see the difference between these two.

ArrayDataProvider :

• This is a static data provider which means it is a static source of data that does not change frequently
• This only allows infrequent adds, updates, and removes of the data
• In some cases, the UI component bound to this data provider needs to be refreshed after the data in its variable changes
• Operations on the data such as sorts, adds, removes or updates are managed by this data provider itself

Service Data Provider:

• This data provider represents the data that fetches from a service endpoint
• It allows externalizing fetches through an action chain
• Unlike ArrayDataProvider, this is a dynamic data provider that updates its variables and UI when the data changes through the delegated action chain
• Variable that uses this type also can be bound to collection components like listView, table, select and other components that accept the data provider. 
• This has in-built support for operations like sorting, filtering, and paging of data collection

When there will be more custom operations required to apply to the data, we should go with ArrayDataProvider as it will be static. When the data updates frequently and no major customization is required for the data, then we should choose ServiceDataProvider, especially in cases like pagination and lazy loading.