When you organize your cupboard or home, you want to pack stuff in boxes and name them. Similarly, you can use a container widget to hold the widgets. A container widget serves as a logical group of related widgets. It gives your page a distinctive layout.
{% embed url="https://youtu.be/mfPGTUxr6SY" %}
You can use a container widget to create rich UI by managing the design of each container differently. You can use different containers to segregate the components and define a logical separation.
To add a container widget to your canvas, drag a container widget from a widget pane available on the left navigation bar.
Navigate to PAGES —> Select Widget Tab —> Write "container” in the search bar —> Drag the widget on the canvas.
{% hint style="info" %} You can move the container widget along with the widgets embedded into it and position it on the screen according to your convenience. A container widget ensures that the layout of child widgets is intact and not disrupted. {% endhint %}
A container widget stores one or more widgets and serves as a logical group defining a functionality. It can include any number of components based on your requirement.
For example, you have an app for a movie library that provides movie listing and search functionality. If you want to design this app, it will be easy to segregate your page into containers.
- Parent Container - Drag a container widget on the canvas that takes care of the main layout.
- Search Container - Add another container widget to the parent container. It serves as a search bar.
- Input box to capture the search term provided by the user.
- Search button that triggers the search action.
- Movie Listing Container - Add one more container widget to the parent container. It takes care of the movie listing.
- The table widget allows you to display the movie listing.
{% hint style="info" %} You can create a hierarchy of containers and have one or more widgets embedded into it, including another container widget. {% endhint %}
Properties allow you to edit the widget, connect it with other widgets and customize the user actions.
These properties allow you to edit the Container widget. All of these properties are present in the property pane of the widget. The following table lists all the widget properties.
| Property | Description |
|---|---|
| Visible | Controls widget's visibility on the page. When turned off: The widget will not be visible when the app is published. It appears translucent when in Edit mode. |
| Animate Loading | When turned off, the widget will load without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using javascript by enabling the JS label next to it. |
| Scroll Contents | Enables scrolling in this widget when its contents are larger than its dimensions. |
As soon as you select the widget, you can see an editable box available on top of the properties pane. You can use the default name supplied in the box or provide a meaningful name to the widget. You’ll also see the default naming convention follows the pattern WidgetType followed by a number like Container1. The number{1} is a running sequence and increments if you add more widgets of the same type, provided you have not given a unique name to your widget. For example, if you add two more container widgets to the canvas, then the default names for these widgets would be Container1, Container2, and Container3.
{% hint style="info" %} It’s advisable to rename the widget to give some meaningful name. It makes it easy to pass parameters by using the widget name to the APIs or queries. {% endhint %}
You can use Visible to show or hide the widget. By default, visible is toggled on that is enabled, so the widget is visible on page load. This property particularly comes in handy when you want to hide/show a widget programmatically or hide a widget on page load and then show it when a particular condition or data is available.
{% hint style="info" %} When you set the visible property of a container widget to false, it’ll hide the container widget and the child widgets embedded into the container. It is generally helpful to use the container widget’s visible property instead of iterating and hiding each widget in a container. {% endhint %}
There are two ways in which you can manipulate this property.
- Enable the JS label next to Visible and write the javascript code that can handle the show and hide of the widget by manipulating visible property.
- Write your own JS object and javascript code to link to any other widget and manage the show/hide.
{% hint style="info" %}
You can get the reference of visible property by using {{widget_name.isVisible}} in your code.
{% endhint %}
For example, let’s drag a checkbox widget Checkbox1 onto the canvas. Rename the checkbox to ShowHideParentContainer and bind it to the Visible property of the container widget by enabling the JS label next to it. Add the following JavaScript code in the Visible property.
{{ShowHideParentContainer.isChecked}}
When you check the checkbox, it will enable the Visible property and shows the container widget and all its child. Whereas the uncheck on the checkbox will hide the widget and its child.
{% embed url="https://youtu.be/ImuDDWfVWas" %}
When you want to embed a container with multiple widgets and save space, you can enable scroll contents by toggling it on. The scroll contents property enables a scroll bar to scroll the contents within a container.
These properties allow you to bind your Container widget with any other widget in queries or JS objects. The following table lists all the binding properties.
| Binding Property | Description |
|---|---|
| backgroundColor | Represents the widget's Background Color setting as a CSS color value (string). |
| isVisible | Reflects the state of the widget's Visible setting (bool). |
Style properties allow you to change the look and feel of the widget.
| Style Property | Description |
|---|---|
| Background Color | Sets the background color of the widget. Accepts CSS color values. |
| Border Color | Sets the border color of the widget. Accepts CSS color values. |
| Border Width | Sets the width of the widget's border. Accepts number values only, in px. |
| Border Radius | Rounds the corners of the widget's outer edge. With JS enabled, this accepts valid CSS border-radius values. |
| Box Shadow | Casts a drop shadow from the frame of the widget. With JS enabled, this accepts valid CSS box-shadow values. |