What Is a Container?
Containers are the base of your app’s content. They are what you use to create structure and navigation within your app. You can think of Containers as folders. They can have labels, icons and images added to them, but their main purpose is to house and organize content within the Container.
Containers can hold other Containers or Items. Adding Containers within Containers is how the structure or sitemap of the app is developed.
When Should I Use a Container?
You should use a Container when you want to create a new section or page of content in your app.
The first five Containers you add to your app will create the root menu of your app. The root menu is the five Containers that display as the main navigation of the app.
You do not need to have five Containers in the root menu, but it is the recommended amount when using the tabbed navigation style. This is the most common style of navigation in our apps, and what we recommend to VisitApps clients. If you choose to add more than five Containers to the root menu, the tabbed navigation will automatically create a "More” Container as the fifth Container.
Once your root menu Containers are added, you can add additional content to them. You can do this by selecting on the Container’s name, which opens the Container. Then you can add Containers or Items to that Container.
If you add an additional Container, it will create a subfolder to the original Container. If you add an Item, that will essentially create a page of content. It will be an endpoint in that section’s navigation.
Adding and Removing Containers
To add a new Container, first navigate to the section of your content where you want the Container to live. Then, select onto the Container icon in the Draggables window and drag it over to your content.
To remove a Container from your app, simply select the Container’s icon and drag it towards the app preview. As you do so, you will notice the app preview turns into a red trash can icon. If you drop the Container in this section, it will delete it from your app.
Types of Containers
With the exception of the default "Container,” each Container type has different functionality associated with it. Therefore, it’s helpful to consider what kind of content you want to display before choosing a Container.
Some Container types require you to add information to them. These include:
Events: Allows you to add event Items to the Container. Events Containers then automatically sort the events in chronological order.
Places: Allows you to add destination Items to the Container. Places Containers prompt the user for their geolocation so that it can sort the Items based on proximity to the user.
There are also several Container types that don’t allow you to add anything to them because they control pre-set functionality. These include:
All: Pulls in every Item from that section and displays them all in one list. This includes multiple levels of nesting.
One common use case would be to have a dining section of your app with Containers for each cuisine type. If you add an All Container at the same level as the cuisine types, it will pull in all the restaurant listing Items into one big list.
Favorites: Displays the Items the app user has added to their favorites (itinerary builder) list.Since it is a dynamic, user specific section of the app, there will not be a preview of it in the Visit Apps Mobile App Studio (MAS).
Messages: Shows the app user a list of all messages that have ever been sent out. This allows users to see which ones they have already opened or that remain unread. Since it is a dynamic, user specific section of the app, there will not be a preview of it in the Visit Apps MAS.
Push Filters: This container takes the Filters list that lives behind the filter icon in the Messages container when push categories are in use and breaks it out to be more visible so that the app user can determine which categories they want to receive.
Select a Crowd: This container will prompt the app user to identify which Crowd they want to view within the app. When the user navigates to that Container, they will either see a list of all available Crowds, or a text field where they can enter a specific code if Crowd codes are enabled.
Determining a Container’s Layout and Settings
You can edit a Container’s layout and settings by selecting on its icon or the pencil icon on the far right-hand side of the content section.
Selected Icon: This will display the icon indicated in the Icon Shortcode field.
Container Title: This will display as the navigation label in your app. The Container title will also display at the top of the screen when a visitor is currently in that Container on the app.
Icon Shortcode: This is where you will place the shortcode for the icon you want to associate with the Container.
You can find the full library of icon shortcodes by selecting the question mark icon on the right-hand side of the row.
Layout Option: You can select from five different layouts available for your Container. Each of these layouts have several modifiers available (i.e. icons, distance, labels, etc.) to give you even more customization options.
Single Line Text
Double Line Text
Small Image and Text
50/50 Image and Text
Wide Image
Titlebar Action: These actions are buttons you can add to the top right of the screen. You can choose from Filter, Map and Search.
Filter: This will allow your app users to filter the content in the Container. The filter action only works in cases where there are sub-Containers that all have content.
For example, an Events Container might use a filter action to allow users to filter between various event categories. The filter action needs the sub-Containers in order to perform this.
Map: This will open up a map of your destination with map markers indicating the locations of the Items found in that Container. This works as long as the Items have latitude and longitude data available.
Search: This will open up a keyword search field for your app user to search the content that lives within that particular section of your app.
Adding Draggables to a Container
Open up the Container to which you want to add a Draggable. You can do this by selecting onto the Container’s icon or edit button. The Draggables window to the right will display the available content types you can add to your Container. You can add a Draggable to a Container by first selecting it, then dragging it and placing it on top of the Container.
