Application Development
Let's create an application using Form.io!
Last updated
Let's create an application using Form.io!
Last updated
The most advanced way to use Form.io is to embed the Form.io renderer directly within any Web based application you are developing. The Form.io platform supports a large number of different application development frameworks such as the following.
Each one of these landing pages provides its own documentation on how to create new applications using these frameworks. For this tutorial, however, we will pick one (Angular) and demonstrate how an application can be created using this powerful platform. For this tutorial, we will build an application that demonstrates many of the different features of the Form.io platform; An Event Registration Application using the Angular framework.
Let's get started by Creating a new project.
After you create a new account at https://portal.form.io, you will see a page that looks like the image below. The first thing we will do is to create a new Project, which we can do by clicking the Angular button, or by clicking on the Create Project button.
Provide your project information like so, and then click Create Project
An Event Registration application will need to store some “structured” objects called Events. These are called Resources in Form.io, so let's create a new Event by clicking on the following.
We will then build our Event object using a form builder. We could also provide some field validations and such, but for now we will keep the form simple.
When you are done, click on Create Resource. This immediately demonstrates one of the differentiating features of Form.io, where Data Models and Resources can be constructed using a simple drag-and-drop form builder interface. We can even control who has access to create this Event within the Access section.
You now need to allow Authenticated users to read all events. We will also want them to be able to create their own, update their own, and delete their own events. To do this, click on Access section, and configure the settings as follows.
The settings should automatically save when you add this role to these permissions.
Now that we have an Event resource, we need a way for people to register to attend the Event. This is a great use case for a Form that provides “unstructured” data that references Resources.
Let’s create a new form by clicking on the Forms section and pressing New Form, and then selecting API Web Form.
Here we will build a Registration form. The first field we will add to this form is a Select component field like so…
Once we add this, field, we will give it a label of Event.
We will then click on the Data tab, and then set the Data Source to Resource, and then select the Event Resource like so.
Finally for the Item Template, we will provide the following code.
Like the following shows.
Next, we can press the Save button to add the field to our form. Now that we have an Event resource field, we can add other fields to the registration form like so…
We will now press the Create Form button to save our form. Now, let us configure the access permissions of this form.
We also need to ensure that Authenticated users can submit the Registration Form, so we will go to the Access section and configure the following.
The permissions should automatically save when you set them.
We are now done setting up our Form.io Resources + Forms for our application, now let's build an app!
To get started quickly in Angular, we recommend using the Angular CLI tool to create our application. We can do this by typing the following within your terminal.
This will now create a new application within the folder eventmananger, we can navigate into that folder by typing the following in the terminal.
We will now bring in all of our dependencies into the application by typing the following within the application folder.
Or if you are using yarn, you can instead run the following
We can now setup the styles for our application by editing the following file.
src/styles.scss
We will now start our application by typing the following in the terminal.
You should now be able to go to http://localhost:4200 in your browser to see the default Angular page.
We can now create a home page, by typing the following in the terminal.
And then provide the following code in the following file.
src/app/home/home.component.html
And then add the following to the routes.
src/app/app-routing.module.ts
Next, we will need to make sure that our root component, which is called AppComponent is able to display the content at this route. To do this, we will need to add a router-outlet to the template of this component. You can do this by opening up the following file and changing it to only have the following content.
src/app/app.component.html
Now, when you refresh you should see your home component as follows.
Now that we have an application running, we will need create a configuration file so that we can tell the application which Form.io project we are pointed to.
To do this, we will create a new config.ts file as follows.
src/app/config.ts
You will need to make sure that you replace “yourproject” with the name of your Project URL which you can find at the following location within your Project page.
Next, we will need to register this AppConfig within the main module by adding the following to the app.module.ts file.
src/app/app.module.ts
Now that we have the configuration file in place, we can setup User Authentication.
We accomplish this by first creating an Angular module that will contain the authentication routes.
This will create a new folder within our application within the src/app folder, which we can then use to include all the necessary modules to bring in Authentication.
src/app/auth/auth.module.ts
We must now register the Authentication module by lazy loading the module within the “auth” route. We can accomplish this within the following file.
src/app/app-routing.module.ts
Next, we just need to register the service providers with configurations within the app.module.ts file.
src/app/app.module.ts
We should now add a header to our application so that we can login, and see our login state.
We can now add a header to our application by adding the nav HTML to our existing router-outlet code we created earlier within the app.component.html file. It should look like the following.
src/app/app.component.html
Next, we will need to add some logic within the AppComponent class to handle the authentication workflow.
src/app/app.component.ts
We should now see the following within our application with a working authentication and registration system.
Now that you have a running application with authentication, we can now add the Event resource using the FormioResource module.
Angular Resource Documentation
We will then add the following to the following module file.
src/app/event/event.module.ts
The next thing we will need to do is to register this event within the router.
src/app/app-routing.module.ts
Finally, you will add a link to the navigation bar to go to the Events section when you click it.
src/app/app.component.html
You now have a complete Event management system!
Let’s add our Registration form!
We will now add the Event Registration form to the event. Since forms and resources are conceptually the same thing in Form.io, we can use a nested resource to attach forms to any resource within our application. We can start by adding a submodule within Angular.
We can now add the following to the created file.
src/app/event/register/register.module.ts
Notice that we added the parents construct to our providers. This tells the Form.io Angular Resource system that this is nested within the Event resource as well as should contain the currently logged in User assigned to the new records as well.
Next, we need to mount this nested resource within the Event resource. To do this, we add it to the children of the Event resource routes as follows.
src/app/event/event.module.ts
We can now navigate to the following url to see the Forms for a specific event, as well as all the registrations within that Event.
Next, we will need to change the Event resource view so that we can add the tab to the interface.
We can now add the following the the event resource html.
src/app/event/resource/resource.component.html
Next, we will need to extend the FormioResourceComponent
src/app/event/resource/resource.component.ts
And finally, we can register this within the routes using the following.
src/app/event/event.module.ts
This should create the following interface, where we can now view all of the registrations within an Event.
Let’s now change the Event view page to add a Register for this Event button!
To change the view of the Event, we can use the same method we did for the Resource component, but this time we will create one for the event view.
We can now modify the following template with the following.
src/app/event/view/view.component.html
Next, we need to extend the FormioResourceView as follows.
src/app/event/view/view.component.ts
And finally, we will register this with the FormioResourceRoutes as follows.
src/app/event/event.module.ts
This produces the following result…
We now have a full working Event Management system, which even allows for other users to create an account and Register for this event. We hope that this walkthrough guide provides you a solid footing on building your next Progressive Web Application on Form.io!
If you would like to download the code behind this application, then go to Event Manager Github Page.