Tutorials

Walkthrough tutorials and video tutorials to help you become familar with the Form.io Platform.

Welcome

For all you visual learners out there, here is a collection of tutorial videos on how to use the <form.io> platform. These videos range from basic features like setting up user tables and authentication to more advanced features such as OAuth and conditional logic.

If you would like to see a tutorial video that is not featured below, please contact our support team for recommendations.

Form.io Overview

Complete Walkthrough

This is a complete walkthrough where we teach you how to build a complete Movie Manager application which includes Playlists and Movie Trailers within that playlist.

Basic Tutorial

In the basic tutorial section, we will show you how to create a new project from the ground up. The following video will explain the fundemental features you will learn in the Basic Tutorial section.

User Table & Authentication

This video will explain how to set up a user table with authenticating login and registration forms.

Nested Resources

Learn how to establish a nested resource relationship between two data objects

Roles & Permissions

This video will show you how to implement our robust roles and permissions system between your resources and forms.

Advanced Tutorial

Here you will find videos on the more advanced features within the Form.io platform.

OAuth

Learn how to easily implement OAuth into your application in just 5 easy minutes.

S3 Bucket and File Upload

Learn how to set up an Amazon S3 bucket and integrate that within Form.io’s File Upload system.

Here is the code for adding the bucket policy within your Amazon IAM account

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "UploadFile",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::XXXXXX:user/UploadUser"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObjectAcl",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::formio-upload/*"
        },
        {
            "Sid": "crossdomainAccess",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::formio-upload/crossdomain.xml"
        }
    ]
}

CORS configuration code

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Dynamic Role Assignment

Learn how dynamically assign roles with authentication and permissions.

Submission Resource Access

Learn how to use assign permissions based on Resource assignment

Developer Tutorials

This is an introduction to a multi-part series about how to get going with Form.io. We are going to put together a student admissions app using Form.io forms. We will learn how to: a.) Yeoman generator to scaffold our application b.) Authenticate forms within the application c.) Utilize ngFormio/ngFormio help.

Yeoman Scaffolding

This is the second video to multi-part developer series. In this lesson, we are going to put together a Yeoman app that will give us the scaffolding to get our application going.

Authenticating Forms and ngFormio

This is third video in a multi-part series. In this lesson, we are going to talk about setting up authentication forms and touch on ngFormio and ngFormioHelper.