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.

Avijit
  • 760
  • 1
  • 9
  • 21
  • 1
    You want to share these values in parent-child manner or share among siblings. Can you provide business usecase? – Pranay Jaiswal May 08 '18 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 08 '18 at 18:00
  • That you can directly get using the {!$Locale.timezone} more here on $Locale – itzmukeshy7 May 08 '18 at 18:15
  • @itzmukeshy7 Yes this will work to get current user's time zone. – Avijit May 09 '18 at 10:17

2 Answers2

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).

Pranay Jaiswal
  • 35,996
  • 16
  • 75
  • 134
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");

Ayub
  • 3,503
  • 19
  • 31