Validation

Currently, the vast majority of TagoIO users are not aware of the Validation feature that can be used to bring a better user experience. But, what is Validation? Validation is a type of field that can be used in your Input Form, it serves to return feedback to the user who answered the Input Form. This feedback can be done in several ways that will be described later in this post. So, today I’m going to show you how to create an Input Form with Validation to improve the user experience in your application. At the end of this post you will have a Input Form with a Validation field, as shown in the GIF below.

Step 1: Create an Analysis to the Validation

The first thing we need to do to have a Validation field on an Input Form is to create an Analysis. This Analysis will be responsible for inserting the variable that will be used as a notification in the Input Form. It is important to note that you can make several conditions in this Analysis, send Validation according to the value obtained in the Input Form, etc. However, in order not to bring too much complexity, the example will have a simple Analysis, which only sends a successful Validation.

So, create the Analysis and copy and paste this script into your Analysis.

const Analysis = require('tago/analysis');
const Devices = require('tago/device');
const Utils = require('tago/utils');

async function validationAnalysis(context, scope) {
  const environment = Utils.env_to_obj(context.environment);
  if (!environment.device_token) return context.log('Missing device_token environment var');
  const device = new Devices(environment.device_token);

  await device.insert({
   variable: 'validation',
   value: 'Temperature limits updated with success!',
   metadata: {
    type: 'success',
   },
  });
}

module.exports = new Analysis(validationAnalysis, 'YOUR ANALYSIS TOKEN HERE');

After that, remember to set the environment variable. This is the environment variables that you need to set up.
device_token : Device Token of the device you want to use to send the validation.

Once that is complete, the Analysis is already installed and we can proceed to the next step, which will be the widget creation.

Tip: Note that in the metadata of the variable I send in Analysis, there is a type field. This field defines how the notification will be shown, that is, its styling. For example, with the Success type, the notification is shown in a green color. This color will be different according to the type you choose. The available types are: success, danger and warning. If none of the available types fit your need, you can choose your own color. Just replace the type field with a color field.

Step 2: Create Input Form with Validation field

Now, let’s create an Input Form that contains a Validation field. You can create the Widget however you want. As an example for this post I will create a simple Widget, for a generic application, that would require the user to provide the temperature limits for their alarm. The Form will have 3 variables: maximum temperature, minimum temperature and the validation variable. See below how it turned out.

Tip: You can choose the position of the Validation on your Input Form. Just change the order of the variables. See the image above, the last variable is the validation variable and therefore the notification is shown at the bottom of the Input Form. If you want the notification to be shown at the top, just place the validation variable above all other variables.

After selecting the variables we need (don’t forget the Validation variable) and the title of our Widget, go to the Fields Configuration tab and configure your Validation variable as a field of type Validation.

Finally, just go to the User Control tab and select the Analysis we created earlier in the “Run analysis when submitting form” field.

Well, that’s all. You have quickly created an Input Form with Validation. I suggest that you try to use the Input Form in your applications and create conditions for your Analysis. I hope you enjoyed this tutorial, if you had any problems, let me know.

Thanks!