X

The Visual Builder Cloud Service Blog

Introduction to JET Dynamic Components in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

Oracle JET's Dynamic Components are now available in Oracle Visual Builder's components exchange. These components help you develop user interfaces that dynamically change what content is shown and how it is presented based on rules that you define. In this blog we'll give you a quick introduction to these components.  

Basic Concepts

The dynamic components use rules that you define to decide which data to show and how to show it. They provide a great solution for cases where you need to render different content based on some conditions in your app.

The rules that you define use built in variables that refer to the context the component is rendered in. For example, you can check the size of the device accessing your app, or information about the user using the app such as their role or email. In addition, you can define your own variables for the components' context.

Rules Editor

Based on the conditions you decide which pieces of information to show - for example selecting a different sets of fields to show depending on whether the app is accessed from a large screen or a mobile device. 

In addition, you can control how data is displayed based on rules. For example, decide that fields are readonly for specific users and updatable for others. You can even control which component is being used to render specific data.

While similar behavior could have been achieved using javascript functions combined with oj-bind-if components on your page, the dynamic components elevate the development experience to be declarative, making initial creation and on-going maintenance and modifications much simpler.

The three basic dynamic components are Dynamic Form, Dynamic Table, and Dynamic Container. 

Developing with Dynamic Components

Check out this video demo to see how to create a page that displays different information depending on the role of the users using the page. The video focuses on the dynamic table and the dynamic form components.

Some notes on the functionality shown in the demo:

The components provide a declarative way to bind their content to fields from your data sources. 

For each component you usually have a default rule and layout that would display if no other condition is met. Then you add additional rules, and matching layouts, to cover other situations.

You can control how fields are shown using templates where you visually design the area that will be occupied by the field in the form/table.

Just like regular components, the dynamic components also provides events you can hook action chains to.

Summary

As you can see, the dynamic components are a powerful tool to add to your arsenal for cases where dynamic UI is required.

We'll cover more advanced techniques in future blogs. If you have further questions on the components post them on our forum.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.