How to store UI Preference based on User

Question

Hello I'm trying to store UI preference based on User, irrespective of browser or device, it should store the preference of user globally, I tried with Javascript's localstorage function but it is browser specific, so it didn't fulfill the requirement

I read about custom settings also but not sure how it can be implemented in my scenario as I'm using lightning-combobox and want to store last selected option and use on relogin/login on other browser. If someone can guide on this, It will be really helpful.

here's my Component -

import { LightningElement, track } from 'lwc';

export default class TreatmentPlan extends LightningElement {

    @track showTBTTreatment = false;
    @track showTreatment = false;
    @track selectedOption;
   
  //selectedOption = 'Treatment';


  connectedCallback(){
   
    const lastUsedOption = localStorage.getItem('lastUsedOption');
    if (lastUsedOption == 'Treatment') {
        this.showTBTTreatment = false;
        this.showTreatment = true;
        }
        else{
            this.showTBTTreatment = true;
        this.showTreatment = false;
        }

        this.selectedOption = lastUsedOption;
    }


    get options() {
        return [
                 { label: 'Treatment', value: 'Treatment' },
                 { label: 'TBT Treatment', value: 'TBT Treatment' },
               ];
    }

    saveLastUsedOption(selectedOption) {
        localStorage.setItem('lastUsedOption', selectedOption);
      }

    
   

    handleTreatmentChange(event){
            console.log('event value', event.target.value);

            this.selectedOption = event.target.value;
            this.saveLastUsedOption(this.selectedOption);

        //    this.selectedOption = event.target.value;
           // this.saveLastUsedOption(this.selectedOption);

        if(event.target.value == 'Treatment'){
        this.showTBTTreatment = false;
        this.showTreatment = true;
        }
       
        else if(event.target.value == 'TBT Treatment'){
            
            this.showTBTTreatment = true;
            this.showTreatment = false;
        }
       // this.setTreatmentFlag();
    }

    saveLastUsedOption(selectedOption) {
        localStorage.setItem('lastUsedOption', selectedOption);
    }
  
   
}

<template>
    <div style="width:15%;">
    <lightning-combobox
               name="Treatment"
               value={selectedOption}
               placeholder="Select Treatment Plan"
               options={options}
               onchange={handleTreatmentChange} >
   </lightning-combobox>
    </div>

   <template if:true={showTBTTreatment}>
    <c-tbt-Client-Session-Container-V3 ></c-tbt-Client-Session-Container-V3>
   </template>
  

       <template if:true={showTreatment}>
       <c-TBT-Client-Treatment-Container-V3></c-TBT-Client-Treatment-Container-V3>
    </template>
</template>

Answer 1

Since you want it global, you'll need to store the preferences as data on the Salesforce org. I would recommend using a record associated with the user, ensuring that there is only one "UI Preferences" record per user.

Have as many fields as you need in it:

• That could be just one long text area that holds some JSON if you don't care about the preferences on the server-side and leave it all to the LWC(s) to manage (though this could be prone to preference management issues).
• Having separate fields per preference could be more useful if you want to do things like report on numbers of users with certain preferences etc. and certainly makes it easier to do preference management.

You could use the standard uiRecordApi to create, retrieve and update preference details, or you could provide your own imperative Apex to handle it. Again, this depends on your needs. You'd need to be careful to avoid race conditions between different LWCs that maintain different preferences - only set the fields that you really need to update if using the uiRecordApi to update, or include separate imperative Apex methods per preference as you see fit. (This works best with those separate fields; having a JSON payload would mean always having to worry about race conditions or always using bespoke imperative methods that do record locking and manipulate the JSON to update parts of it.)

NB: Use of imperative apex with @AuraEnabled(cacheable=false) means you don't need to worry about client-side caching messing up preference handling, though it does mean more round-trips to the server so you need to ensure you only read and update preferences when essential.

This is data, not settings, since you expect them to be managed by users, not administrators.