[SalesForce] Unique Identifier of a Lightning Component Instance

I'm working on a relatively simple Aura component, but I'm running into an issue. I'd like to create either a cookie or a localStorage item for a component when a user takes action on it (closes it) so that the instance of the component 'remembers' if it should be closed when the page is reloaded. Otherwise, the component will simply reappear when the page reloads.

The issue is that I'm unsure if there is a way to either find or assign a globally unique identifier for an instance of a component. There could be multiple instances of this same component on a page, and it can be used on any flexipage, so something like a record Id wouldn't be applicable.

I've tried setting a randomly generated ID attribute on init, but I've not determined a way for this id to persist on the component. Whenever it loads, that ID simply gets regenerated.

TL;DR I need a way to find or assign a globally unique identifier to each instance of a component that is persistent, if one even exists

Best Answer

Strictly speaking, no, it is not possible. Depending on if you're talking about components that will be bound to a page, or used within other components, you'll generally want to have an attribute that a developer or designer can set that will uniquely identify the component by a given name, then you can use localStorage/sessionStorage/cookies/etc to remember that component instance. Alternatively, you might devise a way to come up with a unique hash based on the component's inputs to calculate a more-or-less universally unique identifier.

Related Solutions

[SalesForce] Lightning Component works on Sandbox but not on Production

Answer for part two: I thought this was fixed but maybe not - try wrapping whatever is inside your aura:if in a span tag.

This is because the aura:if can become confused if you have an aura:iteration direction inside it (They use a system of inline comments to store data and can step on each other's toes) - which I'm not sure if you do, but it sounds likely.

eg:

<aura:if >
  <span>
    <aura:iteration items="{!v. invoiceitems}" var="item">
      <other stuff>        
    </aura:iteration>
  </span>
</aura:if>

Oh, and this makes sense - this has been fixed in the sandbox, but you still need the span in production.

[SalesForce] With Summer 18 and LockerService is there any global storage

To get the ID of the currently viewed record, use implements="force:hasRecordId" on your component. To get the user's Id, use {!$CurrentUser.Id}. More generically, if you want to store stuff, sessionStorage and localStorage is the best you're going to get for storing global data without some extra effort. However, if you wanted to, you could make a global storage component.

This is the absolutely minimum, no frills, no security, no error handling, no singleton model, etc. Do not use this in production code as-is. It's simply not meant to handle all the possible scenarios that might come up. Do, however, use it to understand why creating this implementation is likely problematic in the first place; it would be notoriously difficult to get everything working just right.

c:globalDataSet.evt

<aura:event type="APPLICATION" description="Sets a global value for later retrival">
  <aura:attribute name="data" type="Object" />
  <aura:attribute name="name" type="String" />
</aura:event>

c:globalDataGet.evt

<aura:event type="APPLICATION" description="Gets a global value">
  <aura:attribute name="callback" type="Function" />
  <aura:attribute name="name" type="String" />
</aura:event>

c:globalStorage.cmp

<aura:component>
  <!-- note: should ideally only be used once in the entire hierarchy -->
  <aura:handler event="c:globalDataGet" action="{!c.getData}" />
  <aura:handler event="c:globalDataSet" action="{!c.setData}" />
  <aura:attribute name="data" type="Map" access="private" />
</aura:component>

c:globalStorageController.cmp

({
  getData: function(component, event) {
    var params = event.getParams(),
        data = component.get("v.data");
    params.callback(data.get(params.name));
  },
  setData: function(component, event) {
    var params = event.getParams(),
        data = component.get("v.data");
    data[params.name] = data;
    component.set("v.data", data);
  }
})

Note: This is obviously only a very basic implementation. A full-featured implementation would be able to detect multiple instances and share the data efficiently across those instances. As written, you only need one instance of this component anywhere on the layout, and all components can dispatch events to request or store data.