CRM On Demand Technical Tips and Tricks: Javascript API - Introduction and Buttons

techtips.jpg

This post is part of a series of technical articles we are writing on the Javascript API. In this series, we will cover:

  1. Custom buttons.
  2. Storing your code, context, and the screen.
  3. Classes and chaining plus the titlebar.
  4. CRUD. Create, Read, Update and Delete records.

Modern CRM user interfaces, like Oracle CRM On Demand, are built on standards-based web technologies of HTML, CSS, Javascript, and JSON. This article outlines how to create a custom button in CRM On Demand which will launch will launch a canonical “Hello World” program. Let’s jump right into code and make it happen!

// Wait for CRMOD to be ready (web page fully loaded) oraclecrmod.onReady(function() { // Only add custom button on Account Detail Page if(oraclecrmod.ctx.object == "Account" && oraclecrmod.ctx.isDetailPage()) { function do_hello_world() { alert('Hello World'); oraclecrmod.getButton("do_hello_world_id").disable(); } // Create the custom button on the main Account detail title bar button = oraclecrmod.createButton({ id:"do_hello_world_id", text:"Say Hello", parent:oraclecrmod.getTitleBar("AccountFormTB") }); // Assign an action to the custom button, when the button is clicked. button.on("click", do_hello_world); // get the Add button and hide it } });

The above code does the following:

  1. Waits for the Oracle CRM On Demand page to be fully loaded.
  2. Inserts a custom button.
    • Note that custom buttons can be on the main CRM On Demand User Interface, as in this example, and also on the popup create screens.
    • The button is added to the main Account title bar.
  3. Associates an action to the pressing of the custom button.
  4. When the user clicks on the custom button it then...
    • Displays a browser dialog that says “Hello World”.
    • Disables (but does not hide) the custom button.

How do you get this code into your CRM User Interface? In this example, we use a two step process that stores the file in CRM On Demand. First, load the file in CRM On Demand. Then, “insert” the file into each CRM On Demand web page.

1. Loading:

  • Create a file on your local computer called helloworld.js
  • Copy the contents of the above Javascript code into helloworld.js and save it.
  • In CRM On Demand go to Admin, Application Customization, and Client Side Extensions.
  • Click the New button and provide the following required fields:
    • File: the file you just created on your local computer
    • Name: let's call it “hello world”
    • URL Name: helloworld.js
  • Click the Save button. Your client side code is now stored on the CRM On Demand server at the following (relative) URL:
    • ../user/content/helloworld.js

2. Insertion:

  • In CRM On Demand go to Admin, Application Customization, and Custom HTML Head Tag
  • Click the Edit button.
  • Insert the following in the text area:<script type="text/javascript" src="../user/content/helloworld.js"> </script>
  • Click the Save button.

There really are no limits to what is possible with the JavaScript API and customizing button configurations. Some business applications include:

  • Limiting buttons to specific roles. For instance, the Merge button on entity detail pages could be made available only to users who have role of “Data Steward.”
  • Pulling data from another system. For instance, if you have your CRM data also in MDM, a custom button could pull extended data from MDM and display that in a Javascript window in CRM On Demand.

In our next article we’ll discuss options for storing your Javascript code as well as working with context and the screen.

Don’t forget to subscribe to our quarterly update and get valuable information on CRM Best Practices, User Adoption, CRM On Demand Tips & Techniques, and our upcoming R26 series.