Exploring the portal

When you first create an account within <form.io>, you will land on a dashboard page @ https://portal.form.io. We call this the <form.io> Portal, and it serves as the administrative interface for Developers to develop the Resources and Forms for their applications. This is the first page you see.

Projects

A Project can be thought of as an isolated container for all the Resources, Forms, Submissions, Roles and Permissions, and Settings for a new Application that is being developed.

These Projects can then be shared between other Developers through the use of Teams which are also configured on the main dashboard screen. It should be noted, however, that all Projects by default are considered Free-tier or Basic functionality, but they each can be upgraded to enable Premium features and more API bandwidth.

To create a new project select any Framework option or the New Project + tile from within the existing project window.

The modal window appears will prompt you to name the project, give it a description, change the framework, and even import an existing project JSON.

Application Templates

An Application Template (also referred to as a Project Template) provides the blueprint for creating a new project which contains pre-configured Forms, Resources, Actions, and Roles and Permissions that would support an application using the API’s provided by such entities. Each template is provided through a project.json file that is attached to each application. An example is the following project.json file which is used for the Human Resources Application application. This project.json file can also be used when creating new empty projects under the Upload existing Template when creating a new project. Each of the Project Templates are intended to serve as a starting point and provide an example on how to quickly get started building a Serverless application on top of the Form.io platform.

You can create a new project by either clicking on one of the existing Project Templates, or by clicking on the Create Project button.

Project Configuration

Once inside a new project, there are a few important things to take note of. The two most important of these, is the Project Settings as well as the API Endpoint url which was created for your project.

Additionally each project framework comes equipped an walk through that can help users create a new application. We invite you to explore your Project Settings to get an understanding with how your project can be customized specifically for your application.

After you are done exploring, we are now ready to click into the Resources section.

Resources

As mentioned in the How it works section, Resources are “structured” and reusable objects that can be used to create complex data structures within your application. The fields within a resource can be reused within other forms, as well as linked together to create complex nested resource relationships.

One example is a user resource with login and register forms.

Resource

User(user)

Name field (name)

Email field (email)

Password field (password)

Forms

Register

user.name

user.email

user.password

Login

user.email

user.password

Another example is having multiple resources embedded in the same form. This example has a customer, product, and order resources with an order form.

Resources

Customer (customer)

name

address

Product (product)

id

description

price

Order (order)

ordernum

date

total

Form

Order Form

customer.name

customer.address

product.id

product.description

product.price

order.ordernum

order.date

order.total

Nested Resources

Resources can also be nested into one another to create complex data hierarchies necessary for complex data management requirements.

Resources are very similar to forms in the way that they are built, their rendering, and their APIs. There is one fundamental difference and that is that resource fields can be embedded in other resources or forms.

For more information on creating and using Resources, go to the Resource Section of the User’s Guide.

Forms

Forms provide a mechanism for user input within your application. Form.io provides a form builder interface which allows you to drag and drop form components as well as reuse Resource fields to create robust, manageable, and reusable form interfaces for your web application.

For more information on creating and using forms, go to the Forms Section of the User’s Guide.

Data

Attached to every Form and Resource is a Data section which provides you Data Management capabilities on a per-form basis.

This allows any Administrator the ability to gain visibility into the data being collected as well as query the results using a per-column filtering capability.

Pro Tip

The Data grid is actually hooked up to the Form.io Submission API, which means that any queries and advanced reporting capabilities that can be achieved with our data grid, can also be achieved with our Submission API. Inspect your browsers Network activity to view the actual API requests being made as you use the Data grids advanced features to get a sense of the power behind it.

In addition to viewing the data within the Grid, you can also Export the submission data in either CSV format or raw JSON. Each of these exports are “streaming” exports which means they can also be piped into other processing tools for high performance data processing operations.

API

At its core, Form.io is a powerful API platform that can be solely used as the Data management platform for your Serverless application. The API for each project is dynamically generated based on the JSON schema definitions of the Forms and Resources within that project. As an example, for the Service Tracker application, the API generated looks like the following.

In addition to the Forms and Resource API’s that are automatically generated, there exists additional core API’s that serve as the underlying structure for the Project. This core API is documented on our Form.io Postman Documentation page.

Now that we are comfortable with the Portal, you are now ready to begin developing your application.