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.
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. |
|
Now we can proceed by adding components to the Wrapper. For this example, let's add a Text component and a Button. |
|
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. |
|
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. |
|
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. |
|
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. |
|
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) |
|
Create your own widgets to speed up other users and be able to use your defined branding out of the box when building applications.