Get URL of List View on Partner Portal

A Salesforce partner portal is an online platform that enables external partners to collaborate with an organization's internal teams using Salesforce tool. It is like a website that can be hosted in the Salesforce Environment.

Looking from development perspective, Salesforce allows most of its features to be hosted on Partner website quite easily. However, certain features such as VisualForce pages (VF Pages for short) do not work on partner portal.

Usage of VF Page is now replaced by its more powerful counterparts such as LWC and Aura. However in Lightning experience (LEX for short), a VF Page specifically can be utilised for creating List View Buttons as it is easier to fetch the URL of list view from it and get the selected records.

In this article, I am going to show you, how you can bring a list view button, that was hosting a VF Page, on a partner portal. Please note that our motive is to get the URL of the current page, we are not required to develop a separate VF page. Just one LWC component would suffice the need of fetching the URL.

The steps are the following:

1. First, get the Page URL on which the list view is hosted. In LEX, VF page was utilised to get the URL. 

2. Create a LWC component to fetch the URL and make it visible on the Partner portal

3. Use URL fetched by LWC to perform your actions such as query on the list view records, get the list view Id etc..

Hope you have a happy learning. Please feel free to comment in case of doubts.

In case of doubts and queries, feel free to drop email on supernovasrm@gmail.com.

Creating the LWC Component

XML File

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <masterLabel>ListViewLWC_partnerportal</masterLabel>

    <description>LWC that can fetch the partner portal URL</description>

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightningCommunity__Page</target>

        <target>lightningCommunity__Default</target>

    </targets>

    </LightningComponentBundle>

JS File

import { LightningElement, wire} from 'lwc';

import { CurrentPageReference } from 'lightning/navigation';

export default class ListViewLWC_partnerportal extends LightningElement {

// This variable contains all the details of the URL

urlStateParameters ;

strButtonHeader ='Sample Button on Partner Portal';

 @wire(CurrentPageReference)

    getStateParameters(currentPageReference) {

       if (currentPageReference) {

          this.urlStateParameters = currentPageReference.state;

          if(this.urlStateParameters){

           // Perform your logic here

          }

       }

    }

 handleButtonClick(){

        // Add your logic

 }

}

HTML

<template>

  <lightning-button label={strButtonHeader} onclick={handleButtonClick}>

   </lightning-button>

</template>

UI

Happy Learning!!

Open LWC Component from a VisualForce Page

Salesforce recommends using LWC to develop custom web pages / components. However, there are still use cases where the VisualForce Pages might be needed, One of the most common use case is Launching a LWC from the List View Button.

A List View button is something that is visible on the Sobject's List Views. Its primary use case is to perform a bulk action on the records. For example, download all the given records as CSV, perform a Bulk Delete on selected list view etc..

Some of the use cases might require to launch a LWC component as well. For example, user needs to download all the records as CSV and we to display fields which are different from the ones displayed on the list view. 

We need to perform following steps in order to launch a LWC from a VF Page

1. Create a LWC that will be hosted inside the VF Page.
2. Create a Aura Component that will be containing the LWC.
3. Create an Aura App that will be called from the VF Page.
4. Create a VisualForce Page and host the Aura App.
5. Create a List View Button that will be launch the VF Page or Put the VF page on the App page

1. Create an LWC Component 

/**

* @description : Sample LWC Component

* @author : Shreya Mathur

* @Component Name and type : sampleLWCComponent/LWC JS File

* Created Date : Apr 15, 2023

**/

import { LightningElement, track, api } from 'lwc';

export default class sampleLWCComponent extends NavigationMixin(LightningElement) {

saveToFile() {

saveFile({})

.then(result => {

/*Add Code Here*/

}}

<!--

* @description : Sample LWC Component

* @author : Shreya Mathur

* @Component Name and type : sampleLWCComponent/LWC XML File

* Created Date : Apr 15, 2023

-->

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>51.0</apiVersion> <description>List View Button</description> <isExposed>true</isExposed> <masterLabel>List View Button</masterLabel> <targets>

<target>lightning__AppPage</target> </targets> </LightningComponentBundle>

2. Create an Aura Component to Host the LWC Component

Aura Component CMP File

/**

* @description : Sample Aura Component to host on Aura App

* @author : Shreya Mathur

* @Component Name and type : sampleAuraComponent/Aura Component

* Created Date : Apr 15, 2023

**/

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">

<aura:attribute name="strURL" type="String"/>

<aura:attribute name="strVFButtonName" type="String"/>

<aura:attribute name="selectedCases" type="String" />

<c:sampleLWCComponent strURL="{!v.strURL}" strButtonName="{!v.strVFButtonName}">

</c:sampleLWCComponent >

</aura:component>

3. Create an Aura App to Host the LWC Component

Aura .app file called as sampleAuraApp

/**

* @description : Sample Aura App to host on VF Page

* @author : Shreya Mathur

* @Component Name and type : sampleAuraApp/Aura App

* Created Date : Apr 15, 2023

**/

<aura:application extends="ltng:outApp" access="global">

<aura:dependency resource= "c:sampleAuraComponent"/>

</aura:application>

4. Create VF Page

/**

* @description : Sample VF Page to be launched by List View Button

* @author : Shreya Mathur

* @Component Name and type : sampleVFPage/VF Page

* Created Date : Apr 15, 2023

**/

<apex:page standardController="Case" lightningStyleSheets="true" tabStyle="Case" recordSetVar="cases">

<apex:includeLightning />

<div id="compContainer" />

<script>

$Lightning.use("c:sampleAuraApp", function() {

$Lightning.createComponent("c:sampleAuraComponent",

{strURL:"{!$CurrentPage.URL}",strVFButtonName:"SampleButtonName""},

"compContainer",

function(cmp) {

console.log("c:VFPageApp loaded successfully in VF page");

}

);

});

</script>

</apex:page>

5. Put the VF Page on the App or launch it from the List View button

This VF Page can now be embedded in a Lightning app or launched from a List View.

    

)

}