TLDR;

The point of this series is to build a CRUD web application. It should be built in a manner where the main application becomes nothing more than the wire-frame on to which we hook dynamically generated forms. This will be facilitated via the Form.io API. This is my first foray into Form.IO so I want to document my ideas and thoughts.

Index

  1. Introduction and Form.IO installation (this article)
  2. Form.IO API and Swagger
  3. TODO: Form.IO as JWT Token provider
  4. Placeholder for other topics to follow

Introduction

This is going to be one of those multi-part series as there is a lot of ground to cover and many things that need to be figured out. So let's start with some anecdotal references :)

Once you have been coding for several years, you start to realize, most of the code written in the enterprise space is all about CRUD of data. UIs and forms are designed and built to that end. Not only is this a very time-consuming endeavour. It leaves your "dreams dashed upon the jagged rocks of" reality,(Jones, 2008). The work is soulless and boring and don't even get me started on the repetitive nature of it. It makes one think, there must be more to life... Well melodrama aside, is there a way out of this pit of despair? Possibly, perhaps. First, a little story (cue the flashback ).

Back in the day, I spent several months developing a .NET forms-based desktop application. As I worked on this project, I started to realize this was just a fancy data entry system to keep track of the maintenance and value depreciation of infrastructure. Although a part of the system did comprise of a GIS editing and spatial data management section. The bulk of the work here was in building data models and user interfaces to create, read and update that data. "Add these fields to this form; Change the field to this value; Make this dropdown read that value etc". Essentially, data entry.

I was getting very irate having to do these 'boring' changes. So one Saturday afternoon I decided to take a stab at building a configurable UI, using an XML schema (JSON was not yet mainstream) to define the UI layout.
Long story short, by Wednesday that same week, I not only reworked most of the application (several months of initial effort) but also configured it back to the same functionality as existed in the 'old' application. In addition, I added a nice UI designer to allow the system admin to make the edits required to the application himself, rather than having to rely on a software developer for every change request. Essentially, I made myself redundant, but it was not the type of work I enjoyed, so I was fine with that. The challenge of designing the dynamic UI was where all the action was at.

I am finding in a few projects that I have done recently, the above trend is re-emerging. The difference being, we are no longer building 'simple' UI desktop applications, but web-based ones. I am also at a point in my life where I am way to lazy to do things the manual way. Time to work smarter not harder! So, what are we to do?
Enter Form.IO...

Form.IO

Form.IO by their definition: "A Form and Data Management Platform for Progressive Web Applications".

Form.IO comprises several components:

  • Server-Side API and database
  • Resource Manager to build the data structures
  • WYSIWYG form builder
  • Client-side form view/renderer

If you go to the main website you can pay a subscription fee and get all the functionality wrapped in an easy to use UI. However, the core of their technology is available on GitHub as an open source project. This is what this series will focus on.

I am going to assume you are a lazy software developer like myself. You are too cheap to pay for a service you feel you could build yourself (if you just were not so way too erm, time-constrained, i.e lazy!) but happy slapping something together based off of some open-source components.

Installing Form.IO

Form.IO is a NodeJs application that stores data in a MongoDB. So you will need a MongoDB instance, as well as NodeJs, installed on your dev machine.
Create a database on MongoDB called 'formioapp'.

Using git, clone the latest copy of the formio project from https://github.com/formio/formio.git

In the newly clone formio directory, go to config and edit the default.json file. Update "mongo": "mongodb://localhost:27017/formioapp", value to match your MongoDB connection string. Save the change.

in the main directory (one up from config) execute the command npm install and after that completes run npm start

The NodeJs server will start up with a wizard as below:
FormioOutput

In your browser, go to http://localhost:3001 and enter the credentials you used in the setup wizard above.
If all went well you should now be here:
FormioHome

Now the fun can start

References

Jones, E., 2008. The Naked Truth. Salem Publishing Solutions, p.48.

NEXT =>