Add a Tab for Embedded Grid(s) onto a Record Detail Page (Using GridBuddy Lightning Components)
To use GridBuddy Lightning Components, My Domain has to be enabled.
Step 1: Create your grids the way you usually do
Decision time:
If you want to embed multiple grids in a tabbed format onto a record detail page, continue to Step #2. If you want to embed a single grid onto a record detail page, skip to Step #3
Step 2: Create the tabbed page with all the grids that you want to appear
I. Click the Grid Wizard
II. Click “Managed Tabbed Pages
III. Click ‘new’ to create a new tabbed page
IV. Enter a title for the page.
V. Keep ‘global buttons’ & ‘Salesforce header’ checked
VI. Click ‘add tab’ and select a grid from the ‘content’ dropdown menu. These grids will
appear as a tab on the page in the order that you select them here.
VII. In the Content field, at the end of the Grid name, add fpf (filter by parent field) and fpv (filter by parent value) parameters to dynamically filter it by the record it is embedded on.
For example:
- if you wanted to embed a Task grid onto an Opportunity record, your Content field might be: {!gridPage}gname=Open Tasks&fpf=WhatId&fpv={!Opportunity.Id}
For example:
- Standard objects:...&fpf=AccountId&fpv={!Account.Id}
- Custom objects:...&fpf=Account__c&fpv={!Account.Id}
These parameters filter the grid to show only records related to the Salesforce record on which the grid is embedded.
- FPF tells the grid to look for a certain field on the grid
- FPV tells the grid that once it finds the FPF field, to filter it by the page it's embedded onto.
For example:
- On an Account record, if I’ve embedded a Contact grid, my FPF/FPV would be: fpf=AccountId&fpv={recordId}
- The grid looks for the AccountId field and filters it by recordId of the page it's embedded onto
- On an Account record, if I’m embedding an Account grid from another datasource, my FPF/FPV would be: fpf=Id&fpv={recordId}
NOTE: URL parameters for a single grid are entered here in the LEX component. URL parameters for a tabbed page are entered in GridBuddy Cloud > Manage Tabbed Page.
VIII. Click ‘save’
Step 3: Add a tab on a record detail page
I. Go to the record detail page onto which you want to embed your grid
II. Click ‘edit page’
III. Click on the existing tabbed area. This will open the “Page>Tabs” editable area on the
right side of the page.
IV. Click “Add Tab” and select “Tab Label = Custom”, then type whatever tab title you’d like
into the Custom Tab Label field.
V. Drag the new tab up or down to put it in your preferred location
Step 4: Embed a grid(s) into your new tab
I. Confirm that My Domains is enabled for this org.
II. Click the new tab that you just created
III. Scroll down to “Custom – Managed” in the left menu.
IV. You can select either “GridBuddy Grid” (to embed a single grid) or “GridBuddy Tabbed
Page” (to embed a managed tabbed page).
V. Drag the GB component of your choice into the body of the new tab
VI. Click on the GB component you just placed. This will open the Page > GridBuddy
Grid/Tabbed Page pane on the right side of the screen
VII. “GridBuddy Tabbed Page” Lightning Component
a. In the GridBuddy Tabbed Page pane, select the page name from the dropdown
menu. This list will show you the tabbed pages you have built in Managed
Tabbed Pages
b. Set the component height
c. Click ‘save’ and then click ‘back’ to load the page with your new tab and
embedded grid(s) on it.
VIII. “GridBuddy Grid” Lightning Component
a. In the GridBuddy Grid pane, select the grid name from the dropdown menu on
the right. This list will show you all grids that you have built in this org.
b. Set optional filter parameters. This will filter the grid so that it only shows results
related to the page it is embedded on.
i. Note: If you do not place filter parameters on the grid, it will show you
complete results (vs. results only relevant to the detail page where
you’ve embedded it)
ii. For example, to pull only relevant Contacts onto an Account page, you
could use these parameters on a Contact grid:
fpf=AccountId&fpv={recordId}
c. Set the component height
d. Click ‘save’ and then click ‘back’ to load the page with your new tab and
embedded grid(s) on it.
