Guest post from Bino Kohli from the Oracle JET team

In this blog, you will see how to use a page-level variable to switch the dynamic layouts attached to a dynamic form. This lets you tailor the content the user sees—as well as the actions and interactions the user has access to—based on the user’s context. If you are new to dynamic components check out this intro.

Dynamic components use rules that you define to decide which UI elements to show and how to show them.  By adding a page-level variable to a dynamic component’s context, you can conditionally show fields and elements in the layouts attached to the component.

For example, suppose you want to set up two profiles:

  • Internal Profile – which is visible to internal employees within the organization. This layout includes the fields Name, Phone Number, Email, Details about internal training, Skills, and Internal feedback.
  • External Profile – which is visible to people outside the organization. In this layout, we want to show the fields Name, Phone Number, Email, Skills, and Recommendations.

Check out this video to see how to create a dynamic form that displays a different layout depending on the component’s context, which is tied to a page-level variable. 

Video Highlights

Dynamic components provide a declarative way to bind their content to fields from data sources or business objects.  In the video, we:

  • Create a dynamic form using a Quick Start.
  • Add a radio button to the form to switch between internal and external profiles.
  • Add a context property to the dynamic form.
  • Create a variable of type object  for the context. Add a sub-field inside the context object, which we’ll refer to later.
  • Attach the radio button to the context (as an attribute inside the context object) of the dynamic form. 
  • Create two layouts, one for an internal profile and one for an external profile.
  • Conditionally switch the layouts based on the context.
  • Test the dynamic form by changing the value of the radio button and seeing how the content changes.  
Although the base dynamic form remains unchanged, at runtime some fields are hidden based on what’s specified in the layout applied.

 

Summary

Using dynamic components to change layouts based on rules is such a sleek and easy way to write applications.  In this video, you saw how you can use page-level variables to control which layout is applied to a component at runtime.
Keep an eye out for our upcoming blogs, in which we will cover even more powerful features relating to dynamic components. If you have questions, please post them on our forum.