Giao diện
@digiforce-nc/plugin-block-lowcode
Plugin cho phép viết và thực thi JavaScript tùy chỉnh ngay trong giao diện ứng dụng - biến bất kỳ block nào thành vùng logic động với CodeMirror 6 editor và RequireJS integration.
Plugin này làm gì?
Khi các block có sẵn không đáp ứng yêu cầu nghiệp vụ đặc thù, Low-code block cho phép developer viết JavaScript trực tiếp. Code được thực thi trong context của block với quyền truy cập API, resource, i18n và DOM element.
Ba nhiệm vụ chính
| # | Nhiệm vụ | Chi tiết |
|---|---|---|
| 1 | Code editor tích hợp | CodeMirror 6 với syntax highlighting, autocomplete, linting |
| 2 | Thực thi JS an toàn | Chạy user code trong block context với các API có sẵn |
| 3 | Quản lý dependency | RequireJS integration cho phép import thư viện bên ngoài |
Kiến trúc
Tổng quan
Plugin hoạt động hoàn toàn ở client - code JavaScript được lưu trong block schema props và thực thi trực tiếp trên trình duyệt.
Hai widget
| Widget | Trạng thái | Vai trò |
|---|---|---|
LowcodeBlockWidget | Legacy, ẩn | Widget cũ, không hiển thị trong menu |
JavaScriptBlockWidget | Active | Widget chính cho JavaScript block |
Block context (ctx)
Khi code thực thi, nó nhận được object ctx chứa:
| 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) |
Luồng thực thi code
Tính năng
| Tính năng | Mô tả |
|---|---|
| CodeMirror 6 | Editor hiện đại với syntax highlighting, bracket matching |
| Acorn linting | Kiểm tra lỗi cú pháp realtime dùng acorn parser |
| RequireJS | Import thư viện bên ngoài qua requireAsync() |
| Auto-execute | Code tự chạy khi block mount hoặc khi lưu |
| Block context | Truy cập DOM element, API client, resources, i18n |
| Error handling | Bắt lỗi runtime, hiển thị thông báo thay vì crash |
| Resize | Editor có thể resize theo nhu cầu |
Ví dụ sử dụng
Render chart đơn giản
javascript
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' }],
});Gọi API và hiển thị kết quả
javascript
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('');Thành phần client
| Thành phần | Mô tả |
|---|---|
JavaScriptBlockWidget | Widget chính đăng ký JavaScript block |
LowcodeBlockWidget | Widget legacy (ẩn, backward compatibility) |
CodeEditor | Component bọc CodeMirror 6 với cấu hình JS |
JavaScriptBlockInitializer | Đăng ký vào menu "Add block" |
jsBlockSettings | Settings panel cho block (editor options) |
Dependencies
| Package | Vai trò |
|---|---|
@digiforce-nc/client | Client framework (peer) |
@digiforce-nc/server | Server framework - chỉ dùng khi build (peer) |
@codemirror/lang-javascript | CodeMirror JavaScript language support |
@codemirror/view | CodeMirror view layer |
@codemirror/state | CodeMirror state management |
@codemirror/lint | CodeMirror lint framework |
acorn | JavaScript parser cho linting |
acorn-walk | AST walker cho acorn |