Project UI
Last updated
Last updated
After your project has been created, you will navigate to the Project's landing page. Projects provide the ability to create new Forms, Resources, manage data, apply integration settings, create and deploy stage versions, and many more that will be covered in the following sections. Most of these features are found within tabs of the navigation bar found on the left-hand side of the project. Click the Hamburger icon next to the Form.io logo to hide this navigation bar for more real estate to work within the Project.
The Project header will display your Project Title and Project plan type. Below the title, you can find the Live Endpoint of the Stage you are currently viewing. When created, Projects will only contain the Live stage and will be the default stage when opening a Project. Clicking the endpoint URL will copy the Live Endpoint.
The Stage dropdown allows you to switch between different stages within your project. Clicking different stages will open the selected stage context which contains its own set of Forms, Resources, Endpoints, etc. Use this dropdown to create new Stages.
Click the Forms or Resources tab to access your existing Forms and Resources. Click the +New Form/Resource button to create a new one. Click the Import button to copy an external Form/Resource by adding the Form embed URL. Clicking a Form/Resource title will take you to the Form Builder where you can make updates to the Form. There are also quick links to Launch your form, Copy the Form or Resource, or Delete them.
Clicking the Data tab will display all of your Forms and Resources within the Stage. The Data button will direct you to the Submission Data Table for that particular Form/Resource. Click the Export button to export all submissions via CSV or JSON format.
The Access tab is where you can create, delete, and manage all of your project Roles, configure your Project Level Access Permissions, and set up Stage Teams. You also have shortcuts to the Access configurations of all of your Forms and Resources
The Staging tab is where you create, manage, and deploy Stage Versions within your Project. Versions can be used to migrate forms, resources, actions, and roles from one stage to another. Stage JSON files can also be imported from external projects or export your own JSON file to share with your colleagues or import to other Projects associated with your account.
The PDF tab is where you can view and manage all PDFs that have been uploaded to the Project. Here you can see the number of PDFs that have been uploaded along with the PDF ID and what Form they are connected to. When a PDF is removed from a Form, a trash can icon will appear in the Operations column where you can remove the PDF from the project and server.
Projects utilizing the SaaS offering will have a Usage tab that will display the monthly API requests, Form and Resource limits, PDF downloads, and sent Emails. If you are part of a Team, this page will also show what kind of permissions you have for the Project.
The API Explorer is a way to visualize the APIs created when you build either Resources or Forms within your project. One of the more amazing things about the Form.io platform is that when you create a new form for your application, a REST API is automatically generated to serve as the backend for not only that form but also any other system that would like to create submissions. This API is visualized through the Swagger API documentation platform and looks as follows.
The API Explorer is a "live" explorer which means that any testing done using this interface will execute the endpoints.
Tenants are implemented within the Form.io platform as independent sub-projects where each Tenant receives their own Project endpoint. These tenant projects can be thought of as "sub-projects" where they have full project features, but have certain limitations that restrict how they can be used.
The Tenants tab will list all of the current tenants within the Project and associated settings that can be configured for each Tenant. Use this UI to manage your organizational tenants that reside within your project.
The Stage ID is the unique identifier for the Stage within your project and can be found at the bottom of the navigation bar. Click the Stage ID to copy the identifier to your clipboard.
The Teams tab is where you can add, remove, and manage Teams associated with your Project. Teams are created from the Developer Portal and are not associated with a specific Project, but rather can be added to other Projects within your Developer Portal.
Click the Project Plan tab to review or change your current project plan, monthly billing, and any on-premise API or PDF servers.
Project Settings cover a multitude of different configuration options ranging from 3rd party integration connections and Custom CSS, to Email transport and Authorization setup.
Read more about Project Settings in the next section.