Developing Client Code

You can use JavaScript and the @veeva/vault Web SDK package to create the client code for Custom Pages in Vault.

The Web SDK provides functions to define a Custom Page and communicate with the server code. It also provides a JavaScript client for Vault API. Learn more about retrieving and managing data with the Web SDK.

You can then bundle and deploy your client code to Vault using Vault API.

Install the Web SDK

The @veeva/vault Web SDK package is required to integrate your code into Vault. If you followed the Client Quickstart, you have already installed this package.

Use npm to install the latest version of the package:

npm install https://vault-web-sdk-releases-public.s3.us-west-2.amazonaws.com/hotfix/25.1.0/veeva-vault-25.1.0-release.1.0.5.tgz

See all available versions.
Define Your Custom Page

Custom Page client code must be an export in a module that returns the value of the definePage() function from @veeva/vault, or a function that returns a promise that resolves to the same.

The Client Quickstart examples use a default export to export the page definition and make it available in Vault.

You can also use a named export:

import { definePage } from '@veeva/vault'; export hello_world definePage(({ ... }) => { ... });

When using a named export, the export name must be provided in the page's export attribute in the distribution-manifest.json, and it must match exactly.

{ "name": "hello_world__c", "pages": [ { "name": "hello_world__c", "file": "dist/hello-world.js", "export": "hello_world" } ] }

When using a default export, you can omit the export attribute. Learn more about creating the manifest file.

Deploying Client Code

To upload your client code to Vault, create a client code distribution and deploy it using Vault API.

Bundle Your Code

Most modern JavaScript code is bundled before it is deployed. Vault Custom Pages supports bundled code but it is not required. We recommend including source maps when bundling. This makes it easier to debug your code.
Create a Distribution Package

To deploy a single client code distribution, create a ZIP file that contains your code and the distribution-manifest.json file. When creating a ZIP file, use a tool that follows the ZIP file specification.
Deploy to Vault

Deploy a single client code distribution as a ZIP file using Vault API.

curl -L https://$HOST/api/v25.1/uicode/distributions ^ -H "Authorization: $SESSION_ID" ^ -F "file=@hello-world.zip"
curl -L https://$HOST/api/v25.1/uicode/distributions \ -H "Authorization: $SESSION_ID" \ -F "file=@hello-world.zip"

Implementation Examples

You can implement Custom Pages using either vanilla JavaScript or modern frameworks like React. This section contains examples of both approaches to create a root element from the element parameter.

Vanilla JavaScript

Use vanilla JavaScript to create simple pages or minimize dependencies.

You can inject your client code into the page by appending your custom elements to the element parameter as children. The following example appends an <h2> element with the text “Hello World!”:

import { definePage } from '@veeva/vault';

export default definePage(({ element }) => {
    const header = document.createElement('h2');
    header.textContent = 'Hello World!';
    element.appendChild(header);
});

React

For more complex interfaces, React provides a powerful component-based approach. The Vault SDK seamlessly integrates with React.

When using React, create a root from the element parameter and define your code in root.render():

import React from 'react';
import { createRoot } from 'react-dom/client';
import { definePage } from '@veeva/vault';

export default definePage(({ element }) => {
    const root = createRoot(element);
    root.render(<h2>Hello World!</h2>);
});