Salesforce Classic Setup

GridMate can be deployed on Salesforce Classic. Only RelatedList and ListView grids are supported. To run GridMate on Classic, we use Salesforce Lightning out.

Lightning application setup

To run the Lightning out on Classic, a lightning app VFListViewDataGridApp should be created with the markup below.

<aura:application extends="ltng:outApp" >
    <aura:dependency resource="gmpkg:VFListViewDataGridComponent"/>
    <aura:dependency resource="markup://force:showToast" type="EVENT"/>
    <aura:dependency resource="markup://force:refreshView" type="EVENT"/>
</aura:application>

Visualforce page setup

Create a Visualforce page to wrap GridMate component using the Lightning out technology.

<apex:page controller="VFListViewDataGridController"
           showHeader="true"            
           sidebar="false">
    <apex:includeLightning />
    
    <div id="workbench" />
    
    <script>
    $Lightning.use("{!lightningApp}", function() {        
        //prepare attributes
        let attributes = JSON.parse('{!attributes}' || '{}');
        attributes = Object.assign(attributes, {
            "aura:id": "listViewGrid",
            "relatedObjectName" : "{!relatedObjectName}",
            "listViewName" : "{!listViewName}"
            "canFilter": true            
        });
        
        //create the data grid
        $Lightning.createComponent("gmpkg:VFListViewDataGridComponent",
                                   attributes,
                                   "workbench",
                                   function(component) {
                                       $A.eventService.addHandler({
                                           event: 'force:showToast',
                                           handler: function(event) { 
                                               let toast = component.find("toast");
                                               toast.showToast(event.getParams());
                                           }
                                       });
                                   });
    });        
    </script>
</apex:page>

We have also to implement the Visualforce controller with its unit test class

/***
* @author Hicham El Mansouri@GridMate
* @date 12/2019
* @description DataGrid controller class for VFListViewDataGrid.
*/
public with sharing class VFListViewDataGridController {
    private final String lightningApp;
    private final String relatedObjectName;
    private final String listViewName;
    private final String attributes;
    
    public VFListViewDataGridController() {
        lightningApp = ApexPages.currentPage().getParameters().get('c__lightningApp');
        relatedObjectName = ApexPages.currentPage().getParameters().get('c__object');
        attributes = ApexPages.currentPage().getParameters().get('c__attributes');
        
        listViewName = getLastUsedListView(relatedObjectName);
    }

    private static String getLastUsedListView(String objName)
    {
        try{
            RecentlyViewed recentItem = [Select Id, Name From RecentlyViewed  
                                         Where Type='ListView' Order by LastViewedDate Desc Limit 1];
            
            ListView listView = [Select Id, Name, DeveloperName From ListView 
                                 Where SobjectType=:objName And Name=:recentItem.Name Limit 1];
            
            return listView.DeveloperName;
        }        
        catch(Exception ex){
            System.debug(ex.getStackTraceString());
            return null;
        }           
    }
    
    public String getRelatedObjectName() {
        return relatedObjectName;
    }
    
    public String getAttributes() {
        return attributes;
    }
    
    public String getListViewName() {
        return listViewName;
    }       
    
    public String getLightningApp() {
        return lightningApp;
    } 
}

/***
* @author Hicham El Mansouri@GridMate
* @date 12/2019
* @description DataGrid controller class for VFListViewDataGrid.
*/
@isTest
public class VFListViewDataGridControllerTest {
    static testMethod void testGetLastUsedListView(){
        ApexPages.currentPage().getParameters().put('c__lightningApp', 'c:VFListViewDataGridApp');
        ApexPages.currentPage().getParameters().put('c__object', 'Account');
        ApexPages.currentPage().getParameters().put('c__attributes', '%7B"canCreate"%3A+true%2C"canClone"%3A+true%7D');
        
        VFListViewDataGridController c = new VFListViewDataGridController();
        
        String lastUsed = c.getListViewName();
        if(lastUsed == null){System.assert(lastUsed == null);}
        else{ System.assert(lastUsed != null);}
        
        String relatedObjectName = c.getRelatedObjectName();
        System.assert(relatedObjectName != null);
        
        String attributes = c.getAttributes();
        System.assert(attributes != null);
        
        String lightningApp = c.getLightningApp();
        System.assert(lightningApp != null);
    }
}

Mass Edit button setup

To trigger the mass edit Visualforce page, we have to configure a link on the targeted object.

{! URLFOR( "/apex/VFListViewDataGridPage?", null, 
[
  c__lightningApp='c:VFListViewDataGridApp',
  c__object='Account',
   c__attributes='{"canCreate":true,"canClone":true,"canFilter":true}'
]
)}

Mass Edit can be enabled on any object by duplicating the link below and changing the c__object parameter only.

The link should be added to the list of actions on a ListView.

Remote Site setup

GridMate uses API to fetch the ListView's metadata. Visualforce URL should be added to Remote Site Settings. See below 👇

Remote Site settings