Vault CRM

X-Pages

Getting Started

X-Pages allows customers to create custom content using the Veeva JavaScript library and HTML. This content can be directly delivered to users in the field via CRM, and display contextual and historical information to assist users in their day-to-day activities. Developers can assist in creating this content leveraging real-time information from Vault CRM. The content can be used to approve orders, review overall sales data, and view account plans.

Your company administrator must first set up X-Pages in their Vault CRM Vault instance. See Configuring X-Pages for more information.

Creating Content

To start, you need to create an index.html file. This file contains the code your company administrator uploads into their Vault CRM Vault instance to generate your X-Pages content.

This is a sample of the code:

Copy
index.html
<!DOCTYPE HTML>
<html>
    <head>
        <title>Getting Started with X-Pages</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    </head>

    <body>
        <!-- Your printToScreen function -->
        <h2 id="test"> </h2>

        <p> Hello, world! This is my X-Pages content.</p>
    </body>
  
    <!-- your  javascript file goes here -->
    <script language="JavaScript" type="text/javascript" src="q.js"></script>
    <script language="JavaScript" type="text/javascript" src="x-pages-library.js"></script>
    <script language="JavaScript" type="text/javascript" src="main.js"></script> 
</html>            

Querying for Vault CRM Data

In order to query for CRM data, you need to use the following JavaScript libraries:

  1. x-pages-library.js

    Use this library to call information from your Vault CRM Vault instance. The X-Pages library can be found on the JS Libraries tab.

  2. Q.js

    Use this library to work with promises as returns when using the X-Pages library methods. The Q library can be found on Github.

  3. main.js

    This is a required custom file. It controls how content displays. Users can link to it in a controller file. For our example, we've linked to our custom file, named main.js. Alternatively, you can put your main.js file inline.

This is an example of how to reference the JavaScript libraries:

Copy
Reference JavaScript libraries
<script language="JavaScript" type="text/javascript" src="q.js"></script>
<script language="JavaScript" type="text/javascript" src="x-pages-library.js"></script>
<script language="JavaScript" type="text/javascript" src="main.js"></script>             

X-Pages Methods

There are several X-Pages methods you can use to create content. See X-Pages methods for more information.

For this example, we are using the queryRecord method.

The queryRecord method can be used to look for the API fields of an account, for example, Phone, Name, and Fax.

Insert the following snippet in the main.js file:

Copy
main.js
function start() {
    queryCRMData();
}
    
function queryCRMData() {
    var queryConfig = {
        object: "Account",
        fields: ["Name", "Phone", "sFax"],
        where: "",
        sort: [],
        limit: "10"
    };
    
    ds.queryRecord(queryConfig).then(
        function (resp) {
            console.log(resp);
            printToScreen(resp);
        }, function(err) {
            console.log(err);
        }
    );
}
  
function printToScreen(jsonObj) {
    var test = document.getElementById("test");
    test.innerHTML = JSON.stringify(jsonObj);
}
  
document.addEventListener("DOMContentLoaded", function(event) {
    start();
});            

Displaying the Results

In the index.html file, you can use the printToScreen JavaScript function to output the appropriate information stored within the resp tag. You stored the information into the resp tag through the queryRecord method in the main.js file.

The index.html uses this function to display the results to your X-Pages content.

This is a sample of the following code:

Copy
index.html
<h2 id="test"> </h2>

Packaging the X-Pages Content

  1. Compress the X-Pages content you created. This includes the index.html, main.js, q.js and x-pages-library.js files.
  2. Ensure that you compress the files and not the directory containing your files. Folders should not be inside the zip file.
  3. Send the compressed .zip file to your company administrator.

General Use

All Where Clauses must use single quotes.

Copy
Where Clause
where: 'scale = 'week_vod' AND 'dataType' ='NRx' AND AccountId in {'id1', 'id2', 'id3'}'

Next Steps

You can further enhance reports using a variety of Javascript libraries, including Angular, React, and Vue.

See the Developer Release Notes for the most up-to-date information on X-Pages and other Vault CRM APIs.