BTerrell Group Blog

How to use jQuery to change labels on a standard Intacct page

Posted by Joe Zhou on Fri, Jan 16, 2015

Intacct Platform Services provides the ability to add client side jQuery code to both standard object pages and custom Platform pages. This allows you to extend Intacct’s world-class ERP functions by leveraging the popular jQuery library to its full extent. Here is a very simple explanation of how easy it is to overwrite a label from the Vendor page with a few lines of code.

Let’s say I want to store the second phone number for my vendors in Intacct and I want to use the Pager field to store it since few people carry a pager. 

 1-16image1

 

If you are a fan of Firefox like me, you probably already know the shortcut Ctrl+Shift+C to open Inspector. If you are not familiar with these shortcuts, you can click the hamburger icon on the toolbar and go to Developer->Inspector.

1-16image2

Inspect the label that says Pager and double-click on the label. In the underneath Inspector view, it will display the HTML DOM of the label. As you can see from the screenshot below, the identifier of the Pager label is “label_obj__DISPLAYCONTACT-_obj__PAGER” and the content of the label is enclosed in a child Span tag within a label tag. Make a note of the ID that will be referenced in the code for the next a few steps.

1-16image3

Click More Action button at the far top right corner. Then click Edit this page.

1-16image4

Drag and drop a new <Script Component> to the Page Editor.

 1-16image5

Edit the <Script Component> and add the following code snippet.

<script type='text/javascrpt'>
jq = jQuery.noConflict();
jq(document).ready(function () {
    jq("#label_obj__DISPLAYCONTACT-_obj__PAGER").find("span").html("Second phone");
});
</script>

As you see from the code snippet above, it basically uses a jQuery selector to locate the label in the DOM and replaces its content in one line of code.

Click Save and save the page editor again. Once the Vendor Information page gets reloaded, you will see that the Pager label now says Second phone.

1-16image6

Tags: Intacct Customization