Cài đặt và sử dụng

Cài đặt

Plugin @digiforce-nc/plugin-block-lowcode thường được cài sẵn trong bản phân phối chính. Kích hoạt qua trang Plugin Manager.

Plugin hoạt động hoàn toàn ở client — code JavaScript lưu trong block schema props và thực thi trên trình duyệt.

Thêm JavaScript block

1. Mở trang ở chế độ thiết kế (Schema Editor).
2. Click Add block → chọn JavaScript (hoặc Low-code).
3. Block xuất hiện với code editor trống.

Lưu ý

Plugin có hai widget: JavaScriptBlockWidget (active) và LowcodeBlockWidget (legacy, ẩn). Block mới luôn dùng JavaScriptBlockWidget.

Viết code

Click vào block để mở CodeMirror 6 Editor:

• Editor hỗ trợ syntax highlighting, bracket matching, auto-indent.
• Acorn linter kiểm tra lỗi cú pháp realtime — lỗi hiển thị trực tiếp trong editor.
• Code tự chạy khi block mount hoặc khi lưu lại.

Block context (ctx)

Code thực thi nhận object ctx chứa các công cụ hữu ích:

Property	Kiểu	Mô tả
ctx.element	HTMLElement	DOM element của block — dùng để render UI
ctx.api	APIClient	Client gọi API server
ctx.resources	Object	Truy cập các resource đã đăng ký
ctx.i18n	Object	Hệ thống đa ngôn ngữ
ctx.currentUser	Object	Thông tin user đang đăng nhập
ctx.currentRecord	Object	Bản ghi hiện tại (nếu trong context)

Ví dụ: Render chart

const echarts = await requireAsync('echarts');
const chart = echarts.init(ctx.element);
chart.setOption({
  xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] },
  yAxis: { type: 'value' },
  series: [{ data: [120, 200, 150, 80], type: 'bar' }],
});

Ví dụ: Gọi API và hiển thị

const response = await ctx.api.request({
  url: 'users:list',
  params: { pageSize: 5 },
});
const users = response.data.data;
ctx.element.innerHTML = users
  .map((u) => `<div>${u.nickname}</div>`)
  .join('');

Import thư viện bên ngoài

Sử dụng requireAsync() (RequireJS integration) để import thư viện từ CDN:

const dayjs = await requireAsync('dayjs');
ctx.element.textContent = dayjs().format('DD/MM/YYYY');

Mẹo

JavaScript block là giải pháp mạnh mẽ khi các block có sẵn không đáp ứng yêu cầu nghiệp vụ đặc thù — bạn có toàn quyền kiểm soát DOM, API, và logic hiển thị.