Using Wave Grid in Components and Flows

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.

Create the Lightning Component

Open Developer Console
- Click Setup and open the Developer Console.
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.

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>

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>

Configure Component Parameters
1. Grid ID – Enter the Grid ID (format: ObjectName::GridId). Learn how to find it.
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.

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.

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.

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

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.
- Height – Adjust the grid height.
- Allow Changing Grids – Enable/disable users' ability to switch grids within the same object.

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

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:

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

Add an Input Variable in Flow

To add an Input Variable in Flow:

Click + New Resource.
Set Resource Type to Variable.
Enter API Name as recordId.
Choose Data Type as Text.
Check the box for Available for Input.
Then click Done.

Last updated 3 months ago

Was this helpful?