Server Quickstart
Add server code to your Custom Page using Vault Java SDK to retrieve data and pass it to the client code when the Custom Page loads.
This guide builds on the client side code from the Client Quickstart tutorial.
Prerequisites
Section link for PrerequisitesTo follow this tutorial, you need:
Adding a Page Controller
Section link for Adding a Page ControllerTo retrieve and manage Vault data on the server, implement a PageController in your server code.
The following example defines the onLoad() method. When a user loads a Custom Page in Vault, this custom method creates and returns the currently authenticated user’s ID with name userId.
From the root of your project:
-
Add a Java class
src/main/java/com/veeva/vault/custom/HelloWorld.javato the root directory of your project. -
Add the following server code to construct a
JsonObjectto return the user ID:package com.veeva.vault.custom; import com.veeva.vault.sdk.api.core.RequestContext; import com.veeva.vault.sdk.api.core.ServiceLocator; import com.veeva.vault.sdk.api.executeas.ExecuteAs; import com.veeva.vault.sdk.api.executeas.ExecuteAsUser; import com.veeva.vault.sdk.api.json.JsonService; import com.veeva.vault.sdk.api.page.PageController; import com.veeva.vault.sdk.api.page.PageControllerInfo; import com.veeva.vault.sdk.api.page.PageLoadContext; import com.veeva.vault.sdk.api.page.PageLoadResponse; @ExecuteAs(ExecuteAsUser.REQUEST_OWNER) @PageControllerInfo() public class HelloWorld implements PageController { @Override public PageLoadResponse onLoad(PageLoadContext context) { JsonService jsonService = ServiceLocator.locate(JsonService.class); return context.newLoadResponseBuilder() .withData(jsonService.newJsonObjectBuilder() .setValue("userId", RequestContext.get().getInitiatingUserId()) .build()) .build(); } }
Updating Client Code
Section link for Updating Client CodeYou can now update your client code to retrieve the userId value from the PageController you implemented in the previous step. The following example retrieves the data parameter containing the currently authenticated user’s ID and displays it on the Custom Page.
-
From your
hello-worlddirectory, replace the contents of/src/hello-world.jsxwith the following code::// src/hello-world.jsx import React from 'react'; import { createRoot } from 'react-dom/client'; import { definePage } from '@veeva/vault'; export default definePage(({ data = {}, element }) => { const root = createRoot(element); root.render( <div>Hello user {data.userId}!</div> ); });
Deploying Server Code
Section link for Deploying Server CodeUse the Vault Java SDK Maven plugin
From the root of your project:
-
Obtain a valid API Session ID
-
Deploy the Java server code using the Vault Java SDK Maven plugin
: mvn vaultjavasdk:clean vaultjavasdk:package vaultjavasdk:deploy
Deploying Client Code
Section link for Deploying Client CodeYou can now deploy your client code distribution to Vault using Vault API.
From your project root:
-
Obtain a valid API Session ID
-
Build and deploy your client code distribution:
Updating Custom Page Configuration
Section link for Updating Custom Page ConfigurationUse MDL to update the Page configuration to use the server code you uploaded. This example uses cURL:
Viewing Your Custom Page
Section link for Viewing Your Custom PageView your Page at: https://$HOST/ui/#custom/page/hello-world.
You should see "Hello user 1234!" but with your Vault user ID.
Congratulations! You successfully created a Custom Page with server code using Vault Java SDK!
Continued Learning
Section link for Continued LearningNow that you've finished the Getting Started, you can learn more about how to configure Custom Pages in Vault to control access to which Vault users can view your Custom Page. You may remember this from step three in the Custom Pages overview, which is also the task we completed when deploying client code.
You can also learn more about how to use @veeva/vault Web SDK package when developing client code, or learn more about how to use Vault Java SDK's PageController interfaces when developing server code.