#JS Action

#Вступ

JS Action використовується для виконання JavaScript при натисканні кнопки, дозволяючи налаштовувати будь-яку бізнес-логіку. Її можна використовувати в панелях інструментів форм, панелях інструментів таблиць (на рівні колекції), рядках таблиць (на рівні запису) та інших місцях для виконання таких операцій, як валідація, відображення сповіщень, виклики API, відкриття спливаючих вікон/бічних панелей та оновлення даних.

#API контексту виконання (часто використовувані)

• ctx.api.request(options): Здійснює HTTP-запит;

• ctx.openView(viewUid, options): Відкриває налаштований вигляд (бічну панель/діалогове вікно/сторінку);

• ctx.message / ctx.notification: Глобальні повідомлення та сповіщення;

• ctx.t() / ctx.i18n.t(): Інтернаціоналізація;

• ctx.resource: Ресурс даних для контексту рівня колекції (наприклад, панель інструментів таблиці), що включає такі методи, як getSelectedRows() та refresh();

• ctx.record: Поточний запис рядка для контексту рівня запису (наприклад, кнопка рядка таблиці);

• ctx.form: Екземпляр форми AntD для контексту рівня форми (наприклад, кнопка панелі інструментів форми);

• ctx.collection: Метаінформація поточної колекції;

• Редактор коду підтримує фрагменти Snippets та попереднє виконання Run (див. нижче).

• ctx.requireAsync(url): Асинхронно завантажує бібліотеку AMD/UMD за URL-адресою;

• ctx.importAsync(url): Динамічно імпортує модуль ESM за URL-адресою;

• ctx.libs.React / ctx.libs.ReactDOM / ctx.libs.antd / ctx.libs.antdIcons / ctx.libs.dayjs / ctx.libs.lodash / ctx.libs.math / ctx.libs.formula: Вбудовані React / ReactDOM / Ant Design / іконки Ant Design / dayjs / lodash / math.js / formula.js та інші загальні бібліотеки для рендерингу JSX, обробки часу, маніпуляцій з даними та математичних обчислень.

Фактично доступні змінні можуть відрізнятися залежно від розташування кнопки. Наведений вище список є оглядом загальних можливостей.

#Редактор та фрагменти

• Snippets: Відкриває список вбудованих фрагментів коду, які можна шукати та вставляти в поточну позицію курсору одним кліком.
• Run: Безпосередньо виконує поточний код та виводить журнали виконання на панель Logs внизу. Підтримує console.log/info/warn/error та підсвічування помилок для легкого визначення їх місцезнаходження.

• Ви можете використовувати AI-співробітників для генерації/модифікації скриптів: AI-співробітник · Натан: Frontend-інженер

#Поширені випадки використання (спрощені приклади)

#1) Запит API та сповіщення

const resp = await ctx.api.request({ url: 'users:list', method: 'get', params: { pageSize: 10 } });
ctx.message.success(ctx.t('Request finished'));
console.log(ctx.t('Response data:'), resp?.data);

#2) Кнопка колекції: Валідація вибору та обробка

const rows = ctx.resource?.getSelectedRows?.() || [];
if (!rows.length) {
  ctx.message.warning(ctx.t('Please select records'));
  return;
}
// TODO: Implement business logic...
ctx.message.success(ctx.t('Selected {n} items', { n: rows.length }));

#3) Кнопка запису: Зчитування поточного запису рядка

if (!ctx.record) {
  ctx.message.error(ctx.t('No record'));
} else {
  ctx.message.success(ctx.t('Record ID: {id}', { id: ctx.record.id }))
}

#4) Відкриття вигляду (бічної панелі/діалогового вікна)

const popupUid = ctx.model.uid + '-open'; // Bind to the current button for stability
await ctx.openView(popupUid, { mode: 'drawer', title: ctx.t('Details'), size: 'large' });

#5) Оновлення даних після відправлення

// Загальне оновлення: пріоритет надається ресурсам таблиці/списку, потім ресурсу блоку, що містить форму.
if (ctx.resource?.refresh) await ctx.resource.refresh();
else if (ctx.blockModel?.resource?.refresh) await ctx.blockModel.resource.refresh();

#Важливі зауваження

• Ідемпотентність Action: Щоб запобігти багаторазовим відправленням через повторні натискання, ви можете додати перемикач стану або вимкнути кнопку в логіці.
• Обробка помилок: Додайте блоки try/catch для викликів API та надайте користувачеві відповідні сповіщення.
• Взаємодія з виглядами: При відкритті спливаючого вікна/бічної панелі за допомогою ctx.openView рекомендується явно передавати параметри і, за необхідності, активно оновлювати батьківський ресурс після успішного відправлення.

#Пов'язані документи

• Змінні та контекст
• Правила взаємодії
• Вигляди та спливаючі вікна