LWC - کنیکٹڈ کال بیک ()

Lightning Web Component (LWC) کا اپنا لائف سائیکل ہے جو DOM میں جزو/s کو داخل کرنے، اسے پیش کرنے، اور DOM سے جزو/s کو ہٹانے کے لیے ہے۔ کنیکٹڈ کال بیک() (ماؤنٹنگ فیز میں) لائف سائیکل طریقوں میں سے ایک ہے جو DOM میں جزو داخل ہونے پر فائر کیا جاتا ہے۔ اس گائیڈ میں، ہم کنکشن کال بیک() اور ان مختلف منظرناموں پر بات کریں گے جن میں یہ طریقہ مثالوں کے ساتھ شامل ہے۔

1. کنسٹرکٹر () لائف سائیکل ہک میں پہلا طریقہ ہے جسے 'جز' مثال بننے پر کہا جاتا ہے۔ اس مرحلے میں اجزاء کی خصوصیات تیار نہیں ہوں گی۔ اگر آپ میزبان عنصر تک رسائی حاصل کرنا چاہتے ہیں تو ہمیں 'this.template' استعمال کرنے کی ضرورت ہے۔ چونکہ اس مرحلے میں بچوں کے اجزاء موجود نہیں ہوں گے، اس لیے ہم بچوں کے اجزاء تک بھی رسائی حاصل کرنے سے قاصر ہیں۔ Super() اس طریقے میں استعمال ہوتا ہے۔
2. کنیکٹڈ کال بیک () دوسرا طریقہ (فیز 2) ہے جسے اس وقت کہا جاتا ہے جب کوئی عنصر DOM میں داخل کیا جاتا ہے۔ اس صورت میں، ہک والدین سے بچے کو بہتی ہے. اس مرحلے میں اجزاء کی خصوصیات تیار نہیں ہوں گی۔ اگر آپ میزبان عنصر تک رسائی حاصل کرنا چاہتے ہیں تو ہمیں 'this.template' استعمال کرنے کی ضرورت ہے۔ چونکہ اس مرحلے میں بچوں کے اجزاء موجود نہیں ہوں گے، اس لیے ہم بچوں کے اجزاء تک بھی رسائی حاصل کرنے سے قاصر ہیں۔
3. رینڈر (): ایکسٹ فیز رینڈرنگ ہے۔ والدین کا جزو رینڈر کیا جاتا ہے اور پھر اگر موجود ہو تو چائلڈ کمپوننٹ پیش کرے گا۔ والدین کو پیش کرنے کے بعد، یہ چائلڈ کمپوننٹ (کنسٹرکٹر، کنیکٹڈ کال بیک، رینڈر) کے پاس جاتا ہے اور انہی اقدامات کی پیروی کرتا ہے جیسے والدین۔
4. renderedCallback (): جب جزو کی رینڈرنگ مکمل ہو جاتی ہے اور آپ اس کے بعد کوئی بھی آپریشن کرنا چاہتے ہیں تو اس طریقہ کو کہا جاتا ہے۔
5. منقطع کال بیک (): اس مرحلے میں، عنصر کو DOM سے ہٹا دیا جاتا ہے (connectedcallback() کے برعکس)۔
6. errorCallback() اس وقت کہا جاتا ہے جب LifeCycle میں خرابی واقع ہوتی ہے۔

کنیکٹڈ کال بیک () ڈھانچہ

منسلک کال بیک کا استعمال کرتے ہوئے ():

1. متغیر کی وضاحت کریں اور پراپرٹی ویلیو سیٹ کریں۔
2. اس کے اندر اپیکس کو کال کریں۔
3. واقعات بنائیں اور بھیجیں۔
4. UI API کو کہا جا سکتا ہے۔
5. اس کے اندر نیویگیشن سروس۔

اسے جاوا اسکرپٹ فائل میں درج ذیل کی طرح بیان کرنا ہوگا۔

تمام مثالیں اس 'meta.xml' فائل کو استعمال کرتی ہیں۔ ہم ہر ایک مثال میں اس کی وضاحت نہیں کریں گے۔ LWC اجزاء کو آپ کے ریکارڈ پیج، ایپ پیج، اور ہوم پیج میں شامل کیا جا سکتا ہے۔

مثال 1:

جب اجزاء UI پر لوڈ ہوتا ہے تو ہم کنسٹرکٹر() اور کنیکٹڈ کال بیک () مرحلے کا مظاہرہ کریں گے۔

connectedCallBack.html

connectedCallBack.js

یہ مندرجہ ذیل کی طرح لگتا ہے:

آؤٹ پٹ:

اس جزو کو کسی بھی چیز کے 'ریکارڈ' صفحہ میں شامل کریں۔

صفحہ کا معائنہ کریں (بائیں کلک کریں اور 'معائنہ کریں' کو منتخب کریں)۔ پھر، 'کنسول' ٹیب پر جائیں۔

مثال 2:

اس مثال میں، ہم ٹریک ڈیکوریٹر کے ساتھ ایک پھل بنائیں گے اور کنیکٹڈ کال بیک () طریقہ کے اندر پراپرٹی ویلیو کو 'مینگو' پر سیٹ کریں گے۔ یہ UI پر ظاہر ہوتا ہے۔

firstExample.html

firstExample.js

آؤٹ پٹ:

اس جزو کو کسی بھی چیز کے 'ریکارڈ' صفحہ میں شامل کریں۔ یہاں ہم اسے 'اکاؤنٹ ریکارڈ' صفحہ میں شامل کرتے ہیں۔ آپ دیکھیں گے کہ پھل 'آم' ہے۔

مثال 3:

پچھلے کوڈ کو استعمال کریں اور 'js' اور 'html' فائل میں کچھ بیانات میں ترمیم کریں۔

ایک نیا متغیر بنائیں جو 'js' فائل میں 500 کے ساتھ 'نمبر' ہو۔ اگر تعداد 500 سے زیادہ ہے تو پھل کو '500 سے زیادہ' پر سیٹ کریں۔ بصورت دیگر، پھل کو '500 کے برابر' کے طور پر سیٹ کریں۔

firstExample.html

firstExample.js

آؤٹ پٹ:

اس کی تعداد 500 ہے۔ لہذا، پھل کا نتیجہ '500 کے برابر' ہے۔

مثال 4:

اس منظر نامے میں، ہم کنیکٹڈ کال بیک() طریقہ استعمال کرتے ہوئے اکاؤنٹ کے ریکارڈ (اکاؤنٹ آبجیکٹ) واپس کرتے ہیں۔

1. سب سے پہلے، ہم ایک Apex کلاس لکھتے ہیں جو پہلے 10 اکاؤنٹس کی فہرست کو ID، نام، صنعت، اور درجہ بندی والے شعبوں کے ساتھ واپس کرتا ہے۔
2. اس کے بعد، ہم اکاؤنٹس کو ٹریک کرتے ہیں اور ان کو مربوط کال بیک() طریقہ میں اپیکس کلاس سے کال کرکے واپس کرتے ہیں۔
3. HTML فائل میں، ہم اسے ہر اس ہدایت کے لیے استعمال کرتے ہیں جو اکاؤنٹس کو دہراتی ہے اور نام اور صنعت کو لوٹاتی ہے۔

AccountData.apxc