Таблица данных Lightning — редактируемые CDT-файлы
![](/static/storage/63978702309068462218838243514304071946.png)
Используйте возможности пользовательских типов данных в LWC с возможностью обработки данных lightning.
До сих пор я не видел ни одной организации Salesforce без пользовательских LWC. Неудивительно, что наиболее распространенным /популярным пользовательским компонентом всегда была копия стандартного компонента Связанный список (Related List).
Отображение информации в табличном виде имеет множество преимуществ, особенно с точки зрения ясности, организованности и эффективности.
ИМХО, в современном мире Salesforce единственным соответствующим подходом к созданию пользовательского компонента «Связанного списока» (или, по сути, любого компонента, который отображает данные в табличном виде) было бы использование lightning-datatable LWC.
Базовая таблица данных LWC
Salesforce вложила много средств в базовый LWC с возможностью передачи данных по молниям, и функции его компонентов значительно изменились за последние 2–3 года.
Программные возможности компонента имеют широкий спектр, в том числе:
- отображение табличных данных в структурированном и читаемом формате
- поддержка фиксированных или изменяемых размеров столбцов
- одиночный/множественный выбор строк
- действия на уровне строки (как статические, так и динамические) и действия заголовка
- индивидуальный стиль и тематика (с помощью крючков стиля SLDS)
- поддержка пользовательского рендеринга ячеек 💯
- поддержка пользовательского встроенного редактирования 💯
С помощью базовой таблицы данных LWC вы можете относительно легко добиться пользовательского опыта, подобного Excel.
Пользовательские типы данных и поддержка встроенного редактирования
Пользовательские типы данных расширяют уровень настройки LWC с таблицами данных lightning. CDT форматируют данные на основе типа, указанного вами для конкретного столбца. По умолчанию поддерживается дюжина типов данных.
Очевидно, что с помощью CDT вы можете придумать свой собственный тип данных для размещения информации, которую вы хотите отобразить в ячейке.
Вот реальные применения CDT в пользовательской таблице данных LWC:
- Отобразить пользовательский компонент «поиск» в ячейке
- Отобразить пользовательский компонент список выбора» в ячейке
- Отобразить управляющие и зависимые пользовательские компоненты список выбора» в соседних столбцах (имитируя поведение зависимых раскрывающихся списков Salesforce на странице сведений о записи)
Отображать данные, доступные только для чтения, в datatable просто. Самое интересное, что это касается ввода данных.
lightning-datatable позволяет включить режим редактирования для ячеек CDT.
Чтобы сделать ваш CDT доступным для редактирования, вам необходимо выполнить следующие действия:
Шаг №1: Определите свойство editTemplate
в конфигурациях CDT.
import LightningDatatable from 'lightning/datatable';
// Custom Data Type for Picklist;
import customPicklistReadonlyTemplate from './templates/customPicklist/readonly.html';
import customPicklistEditableTemplate from './templates/customPicklist/editable.html';
export default class Datatable extends LightningDatatable {
static COMMON_TYPE_ATTRIBUTES = ['value', 'fieldName', 'context', 'required'];
static customTypes = {
customCombobox: {...},
customPicklist: {
template: customPicklistReadonlyTemplate,
editTemplate: customPicklistEditableTemplate,
standardCellLayout: true,
typeAttributes: [...this.COMMON_TYPE_ATTRIBUTES, 'objectApiName', 'recordTypeId']
},
customLookup: {...},
customInput: {...}
};
}
Шаг №2: Реализуйте шаблон для свойства editTemplate
Редактируемые поля пользовательских типов выделяются желтым цветом так же, как и стандартные типы данных. Измененное значение ячейки временно сохраняется в свойстве editedValue
.
<template>
<!--Embed you custom LWC that handles edit behavior of your CDT-->
<c-custom-picklist
data-inputable="true"
...
value={editedValue}
></c-custom-picklist>
</template>
Шаг №3: Сделайте редактируемый пользовательский тип в определении столбца
get columns() {
return [
...
{
label: 'Industry',
fieldName: 'Industry__c',
type: 'customPicklist',
editable: true,
typeAttributes: {...}
},
...
];
}
Флаг editable
позволяет использовать значок карандаша внутри ячейки. При нажатии на него datatable создает экземпляр соответствующего LWC.
Смотрите демонстрацию пользовательского списка выбора CDT ниже:
![CDT «customPicklist»](/static/storage/150547421572388401801034276815114155629.gif)
Встроенное редактирование для CDT
Чтобы зафиксировать изменения, сделанные пользователем в редактируемом CDT, вы можете повторно использовать событие cellchange
. Убедитесь, что структура полезных данных события соответствует официальной/стандартной:
<c-datatable
lwc:ref="datatable"
key-field="Id"
draft-values={draftValues}
...
oncellchange={handleCellChange}
></c-datatable>
handleCellChange(event) {
event.stopPropagation();
let [changedEntry = {}] = cloneObject(event.detail.draftValues);
/**
* `changedEntry` object structure:
* {
* "Id": "0037Y00001ygqDvQAI"
* [changedFieldName]: "new_value"
* }
*/
...
// Capture particular field changes for the record;
this.draftValues = this.draftValues.map(...);
}
Поэтому CDT должен знать как минимум о следующих свойствах ячеек:
context
— это уникальное значение, идентифицирующее запись/строку (обычно идентификатор записи).fieldName
— как следует из названия, оно соответствует уникальному имени API поля (то есть свойству объекта, т. е.Industry__c
)value
— значение поля
Вышеупомянутые атрибуты можно легко передать в CDT через typeAttributes
с динамической/статической привязкой:
get columns() {
return [
...
{
label: 'Industry',
fieldName: 'Industry__c',
type: 'customPicklist',
editable: true,
typeAttributes: {
context: { fieldName: "Id" }, // dynamic
fieldName: 'Industry__c', // static
value: { fieldName: 'Industry__c' }, // dynamic
objectApiName: 'Contact' // static
}
},
...
];
}
В конце концов, как только CDT обнаруживает изменения в ячейке, создается соответствующая полезная нагрузка события, и событие запускается:
// LWC withing editable CDT;
notify() {
this.dispatchEvent(
new CustomEvent('cellchange', {
composed: true,
bubbles: true,
cancelable: true,
detail: {
draftValues: [{
['context']: this.context,
[this.fieldName]: this.value
}]
}
})
);
}
При таком подходе родительский компонент сможет захватывать и обрабатывать события изменения ячеек, происходящие от обоих:
- стандартные типы данных (например, text, number, date)
- пользовательские типы данных (например, customPicklist, customLookup)
Преимущество этого подхода заключается в том, что Lightning-Datatable обрабатывает рендеринг ячеек за вас — он динамически создает экземпляр CDT только для чтения или редактируемого, располагая его близко к границам ячейки. Он выделяет измененные ячейки, имитируя поведение стандартной таблицы в виде списка. Более того, API данных остается неизменным — используются одни и те же события и их структура.
Задача встроенного редактирования CDT
Когда пользователь нажимает на значок карандаша в ячейке, таблица данных переключается в режим встроенного редактирования.
Для стандартных типов данных (например, текст, число, дата) lighting-datatable легко переключается обратно в режим только для чтения, как только изменяется входное значение - это стандартное поведение.
Однако для CDT я не нашел официального способа выйти из режима встроенного редактирования при обнаружении изменения значения в ячейке. Если вы не выйдете из режима встроенного редактирования, редактируемый экземпляр CDT будет продолжать отображаться в сетке, вводя в заблуждение конечного пользователя.
Ниже приведено «неофициальное» решение этой проблемы, которое я нашел на данный момент:
escape() {
if (this.$focusedInput) {
/**
* Simulate 'Escape' button click on focused input within CDT.
* Open browser developer tools > top/YOUR_ORG_URL/components/lightning/datatable.js file > search for 'ESCAPE' keyword.
*/
const escapeEvent = new KeyboardEvent('keydown', {
composed: true,
bubbles: true,
cancelable: false,
key: 'Escape',
keyCode: 27,
code: 'Escape',
which: 27
});
this.$focusedInput.focus();
this.$focusedInput.dispatchEvent(escapeEvent);
} else {
/**
* Force escape from cell edit panel via reserved/unofficial event.
* Open browser developer tools > top/YOUR_ORG_URL/components/lightning/datatable.js file > search for 'ieditfinished' keyword.
*/
this.dispatchEvent(
new CustomEvent('ieditfinished', {
composed: true,
bubbles: true,
cancelable: false,
detail: {
reason: 'lost-focus',
rowKeyValue: this.context,
colKeyValue: 'unknown'
}
})
);
}
}
Приведенное выше решение имеет 2 варианта — вы можете использовать любой из них ИЛИ использовать оба (второй вариант является запасным).
Выйдите из режима встроенного редактирования с помощью кнопки Escape
После тщательного изучения источников данных, доступных с помощью lightning, я выяснил, что ячейка переключается обратно в режим только для чтения, как только пользователь нажимает кнопку Escape. Концептуальная идея, лежащая в основе этой опции, заключается в программной имитации такого же поведения. Следует отметить, что сфокусированный элемент должен быть определен в редактируемом шаблоне CDT (см. переменную $this.focusedInput).
Выйдите из режима встроенного редактирования с помощью события ieditfinished
Это сложный вариант, но с лета 24 года он работает без проблем!
Важно: «ieditfinished» не является документированным / официально рекомендованным событием. Мне удалось обнаружить это, наблюдая за JavaScript-источниками lightning-datatable с помощью инструментов разработчика Chrome.
Полезная нагрузка события требует определения атрибута атрибута rowKeyValue
.. Он соответствует уникальному значению, идентифицирующему запись/строку (по сути, это значение атрибута key-fiel
).
Бонусная демонстрация — Пользовательский поиск CDT:
![CDT «customLookup»](/static/storage/175257235139596237339592813681559108181.gif)
Заключение
Рекомендуем потратить время на изучение возможностей LWC, собирающего данные о lightning. Это универсальный компонент, который охватывает широкий спектр потребностей бизнеса и пользователей. Его возможности по рендерингу данных, встроенному редактированию и настройке делают его мощным инструментом для улучшения пользовательского опыта и производительности в приложениях Salesforce.
Источник: https://medium.com/@awispack/lightning-datatable-editable-cdts-3458005a2043