# Salesforce Components

You can embed Valorx Grid into Salesforce custom components and Flows to let users interact with live Salesforce data in context. Below are the steps for using it in **Aura Components** and **Flows**.

***

## Use Valorx Grid in an Aura Component

The Valorx Grid can be embedded within an **Aura Component** to enhance data visibility and interaction. Before proceeding, ensure you are familiar with **Lightning Components (Aura Components)** and have already created **Valorx Grids**.

This guide demonstrates how to configure both **Valorx Grid** and **Valorx Related Grid** within a Lightning Component.

{% stepper %}
{% step %}
**Create the Lightning Component**

1. **Open Developer Console**
   * Click **Setup** and open the **Developer Console**.
2. **Create a New Lightning Component**
   * Click **File** (top-left corner), hover over **New**, and select **Lightning Component**.
   * Enter a component name, e.g., **MyGridComponent**.
   * Select the component availability based on your requirements.
   * Click **Submit**.
3. **Define Parameters (For Related Grid)**

   * If using a **Valorx Related Grid**, define the **Parent Record ID** as a parameter.
   * Add the following code snippet to the component:

   <pre class="language-html" data-overflow="wrap" data-full-width="false"><code class="lang-html">&#x3C;aura:component 
   implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
       &#x3C;aura:attribute name="recordId" type="String" />
   &#x3C;/aura:component>
   </code></pre>

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FJc4L653AYkevLX9XHUNX%2FCreate%20the%20Lightning%20Component%20P1.gif?alt=media&#x26;token=343311a3-af04-46ba-b901-8a98ac20d550" alt=""><figcaption><p>Create the Lightning Component</p></figcaption></figure>
{% endstep %}

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

1. **Embed the Valorx Grid and Related Grid**
   1. Use **lightning:tabset** to display both grids. \
      \&#xNAN;***Note**: Below is the sample code*

{% code overflow="wrap" fullWidth="false" %}

```html
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <aura:attribute name="recordId" type="String" /> 
    <div style="background:white;">
        <lightning:tabset selectedTabId="one"> 
            <lightning:tab label="Enter_the_Tab_Name" id="one"> 
                <valorxwave:ValorxRapidGrid  
                    gridId="Account::Insert_The_Id" 
                    height="600" 
                    canChangeGrid ="true"/> 
            </lightning:tab> 
            <lightning:tab label="Enter_the_Tab_Name" id="two"> 
                <valorxwave:ValorxRelatedRapidGrid  
                    gridId="Contact::Insert_The_Id"  
                    recordId="{!v.recordId}"  
                    relationshipName='Insert_The_Relationship_Name' 
                    height="600"  
                    canChangeGrid ="true"/> 
            </lightning:tab> 
        </lightning:tabset> 
    </div>
</aura:component>
```

{% endcode %}

2. **Configure Component Parameters**
   1. **Grid ID** – Enter the Grid ID (format: **ObjectName::GridId**). [*Learn how to find it*](#get-grid-id)*.*
   2. **height** – Set the height of the grid.
   3. **canChangeGrid** – Enable or disable switching between grids within the same object.
   4. **relationshipName** – Define the Lookup Relation Name.
   5. **recordId** – Parent Record ID.

🔹 **After configuring the parameters, ensure to save the component to apply the changes.**

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FL4YPtiGB5l5Tnv56IiZ5%2FCreate%20the%20Lightning%20Component%20P2.gif?alt=media&#x26;token=fcf3a7ba-62d1-454e-a13e-af1c7b5b1871" alt=""><figcaption><p>Add Valorx Grid and Related Grid</p></figcaption></figure>
{% endstep %}

{% step %}
**Deploy the Component on a Record Page**

* Navigate to the **Account Record Page** and click **Edit Page**.
* Locate **MyGridComponent** in the **Custom Components** section.
* Drag and drop it onto the desired section of the record page.
* Click **Save** and return to the record page.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FdOpYAUrwy5M8hDLqFeS6%2FCreate%20the%20Lightning%20Component%20P3.gif?alt=media&#x26;token=242b84ba-0f10-4e86-a441-656190802666" alt=""><figcaption><p>Deploy the Component on a Record Page</p></figcaption></figure>
{% endstep %}
{% endstepper %}

Now you have successfully embed a Valorx Grid in Aura component.

***

## Use Valorx Grid in a Screen Flow

***This is only available after v10.***

Integrating **Valorx Grids** and **Valorx Related Grid** into a **Salesforce Screen Flow** enhances workflow automation. Follow these steps to embed Valorx Grids in a **Screen Flow**.

{% stepper %}
{% step %}
**Create a New Flow**

* Click **Setup** and search for **Flow** in the **Quick Find** box.
* Click **New Flow** → Select **Start from Scratch** → Select **Screen Flow** → Click **Create**.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2Fadk0tPsT8uJIEQFLnuM6%2FCreate%20a%20Flow.gif?alt=media&#x26;token=3995ec8f-d7ae-4e4f-b9d9-fe4690bb04fd" alt=""><figcaption><p>Create a new Flow</p></figcaption></figure>
{% endstep %}

{% step %}
**Add a Screen Element**

* Drag and drop a **Screen** element from the **Element** panel onto the flow canvas, or click the **+** button and select **Screen**.
* Provide a **Screen Component Label** (e.g., "Valorx Grid").

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FvqZPT7OqcfWhL5xBUpS2%2FAdd%20A%20Screen%20Flow.gif?alt=media&#x26;token=6213b136-3f5d-4226-a413-ac84fbff323a" alt=""><figcaption><p>Add a Screen Flow</p></figcaption></figure>
{% endstep %}

{% step %}
**Embed Valorx Grid in the Screen Flow**

* Scroll to **Components** on the left panel.
* Locate the **Custom** section and drag the **Valorx Grid component** to the screen.
* Configure the following properties:
  * **API Name** – Provide the component's API name.
  * **Grid ID** – Enter the Grid ID (format: **ObjectName::GridId**). [*Learn how to find it*](#get-grid-id)*.*
  * **Height** – Adjust the grid height.
  * **Allow Changing Grids** – Enable/disable users' ability to switch grids within the same object.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FzIlBUNN2iU4iWMhH3NQ4%2FAdd%20Valorx%20Grid.gif?alt=media&#x26;token=5afe9d42-af14-4b74-a5d4-5ff7d2294b92" alt=""><figcaption><p>Embed Valorx Grid in the Screen Flow</p></figcaption></figure>
{% endstep %}

{% step %}
**Embed Valorx Related Grid**

* Follow the same steps to add the **Related Grid component** below the Valorx Grid.
* Configure the following properties:
  * **Grid ID** – Enter the Grid ID. [*Learn how to find it*](#get-grid-id)*.*
  * **Height** – Adjust the height.
  * **Allow Changing Grids** – Enable/disable users' ability to switch grids within the same object.
  * **Relationship Name** – Specify the **Lookup Relation Name**.
  * **Record ID** – Enter the **Parent Record ID**.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2F7y2thveXpSaVeYmMuAJ4%2FAdd%20Valorx%20Related%20Grid.gif?alt=media&#x26;token=f71b12a0-4ffb-4bc4-9872-293c7196fdf8" alt=""><figcaption><p>Embed Valorx Related Grid in Screen Flow</p></figcaption></figure>
{% endstep %}

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

* Click **Done** → Click **Save** and provide a **Flow Label**.
* Click **Activate** to enable the Flow.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FIkpdAoSsNVIQt7fgPNQH%2FSave%20and%20Activate%20the%20flow.gif?alt=media&#x26;token=db5494a4-3403-4906-86b3-c6c9e853f2de" alt=""><figcaption><p>Save and Activate the Flow</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

## Working with Grid Data and Actions

### **Get Grid ID**

When using the Valorx Grid across different interfaces, you need the **Grid ID** and **Object Name** for configuration in **Flow** and **Lightning Components**. Follow these steps to locate the Grid ID:

1. Open **Wave Dashboard**.
2. Hover over the grid you want to retrieve the **Grid ID** from.
3. Click **Surf the Wave**.
4. In the **URL**, locate the **Grid ID** and **Object Name**.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2FTxb24eDzlvJKiceBSqi2%2FGet%20Grid%20Id.gif?alt=media&#x26;token=ce2a1651-ef39-4365-9798-efa0320f782b" alt=""><figcaption><p>Get the Grid ID</p></figcaption></figure>

***

### **Add an Input Variable in Flow**

To add an **Input Variable** in Flow:

1. Click **+ New Resource**.
2. Set **Resource Type** to **Variable**.
3. Enter **API Name** as `recordId`.
4. Choose **Data Type** as **Text**.
5. Check the box for **Available for Input**.
6. Then click **Done**.

<figure><img src="https://2237973035-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F65f4C4H8V5e0YV342mwp%2Fuploads%2Fg5lIBL6nN4escBReGDlK%2FCreate%20RecordId.gif?alt=media&#x26;token=8088a0e1-7fc2-434f-a488-940ca3272e4d" alt=""><figcaption><p>Add an Input Variable in Flow</p></figcaption></figure>