So far in the sample script we have been working with the “pageInit” function. That function triggers as soon as you load a record to edit it. In this tutorial we will look at the “fieldChanged” function to explore more ways you can use client scripts.
If you need a refresher on what we’ve covered so far in this SuiteScript tutorial series, feel free to check out the previous post on setting record field values; and if you would like to review the entire series up to this point, start with the first post, SuiteScript 2.0 Basics.
Field Changed Function
The “fieldChanged” function is triggered right after a field is changed. This can be helpful if you want to do something after a certain field changes or if you want to alert the user. Let’s keep using the code we have been working with and just add to it. Here is the latest version of our code:
define(['N/record','N/search','N/ui/dialog', 'N/log'], function (record, search, dialog, log) {
/**
*@NApiVersion 2.0
*@NScriptType ClientScript
*/
function pageInit(context) {
var currentRecord = context.currentRecord;
var firstName = currentRecord.getValue({
fieldId: 'firstname'
});
log.debug({
title: 'Customer First Name',
details: firstName
});
dialog.alert({
title: 'Announcement',
message: 'You are viewing ' + firstName
});
currentRecord.setValue({
fieldId: 'comments',
value: 'Use this area for any customer comments.'
});
}
return {
pageInit: pageInit
}
});
Add the Field Changed Function to the Script
Since we are still working with the Customer record, let’s have an alert box show up whenever the Customer’s job title changes. If you are following along, then you need the type of customer to be “Individual” rather than “Company” to see the “Job Title” field.
In order to start adding this into our code, you will need to add a function for “fieldChanged” similar to the “pageInit” function. The basic function should look like this: function fieldChanged(context) { }
Then go ahead and add the “currentRecord” variable just like in the pageInit function so that we can access the fields on the record.
function fieldChanged(context) {
var currentRecord = context.currentRecord;
}
You can place the “fieldChanged” function directly after the “pageInit” function. You will also want to add the “fieldChanged” function to the “return” section of the code so that NetSuite knows that the “fieldChanged” function needs to run whenever a field is changed. Add a comma to the end of pageInit: pageInit
and then on the next line add fieldChanged: fieldChanged
. The results section should look like this:
return {
pageInit: pageInit,
fieldChanged: fieldChanged
}
At this point the entire script should look like this:
define(['N/record','N/search','N/ui/dialog', 'N/log'], function (record, search, dialog, log) {
/**
*@NApiVersion 2.0
*@NScriptType ClientScript
*/
function pageInit(context) {
var currentRecord = context.currentRecord;
var firstName = currentRecord.getValue({
fieldId: 'firstname'
});
log.debug({
title: 'Customer First Name',
details: firstName
});
dialog.alert({
title: 'Announcement',
message: 'You are viewing ' + firstName
});
currentRecord.setValue({
fieldId: 'comments',
value: 'Use this area for any customer comments.'
});
}
function fieldChanged(context) {
var currentRecord = context.currentRecord;
}
return {
pageInit: pageInit,
fieldChanged: fieldChanged
}
});
Add the Logic
Now we need to add the logic to the “fieldChanged” function so that every time the Job Title field changes, an alert shows up that says “Job Title has changed to New Job Title.”
The first thing to think about is that we only want the alert to appear when a user changes the Job Title, not just any field. We can do this with an “IF” statement. So basically we will be saying, “If the field is Job Title, then show the alert, otherwise don’t show it.” If you are not familiar with “IF” statements in Javascript, the basic structure looks like this:
if(){
}
You will put the condition in the parentheses, and whatever you put in the curly brackets is what the script will do if the condition is true. If the condition is false, then the code in the curly brackets will not run.
In order to make the condition, we want to compare the field id of the field that just got changed with the field id of the Job Title field.
- To get the field id of the current field that got changed you need to do context.fieldId
- You can find the field id of the Job Title field by looking at the Customer record in the NetSuite Record Browser. The id is ‘title.’ So if context.fieldId (the id of the field that just got changed) is ‘title’, then show the alert. Adding that condition to the “If” statement looks like this:
if(context.fieldId == 'title'){
}
Double equal signs (==
) were used to compare the values of fieldId and ‘title’.
Next, you will need to get the value of the Job Title field. You can just copy the getValue
function used earlier in the script and modify it to get the value of the Job Title field and place it in the curly brackets of the “IF” statement. You can create a variable and name it “jobTitle.” The “IF” statement should look similar to this:
if(context.fieldId == 'title'){
var jobTitle = currentRecord.getValue({
fieldId: 'title'
});
}
Then add a section that shows an alert with the new title. You can just copy the alert section from earlier in the code and modify it to show a different message. The completed “IF” statement should look similar to this:
if(context.fieldId == 'title'){
var jobTitle = currentRecord.getValue({
fieldId: 'title'
});
dialog.alert({
title: 'Job Title Change',
message: 'Job Title has changed to ' + jobTitle
});
}
This whole “IF” statement needs to go inside the curly brackets of the “fieldChanged” function and directly after the var currentRecord = context.currentRecord;
line. And this is what your complete code should look like:
define(['N/record','N/search','N/ui/dialog', 'N/log'], function (record, search, dialog, log) {
/**
*@NApiVersion 2.0
*@NScriptType ClientScript
*/
function pageInit(context) {
var currentRecord = context.currentRecord;
var firstName = currentRecord.getValue({
fieldId: 'firstname'
});
log.debug({
title: 'Customer First Name',
details: firstName
});
dialog.alert({
title: 'Announcement',
message: 'You are viewing ' + firstName
});
currentRecord.setValue({
fieldId: 'comments',
value: 'Use this area for any customer comments.'
});
}
function fieldChanged(context) {
var currentRecord = context.currentRecord;
if(context.fieldId == 'title'){
var jobTitle = currentRecord.getValue({
fieldId: 'title'
});
dialog.alert({
title: 'Job Title Change',
message: 'Job Title has changed to ' + jobTitle
});
}
}
return {
pageInit: pageInit,
fieldChanged: fieldChanged
}
});
Update the Script Record and Test
You can update the script record and test the code by following these steps:
- View the script record (don’t click on edit)
- Go to the “Scripts” tab
- Click “edit” next to the “Script File”
- Copy your new code and paste it in the window that pops up to replace the old code
- Save
Conclusion
Now you can navigate to a customer record and click on edit. When you change the Job Title field, you should see the new alert box appear with the message about the Job Title change.
Great work so far on your SuiteScript! To continue the series, you can access the next blog here. And don’t forget to subscribe to our mailing list so you can receive our latest developing blogs directly in your inbox each week!
I have used a field changed script that seems to trigger on every field even though I have defined the context.field id as part of the function. why would that be the case?
it would be expected to fire on any field that changed. The field id in the context is what you would read. You would use an if or a case statement to determine if it would in fact do anything or not and you would decide that based on if the context.field id = you desired field id. Otherwise you would just return from the function without doing anything. That is what the example above is doing as well. It only really does anything if the field id that is firing the function is the one you want.