Nick Mudge Ignition Software Consulting & Development

Form Components Palette

I created a set of pre-configured form components that make it easy and fast to create database-backed user input forms in Ignition. The components are free and available for anyone to use.

The ability to create custom component palettes in Ignition is a capability that is not often talked about but is a powerful feature and can be very useful. In this case I used this capability to create a set of components that anyone can use to quickly and easily create forms in Ignition. The forms are used to capture user input and insert and update data in databases. See the Form Components in the image on the right.

To use the Form Components Palette download this file: FormComponentsPalette.proj. Then import the file into an Ignition project. The project file includes the Form Components Palette and a Python module at project.pa.forms. This project file only works in Ignition 7.7.2 and above.

How it Works in a Nutshell

A Form Container is placed in a window and other form components are placed inside the Form Container. A Form Container specifies what database table to insert data into and update.

Form input components receive user input for specific columns of a database table.

A Form Table shows what data exists in a database table and enables users to select rows in the table to update or delete.

A Form Submit Button is clicked on to insert or update data in a database table.

The form components are very flexible and can be modified easily to support various functionality.

Videos

Here is a video that shows how to create forms using the new form components: Ignition: How to Create a Form Using New Form Components.

Here's another video where I create a form from scratch in less than 5 minutes, including adding validation and testing the form: Ignition: How to Create a Database User Input Form in 5 Minutes.

Form Components in Detail

Form Example

The Form Example provides a working example of a form using the form components. The Form Example expects a simple "people" database table to exist using the default datasource of a project. Look at the SQL query used by the Form Table to understand the schema for the "people" database table.

The Form Example is a skeleton form. Use it to get started creating a new form. Here is an image showing an Example Form:

Example Form

Form Container

The Form Container is a regular container with two custom properties. The "TableName" property specifies what database table to insert data into and update. The "Datasource" property specifies what datasource to use. If the "Datasource" property is blank then the default datatsource for the project will be used.

Form Input Components

These are the form input components: "Form Text Field", "Form Numeric Text Field", "Form Text Area", "Form Dropdown List", "Form Radio Buttons".

Each form input component has a "Column" custom property that specifies which column in the database table to insert into or update. Each form input component has an "IsValid" custom property that indicates if user input is valid or not.

Each form input component has a "validateInput" custom method that is used for validating user input and setting the "IsValid" property to True or False. This method can easily be modified to perform custom validation. This method is called when user input changes.

Each form input component has within it a "Label" component for describing the input component purpose, and a hidden "InvalidMessage" label component for displaying validation errors.

Form Submit Button

The Form Submit Button is used to submit a form, which inserts or updates data in a database table. The Form Submit Button contains within it a "Status" label that shows the success or failure of an attempt to submit a form.

project.pa.forms Python Module

The form components call functions provided by the project.pa.forms Python module to tie together form components and execute functionality of forms.

No Ignition Templates

It is notable that the Form Component Palette does not use any Ignition component templates. While component templates are a powerful and useful feature I found it was best not to use them in this instance. Like templates, component palettes have the ability to combine and capture pre-configured functionlity on regular components and reuse them. While templates have benefits that captured components on palettes don't have, individual instances of non-template palette components can be more easily modified individually.

More Functionality?

If you want me to add more functionality to this then let me know.

I am also interested in finding sponsors who would be interested in funding improvements and new functionality for this work.

Also see discussion on Inductive Automation Forum.

Update: Recently a new Form Popup Calendar component and Form Check Box component were added.

Comments

Zack Scriven
www.kymerasystems.com
29 September 2014

Nick,

I must say this palette is very awesome. Also I really like the cloud templates method of distribution. Works great!

Kudos
Nick Mudge
30 September 2014

Great. Thanks Zack!
R.Alamsha
9 October 2014

Hi Nick

Love it.

BTW, i want to test a RT chart in ignition. pls check this web site.

http://www.genlogic.com/java2/realtime_stripchart.html
Emmanuel
www.combosco.com
20 October 2016

How can I show only the information of a specific id selected by the user on a textfield.?
Name: (required)
Email: (required)
Website:
What has four legs, rhymes with bat and says, "Meow?" (One word answer.)
Spam Filter: