After reading this article, you'll know the following:

Wrapper component
How to build a widget
How to add options to a widget
How to save a widget and share it

Before working with this topic, ensure you've set up your first application and know how to create pages. To learn how to create pages using widgets, have a look at this article.

In this brief tutorial, we will teach you the Wrapper component and how to build and save your widgets.

What is a Wrapper?

Wrappers are super useful for a variety of reasons. They wrap groups of components for you to reduce clutter and make configuring a page easier.

You can add a bunch of components to a wrapper and then specify which options of these components you'd like your user to change. So instead of having to manually go through all the options of a bunch of components a wrapper limits you, in a good way, and makes you focus on the important options.

Getting started

We'll need to install the Wrapper block in our application to get started. You can just navigate to the Block Store and install the block called 'Wrapper', you can find it under the components tab.

Installing the wrapper component via the block store

After installing the Wrapper block to your application you'll find it as a component in your page builder.

Building a widget

First, we start with placing the Wrapper component on the page. Go to the component list overview and search for 'wrapper'. Drag it on the page's canvas.

Using the wrapper component on your page builder canvas

Now we can proceed by adding components to the Wrapper. For this example, let's add a Text component and a Button.

Adding components to the wrapper component, creating a widget

Afterward, we can now push the options of the components that we want to make available on the widget level. Simply go to the component option you would like to push and hover over it. Three dots will appear, click it and choose the option '+ Add option to Wrapper'. The components option is now available on the Wrapper.

When you add multiple options, it might become a bit cluttered and confusing regarding the labels of the options. However, we can change this, along with the order of the various options.

A functional widget after options and components have been added

When hovering above the labels of the options, three dots appear that you can click on per option. When clicked, a menu unfolds that will allow you to edit and manage the label.

Managing your widget options by opening up the option menu and selecting your preferences

Once the Wrapper is completely built to your liking, simply click on the button at the bottom left of the options panel to save it.

Saving your widget by pressing the 'save as new component' button

Save the Wrapper with the corresponding information, keep in mind that a representable image and title will allow other users to use it with more ease.

Sharing your new widget with other users

There you go, you'll now find the widget in the sidebar! Ready to be used by you and all of the builders you have shared it with.

(this is an example widget)

viewing your new widget in the widget selector

Create your own widgets to speed up other users and be able to use your defined branding out of the box when building applications.

Building a page layout

Using Wrapper component

Setting up your page

List of release notes 2024.15

List of release notes 2024.16