لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش تسلط بر جدول داده لایتنینگ در Salesforce LWC
دانلود Mastering Lightning Datatable in Salesforce LWC
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
نحوه پیاده سازی جدول داده لایتنینگ در LWC را از ابتدا بیاموزید. پیاده سازی تمام ویژگی ها از سطح پایه تا پیشرفته. ایجاد یک جدول داده لایتنینگ در LWC از ابتدا افزودن اقدامات سطح ردیف، مرتبسازی، اقدامات هدر به جدول داده لایتنینگ اعمال بارگذاری بینهایت، انتخاب ردیفها به صورت برنامهریزی، افزودن عملکردهای سطح ردیف پویا ایجاد یک نوع سلول سفارشی، افزودن ویرایش درون خطی برای همان نمایش خطاهای استاتیک و پویا پیش نیازها: دانش پایه LWC و جاوا اسکریپت را اضافه کنید و رکوردها را ذخیره کنید. با این حال، ما همه چیز را از ابتدا اجرا خواهیم کرد
بهعنوان یک توسعهدهنده نیروی فروش، در چندین پروژه با نمونههای زیادی مواجه خواهید شد که در آنها باید رکوردها را در یک جدول نشان دهید. Lightning Datatable یک جزء قابل استفاده مجدد است که توسط نیروی فروش ارائه شده است که با استفاده از آن می توانید رکوردها را به راحتی نمایش دهید. به دوره آموزشی Mastering Lightning Datatable در Salesforce LWC خوش آمدید، جایی که همه چیز را در مورد جدول داده لایتنینگ از ابتدا یاد خواهید گرفت. فرقی نمی کند که قبلاً از جدول داده لایتنینگ یا جدول داده لایتنینگ در LWC استفاده کرده باشید یا خیر. ما از اصول اولیه شروع میکنیم، یعنی پیادهسازی یک جدول داده لایتنینگ در عرض 10 دقیقه که دادههای ثابت را نشان میدهد و همه چیز را تا سطح پیشرفته پیادهسازی میکند، از جمله جزء سلولی جدول داده سفارشی ما.
برای ارائه ایدهای در سطح بالا، با شروع از اصول اولیه جدول داده، موضوعات زیادی را پوشش میدهیم، از جمله، اما نه محدود به: اقدامات سطح ردیف، اقدامات هدر، بارگذاری بینهایت، مرتبسازی، تعریف یک نوع سلول سفارشی ، اعتبارسنجی و تعامل با apex controller.
ویژگی های دوره
ویدیوهای HD
توضیحات مفصل
همه مفاهیم تحت پوشش - مبتدی تا پیشرفته
منابع آموزشی اضافی
گواهی تکمیل
این دوره پله شما برای تبدیل شدن به یک توسعه دهنده نیروی فروش شگفت انگیز است. ما در این دوره از همان ویدیوی اول، برنامه نویسی و توسعه lwc زیادی را انجام خواهیم داد. این نه تنها به شما کمک می کند تا در پیاده سازی جدول داده لایتنینگ در lwc تسلط پیدا کنید، بلکه به شما کمک می کند تا به عنوان یک توسعه دهنده نیروی فروش ارتقا پیدا کنید. ما تعداد زیادی جاوا اسکریپت را با هم کدنویسی می کنیم، مفاهیم LWC مانند: ارتباط کودک با والدین با استفاده از رویدادها، ویژگی های سفارشی و غیره را یاد می گیریم و در نتیجه برخی از عملکردهای شگفت انگیز را در جدول داده لایتنینگ پیاده سازی می کنیم که شاید قبلا هرگز آن را اجرا نکرده باشید!
این دوره توسط راهول مالهوترا که یک وبلاگ نویس و یوتیوب در SFDC Stop است تدریس می شود. او جلسات مختلف فنی زنده را در کنفرانسهای بینالمللی و ملی Salesforce و سایر گردهماییهای جهانی از جمله ApexHours، Cactusforce 2022، TrailheaDX India 2019، Dreamforce 2018، IndiaDreamin 2018، Jaipur Developer Fest 2018 و همچنین گردهماییهای جهانی Saipur ارائه کرده است.
سرفصل ها و درس ها
یک جدول داده لایتنینگ اولیه در LWC ایجاد کنید
Create a basic lightning datatable in LWC
یک جدول داده لایتنینگ در LWC با داده های ثابت کارمندان ایجاد کنید
Create a lightning datatable in LWC with static employee data
دستورالعمل های عمومی
General Guidelines
مخاطبین را از salesforce پرس و جو کنید و آنها را در جدول داده نمایش دهید
Query contacts from salesforce and display them in datatable
کنترلر apex را بنویسید
Write apex controller
کنترلر جاوا اسکریپت را برای واکشی و نمایش داده ها در جدول داده ما به روز کنید
Update JavaScript controller to fetch and display data in our datatable
برای نمایش رکوردها در جدول داده ما، به ساختار/فرمت شیء Js بروید
Deep dive into Js object structure/format to display records in our datatable
بهبود ظاهر و احساس جدول داده لایتنینگ
Improve look and feel of lightning datatable
فرمت داده ها بر اساس نوع داده
Format data according to data type
ستون شماره ردیف را نمایش دهید، ستون چک باکس را پنهان کنید و افست ستون شماره ردیف را اضافه کنید
Show row number column, hide checkbox column and add row number column offset
اعمال ردیف را به جدول داده لایتنینگ اضافه کنید
Add row actions to lightning datatable
افزودن اقدامات ردیف
Add row actions
مرتب سازی را در جدول داده لایتنینگ اعمال کنید
Apply sorting to lightning datatable
ویژگی های جدول داده مربوط به مرتب سازی را پیاده سازی کنید و روش handleSort را تعریف کنید
Implement datatable properties related to sorting and define handleSort method
برای مرتب سازی رکوردهای جدول داده ها، متد handleSort() و sortBy() را پیاده سازی کنید
Implement handleSort() and sortBy() method for sorting datatable records
فرو رفتن عمیق در متد sortBy().
Deep dive into sortBy() method
هنگام مرتبسازی دادههای ما در جدول دادههای لایتنینگ، مقادیر تعریفنشده را مدیریت کنید
Handle undefined values while sorting our data in lightning datatable
اعمال هدر را به جدول داده لایتنینگ اضافه کنید
Add header actions to lightning datatable
اقدامات پیش فرض هدر را از جدول داده لایتنینگ مخفی کنید
Hide default header actions from lightning datatable
اقدامات هدر جدید (سفارشی) را به جدول داده لایتنینگ خود اضافه کنید
Add new (custom) header actions to our lightning datatable
() handleHeaderAction را پیاده سازی کنید و گزینه انتخاب شده را در منوی اقدامات هدر علامت بزنید
Implement handleHeaderAction() & tick the selected option in header actions menu
بهروزرسانی/فیلتر کردن سوابق در جدول داده لایتنینگ بهعنوان عملکرد هدر انتخاب شده است
Update/Filter records in lightning datatable as header action is selected
سطرها را به صورت برنامه نویسی انتخاب کنید، بارگذاری بی نهایت اضافه کنید و حالت عرض ستون را اعمال کنید
Select rows programmatically, add infinite loading and apply column widths mode
حالت عرض ستون خودکار را اعمال کنید
Apply auto column widths mode
حالت عرض ستون ثابت را اعمال کنید
Apply fixed column widths mode
در جدول داده لایتنینگ ردیف ها را ابتدا و به صورت برنامه نویسی انتخاب کنید
Select rows initially and programmatically in lightning datatable
[اختیاری] Deep Dive به توابع slice() و map().
[Optional] Deep Dive into slice() and map() functions
بارگذاری بی نهایت در جدول داده لایتنینگ
Infinite loading in lightning datatable
اپکس کنترلر را به روز کنید
Update apex controller
getContacts() را به روز کنید و loadContacts() را تعریف کنید تا در حین حرکت، رکوردهای بیشتری بارگیری شود.
Update getContacts() & define loadContacts() to load more records as we scroll
مشکل loadMore() را با جلوگیری از تماس های متعدد apex و اضافه کردن اسپینر برطرف کنید
Fix loadMore() issue by preventing multiple apex calls and adding spinner
توجه داشته باشید
Note
ساده کردن/بهبود کد - فقط در صورتی که مخاطبینی در نیروی فروش وجود داشته باشد، از مخاطبین پرس و جو کنید
Simplify/Improve Code - Query contacts only if there are contacts in salesforce
بارگذاری بی نهایت همراه با فیلترهای جدول داده را اعمال کنید
Apply infinite loading along with datatable filters
اپکس کنترلر را به روز کنید
Update apex controller
ویژگی های جدول داده لایتنینگ "Enable Infinite Loading" و "Is Loading" را اعمال کنید
Apply "Enable Infinite Loading" and "Is Loading" lightning datatable attributes
رویکرد جدید برای پیاده سازی بارگذاری بی نهایت همراه با فیلترهای جدول داده - تئوری
New approach to implement infinite loading along with datatable filters - Theory
اطمینان از کارکرد صحیح بارگذاری بی نهایت با فیلتر کردن رکورد
Ensuring infinite loading works properly with record filtering
نسخه ی نمایشی، خلاصه و جمع بندی
Demo, Summary and Wrap Up
اقدامات پویا در سطح ردیف و ویرایش درون خطی
Dynamic row level actions and inline editing
اقدامات سطح ردیف پویا را اضافه کنید
Add dynamic row level actions
ویرایش خطی اولیه برای انواع سلول های سفارشی در جدول داده لایتنینگ
Basic inline editing for custom cell types in lightning datatable
خلاصه و درک ویژگی "draftValues" جدول داده لایتنینگ
Recap and understanding the "draftValues" attribute of lightning datatable
آرایه draftValues را در LWC والد با draftValues که از جدول داده می آیند به روز کنید
Update draftValues array in parent LWC with draftValues coming from datatable
یک سلول/الگوی سفارشی جدول داده برای جدول داده لایتنینگ ما ایجاد کنید
Create a custom datatable cell/template for our lightning datatable
یک جزء LWC جدید ایجاد کنید و از آن به عنوان سلول جدول داده سفارشی خود استفاده کنید
Create a new LWC component and use it as our custom datatable cell
هنگامی که رویدادی در سلول جدول داده سفارشی ما رخ داد، LWC والد را مطلع کنید
Notify the parent LWC when an event occurred in our custom datatable cell
بخش readOnly را برای سلول جدول داده لایتنینگ سفارشی ما تعریف کنید
Define readOnly section for our custom lightning datatable cell
CSS را برای سلول سفارشی خود اصلاح کنید تا رابط کاربری ثابتی برای ویرایش درون خطی داشته باشیم
Fix CSS for our custom cell in order to have consistent UI for inline editing
به جای if:true/if:false lwc:if و lwc:else را پیاده سازی کنید
Implement lwc:if and lwc:else instead of if:true/if:false
توجه داشته باشید
Note
ویرایش درون خطی پیشرفته برای سلول های زیر ردیف های انتخاب شده در جدول داده لایتنینگ
Advanced inline editing for cells under selected rows in lightning datatable
به روز رسانی قالب html - تغییرات UI
Update html template - UI changes
ویژگی های عمومی جدید، گیرنده ها و تنظیم کننده ها را با توجه به رابط کاربری به روز شده تعریف کنید
Define new public properties, getters and setters according to the updated UI
CSS پویا را با استفاده از گیرندهها و CSS تعریفشده توسط کاربر در مولفه سلول جدول داده LWC اضافه کنید
Add dynamic CSS using getters & user-defined CSS in LWC datatable cell component
پیاده سازی کنترل کننده برای عناصر جدید html. بر این اساس رویداد تغییر سلول را بهروزرسانی کنید
Implement handlers for new html elements. Update cellchange event accordingly
درک ویژگی relatedTarget و استفاده از آن برای تغییر حالت readOnly
Understanding the relatedTarget property and using it to switch to readOnly mode
مقدار به روز شده در سلول سفارشی را به مقدار قبلی/رویداد تغییر سلول آتش سوزی برگردانید
Revert the updated value in custom cell to previous value/Fire cellchange event
توجه داشته باشید
Note
نسخه ی نمایشی عملکرد پیاده سازی شده
Demo of the functionality implemented
مشخصه های جدید را تعریف کنید: Selected، numberOfRecordsSelected و به روز رسانی آنها
Define new attributes: selected, numberOfRecordsSelected and update them
رکوردهای انتخابی را با مقدار جدیدی که از سلول سفارشی می آید به روز کنید
Update selected records with new value coming from custom cell
اعتبارسنجی را در جدول داده لایتنینگ اعمال کنید
Apply validation in lightning datatable
نمایش پیام های خطای سطح جدول ایستا زمانی که کاربر در حال ویرایش رکورد(ها) است.
Show static - table level error messages when the user is editing record(s)
پیام های خطای سطح ردیف ثابت را با فیلدهای مشخص نشان دهید
Show static - row level error messages with specific fields highlighted
پیاده سازی پویا - پیغام های خطای سطح ردیف و جدول برای ویرایش درون خطی
Implement dynamic - row and table level error messages for inline editing
توضیح دقیق تغییرات کد برای پیاده سازی پیام های خطای پویا
Detailed explanation of code changes to implement dynamic error messages
نسخه ی نمایشی: نمایش پیام های خطا به صورت پویا در جدول داده لایتنینگ
Demo: Showing error messages dynamically in lightning datatable
قابلیت دسترسی را اضافه کنید، اندازه ستون را تغییر دهید و تغییرات انجام شده توسط کاربر را ادامه دهید
Add accessibility, track column resize and persist the changes performed by user
ردیابی زمانی که ستون جدول داده لایتنینگ تغییر اندازه میدهد
Track when the lightning datatable column is resized
پس از تکمیل تغییرات توسط کاربر، سوابق به روز را در جدول داده های لایتنینگ نگه دارید
Keep updated records in lightning datatable, once the user has completed changes
قابلیت دسترسی را به جدول داده لایتنینگ اضافه کنید
Add accessibility to lightning datatable
رکوردهای به روز شده با استفاده از ویرایش درون خطی در جدول داده لایتنینگ را در Salesforce ذخیره کنید
Save records updated using inline editing in lightning datatable to Salesforce
روش apex controller را تعریف کنید و مخاطبین را برای داشتن فرمت صحیح به روز کنید
Define apex controller method & update contacts to have the correct format
مخاطبین به روز شده را به apex controller منتقل کنید تا آنها را در salesforce ذخیره کنید
Pass updated contacts to apex controller in order to save them to salesforce
نمایش نظرات