> For the complete documentation index, see [llms.txt](https://docs.valorx.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.valorx.com/valorx-wave/surf-the-wave/publish-the-grid/lightning-pages.md).

# 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>