Container

The most important UI component is the container. For those of you with any HTML experience, a container is similar to a <div> tag. The container allows for grouping the view into sections, and the container may have its contents (the components inside the container, known as the children) aligned vertically (which is by default) or horizontally.

The container is probably the most important UI component. Some typical use cases for a container are:

• Split a screen into sections

• Group a set of other UI components, in order to apply the same visibility or enable a condition

• Group a set of other UI components, in order to apply motions (such as collapse)

• Styling different parts of your UI with regards to backgrounds, borders, elevation or alignment

• Create custom UI components, such as custom buttons or lists / tiles

• Create a file-drop or hover sections

• Create scrollable sections of your view or dialog

The Styling Pane properties are documented in Appfarm Create in the Blue Dots corresponding to each property. However, we will summarize a few key settings for various purposes.

Split layout or adjust alignment

By default, all UI components inside a Container are left-aligned and vertically oriented.

To enable other behaviour, set the Display to Flex. You may also want to set this on the top-level View or Dialog as well, since the setting of the parent affects the possible settings of the children. You may read more on the Flex setting here.

When the display is set to Flex, you may set Layout Direction to e.g. Horizontal, and add two more containers inside, and allow them to stretch out by setting Sizing to Stretch. You have now created two equally sized columns. Each column may be adjusted further.

Margin and padding

Margin is the outer space of the container, in other words, outside the container border. Padding is the inner space. In general, when scrolling is enabled, Padding is the best option.

A short rule of thumb when creating a UI is to use a multiplier of 8px as padding/margin. This will help you have your UI more aligned.

Scroll settings

The setting for the scroll is found in the Overflow menu.

By default, no scrolling is enabled. The simplest type of scroll is the vertical scroll on the top level. You may enable Overflow Vertical by setting Auto on the top-level view or container.

Sometimes you want a fixed section at the top and a scrollable section at the bottom. To enable this, an easy rule of thumb may be applied: The container to be scrollable should have Overflow Vertical Auto. All parents of this container should have a Display set to Flex.

The scrollbar is positioned at the edge of the scrollable container. In other words, the scrollable container should have padding instead of margin - in order to have the scrollbar to the right side without any space to the right.

Backgrounds and borders

Having different background colours for different sections of your UI will improve your UI a lot. For example, try combining background colours Default and Paper on a parent and child container, both with some padding, it will give the impression of different sections in your UI.

Borders may contribute to your UI, and you may also set Border Radius for a less "corporate" look and feel.

More tips are found in our UI/UX crash course.

Create custom lists using Iterate Data Source

You may create custom lists or tiles using a container.

A container may be bound to a Data Source in the general setting Iterate Data Source. When bound to a Data Source containing e.g. 6 objects, the children of the container will repeat 6 times. In other words, you need only focus on the appearance of 1 row (or tile). Add a container inside, and configure the looks of the single row or tile.

By selecting a Data Source for iteration in the Interate Data Source setting, another setting is revealed: Iteration Variant. 4 variants exist:

• Repeat Content: This is the default. The child of this Container will be repeated as rows (if vertical alignment is selected) or as columns/tiles (if horizontal alignment is selected). The number of rows/columns/tiles equals the number of objects in the Data Source for iteration. Note: You may repeat content inside a repeating container, meaning you may use this setting for creating two-dimensional data grids (a matrix), or calendars.

• Swipeable Horizontal: Only 1 child is displayed, but you may swipe between them horizontally (the number of possible swipes equals the number of objects in the Data Source for iteration). You may find an example in our Showroom here.

• Swipeable Vertical: Same as horizontal swipe, but the swipe direction is vertical.

• Recursive Tree: Build a recursive UI. Relevant when the data model has parent-child relationships within the same Object Class, such as Department having a property Parent Department. You will have to define that parent-child relationship in the setting Parent Identifier. The iteration order of the objects in the Data Source will be done . Inside this iterating container, you have access to the Context Parameter Iteration Level, meaning you may e.g. set an offset to the left (of e.g. a Container representing one Department) as a function of 16 * Iteration Level pixels, creating a visual tree structure.

You may find many examples of Custom lists in our Showroom, such as Tiles, Data Grids, Recursive Trees, Calendars or custom vertical lists. You may view demos, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

Custom HTML attributes

The Container is translated to a <div> tag in HTML. The Container has a few settings for those who need to set the HTML attributes/elements on the <div> tag: Element ID, Element Type, or add Custom Attributes to the <div> tag. Custom Attributes may be used e.g. for specific requirements regarding WCAG. You may read more about these three in the Blue Dots on the respective settings on the Container in Appfarm Create.

Property conditions

Given certain conditions in your data or App Variables, you may apply different layouts and styling, such as changing the background colour.

Show Loader

When a user initiates a long-running action, it is a good practice to give some feedback to the user that something is being processed. The Container has a setting Show Loader. When set to true (or if the bound variable or condition is true), a loader (circular or horizontal) is displayed as a placeholder for the whole container.

A typical pattern is the add an App Variable Show loader. This variable is set to true at the beginning of the long-running action, and is set to false as the final step of the action.

An example of a setup using Show Loader is available in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

Hover and file drop zones

You may enable file drop on a container using the general setting Enable file drop. This will allow for setting an action On file drop. You may also add actions for manipulating variables On file over and On file out. Property conditions may be used in combination with this to e.g. enable a light blue background colour when a file hovers over the container.

File drop allows you to paste (drag and drop) images or files into an Appfarm App from your desktop or clipboard.

An example of drag & drop of files is available in our Showroom! You may view a demo, as well as access the setup in Appfarm Create. If you do not have access, you may register here.

The settings On Hover Start and On Hover End may be used to run an action when the mouse hovers over the container. Use this in combination with Property Conditions on the Container, or Visibility Conditions on the children of the Container. Please note that to ensure the fast mouseovers are not "stuck", the actions executed on hover start / end should be allowed to run simultaneously (a setting on the Action).

Drag and drop

See our guide on this.

Event Handlers and Viewport Listener

You may read more on the various Event Handlers and the Enable Listener setting in the Event Handlers section.

Create custom buttons using On Click and styling

Containers may be used to create a button. Just set a background colour, add some text, images or icons - and add an On Click Event Handler. The container will then be clickable.