Find out how to install and configure the Wrapper component in this article.
After reading this article, you'll know how to:
-
Add components to the Widget
-
Add component options to the Widget
Why use a Widget
Widgets are super useful for a variety of reasons. The first reason why a widget is useful is to reduce clutter and make configuring an application and/or page easier. Widgets contain components. You can add a bunch of components to a widget 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 widget limits you, in a good way, and makes you focus on the options that are important.
An example where a widget makes configuring a page a lot easier is inside of the login template. The only configuration for this page is to change the name of the page.
This is an extremely simple example of course but it gives you an idea of what the widget does. It has a variety of components within it but the creator of the template only allowed the users to change the page title. You are however able to customize it a bit further but this isn't recommended, you can do this by navigating to the component tree and unlocking the widget.
Alright, so how can you create your own widget, and pick and choose which options your users can alter.
Creating your Widget
In order to create your own widget that your users can use and configure drag the widget component on your canvas.
To add components to your widget you'll probably think it's as simple as just dragging a component into the widget component, but this isn't the case. Well, it is but we first need to unlock the widget before we can drag other components into it.
Head to the component tree and unlock the widget.
After unlocking, you can drag components into the widget.
To specify which component options within the widget are allowed to be configured you have to go to the options of the given component.
Once there, you can see the options icon appear when you mouse over an option (indicated by the triple dots).
You can then select the Add option to 'Wrapper' (or widget, depending on the version update). this will add the options to be configurable from the widget. You can select as many options as you like, and of course options from different components. When you're done pushing options to your widget don't forget to lock it the same as we just unlocked it (via the component tree).
In this example I have a create form to create new users, I've added the title text to the widget and the option to change the icon of the submit button. My widget will look like this:
If I change the title of the form from the widget options we can see the changes reflected in the form, the same goes for the button, if I add a '+' icon from the widget it'll appear on the button.
And it'll look like this on the page:
Widgets simplify the configuring of your pages by a lot, and you can specify yourself which options are allowed to be configured by your users. Or maybe more importantly which options aren't allowed to be changed