Fragments are a key capability in Visual Builder that helps your team increase reusability and enables a more modular development approach. We blogged about fragments back when they first appeared in version 2201. Since then we added several features that make creation of fragments, using them, and passing values to and from them even simpler, so here is a quick updated demo:
At the start of the video we show how to create a fragment in your application. When you create a fragment you can associate a name, description and icon with it. This can help other developers who are looking at a list of fragments find the right one to use. Beyond that, you can indicate where the fragment would typically be used including the "Use for Page" option – which will allow you to create new pages with the fragment already included in them. Fragments will appear under the "Fragments" category in your application's component palette so they can simply be dragged and dropped into pages (no need to first create a fragment container – we do this for you).
Fragments can have input variables – which you can use to pass information into them, which can then impact what the fragment show or does. A new feature in version 2304 of Visual Builder is the ability for these input variables to perform a writeback to the containing page when a value of a fragment variable changes. This simplifies the two way connectivity between the containing page and the fragment embedded inside it – giving you seamless way to transfer values between the two. (You no longer need to define custom events the fragment will fire for this need).
If you have multiple fragments in a page and you need them to "talk" to each other, you'll do this through shared variables at the page level. Fragment1 will update the variable, and Fragment2 will then get the new value. This way the fragments keep their independence from each other and can be used in other pages freely.
With these new features, fragments are more powerful and easier to create and reuse in your Visual Builder applications.