Appfarm Documentation
Getting startedDocumentationCommunityAppfarm Create
  • Overview
  • Getting Started
    • What is Appfarm?
    • Key concepts
    • Quickstart
      • Speed intro
      • Step-by-step guide
    • Appfarm Showroom
    • FAQ
  • Appcademy
    • Learning paths
    • Appfarm Fundamentals
      • Intro Course
        • 1. Intro to No-Code and Appfarm
        • 2. Navigation in Appfarm Create
        • 3. What is Apps?
        • 4. Intro to UI Editor
        • 5. Data Model
        • 6. App Data
        • 7. Actions
        • 8. Tips and Tricks
        • 9. Intro to practical walkthrough
        • 10. Create a details view of a Project
        • 11. Create a Custom List
        • 12. Swipe and Delete
        • 13. Functionality for simple Create of Data
        • 14. Upload and Download Photos
        • 15. Input Dialog with Validation and Save
        • 16. Dashboard
        • 17. Summary
        • Quiz
      • User Interface Fundamentals
        • Container - Sectioning, Styling and Repeating
        • Conditional Styles
        • Motions
        • Responsive Design
        • Step-by-step workflow
        • Featured UI Components
        • Quiz
      • App Data Fundamentals
        • Data Source Filtering
        • App Variables and Runtime Properties
        • URL Parameters
        • Quiz
      • Actions & Logic Fundamentals
        • Event Handlers
        • Featured Action Nodes
        • Context Parameters
        • Quiz
      • Services Fundamentals
        • Introduction to Services
        • Setting up a Service
        • Scheduling a Service
      • Integration Fundamentals
        • The web request action node
        • Fetch data from an endpoint
        • Map data to a data source
        • Modify the response
        • Nested data mapping
        • Path parameters
        • Authentication
        • Send data to an endpoint
        • Quiz
      • User handling and permissions
        • Users and roles
        • Permissions
        • Creating users
        • Extending the User object class
        • Updating and deleting users
        • Unauthenticated access
        • Quiz
    • Appfarm Professional
      • User Interfaces
        • Featured UI Components
        • Concepts and Use Cases
      • Data Structures & Data Handling
        • Data Features
        • Search & Filters
        • Featured Action Nodes
        • GraphQL
      • Logic & Flow
        • Logical Concepts
        • Date and Time Handling
        • Featured Action Nodes
        • Exception Handling
      • Login & Configuration
        • Login and Authentication
        • Settings, Configuration and Languages
      • Security & Operations
        • Security and Permissions
        • Deployment
        • Schedules and Logs
        • Debugging and App Health
      • Performance & Optimization
        • Optimizing Performance
        • Enhancing Functionality
    • Appfarm Sales Representative
    • Appfarm Developer Forum
      • Session 1: Data Modeling in Appfarm Create
      • Session 2: App Data in Appfarm Create
      • Session 3: Services in Appfarm Create
      • Session 4: Optimizing Performance
    • Background
      • Databases
        • Data modeling 101
        • Database normalization
  • Library
    • UI components
      • Advanced bar chart
      • Advanced bubble chart
      • Advanced combined chart
      • Advanced gantt chart
      • Advanced heatmap chart
      • Advanced line/area chart
      • Advanced pie chart
      • Advanced scatter plot chart
      • Advanced solid gauge chart
      • Animated component
      • Avatar
      • Avatar group
      • Basic bar chart
      • Basic gauge chart
      • Basic line chart
      • Basic pie chart
      • Bottom navigation
      • Button
      • Checkbox
      • Chip group
      • Circular progress
      • Coded component
        • Coded component examples
      • Container
      • Date & time picker
      • Drawable canvas
      • Floating action button
      • Icon
      • Icon button
      • Iframe
      • Image
      • Linear progress
      • List
      • Map
      • Menu list
      • Multi select
      • PDF reader
      • Popover
      • Radio buttons
      • Rich text editor
      • Rich text
      • Select
      • Slider
      • Speed dial
      • Switch
      • Table
      • Tabs
      • Text
      • Text edit
      • View container
      • Visibility group
    • Action nodes
      • Aggregate data
      • Advanced search
      • Auth operations
      • Block
      • Catch exception
      • Copy to clipboard
      • Create file archive
      • Create file object
      • Create object
      • Create user account
      • Delete objects
      • Delete user account
      • Duplicate objects
      • End execution
      • Exit block
      • Exit loop
      • Export data
      • Foreach
      • Generate document
      • If
      • Import data
      • Invalidate cache
      • Log in
      • Log to console
      • Log out
      • Next iteration
      • Navigate
      • Open/close popover
      • Open confirm dialog
      • Open print dialog
      • Open snackbar
      • Open Unsplash dialog
      • Open URL
      • Persist objects
      • Push notifications
      • Read objects
      • Request permissions
      • Run code
      • Run other action
      • Run service
      • Scan barcode/QR code
      • Send email
      • Send SMS
      • Set client language
      • Set data source attributes
      • Set selection
      • Set theme
      • Set user account image
      • Show install app prompt
      • Sleep
      • Sort objects
      • Throw exception
      • Toggle drawer
      • Update object
      • Update secret
      • Update user account
      • Web request
      • While
  • Reference
    • Appfarm Create
      • Appfarm Commander
      • Blue dots
      • Copy & Paste
      • Farmer's Market
      • Find references
      • Find usage
      • Keyboard shortcuts
      • Undo/Redo
      • User preferences
    • Platform concepts
      • Conditions
      • Data bindings
      • Date and time
      • Event handlers
      • Filters
      • Functions
      • Markdown
      • Objects
      • Operators
      • Value processor
    • Dashboard
    • Apps
      • UI
        • Views
          • Dialog
          • Drawer
        • Layout designer
        • Component properties
        • Shareable UI components
      • Data
        • App variables
        • Data sources
        • Calendar data sources
      • Actions
      • App settings
      • App size
      • App health
    • Services
      • Service Endpoints
      • Service settings
      • Service health
      • API explorer
    • Data model
      • Object classes
      • Object class properties
      • Enumerated types
      • GraphQL
        • Queries
        • Mutations
      • Data Extract API
      • Time series data
    • Operations
      • Deploy
      • Schedules
      • Logs
    • Resources
      • Themes
      • Files
      • Fonts
      • Internationalization
    • Configuration
      • Environments
      • Login
        • Custom auth providers
    • Security
      • Users
      • Service accounts
      • Roles
      • Secrets
      • Permissions
        • Conditional Permissions
    • Appfarm Client
      • Developer tools for Apps
      • Developer tools for Services
      • Warnings and errors
  • How to
    • Data modeling
      • Many-to-many relationships
      • Use naming conventions
      • Offline data handling
      • Data silos and White labelling
    • User interface
      • Manage a many-to-many relationship with a Chip group
      • Configure drag and drop
      • Build a drag-and-drop calendar
      • Design a responsive layout
      • Work with flexbox
      • Use Mapbox as a map layer
      • Understand charts
    • Logic and flow
      • Event Log Design
      • Configure advanced search
    • Themes and styling
      • Change the active theme
      • Add custom email templates
    • Enhance your app
      • Add deep links
      • Add keyboard shortcuts
      • Add link previews for social media
      • Apply SEO best practices
      • Change the active language
      • Generate a PDF from a Container
    • Integrations
      • Integrate with external systems
      • Integrate with OpenAI
      • Integrate with Google Analytics (GA4)
      • Configure a custom email account
      • Integrate with a payment provider
      • Integrate with Signicat
      • Integrate directly with an external database
      • Retrieve a Bearer token from Google Cloud
      • Fetch data from BigQuery
      • Retrieve access token from Microsoft Entra ID
    • Workflow automation
      • Update an OAuth 2.0 access token from a service
    • Authentication and access control
      • Add users and assign roles
      • Configure unauthenticated access
      • Implement third-party authentication
    • Security, testing and deployment
      • Add a custom domain
      • Install an app on a device
      • Get ready for Production
      • Optimize performance
      • Security checklist
      • Test and debug
    • Example apps
      • Create an Instagram clone
        • The end result
        • Designing the feed
        • Create new post
        • Add a like-button
        • Add comment-functionality
  • Solution administration
    • Subscription and billing
    • Dedicated tier benefits
    • Guide to GDPR
      • Key principles
      • How Appfarm protects personal data
      • How you can protect your clients’ data
      • Glossary
    • Appfarm and the EU AI Act
  • Policies
    • Appfarm Policies
    • Data Processors
    • Privacy Policy
Powered by GitBook
On this page
  • Split layout or adjust alignment
  • Margin and padding
  • Scroll settings
  • Backgrounds and borders
  • Create custom lists using Iterate Data Source
  • Custom HTML attributes
  • Property conditions
  • Show Loader
  • Hover and file drop zones
  • Drag and drop
  • Event Handlers and Viewport Listener
  • Create custom buttons using On Click and styling

Was this helpful?

Export as PDF
  1. Library
  2. UI components

Container

PreviousCoded component examplesNextDate & time picker

Last updated 9 months ago

Was this helpful?

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 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 .

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.

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 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.

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.

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.

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

Event Handlers and Viewport Listener

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.

More tips are found in our .

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 .

You may find many examples of Custom lists in our Showroom, such as , , , or custom . You may view demos, as well as access the setup in Appfarm Create. If you do not have access, you may register .

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

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

See our on this.

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

Blue Dots
here
UI/UX crash course
here
Tiles
Data Grids
Recursive Tree
s
Calendars
vertical lists
here
Showroom
here
Showroom
here
guide
Event Handlers