آموزش تسلط بر جدول داده لایتنینگ در Salesforce LWC

سرفصل ها و درس ها

یک جدول داده لایتنینگ اولیه در 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

• اعمال ویرایش درون خطی - تغییرات کد Apply inline editing - code changes

• ویرایش درون خطی - دمو ​​و توضیح کد Inline editing - demo and code explanation

ویرایش خطی اولیه برای انواع سلول های سفارشی در جدول داده لایتنینگ 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

• بسته شدن! Wrapping Up!