Toast message centralized in Parent and Child Component Interaction

Concepts utilized In this Lightning component :

  • Data Binding Between Components using bound expressions
  • Aura Method Call from Parent to child component
  • Toast Message display on Parent component using Aura:Html in dynamic component creation.
  • Clearing displayed toast message in predefined seconds within lightning context using getCallBack function

Data Binding Between Components using bound expressions:-

This Concept utilized in lightning:input field on Child component, whenever the Field loses its focus(Firstname or LastName) OnBlur function will be triggered which in turn will set the value to child component attribute ‘messageHolder’ and  because of bound expression data binding occurs in parent component attribute which ultimately displays the toast message.

Note : Data binding is bidirectional (bound expression -{!expression})  in this usecase, if you want one way binding then you need to use unbound expression{#expression} Child component attribute value change won’t affect parent component.

Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_data_binding.htm

Aura Method Call from Parent to child component:-

It has been done to call child component method by clicking on Submit button which defined in parent component which will again display the toast message for some predefined seconds. Also you can also use attributes with Aura Method

Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_tag_method.htm

Toast Message display on Parent component using Aura:Html in dynamic component creation:-

SLDS Toast message created using dynamic component creation concept where display body created using aura:html and its html attributes are pushed into div and after that its value set into bound expression attribute ‘messageHolder’ where it is used in parent component to display the toast message.

Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm

Clearing displayed toast message in predefined seconds within lightning context using getCallBack function:-

Displayed toast message will be cleared automatically after 4 seconds because of getCallback function which is more handy when we need to modify the component than in normal rendering and one more beautiful example for this is once i applied getCallback with setInterval() method to Queueable interface where it will make a callout continuously till it gets response(file) which is more than 6mb where in salesforce we have 6 mb limitation with synchronous call.

Official documentation:- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_mod_ext_js.htm

Working code has been given below,

 







Be the first to comment

Leave a Reply

Your email address will not be published.


*