In NetSuite, customizing the appearance of workflow buttons can enhance the user experience by drawing attention to important actions. This guide will walk you through changing the color of a workflow button using a User Event Script that injects custom JavaScript into the form via an inline HTML field.
Step-by-Step Guide
1. Create a User Event Script
First, we need to create a User Event Script that will inject our custom JavaScript into the form. This script will run before the record is loaded in view or edit mode.
User Event Script.
/**
* @NApiVersion 2.x
* @NScriptType UserEventScript
*/
define([‘N/ui/serverWidget’], function(serverWidget) {
function beforeLoad(context) {
if (context.type === context.UserEventType.VIEW || context.type === context.UserEventType.EDIT) {
var form = context.form;
// Add an Inline HTML field to the form
var inlineHtmlField = form.addField({
id: ‘custpage_inlinehtml’,
type: serverWidget.FieldType.INLINEHTML,
label: ‘Inline HTML’
});
// Inject JavaScript to change button color
var script = `
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
var button = document.getElementById(‘custpageworkflow2889’);
if (button) {
button.style.setProperty(‘background-color’, ‘red’, ‘important’);
button.style.setProperty(‘color’, ‘white’, ‘important’); // Optional: change text color
}
});
</script>
`;
// Set the default value of the Inline HTML field to our script
inlineHtmlField.defaultValue = script;
}
}
return {
beforeLoad: beforeLoad
};
});
2. Deploy the User Event Script
- Upload the User Event Script:
- Navigate to Customization > Scripting > Scripts > New.
- Select User Event Script and upload the user event script file.
- Save the script and note the script ID.
- Deploy the Script:
- Navigate to Customization > Scripting > Script Deployments > New.
- Select the User Event Script and set the deployment settings (e.g., the record type, execution context such as view or edit mode).
- Save the deployment.
Explanation
- Adding Inline HTML Field:
- The script adds an inline HTML field to the form. This field will contain the custom JavaScript to change the button color.
- Injecting JavaScript:
- The JavaScript listens for the DOMContentLoaded event, ensuring it runs after the page has fully loaded.
- It selects the button by its ID (
custpageworkflow2889) and changes its background color to red and its text color to white.
Complete Solution
By following these steps, you can successfully change the color of a workflow button in NetSuite using a User Event Script and custom JavaScript injected via an inline HTML field. This method ensures the button color is changed dynamically whenever the form is viewed or edited, enhancing the visual appeal and user experience of your NetSuite application.
Conclusion
Customizing button colors in NetSuite workflows can significantly improve usability by making key actions more prominent. By deploying a User Event Script that adds an inline HTML field with JavaScript, you can achieve this customization efficiently. This guide provides a comprehensive approach to implementing this solution, ensuring that your NetSuite application is both functional and visually engaging.