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.

Target Frameworks

The Target Frameworks refer to the different software platforms that can be utilized when building an application with Form.io. There are many platforms available and Form.io can even work with frameworks that are not on the list, but the list of available out-of-the-box platforms that we support are as follows.

  • Angular - This is an application platform that is ideal for large Enterprise applications and is based on TypeScript.
  • React - React is known as a high performance, Enterprise grade, application framework that does require more dependencies when constructing entire applications.
  • Vue - An elegant and powerful framework that provides the high performance of React, while also giving many of the application constructs that you would find with Angular.
  • Aurelia - An easy-to-learn and powerful framework that combines many of the great patterns from all of the popular frameworks.
  • Vanilla - If you use any legacy framework such as jQuery or any other custom JS library, Form.io works great since it also provides a Vanilla JS renderer and builder.

Project Configuration

Once inside a new project, there are a few important things to take note of. The first thing that should be noted is the API Endpoint for your application.

This shows that every project within Form.io is actually a full-featured API platform. All interfaces with the Portal @ https://portal.form.io are actually driven by the API’s provided by the Project API. This API can be seen by clicking on the API section of your project and inspecting all of the API’s provided through the Forms and Resources within your application.

All Settings for your project can also be manipulated within the Settings section. It should be noted that all settings are Encrypted within the database.

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.