Tùy chỉnh Dashboard

Dashboard trên web và mobile dùng chung cơ sở dữ liệu. Bạn có thể tùy chỉnh cách hiển thị từng dashboard trên mobile mà không ảnh hưởng đến giao diện web.

Cài đặt Dashboard Image (Thumbnail)

Ảnh thumbnail hiển thị trong danh sách dashboard trên mobile.

Vào Dashboards → click vào dashboard cần cấu hình
Click nút Edit (bút chì)
Trong phần Dashboard image → upload ảnh
- Kích thước khuyến nghị: 800×600px
- Định dạng: PNG, JPG
Click Apply changes

Cài đặt Thứ tự Hiển thị

Dashboard với order nhỏ hơn hiển thị trước trong danh sách.

Vào Dashboards → click dashboard
Click Edit
Field "Dashboard order in mobile application" → nhập số
- Ví dụ: 1 hiển thị đầu tiên, 10 hiển thị sau
Click Apply changes

Ẩn Dashboard trên Mobile

Dashboard vẫn hiển thị trên web nhưng bị ẩn trong app mobile.

Vào Dashboards → click dashboard
Click Edit
Check "Hide dashboard in mobile application"
Click Apply changes

Cấu hình Navigation Bar

Tùy chỉnh menu bottom bar của app:

Vào Mobile Center → Bundle → Tab Layout
Kéo thả để sắp xếp thứ tự menu items
Toggle ẩn/hiện từng item
Click Save
Download configuration → overwrite configs.json
Restart app

Cài đặt Dashboard qua API

# Cập nhật cấu hình mobile của dashboard
POST /api/dashboard
Authorization: Bearer {JWT}
Content-Type: application/json

{
  "id": { "id": "dashboard-uuid", "entityType": "DASHBOARD" },
  "title": "Factory Overview",
  "mobileHide": false,
  "mobileOrder": 1
}

Best Practices

Khuyến nghị	Lý do
Thumbnail nền trắng hoặc màu sáng	Trông đẹp trên cả light/dark mode
Tên dashboard ngắn gọn	Không bị cắt trên menu mobile
Tối đa 5 dashboard hiển thị	Tránh scroll quá nhiều
Dùng widget responsive	Dashboard cần hiển thị đẹp trên màn hình nhỏ

Thiết kế Dashboard tối ưu cho Mobile

Khi tạo dashboard dành cho mobile:

Sử dụng layout "Mobile" trong cài đặt dashboard (tách biệt với desktop)
Breakpoint: Thiết kế cho màn hình 360px - 430px width
Widget ưu tiên:
- Value card (compact)
- Gauge (đơn giản)
- Alarms table (thu gọn)
- Time series chart (full width)
Tránh:
- Widget quá nhỏ (khó touch)
- Layout nhiều cột trên mobile
- HTML/CSS phức tạp