6

There is a Lightning community consisting of 2 pages:

  1. Search page: There are few fields and a search button. Upon entering the fields, the list of accounts are displayed.
  2. Detail page: If user clicks on any one of the account in the search page, it will take you to its detail page.

We have this scenario where the user can click Back button of the browser on the detail page. But the issue is that the fields which the user had entered are blank, and the search page doesn't display the last search results

closed as off-topic by Mohith Shrivastava, Himanshu, battery.cord, glls, Santanu Boral Jan 8 '18 at 6:24

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on problems in code you've written must describe the specific problem and include valid code to reproduce it. For help writing short, self-contained syntactically-valid examples, see: SSCCE.org" – Mohith Shrivastava, Himanshu, battery.cord, glls, Santanu Boral
If this question can be reworded to fit the rules in the help center, please edit the question.

9

Lightning behaves differently due to its JavaScript-based design. If you want to preserve some data, you have to store it somewhere and get it back later. One way that I've found to do this is to provide session-backed storage. This allows the component to retain data in the browser's session storage area, which is typically wiped out when the user closes their browser.

Here's a basic implementation:


Component code

<aura:handler name="init" value="{!this}" action="{!c.init}" />

<lightning:input name="searchText" type="text" value="{!s.searchText}" label="Search Term" />

<lightning:button type="search" label="Search" onclick="{!c.search}" />

Controller Code

({
    init: function(component, event, helper) {
        helper.setup(component);
        if(component.get("s.searchText")) {
            helper.search(component);
        }
    },
    search: function(component, event, helper) {
        helper.search(component);
    }
})

Helper Code

({
    setup: function(component) {
        component.addValueProvider(
            's',
            {
                get: function(key, comp) { return sessionStorage.getItem(key); },
                set: function(key, value, comp) { sessionStorage.setItem(key, value); }
            }
        );
    },
    search: function(component) {
        // implementation not given //
    }
})

The magic here is that when the component or application is reloaded, it will remember the previous term, if any, and automatically execute a search. Note that this means that the list may be different if the values changed from the last refresh, but this is probably acceptable.

Alternatively, you can set up a hash value provider. This puts the search term in the URL, allowing back/forward to work normally. Here's what that implementation looks like:


Component (No Changes)

Controller (No Changes)

Helper

({
    setup: function(component) {
        component.addValueProvider(
            's',
            {
                get: (key, comp) => this.parseHash()[key] || "",
                set: (key, value, comp) => { this.storeHash(key, value); }
            }
        );
    },
    storeHash: function(key, value) {
        var result = [], temp = this.parseHash();
        Object.keys(temp).forEach((v) => result[v] = encodeURIComponent(result[v]));
        temp[key] = encodeURIComponent(value);
        Object.keys(temp).forEach((v) => result.push(key+'='+temp[key]));
        location.replace("#"+result.join('&'));
    },
    parseHash: function() {
        var results = [],
            parts = location.hash? location.hash.replace(/^#/,'').split(/&/): [];
        parts.forEach((v) => results[v.split(/=/)[0]] = decodeURIComponent(v.split(/=/)[1]));
        return results;
    },
    search: function(component) {
        // not implemented //
    }
})

This implementation has the advantage of also being bookmarkable, in case the user would like to return to the search. You can use the value provider to store all kinds of useful stuff in the hash. For example, if you have pagination, sorting, etc, you can put all those variables there.

If you want some obfuscation, though, you could also encode the parameters differently. I simply used a URL-looking syntax for convenience, but you could store encoded JSON data or whatever else makes sense for you if you'd like.

  • Interesting, is this use of addValueProvider formally documented anywhere and/or recommended by SFDC? – Charles T Jan 7 '18 at 17:18
  • @CharlesT It's in the Aura Documentation (login.salesforce.com/auradocs/reference.app). The only reference to it in the Lightning Components Developer Guide state that it is an allowed function under Locker Service. As far as I can tell, these two examples are the only working examples on the Internet (aside from the other answer I wrote). Since Locker Service explicitly allows it, that means we're allowed to use it. – sfdcfox Jan 7 '18 at 19:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.