The 30 minute guide

So, your ready to get started! The fastest way to immerse ourselves in <form.io> is to create a simple application that demonstrates the platforms capabilities. Let’s create an Event Registration system in 30 minutes!

Create your project

You created an account and are here… Let’s create a new project by clicking Custom Project

Provide your project information like so, and then click Create Project

Create an Admin User

You will now need to create an Admin User for your application. You can do that by clicking on Resources | Admin, and then click Preview. You will then fill out the credentials for your Admin user, and then press Submit

This will be the user you log into when we get to building the application.

Create Resources

An Event Management system will need to store some “structured” objects called Events. These are called Resources in Form.io, so lets create a new Event by clicking on the following.

We will then build our Event object using a form builder (pretty cool). 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

Assigning Permissions

You now need to allow Authenticated users to read all events, but only Admins can manage them. To do this, click on Access section, and configure the settings as follows.

Make sure you press Save Changes when you are done adding those.

Event Registration Form

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 which provides “unstructured” data that references Resources.

Let’s create a new form by clicking on the Forms section and pressing New Form. Here we will build an Event Registration form like so…

We now need to Tag our form so that it is differentiated from the other forms and relates to the events. We do that under Advanced Settings and Form Tags.

When you are done adding fields and tagging the form, press Create Form

Access Permissions

We also need to ensure that Authenticated users can submit the Registration Form, so we will go to the Access section.

Make sure you press Save Settings at the bottom to save those changes to the form.

We are now done setting up our Form.io Resources + Forms for our application, now lets build an app!

Create an Application

To get started quickly, we recommend using our pre-built templates which provide scaffolding for your application on Form.io. The best one for us to start with is the Basic Template since it just provides User Authentication out of the box, which we can then add the Event management functionality.

To install the Basic Application on your local machine, you will need to do the following.

  npm install
  bower install
  • Now open up the file @ /src/config.js and change the following line to point to your API like so.

  • Now run the application by typing.
  gulp serve
  • Now log in as the Admin user you created in a previous step. You can also register new users who will be assigned the role of Authenticated.

Now let’s bring in our Events and Event Registration form.

Application Resources

Now that you have a running application, you will need to register the Event Resource into the FormioResourceProvider. Here are some docs explaining that provider in more detail.

We can register our event resource in our app pretty easily by adding an entry into the resources schema within the /src/config.js file as follows. We will also go ahead and add our register form as well into the forms section since we will need that later. Our /src/config.js file should look like the following.

/src/config.js

angular.module('formioAppBasic').constant('AppConfig', {
  appUrl: APP_URL,
  apiUrl: API_URL,
  forms: {
    userForm: APP_URL + '/user',
    userLoginForm: APP_URL + '/user/login',
    userRegisterForm: APP_URL + '/user/register',
    eventRegisterForm: APP_URL + '/register'
  },
  resources: {
    user: {
      form: APP_URL + '/user',
      resource: 'UserResource'
    },
    event: {
      form: APP_URL + '/event',
      resource: 'EventResource'
    }
  }
});

</small>

You will then copy the /src/app/resources/User.js file, rename it to Event.js, and paste it right next to User. You will then open up that file and rename the “UserResource” to “EventResource” like so.

Next, you will need to add a menu item to show the Event management system. You can do this by editing the top menu in /src/index.html.

/src/index.html

  <ul class="nav navbar-nav">
    <li ng-class="{'active': isActive('home')}"><a ui-sref="home">Home</a></li>
    <li ng-class="{'active': isActive('event')}"><a ui-sref="eventIndex()">Events</a></li>
  </ul>

You now have a complete Event management system!

Let’s add our Registration form!

Event Registration

We will now add the Event Registration form to the event. Form Management can be brought into the application using the FormioFormsProvider. This is similar to how the FormioResourceProvider works, but instead of attaching Resources to our application, we are attaching Forms to Resources. Since we wish to attach the Event Registration form to the Event Resource, we can provide the following code to achieve this. Please not that the “…” are used for brevity and should not be copied.

/src/app.js

.config([
  ...
  ...
  'FormioFormsProvider',
  ...
  ...
  function(
    ...
    ...
    FormioFormsProvider,
    ...
    ...
  ) {
    ...
    ...

    // Register all of the resources.
    angular.forEach(AppConfig.resources, function(resource, name) {
      FormioResourceProvider.register(name, resource.form, $injector.get(resource.resource + 'Provider'));
    });

    // Register the Event Registration Form.
    FormioFormsProvider.register('event-register', AppConfig.appUrl, {
      field: [{
        name: 'event',
        stateParam: 'eventId'
      }],
      base: 'event.',
      tag: 'event'
    });
  }
]);

We can now navigate to the following url to see the Forms for a specific event, as well as all the submissions within that Event.

http://localhost:3001/event/[EVENTID]/forms

You can also view the specific forms by clicking on each form, and then have access to manage all of the submissions within that form for the specific Event.

Let’s now change the Event view page to show the Event inforation with the Register Form

Event View

We can now alter the View page for our Event to show the information for that event, as well as have the form on the page for the normal Users to register for the event. We can do this by overriding the view template within the Event.js resource provider.

Now, inside of the view.html page, we can create our custom template for our Event as well as render the Event Registration form within that view. Like this…

<div class="row">
  <div class="col col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Event Information</h3>
      </div>
      <ul class="list-group">
        <li class="list-group-item"><strong>Title:</strong> {{ event.resource.data.title }}</li>
        <li class="list-group-item"><strong>Description:</strong> {{ event.resource.data.description }}</li>
        <li class="list-group-item"><strong>Date:</strong> {{ event.resource.data.date }}</li>
      </ul>
    </div>
  </div>
  <div class="col col-sm-6">
    <div class="panel panel-success">
      <div class="panel-heading">
        <h3 class="panel-title">Event Registration</h3>
      </div>
      <div class="panel-body">
        <formio src="eventRegisterForm" submission="submission" hide-components="hideComponents"></formio>
      </div>
    </div>
  </div>
</div>

This produces the following result…

While this is great, we still have a problem. We need to default the Event field to the event within context, as well as default the User fields to the user who is logged in. We can accomplish this within the view controller of our Resource, which can be found within the Event.js resource provider we edited previously. This time, we will add a view controller.

In this controller, we will do three things.

  • Default the Event field to the event in context.
  • Default the User field to the logged in user.
  • Hide these two fields so that they do not confuse the person using the form.

Here is the code that does this. Take note of the comments which will help understand what code is doing what. Also, ignore the “…” since those are just there for brevity.

angular.module('formioAppBasic')
  .provider('EventResource', function() {
    return {
      ...
      ...
      controllers: {

        // The view controller is executed when the Event "view" page is shown.
        view: ['$scope', '$rootScope', function($scope, $rootScope) {

          // Default the submission object (which is passed to the <formio> directive).
          $scope.submission = {data: {}};

          // This variable is passed to the <formio> directive which will hide the following compoennts.
          $scope.hideComponents = ['event', 'user'];

          // Register when the Event object is loaded into context.
          $scope.event.loadSubmissionPromise.then(function(event) {

            // Default the submission object to select the correct Event.
            $scope.submission.data.event = event;
          });

          // whenReady is a promise that is triggered when the logged in user has been loaded.
          $rootScope.whenReady.then(function() {

            // Default the user object to the logged in user.
            $scope.submission.data.user = $rootScope.user;
          });
        }],
      ...
      ...
      }
    };
  });

After we have made this change, we now have what we are looking for!

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 Serverless application on Form.io!

If you would like to download the code behind this application, then go to Event Manager Github Page. You can also bootstrap this application by typing the following command.

  npm install -g formio-cli
  formio bootstrap formio/formio-app-eventmanager