Containers are very useful components which let you change the content in a portion of a View without reloading the View.
With Containers you reserve an area in another Layout to display different Blocks based on specific conditions.
What goes inside a Container is define by the Set Container Action.
1. Set your Container as a Custom Block
From the Block Selector, drop the Container in your View.
Right click on this Container to bring up the Block Editor on the left hand side.
In the Block Editor select the 'General' tab.
Under the MyBlock Name, change the name from Container 1 to "My Container"
- Or other name you like -
Learn about Custom Blocks
2. Set the Block displayed in your Container
The Blocks displayed within Containers are set using the 'Set Container Block' action.
You can call that Action from anywhere and switch the Blocks displayed in your Container from anywhere.
any times that Action is called before you display the View with the Containers but it is also often called from within the View you are in to change a portion of your View without switching to another View.
Example:
In our 'Container' Tutorial App we use a container Block to alternatively display 2 different images in the same area.
This is a very simple example, keep in mind that Container let you switch any Block by any other Block.
To do this we have created 3 Custom Blocks
- Container itself which we named: "My Container"
- And one Custom Block for each Image Block, creatively named "1st Image" and "2nd Image"
On the only view of the app we only have 3 Elements:
- 1 Container
- 2 Text blocks used as Button to switch the content of the Container.
To switch the content of the container we use the 'Set Container' Action
Set Container Action has 2 mandatory parameter:
1. The Container the action is applied to.
2. The Block to be set into the Container.
Because our 2 buttons essentially replace one image block by another the Set container actions are identical.
They look like this in the app:
Learn More
- Selector