Copy/paste data into text or number field using Javascript

[Mike Mullin]

Hi Brendan,

I’m a former Ninox user and I remember it has a function called “Trigger after update” where you can create some sort of formula which extracts certain field data (i.e. text or number data) and copy/paste the data into a regular text or number field. If you then double click these regular text or number fields you can customize the data.

Let me explain why I want to do this.

I have a form called “Billable items”. This form has records with a text description field and a price field. To create an invoice I’m selecting records from this form (Link to Form). I sometimes want to change or add words to the description field or adjust a price (i.e. if I want to give my client a certain discount). I don’t want to create a new record for every adjustment because within a short amount of time the record list will expand and I lose overview of all the available records.

Is copy/pasting field data and then customizing the data something which can be done in Tap Forms using Javascript? (Sorry, I have no knowledge of Javascript (yet ;-))

Best,

Mike

[Brendan]

Hi Mike,

Tap Forms has a JavaScript function called Utils.copyTextToClipboard('Some text'); and var value = Utils.copyTextFromClipboard();. So yes, you can use a script in Tap Forms to copy and paste to the clipboard.

Also, Tap Forms has automatic triggers when any of your scripts get a value from a field in your form. For example, var amount = record.getFieldValue(amount_field_id); would cause your script to automatically execute if the value of the amount field was modified.

Hope that’s the information you’re looking for. The scripting instructions are here:

https://www.tapforms.com/help-mac/5.3/en/topic/scripts

And there’s the Script Talk forum on my website where you can go to talk about scripting. There’s lots of information and sample scripts there.

Script Talk

Thanks,

Brendan

[Sam Moffatt]

You can create a script field and when you configure it to pull a value from a field, it will automatically watch the field and trigger the script. You can then use that script field to update another field in your form with what ever value you want. You can check to see if the destination field already has a value and then opt to do nothing. Another trick I’ve done is use the script field to store the previous value of the target field so that I can evaluate if I can safely update the target field to a new calculated value or not.

At it’s simplest, create a form with three fields: your source field, your destination field and a script field. Open up your script field and Tap Forms will have created a function for you that looks like this:

function Sample_Script() {

	// Replace with your own code
	var hello_world = "Hello World!"; 
	return hello_world;

}

Sample_Script();

The name of my script field was called “Sample Script” so the function Tap Forms generates was called “Sample_Script”. For the simplest use case, delete out the middle bit of code so that you’re left with an empty function, it should look like this:

function Sample_Script() {

}

Sample_Script();

Click into the text editor on the right in the area you just deleted and then on the left in the field list select the two fields we’re interested in and then click on the “ID” button. If double click the name of the two fields you are interested in, it’ll insert a one line piece of code with the field ID embedded. If you click on ID it will insert just the ID. I use the latter because it makes the rest of the code make more sense than repeating the field ID. I named my fields “Source Field” and “Destination Field” which are both text fields so when I click the “ID” button, my code now looks like this:

function Sample_Script() {
var source_field_id = 'fld-eb01c448b3ba4c08a20159faca0d631c';
var destination_field_id = 'fld-ac1628a83f4f4c82b256cf362691a007';

}

Sample_Script();

Keep in mind the field ID’s (e.g. the fld-1234 part) will be different based on your own field ID’s and the field names will be based on your own fields. Normally we indent each time we open a brace ({) and unindent when we close (}). Let’s indent our variables. You can manually intend them with the tab key or you can click the “indent selection” button to indent the lines. Let’s see what that looks like:

function Sample_Script() {
	var source_field_id = 'fld-eb01c448b3ba4c08a20159faca0d631c';
	var destination_field_id = 'fld-ac1628a83f4f4c82b256cf362691a007';

}

Sample_Script();

At this point we’ve only set up a “variable” to store the internal Tap Forms field ID. The next step is to get the value of the fields to check them. I’m going to get the value of the destination field first because if it is set then we can just stop the script. Fortunately Javascript is relatively loose with it’s typing so we can check if something is “falsey” easily and for our purposes that will work:

function Sample_Script() {
	var source_field_id = 'fld-eb01c448b3ba4c08a20159faca0d631c';
	var destination_field_id = 'fld-ac1628a83f4f4c82b256cf362691a007';

	var destination_field = record.getFieldValue(destination_field_id);
	
	if (!destination_field)
	{
	
	}
}

Sample_Script();

What we’ve done here is get the value of the “Destination Field” and put that in destination_field. The next line checks to see if the value is “falsey” or otherwise negative. For Javascript a variable that is unset, undefined, null, zero, an empty string or false will be considered negative or “falsey”. The exclamation mark basically negates it so that it enters the if block when destination_field is not set. Sweet!

Last step is to get the value of the source field and then copy it across. The first step is to get the field value which looks like this:

var source_field = record.getFieldValue(source_field_id);

Similar to the destination field code, we use the source_field_id to get a copy of the field value into source_field. Next step is to set the value of the destination field:

record.setFieldValue(destination_field_id, source_field);

For getFieldValue we need to provide the field ID but for setFieldValue we need to give it the field ID of the field we want to set and the value we want to set it to. In this case we want to set the destination field to be the value of the source field.

There is one extra line we need to do when manipulating records from scripts and that is to call form.saveAllChanges(); to save our changes. When we put that together it looks like this:

function Sample_Script() {
	var source_field_id = 'fld-eb01c448b3ba4c08a20159faca0d631c';
	var destination_field_id = 'fld-ac1628a83f4f4c82b256cf362691a007';

	var destination_field = record.getFieldValue(destination_field_id);
	
	if (!destination_field)
	{
		var source_field = record.getFieldValue(source_field_id);
		record.setFieldValue(destination_field_id, source_field);
		form.saveAllChanges();
	}
}

Sample_Script();

Now all going well if you save the script and create a new record when you set a value for the source field, the destination field will be set. If it doesn’t work immediately, try clicking the “Recalculate formulas” button at the bottom of the record next to the record size and colour pickers. Some times Tap Forms doesn’t immediately connect the script update and you need to refresh it to make it check for the script field updates.

You’ll notice that if you change source field again, the destination field won’t update even if you haven’t changed the value. If this is what you want without any thing else then you’re done and you don’t need to read any more here. However if you’d like it to be a little more advanced to keep updating the value until you change it then keep reading on.

I mentioned before that I sometimes use the script field to store information about the script state. You’ll notice that the script field isn’t in the field list on the left, so to figure out the field ID of the script field, create a new form script in your form, delete the contents and put the following code in:

form.getFields().forEach(field => console.log(`${field.name}: \t${field.getId()} (${field.fieldType})`));

It’s a single line and when you run it in the script editor, the console log will fill up with the details we care about, here’s the sample from my run:

25/5/20, 7:23:55 pm / Tristate / Field List
Source Field: 	fld-eb01c448b3ba4c08a20159faca0d631c (text)
Destination Field: 	fld-ac1628a83f4f4c82b256cf362691a007 (text)
Sample Script: 	fld-f61256199b794f02b3e8dbb8620ee87a (script)

You’ll note the ID and names will match what we used earlier. I’ll make a few changes to the script to check if the previous value matches and to save the value we set for next time. Just like before our first step is to setup a variable for the field ID. Tap Forms won’t do this for us this time so we have to do it ourselves:

var sample_script_field_id = 'fld-f61256199b794f02b3e8dbb8620ee87a';

That’s relatively easy, we’ll also get the value of the field as well:

var sample_script_field = record.getFieldValue(sample_script_field_id);

Very similar to the code we’ve seen already. Our next step is to integrate this together and we’re going to need to change the if condition. Right now it checks to see if the destination field is empty (falsey) and set it to a value. Now we want it keep that check but add another check for if the script field had a value and if it matches, which looks like this:

if (sample_script_field == destination_field)

Now we can rewrite our if statement to handle these two conditions: if the destination field is empty or if the destination field equals the sample script field:

if (!destination_field || sample_script_field == destination_field)

Let’s plug this in together:

function Sample_Script() {
	var source_field_id = 'fld-eb01c448b3ba4c08a20159faca0d631c';
	var destination_field_id = 'fld-ac1628a83f4f4c82b256cf362691a007';
	var sample_script_field_id = 'fld-f61256199b794f02b3e8dbb8620ee87a';

	var destination_field = record.getFieldValue(destination_field_id);
	var sample_script_field = record.getFieldValue(sample_script_field_id);
	
	if (!destination_field || sample_script_field == destination_field)
	{
		var source_field = record.getFieldValue(source_field_id);
		record.setFieldValue(destination_field_id, source_field);
		form.saveAllChanges();
	}
}

Sample_Script();

Update the script and save it then give it a go. You’ll notice it isn’t working properly, what gives? Well we need to do one more piece, we need to return the new value when we set it for the script field. If you remember the template had a return line in it so we need to do that here as well. When we set the field value, we should return the value that we’re setting. Then Tap Forms will store that in our script field for us, let’s update the script to add that:

function Sample_Script() {
	var source_field_id = 'fld-eb01c448b3ba4c08a20159faca0d631c';
	var destination_field_id = 'fld-ac1628a83f4f4c82b256cf362691a007';
	var sample_script_field_id = 'fld-f61256199b794f02b3e8dbb8620ee87a';

	var destination_field = record.getFieldValue(destination_field_id);
	var sample_script_field = record.getFieldValue(sample_script_field_id);
	
	if (!destination_field || sample_script_field == destination_field)
	{
		var source_field = record.getFieldValue(source_field_id);
		record.setFieldValue(destination_field_id, source_field);
		form.saveAllChanges();
		return source_field;
	}
}

Sample_Script();

This will return the value that we’re trying to set. If you save the script field and then create a new record you should notice that it works correctly. You’ll also see that the script field itself also contains the same value too. Now if you go to an existing record though, the script field doesn’t have a value set yet and won’t automatically update the field value. We could fix this in code however this is a bit of an edge case. To reset those records, you just need to delete the destination value and then hit enter. This will trigger the script to run and reset the value of the field to the source field then update the script field.

For you, the next step would be to code the custom logic you want to change the destination field to based on the source field but that’s obviously something for you to do. Hopefully this helps!

[Mike Mullin]

Hi Brendan & Sam,

Thanks for the info.

(and thanks Sam for giving me a jump-start ;-)

I’m looking forward to figure this out.

Best,

Mike

[Mike Mullin]

Hi Sam,

Your tutorial really saved my day. Actually it saved the rest of the week ;-)

I had it up and running within a couple minutes.

Thanks.

Best,

Mike

[Sam Moffatt]

Good to hear it worked out for you. One thing I forgot to mention is that once you have the script field working, you can set the field to be hidden so it doesn’t show up any more in the default layout. The Javascript integration gives you the ability to do some powerful stuff with Tap Forms though obviously with a slightly higher bar than a simple calculation field.

Just curious what made you make the leap from Ninox over to TF?

[Mike Mullin]

Hi Sam,

I switched from Ninox to Tap Forms because of the looks of the GUI. The default layout of TF already looks way better than Ninox.

[Author]

Posts