Tuesday, August 23, 2016

Thinking About Dynamic Forms Using Angular pt 2

In the last post I started thinking about some of the problems we encounter with using forms for inputting data into a system. There may be other ways to input data and a well-designed system will be capable of accepting input from other sources. However, the focus of this series is on using forms - specifically via a web browser.

Since a well-designed system will accept input in a platform agnostic way, this leaves us open to design the user interface in a number of ways. For purposes of this thought experiment I'm going to assume we have the capabilities in place to accept input into the system in some standard way - perhaps through a service or some RESTful api for example. It doesn't matter so long as we can stay focused on collecting data from the user and sending that data into the system.

One problem we may have is incremental changes. Users have experienced automatic saving and it's no longer a novelty - we can and should do this in order to meet user expectations.

Another problem we may face is logging changes to data. Additionally, we may face changes to the form itself. Let us also take into consideration a form in which a user can add fields as needed.

From what I've gathered so far, we can apply two commonly used technologies to this set of problems and cone up with a solution that meets these needs. Here's what I have in mind:

Using Angular (or even your favorite SPA technology) and a data object with this interface: { template, data, metadata } we can store each form instance in a document database and load it in one go.

The template property holds several bits of info: the template text, version, source, form name, id, ... , anything else? }

The data holds just that - it's complete dynamic and goes with the template.

Metadata holds things like userId, action, date, ip, client device info, whatever else is relevant.

Any action the client takes - save, submit, delete...are saved as a new version of the document. Some document databases have this built-in. I'm thinking of one in particular which can even save files (js, html template, etc) along with the data.

In Angular 1 we can use directives to enable the forms. Dynamic directive creation should be achievable since its all js. All we really have to do is create components or directives server side and serve up the js and template. The template is either assigns to template or templateUrl of the directive/component. I've become accustomed to components so I'll prefer those with '=' (two way binding) which allows them to update objects in parent scope which are linked.

The data in the template would be interpolated using a standard controllerAs: 'vm' so that all data can be accessed in the templates via vm.property.

That leaves behaviors...not sure about these yet. I'm going to think a bit about this one...until next time it's a good place to start.