How to configure a script for a button's onClick event?

Ignition
,
1

I have a View with 5 Text Fields where I want the user to input data into. I have a button that I want to trigger a script when it is clicked. I am unsure of how to write this script. This is what I would like the script to do:

Take the data from the 5 text fields and add them to the identically named columns of the table on the same screen.

Example:

Text Field 1
Name: Red
Data Entered: 11
Text Field 2
Name: Blue
Data Entered: 13
Text Filed 3
Name: Green
Data Entered: 20
Text Field 4
Name: Yellow
Data Entered: 18
Text Field 5
Name: Black
Data Entered: 14

Clicks Button

Table
Columns
Red___Blue___Green___Yellow___Black
11__ 13______20______18______14

Now I know this could just be easier if I make the table editable have the user type in the values directly. However, my next step would be to connect the table to my SQL DB and have the data be sent to a SQL table. I am then going to add a feature to query the SQL DB to show all existing records in the table within my View and have users be able to edit/delete records if needed.

Any help is appreciated.

2

You'll have to set up an onActionPerformed or onClick event on the button that triggers a script that gets each Text Field's value using the button component's object traversal functions OR use the browse properties tool (at the top right of the scripting area). You'd probably want to perform some input validation here as well.

Once you have all that, you can append the row to the table's data property as a dictionary having the column names as keys and the inputs as the values (where the table's data property is a list of dictionaries).

I see you are newer to the forum. Don't know if you are new to Ignition, but I'd recommend watching some of the Inductive University courses to familiarize yourself with the capabilities of Ignition. It covers topics like this and more.

3

I recommend first binding the text field values to custom properties of the view so that you can reference those instead of the input values themselves. That way if you ever need to reorganize/rename those components, you can do so without having to update all the references to their values, which become as simple as self.view.custom.[customProp] instead of a bunch of getParent()/getChild()/getSibling() traversal. It also makes debugging easier when you can see all of the values sitting side-by-side at the view level.

2 Likes