# Lightning Pages

## **Overview**

Adding a Valorx Grid to a Salesforce Lightning Page allows you to view and interact with your data directly within Salesforce.\
You can place a grid on an **App Page**, **Home Page**, **Record Page**, or inside a **Tab** or **Subtab** on a Lightning Page.

## About Valorx Grids

### Valorx Grid

Users can publish Valorx Grids across different Salesforce pages using the Lightning App Builder. This makes the grids easily accessible and interactive for other users within Salesforce.

A **Valorx Grid** displays data from a selected object, independent of the record being viewed. Use this option when you want to show grids that are not tied to a parent record.

<figure><img src="/files/PthECd8CuccwlzPNorQS" alt=""><figcaption><p>Valorx Grid in App Page</p></figcaption></figure>

### Valorx Related Grid

A **Valorx Related Grid** is designed for use on **Record Pages**. It displays data that is directly related to the current record through a lookup relationship.

For example, on an **Account Record Page**, you can add a Related Grid of **Opportunities**. The grid will automatically filter to show only the Opportunities linked to that Account, using the record’s ID and the lookup relationship (e.g., AccountId).

<figure><img src="/files/cITDGgyoastyUOzmop6D" alt=""><figcaption><p>Valorx Related Grid in Account Record Page</p></figcaption></figure>

***

## Adding Valorx Grid/Related Grid

You can add Valorx Grid to **App Pages**, **Home Pages**, and **Record Pages** using Lightning App Builder.  Below show the step by step how to add Valorx Grid to the Lightning Page.

{% stepper %}
{% step %}
**Open Lightning App Builder and Create a Page**

On the **Create a New Lightning Page** screen:

* **App Page** → select **App Page**, then click **Next**.
* **Home Page** → select **Home Page**, then click **Next**.
* **Record Page** → select **Record Page**, then click **Next**.

Enter a label for the page.

* For Record Pages, also select the object you want to use.

Choose the Page Template.

* **Tips:** Choose the **One Region** template (recommended for the largest canvas).

Then, click **Done**.

<figure><img src="/files/ZAaWPEOPTEGuRzzukBPm" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Add and Configure Valorx Grid**

In the **Components** panel, scroll down to the **Custom – Managed** section. Drag and drop the correct component:

* **App Page** → *Valorx Grid*
* **Home Page** → *Valorx Grid*
* **Record Page** → *Valorx Grid and Valorx Related Grid*

Once you add a **Valorx Grid** or **Valorx Related Grid**, use the right-hand panel to configure the settings.

**Common Settings (Available in Both Components)**

* **Grid** → Select the grid you want to display from the dropdown.
* **Allow Changing Grids** → Enable this option to let users switch to a different grid within the same object.
* **Height (px)** → Define the display height of the grid.

<figure><img src="/files/4CA99azPT4rAgFbNAstk" alt=""><figcaption><p>Add Valorx Grid</p></figcaption></figure>

#### Additional Settings (Valorx Related Grid Only)

* **Relationship Name** → Defines the lookup field that links the related object to the parent record.
  * Example: To show Opportunities related to an Account, enter the API name of the lookup field on Opportunity that connects it to Account (usually `AccountId`).
* **RecordId (Optional)** → Specify a record ID if you want to predefine which record the grid should display.

<figure><img src="/files/P6WSj0VQupLnACbsU2HN" alt=""><figcaption><p>Add Valorx Related Grid</p></figcaption></figure>
{% endstep %}

{% step %}
**Save and Activate**

1. Click **Save**.
2. When prompted, click **Activate**.
3. In the activation window, choose how to assign the page:
   * **Org Default** → Replace the default page for all users.
   * **App Default** → Replace the default page for selected apps.
   * **App and Profile** → Assign the page to specific apps and profiles.

**Your page is now ready for your Lightning Experience users!**

<figure><img src="/files/4JmLowE29opoaYFa4hmQ" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**Integrate A Page with A Grid into Any App** *(For App Page Only)*

After activating your App Page, you can make it available in a Salesforce app:

1. Click **Activation**.
2. In the **Activation: Grid Page** popup, go to the **Lightning Experience** tab.
3. Select the target app (for example, *Sales*).
4. Click **Add Page to App**.
5. Click **Save** to confirm.&#x20;

The App Page you created (with the Valorx Grid) will now be **added to the selected Salesforce app** (e.g., Sales app).

<figure><img src="/files/ThYTryc5Z31W4r7TOvRt" alt=""><figcaption><p>Add the App page to the Salesforce app</p></figcaption></figure>
{% endstep %}
{% endstepper %}

### Preview in Salesforce Pages

Once you’ve published your grid, here’s how it will look depending on where you’ve placed it:

* **App Page** – The grid appears as a standalone workspace, letting users interact with data directly.<br>

  <figure><img src="/files/INdAVP3XfymBB2y7CGZ8" alt=""><figcaption><p>Valorx Grid in App Page</p></figcaption></figure>

* **Home Page** – The grid shows up alongside other dashboard components, giving quick access to key data.

  <figure><img src="/files/BGbxGwP2NRvGhWOOO44W" alt=""><figcaption><p>Valorx Grid in Home Page</p></figcaption></figure>

* **Record Page** – The grid displays data related to the record you’re viewing (e.g., Opportunities on an Account).

  <figure><img src="/files/XwholGXxh5tRG6UNpjS5" alt=""><figcaption><p>Valorx Grid in Record Page</p></figcaption></figure>

***

## Adding to Tabs or Subtabs

Valorx Grids can be embedded within tabs or subtabs on **Lightning Page** to enhance data accessibility. Follow the steps below to add and configure Valorx Grids inside custom tabs.

{% stepper %}
{% step %}
&#x20;**Add a Tab to the Lightning Page**

* Open the desired **Lightning Page** in **Lightning App Builder**.
* Drag the **Tab** component onto the page.
* Click on the newly added tab and set the **Tab Type** to **Custom**.
* Enter a meaningful name for the tab (e.g., **Hot Grid**).
* Click **Done** to save the tab settings.

<figure><img src="/files/pSdIjXjA3S1WSEcXHJwu" alt=""><figcaption><p>Add a Tab to the Lightning Page</p></figcaption></figure>
{% endstep %}

{% step %}
**Configure Valorx Grids on Tabs**

* Click on the **Hot Grid** tab and add the **Valorx Grid** component.
* Select and configure the grid for **Hot Grid:**
  * **Valorx Grid:** Select the Valorx Grid you created in the Wave Dashboard.
  * **Allow changing grids?:** Deselecting this option disables the Grid Selection dropdown.
  * **Height (px):** Enter the desired height for the grid in pixels.
* Click on the **Warm Grid** tab and configure the **Warm Grid**.

<figure><img src="/files/Pi271Xl3lYgf2JArgq1W" alt=""><figcaption><p>Configure Valorx Grid on Tabs</p></figcaption></figure>
{% endstep %}

{% step %}
**Save and Activate the Page**

* Click **Save** in the top-right corner.&#x20;
* Click **Activate** to publish the changes if the Lightning Page is not yet active.

<figure><img src="/files/uCqjf0cSJ3mzxj8uO05H" alt=""><figcaption><p>Save and activate the page</p></figcaption></figure>
{% endstep %}

{% step %}
**Access the Lightning Page**

Your Valorx Grids are now successfully embedded within the Lightning Page tabs! 🚀

<figure><img src="/files/3HUwcUmKz9TgQCISLd4x" alt=""><figcaption><p>Access the Lightning Page</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## Quick Method: Edit an Existing Page

You can also add Valorx Grid directly to an existing page without creating a new one:

1. From **Setup c**lick **Edit Page**. This will open the page in Lightning App Builder.
2. In the **Components** panel, scroll to **Custom – Managed** and drag the **Valorx Grid** (or *Valorx Related Grid* depending on page type) into the layout.
3. Select your desired **grid configuration** from the dropdown.
4. Adjust settings such as **Relation Name** and **Height**, if applicable.
5. Click **Save**, then **Activate** the page to apply changes.

💡 *This method is quicker when you just want to add or update a grid on an existing Lightning Page.*

<figure><img src="/files/aqRFPyWqxEaeHDGVo6vS" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.valorx.com/valorx-wave/surf-the-wave/publish-the-grid/lightning-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.