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
      • 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
  • 1. Create a new app
  • 2. Define a data model
  • 3. Design the user interface
  • 4. Configure data sources and bind data to the UI
  • 5. Trigger actions to run logic
  • 6. Collect and save user input
  • Next steps

Was this helpful?

Export as PDF
  1. Getting Started
  2. Quickstart

Step-by-step guide

A guide to quickly create your first app from scratch.

PreviousSpeed introNextAppfarm Showroom

Last updated 1 year ago

Was this helpful?

Once you have access to , you can start building your first app. This written guide takes you through the steps for creating a simple task management app called Task Master, from scratch.

1. Create a new app

Get started by creating a new app (Blank App) and choosing a name and icon.

  • Click Apps in the main menu.

  • Click + New app.

  • Select Blank app.

  • Give the app the name Task Master and choose any icon.

  • Click Create app.

2. Define a data model

Once your app is created you will be taken to the UI designer. Before we start building the UI though, we will define a data model.

In the global data model you define object classes which represent the data you want to store in your database. For example, if you want to store all the products in your inventory you would need an object class called Product. Object classes are equivalent to tables in relational databases or documents in document databases.

A typical task management app has a set of projects, each with different tasks. So to build our app, we need to define two object classes: Project and Task.

First, we'll create the Project object class.

  • Click Data Model in the main menu.

  • Click + Object Class.

  • For Name, enter Project.

  • Click Create.

  • In the list of object classes, expand the Project object class, and click + Add property.

  • For Property Name, enter Title and assign the data type String.

  • Add an additional property named Description with data type String.

Next we'll create an enumerated type to store a project's status.

  • Hover over the + speed dial.

  • Click Enums and then click + Enum.

  • For Name, enter Project status.

  • Under Enum Values, add three values with the following display names:

    • Not started

    • In progress

    • Finished

  • Return to the Project object class and a new property with the name Status and data type Project status.

Finally, we'll add the Task object class.

  • Create a new object class.

  • Name the object class Task.

  • Create the following properties with the matching data types:

    • Title (String)

    • Done (Boolean)

    • Project (Project)

3. Design the user interface

Now we can start designing our user interface (UI) using the pre-built components from the library. The UI is made up of views which contain the UI components. The UI components are visualized in the UI designer and are also listed in a tree-like structure in the neighboring Views pane.

Let's configure our UI to have an App bar which provides a toolbar at the top of the screen and a list where we can display projects.

  • Click Apps > Task Master in the main menu. If you can't see this menu item, click Apps and then open the Task Master app.

  • The default view will be selected.

  • In the Component Properties pane on the right-hand side:

    • Set the Name of the view to My projects.

    • Select the Enable App Bar checkbox.

    • Set the Title to My projects.

4. Configure data sources and bind data to the UI

To connect the app to our data model we first need to configure data sources. A data source provides create/read/update/delete access to one more objects of a specific object class.

  • Click the Data tab in the toolbar.

  • In the App Data pane click + to add a new data source.

  • Select Project from the list of object classes.

  • Set the Name of the data source to Projects. The plural usage helps to indicate that this data source will contain many objects.

  • Select the Read All Objects checkbox, which means the app will read in all projects to this data source when the app is loaded.

  • Add another data source, selecting Task as the object class and naming it Tasks.

  • In the Tasks data source, click the Filter field to define a filter. Set the filter so that Tasks.Project EQUALS Projects (Selected). This condition means that the data source will be empty until a project is selected in the Projects data source.

Now that we've configured our data sources, we can bind data to the UI.

Let's bind the list component we added to the UI earlier to the Projects data source.

  • Click Apps > Task Master in the main menu.

  • Select the previously added List component, either in the tree or the UI designer.

  • In the Component Properties pane on the right-hand side:

    • Add a Data Source. Click Select data binding, select the Projects and click OK.

    • Set Primary Text. Open the context menu, click Data Binding…, select the Title property and click OK.

    • Set Secondary Text. Data bind it to the Status property.

5. Trigger actions to run logic

Most of the UI components have predefined event handlers, such as On Click, On View Load or On Value Changed. Each one can be configured to trigger an action when the event occurs, allowing you to dynamically execute logic based on user interaction.

Let's add a button that opens a new dialog when the On Click event is called. We'll use this dialog to create a new project.

First, add the button to the UI.

  • In the Components pane to the left, drag a Floating action button component and drop it under your List component in the view tree-structure.

  • Open the Styles pane on the right-hand side.

  • Set the Position to Fixed.

  • Set the Offset to 16px for the right and bottom values.

Next, create the dialog that we want to open.

  • Set the Name of the dialog to New project.

Now we can create a new action to trigger when the button is clicked.

  • Select the Floating action button component you added earlier, either in the view tree or the UI designer.

  • In the Component Properties pane, under Event handlers click the On Click field to open the Select Action dialog.

  • Click Create new action.

  • Name the action Open new project dialog.

  • In the Action Nodes pane to the left, click the Open Dialog action node to add it to the action.

  • In the action node properties pane to the right, set Dialog to the New project dialog.

6. Collect and save user input

The most common way to collect and save input from a user is to first add it to a temporary, runtime object and store it the database when the user clicks a "Save" button. This approach is very efficient since it only interacts with the database when the data is actually saved.

Let's create a runtime data source to store a new project.

  • Click the Data tab in the toolbar.

  • In the App Data pane click + to add a new data source.

  • Select Project from the list of object classes and click Add.

  • Name the data source Project (temp). The singular term, plus the reference in parentheses helps to indicate that this will be a runtime data source containing a single object.

  • Set Cardinality to One, since this data source will just store one object at a time.

  • Check Runtime Only.

  • Check Auto Create.

Now we can add input fields to the new project dialog and bind them to our newly created data source.

  • Click Apps > Task Master in the main menu.

  • Click the New project dialog in the tree view. In the Styles pane set the Padding to 24px and click the link icon to set it for all four sides.

  • Add a Text component to the dialog and set the Text property to New project. Set Variant to H5.

  • Add a Text Edit component and bind the Value property to Project (temp).Title.

  • Add another Text Edit component and bind the value to Project (temp).Description. Select the Multiline checkbox and set Rows to 2.

  • Add a Select component and bind the the value to Project (temp).Status.

  • Add a Container component. In the Styles pane, set Display to Flex and Justify Content to End.

  • Finally, add a Button component inside the container. Set the Label to Create project and Variant to Contained.

The view tree should now look like this:

Next we need to trigger an action to save the project when the Create project button is clicked.

  • Select the Create Project button and under Event handlers click the On Click field to bring up the Select Action dialog.

  • Click Create New Action and call the action Create project.

  • Add a Persist Objects action node.

    • Set the Data Source to Project (temp).

  • Add a Close Dialog action node.

  • Add a Delete Objects action node.

    • Set the Data Source to Project (temp). Since we enabled Auto Create on this data source a new, empty object will automatically be created so the user can immediately add another new project.

As you make changes in Appfarm Create, they are instantly deployed to the Development environment. This means you can access a functional, live preview of your app as you build it.

  • Click the Play icon (Preview App) in the top-right menu to open the development client and run the app.

  • Add new projects and see them appear in the list.

If you have access to additional environments, you can deploy to them under Deploy in the main menu. Press the blue button to deploy your app to a given environment.

Next steps

Now you have a foundation for adding further functionality such as managing Tasks within each project. While we have already developed a fully-functioning app, we have barely scratched the surface of what is possible with Appfarm Create.

As a next step, we recommend spending a few hours on our interactive Intro Course.

In :

Within an object class you can add properties, which define the specific values you want to store for a given object. Each property has a data type, which could be a simple type like a string or integer, an , or a reference to another object class. Using the product example from above you might have properties like Name (string), Cost (float) and Status (enum).

Read more about the in the reference guide.

In the Components pane to the left, drag a into the view.

Read more about the in the reference guide.

Read more about in the reference guide.

Click the down arrow () in the Views pane, and then click Add Dialog.

Read more about in the reference guide.

You may also check out the () for inspiration, or dive into the to help you develop your app further.

🔽
Appfarm Create
Enumerated Type (enum)
global data model
List component
UI designer
app data
actions
Intro Course
Showroom
register for access
videos and further documentation
Appfarm Create
The completed data model
The filter definition for the Tasks data source
Binding the list component to the data source
Setting the styles for the Floating Action Button
Selecting Add Dialog
The completed setup of the Project (temp) runtime data source
The finished New project dialog
The view tree in the UI designer
The completed action