Fragments are a key new capability in Oracle Visual Builder that adds a new level of modularity, reusability, and manageability to your application development experience. A fragment is a section of the user interface tha can be developed as a stand-alone artifact, and will be included in multiple other pages in the application. Fragments can accept parameters which can influence their behavior. In addition, Fragments can raise events to the containing pages and pass information in these events.
To use fragments your application needs to use the new Visual Builder 22.01 runtime version (check your application settings and update the application if needed).
Update March 2023 – There are many new features making fragments easier to use in Visual Builder – check out this updated blog entry and demo about fragments.
Example
First, here is a quick example of how to develop and use fragments. In this case we are developing a reusable fragments that list our employees and allow us to select one. We then embed this fragments in two pages. In one of them we just show the list and in the other we enable selection and react to the selection event in the containing page. Check it out:
Developing Fragments
You'll see the fragments section appearing in your web applications navigator at the same level as flows in your application. A Fragment that you create is defined at the application level and as such is reusable inside any page in any flow in the specific application. Just like a page, a Fragments can define variables, actions, and events as well as mapping to data sources. Fragments are included in other pages using a new UI component called Fragment Container – oj-vb-fragment – that you can drag and add to your page.
Passing Information to and from Fragments
You can indicate that specific variables that are defined in the fragment are input variables – values for those can be passed from the containing page. You are then free to use these values in your fragment to dictate behavior – for example fetch specific values based on a parameter or show/hide components in the interface.
Another common thing you might want to do is pass values back from the fragment to the containing page.
(Update February 2023 – you no longer need to use events for this – the new write back to container option for parameters passes a variable value back to the containing page).
Fragments communicate with their containing pages using an eventing mechanism. A fragment can fire up a custom event and indicate the event will be emitted to the containing page. You can specify a payload for the event which can contains variables you want to pass over. In the containing page you'll be able to define an even listner on the fragment container UI component to handle the custom event and react to it processing the payload passed to the event.
More Info
We have a full new section in our documentation covering fragments with a nice sample.
Beyond the reusability aspect that fragments offer, a key benefit of fragments is development modularity. A fragment is developed as a stand-alone component in your app – so if you have multiple developers working on a single page and each one works on a separate fragment – they are less likely to run into merge conflict situations.
If you are looking for a reusable component that will work across multiple applications – you should be looking into Oracle JET Web Components – Duncan offers a set of blogs that will teach you how to develop those.