Valorx
HomeFusionWave
Wave
Wave
  • Getting Started
    • 🌊What is Valorx Wave
      • Pick The Right Wave
    • 📔Get Started with Valorx Wave
      • Wave Browser Extension Installation & Setup
      • Wave Embedded Installation & Setup
  • Wave Workspace
    • Overview
    • 🏡Home
    • 📃Grids
    • 🟣Wave Floaty
    • Wave Dashboard
  • Wave Experience
    • 📚Type of Grid in Wave
    • 📝Create A New Grid
      • 🌈Manage Grid in Wave Browser Extension
      • 🪄Grid Wizard in Salesforce
  • WAVE DATA MANAGEMENT
    • 📊Managing Grid Data
      • Filter
      • Condition
      • Group
      • Column Group
      • Mass Modifier
    • ✏️Data Control & Customization
    • 🔍Data Interaction
    • 🔢Data Insights & Summary
    • ⌛Managing Records in Wave
  • Surf The Wave
    • 🏄‍♂️Surf The Wave in Salesforce
      • Using Wave Grid in Components and Flows
      • Row Action
      • Known Limitation
      • Wave Embedded Grid Migration
  • Matrix
    • 🔳Matrix Screen
  • 🎨Matrix Designer
  • ▶️Matrix Runtime
  • ⚡Matrix Launcher
  • REPORTS
    • 📈Reports Overview
  • IMPORT
    • 🚀Import Overview
  • SETTINGS
    • 🛠️Settings Screen
  • Release Notes
    • 📢Wave Browser Extension
      • March 25 Release (v40)
      • February 25 Release (v39)
      • January 25 Release (v38)
      • December 24 Release (v37)
      • October 24 Release (v36) - Hotfix
      • September 24 Release (v35) - Hotfix
      • August 24 Release (v34)
      • July 24 Release (v32)
      • June 24 Release (v31) - Hotfix
      • May 24 Release (v30)
      • April 24 Release (v29)
      • Archived Release Notes
        • March 24 Release (v28)
        • Feb 24 Release (v27)
        • Jan 24 Release (v26)
        • Dec 23 Release (v25)
        • Nov 23 Release (v24)
        • Oct 23 Release (v23)
        • Sept 23 Release (v21)
        • Aug 23 Release (v20)
        • Jul 23 Release (v18)
        • Jun 23 Release (v17)
        • May 23 Release (v15)
        • Apr 23 Release (v12)-Hotfix
        • Apr 23 Release (v11)
        • Mar 23 Release (v10)
        • Jan 23 Release (v9)
        • Jan 23 Release (v8)
        • Dec 22 Release (v7)
        • Nov 22 Release (v6)
        • Oct 22 Release (v5)
        • Sep 22 Release (v4)
        • Sep 22 Release (v3)
        • Sep 22 Release (v2)
        • Sep 22 Release (v1)
    • ☁️Wave Embedded
      • March 25 Release (v11)
      • February 25 Release (v10)
      • December 24 Release (v9) - Hotfix
      • November 24 Release (v8)
      • October 24 Release (v7)
      • September 24 Release (v6)
      • August 24 Release (v5)
      • July 24 Release (v4)
      • June 24 Release (v3)
  • HELP & FAQ
    • 💡FAQs
    • ✉️Get Support
Powered by GitBook
On this page
  • Embed Valorx Grid in an Aura Component
  • Embed Valorx Grid in a Screen Flow
  • Working with Grid Data and Actions
  • Get Grid ID
  • Add an Input Variable in Flow
  1. Surf The Wave
  2. Surf The Wave in Salesforce

Using Wave Grid in Components and Flows

Last updated 1 month ago

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

1

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:

    <aura:component 
    implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
        <aura:attribute name="recordId" type="String" />
    </aura:component>
2

Add Valorx Grid and Related Grid

  1. Embed the Valorx Grid and Related Grid

    1. Use lightning:tabset to display both grids. Note: Below is the sample code

<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>
  1. Configure Component Parameters

    1. Grid ID – Enter the Grid ID (format: ObjectName::GridId). .

    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.

3

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.

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


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

1

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.

2

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").

3

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

    • Height – Adjust the grid height.

    • Allow Changing Grids – Enable/disable users' ability to switch grids within the same object.

4

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

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

5

Save and Activate the Flow

  • Click Done → Click Save and provide a Flow Label.

  • Click Activate to enable the Flow.


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.


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.

🏄‍♂️
Learn how to find it
Learn how to find it
Learn how to find it
Create the Lightning Component
Add Valorx Grid and Related Grid
Deploy the Component on a Record Page
Create a new Flow
Add a Screen Flow
Embed Valorx Grid in the Screen Flow
Embed Valorx Related Grid in Screen Flow
Save and Activate the Flow
Get the Grid ID
Add an Input Variable in Flow