4

I am writing an Lightning component where I am getting some values form Salesforce backend through Apex Controller.

I need these values to be referred across all other components (components which has not yet created and will be created later) in my App. Is there a way I can keep these values somewhere in a global scope where all components can access these values.

4
  • 1
    You want to share these values in parent-child manner or share among siblings. Can you provide business usecase? May 8, 2018 at 17:46
  • For example, I want to let other component know logged in user's time zone. I don't want to fetch user's time zone every time for every component from apex controller. Just want to fetch once and want to keep it in a global scope of that application.
    – Avijit
    May 8, 2018 at 18:00
  • That you can directly get using the {!$Locale.timezone} more here on $Locale May 8, 2018 at 18:15
  • @itzmukeshy7 Yes this will work to get current user's time zone.
    – Avijit
    May 9, 2018 at 10:17

2 Answers 2

1

There are few ways to play with attributes from different lightning components. It depends how they are placed and used.

  1. Parent-Child relationship: Suppose these two components are in parent-child relationship.

A. Pass value from Parent to Child: (Containment): You can define attribute in Parent component and pass the same attribute in child component. Any changes made to child's attribute it will be reflected back to the parent component.

SampleCode:

<c:ParentComponent>
 <aura:attribute type="Object" name="parentAttribute"/>
   <c:ChildComponent childAttribute="{!v.parentAttribute}">
</c:ParentComponent>

B. Pass value from Child to Parent: (Component Events) : Fire an Event from Child which is captured by parent and parent gets values from a child in event params. Basically here child fires the event whenever its data change or it wants the parent components to get the updated value. You can read more about it here: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component.htm

enter image description here

2. Pass Values Unrelated Components(Application Events):

Suppose you have multiple components in your dom, you added them via App builder and now you want they should be able to pass values amongst themselves. There is no relationship between them except the fact they are sitting inside a container (assume lightning one.app container). Application event comes to your rescue. Src: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application.htm enter image description here

  1. COOKIE (Risky): Yes You can use cookie to store values that can be savedthe in browser and can be viewed by any component. You can also set the expiry and thus they expire and doesn't provide extra access. Cookies are Locker Services Safe

Code: To store cookie.

var key = component.get("v.key");
var value = component.get("v.value");
document.cookie = key+'='+value;

Locker Safe Cookie 4. Local Storage:(Super Risky) It's even simpler to store values in local storage. You need to have to clear them manually when not needed as there is no expiry date.

localStorage.setItem("lastname", "Smith");//set
localStorage.getItem("lastname"); //retrieve 

If you chose approach 3 and 4, any malicious javascript/ chrome plugins can mess things up and you might get compromised with data etc. Apart from that 3 and 4 are not event-driven. So you might have to poll cookie/local storage in order to retrieve updated values(there is no native framework trigger change).

0

There are several ways to do that:

1. Event Passing in lightning component - Mostly used in communities

You can add your lightning component anywhere (shared header or footer) page that will always load. From this component, fire event which will carry the information and add event handler in your other components where you need these values. Here is the detail explanation, how can you do that: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_demo.htm

2.Aura Method for Child-to-parent component information sharing

Salesforce claims after winter '18 "We made it easier to return a result from aura:method, which is used to communicate from a parent component to a child component that it contains. Use the return statement to return a value from synchronous JavaScript code." https://developer.salesforce.com/docs/atlas.en-us.210.0.lightning.meta/lightning/js_cmp_methods_sync.htm

3. Extending Lightning Components (Need to verify as suggested by Pranay)

You can create a base lightning component and extend this lightning component in other methods. Here is detail explanation how to use this: https://developer.salesforce.com/blogs/developer-relations/2015/03/salesforce-lightning-components-by-example-component-extension.html

And most importantly, if this is to just fetch current user information then you do not need to work too muchhh...try below if it works and use in your lightning components

var currentuserId = $A.get("$SObjectType.CurrentUser.Id");

7
  • 1
    Extending Lightning component won't magically pass values from one component to another. You have to go with containment or event-driven architecture. May 8, 2018 at 18:16
  • And moreover since LockerService activation, extending lightning components may not work.
    – Avijit
    May 8, 2018 at 18:32
  • @pranay thanks..updated...answer...maybe I need to recheck it again...but previously i had done something like this..
    – Ayub
    May 8, 2018 at 18:32
  • Any one have implemented cookie in lightning component?
    – Avijit
    May 8, 2018 at 18:34
  • I did same ... will post same shortly. May 8, 2018 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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