**Source URL:** https://limited.veevavault.dev/clinical/custom-pages/getting-started/server-quickstart

# 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](/clinical/custom-pages/getting-started/client-quickstart) tutorial.

## Prerequisites

To follow this tutorial, you need:

*   [Java SDK pre-requisites](/clinical/vault-sdk/getting-started/prerequisites)
*   [A working Java SDK project](/clinical/vault-sdk/getting-started/)
*   [Complete the Client Quickstart](/clinical/custom-pages/getting-started/client-quickstart)

## Adding a Page Controller

To 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:

<Steps>
1.  Add a Java class `src/main/java/com/veeva/vault/custom/HelloWorld.java` to the root directory of your project.
    
2.  Add the following server code to construct a `JsonObject` to return the user ID:
    
    ```java
    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();
        }
    }
    ```
</Steps>

## Updating Client Code

You 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.

<Steps>
1.  From your `hello-world` directory, replace the contents of `/src/hello-world.jsx` with the following code::
    
    ```jsx
    // 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>
        );
    });
    ```
</Steps>

## Deploying Server Code

Use the [Vault Java SDK Maven plugin](https://github.com/veeva/vaultjavasdk-maven-plugin) to deploy the server code.

From the root of your project:

<Steps>
1.  Obtain a valid [API Session ID](/clinical/vault-api/getting-started/authenticating)
    
2.  Deploy the Java server code using the [Vault Java SDK Maven plugin](https://github.com/veeva/vaultjavasdk-maven-plugin):
    
    ```sh
    mvn vaultjavasdk:clean vaultjavasdk:package vaultjavasdk:deploy
    ```
</Steps>

## Deploying Client Code

You can now deploy your client code distribution to Vault using Vault API.

From your project root:

<Steps>
1.  Obtain a valid [API Session ID](/clinical/vault-api/getting-started/authenticating)
    
2.  Build and deploy your client code distribution:
    
    <Tabs>
    <TabItem label="Windows">
    ```sh
    cd client\hello-world
    rmdir /s /q dist && node esbuild.mjs
    7z a -tzip hello-world.zip dist distribution-manifest.json
    curl -L https://%HOST%/api/v25.1/uicode/distributions ^
    -H "Authorization: $SESSION_ID" ^
    -F "file=@hello-world.zip"
    ```
    </TabItem>
    
    <TabItem label="Mac">
    ```sh
    cd client/hello-world
    rm -rf dist && node esbuild.mjs
    zip -rq hello-world.zip dist distribution-manifest.json 
    curl -L https://$HOST/api/v25.1/uicode/distributions \
            -H "Authorization: $SESSION_ID" \
            -F "file=@hello-world.zip"
    ```
    </TabItem>
    </Tabs>
</Steps>

## Updating Custom Page Configuration

Use MDL to update the `Page` configuration to use the server code you uploaded. This example uses cURL:

<Tabs>
<TabItem label="Windows">
```sh
curl -L https://%HOST%/api/mdl/execute ^
-H "Content-Type: text/plain;" ^
-H "Authorization: $SESSION_ID" ^
-d "ALTER Page hello_world__c (page_controller('Pagecontroller.com.veeva.vault.custom.HelloWorld'));"
```
</TabItem>

<TabItem label="Mac">
```sh
curl -L https://$HOST/api/mdl/execute \
        -H "Content-Type: text/plain;" \
        -H "Authorization: $SESSION_ID" \
-d 'ALTER Page hello_world__c ( 
   page_controller('\''Pagecontroller.com.veeva.vault.custom.HelloWorld'\'')
);'
```
</TabItem>
</Tabs>

## Viewing Your Custom Page

View 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

Now that you've finished the Getting Started, you can learn more about how to [configure Custom Pages](/clinical/custom-pages/guides/page-configuration/) 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](/clinical/custom-pages/overview), which is also the task we completed when [deploying client code](../client-quickstart/#deploying-your-client-code).

You can also learn more about how to use `@veeva/vault` Web SDK package when [developing client code](/clinical/custom-pages/guides/developing-client-code), or learn more about how to use Vault Java SDK's `PageController` interfaces when [developing server code](/clinical/custom-pages/guides/developing-server-code).

---

**Previous:** [Client Quickstart](/clinical/custom-pages/getting-started/client-quickstart)  
**Next:** [Guides](/clinical/custom-pages/guides)