**Source URL:** https://limited.veevavault.dev/commercial/custom-pages/vault-web-sdk/26.1.0/interfaces/pageparameters

# PageParameters

Represents the parameters used when the `definePage` load callback runs.

## Example

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

export default definePage(({ data, element, pageContext: { reload }, sendEvent }) => {
     const root = createRoot(element);

     const onFetchDetailsClick = async () => {
        const details = await sendEvent('fetchDetails', { userName: data.userName });
        console.log(details);
    };

    root.render(
        <div>
            <h1>Hello {data.userName}</h1>
            <button onClick={onFetchDetailsClick}>Click to fetch details by dispatching an event</button>
            <button onClick={() => reload()}>Click to reload the page</button>
        </div>
    );
});
```

## Type Parameters

### Data

`Data`

## Properties

### data

> **data**: `Data`

Data passed in the `PageLoadResponse` from Vault Java SDK `PageController` code.

---

### element

> **element**: `HTMLElement`

Root HTML element to append to when writing client code.

---

### pageContext

> **pageContext**: [`PageContext`](/commercial/custom-pages/vault-web-sdk/26.1.0/interfaces/pagecontext)

Page context providing the `reload()` function.

---

### sendEvent

> **sendEvent**: [`SendEvent`](/commercial/custom-pages/vault-web-sdk/26.1.0/type-aliases/sendevent)

Function to send an event to Vault Java SDK's `PageController#onEvent` method for handling.

---

**Previous:** [PageContext](/commercial/custom-pages/vault-web-sdk/26.1.0/interfaces/pagecontext)  
**Next:** [VaultApiClient](/commercial/custom-pages/vault-web-sdk/26.1.0/interfaces/vaultapiclient)