10

I want to make a standalone salesforce page that loads data specific to a current member. I tried making an App page, however when I load /lightning/n/MyAppPage?recordId=something it redirects to /lightning/n/MyAppPage and drops the URL param.

Essentially what I want to do is make a standalone LWC in a standalone tab that loads data specific to an Account. I want to link out to this page from the Account view page and pass the account to my standalone LWC page as some sort of context. How can I link to such a page? I can't use the record type (Account's) view Flexipage as that has its own layout I can't overwrite for the current logged in user.

3
  • did you manage to make it work?
    – glls
    Sep 8, 2021 at 12:44
  • @glls yes, custom params appear to be the right way. The hash is not meant for this use case so I'm happy there's a semi-standard one. localStorage shouldn't be used for this kind of use case.
    – Andy Ray
    Sep 9, 2021 at 20:47
  • glad you were able to resolve.
    – glls
    Sep 9, 2021 at 21:04

2 Answers 2

14

There is native support for query parameters in LWC. To persist, their names need to have namespace added as a prefix. Default namespace is c__.

In this example: /lightning/n/MyAppPage?recordId=something, recordId will be auto-stripped.

However, in this example: /lightning/n/MyAppPage?c__recordId=something, c__recordId will persist.

To read query params you can leverage CurrentPageReference wire, which receives object with a state attribute, which contains all the query params. The wire auto-executes, when detects any change in URL.

import { LightningElement, track, wire } from 'lwc';
import { CurrentPageReference, NavigationMixin } from 'lightning/navigation';

export default class AccountParameters extends NavigationMixin(LightningElement) {

    @track currentPageReference;
    @wire(CurrentPageReference)
    setCurrentPageReference(currentPageReference) {
        this.currentPageReference = currentPageReference;
    }

    get recordId() {
        return this.currentPageReference?.state?.c__recordId;
    }

    get objectType() {
        return this.currentPageReference?.state?.c__objectType;
    }

    get countParam() {
        return this.currentPageReference?.state?.c__randomCountParam;
    }

    // Navigates to app page on button click
    handleNavigate() {
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'AccountsAppPageName',
            },
            state: {
                c__recordId: '001B000001KGVlCIAX',
                c__objectType: 'Account',
                c__randomCountParam: 3
            }
        });
    }
}

Related links:

2
  • Thank you. @track is deprecated unless you mutate the reference. Also, is there a way to do this without using Salesforce's horrible wire service?
    – Andy Ray
    Sep 9, 2021 at 20:46
  • It works perfectly. Thank you.
    – Cray Kao
    Dec 24, 2021 at 5:43
5

For persistence, I would recommend using location history hash also known as a fragment identifier it can easily be added by accessting wht browser's location object:

location.hash = 'your hash'

. They are not only persistent, but you can also track changes to it using a hashchange event handler if need be

So, instead of

/lightning/n/MyAppPage?recordId=something

you would end p having something that resembles:

/lightning/n/MyAppPage#recordId=something

since fragment identifier parameters are not sent to the server, they do not trigger a reload of the page.

If you are looking for storage option that you can use from the browser, you can use sessionStorage or localStorage if the data needs to persist beyond the users session

9
  • Might be a good hack workaround for Salesforce's poor application design, I'm also curious if there's other options as the window hash isn't ideal for storing data
    – Andy Ray
    Sep 3, 2021 at 22:26
  • If you want to store actual data, use browser storage, such as sessionStorage or localstorage
    – glls
    Sep 3, 2021 at 22:33
  • How would you reference this in an LWC? Can you provide a code sample for that? Jan 30, 2022 at 9:52
  • you can use connectedCallback to read from localstorage (or any other event handler based on your needs)
    – glls
    Jan 30, 2022 at 15:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .