Cấu hình giao diện Container

Giao diện Row

Row có thể được chia thành nhiều Column.

• Thêm Layout Row: Thêm một Row vào giao diện người dùng cuối.

• Slug: Slug của Row, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.

• Hiện Border: Hiển thị đường viền bao quanh Row nếu tích chọn.

• Hiện Layout Row: Cho phép hiển thị (tích chọn) hoặc ẩn (không tích chọn) Row và toàn bộ thành phần con chứa trong nó.

• Padding: Là khoảng cách nội bộ giữa các thành phần con và Border của Row giúp tạo không gian để các thành phần không dính sát vào viền. Có thể thiết lập 4 phía trên, dưới, trái, phải và giá trị khoảng cách được tính bằng pixel (px).

• Khoảng cách giữa các cột: Khoảng cách giữa các Column trong Row, giá trị được tính bằng pixel (px).

• Số lượng cột: Số lượng Column nằm trong Row.

• Tỉ lệ chiều ngang các cột: Cấu hình tỉ lệ chiều ngang của các Column trong Row. Hệ thống sẽ tính toán chiều ngang của các Column theo tỉ lệ người dùng cấu hình sao cho tổng chiều ngang của các Column bằng với chiều ngang của Row. Người dùng có thể nhấn vào tên của Column để mở giao diện cấu hình Column đó.

  Ví dụ: Cấu hình tỉ lệ chiều ngang các cột:

  

  Row được chia làm 4 phần bằng nhau theo chiều ngang, Column 2 chiếm 2 phần, Column 1 và Column 3 chiếm mỗi cột 1 phần.

  

Lưu ý: Row hiển thị trên giao diện nếu thỏa mãn một trong hai điều kiện sau:

• Cấu hình đang tích chọn Hiện Layout Row và không thỏa mãn điều kiện ẩn Layout-row theo quy tắc giao diện nếu có.
• Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.

Giao diện Column

Column có thể chứa nhiều Section/Tab-Section.

• Tên: Tên của Column.
• Hiển thị tên trên giao diện: Hiển thị tên của Column trên giao diện người dùng cuối.
• Slug: Slug của Column, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.
• Hiện Border: Hiển thị đường viền bao quanh Column nếu tích chọn.
• Hiện Column: Cho phép hiển thị (tích chọn) hoặc ẩn (không tích chọn) Column và toàn bộ thành phần con chứa trong nó.
• Padding: Là khoảng cách nội bộ giữa các thành phần con và Border của Column giúp tạo không gian để các thành phần không dính sát vào viền. Có thể thiết lập 4 phía trên, dưới, trái, phải và giá trị khoảng cách được tính bằng pixel (px).
• Khoảng cách giữa các section: Khoảng cách giữa các Section/Tab-Section trong Column, giá trị được tính bằng pixel (px).

Lưu ý: Column hiển thị trên giao diện nếu Row chứa Column đang được phép hiển thị và thỏa mãn một trong hai điều kiện sau:

• Cấu hình đang tích chọn Hiện Column và không thỏa mãn điều kiện ẩn Layout-column theo quy tắc giao diện nếu có.
• Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.

Giao diện Section

Section có thể chứa nhiều Group.

• Tên: Tên của Section.
• Hiển thị tên trên giao diện: Hiển thị tên của Section trên giao diện người dùng cuối.
• Slug: Slug của Section, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.
• Hiện Border: Hiển thị đường viền bao quanh Section nếu tích chọn.
• Hiện Section: Cho phép hiển thị (tích chọn) hoặc ẩn (không tích chọn) Section và toàn bộ thành phần con chứa trong nó.
• Padding: Là khoảng cách nội bộ giữa các thành phần con và Border của Section giúp tạo không gian để các thành phần không dính sát vào viền. Có thể thiết lập 4 phía trên, dưới, trái, phải và giá trị khoảng cách được tính bằng pixel (px).
• Khoảng cách giữa các group: Khoảng cách giữa các Group trong Section, giá trị được tính bằng pixel (px).

Lưu ý: Section hiển thị trên giao diện nếu tất cả Container chứa Section đang được phép hiển thị và thỏa mãn một trong hai điều kiện sau:

• Cấu hình đang tích chọn Hiện Section và không thỏa mãn điều kiện ẩn Section theo quy tắc giao diện nếu có.
• Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.

Giao diện Tab-Section

Tab-Section là một Section cho phép tổ chức nội dung theo dạng tab, mỗi tab chứa một hoặc nhiều Group, người dùng có thể chuyển đổi giữa các tab bằng cách nhấn vào tiêu đề của chúng.

Giao diện Tab-Section:

Thông số cấu hình:

• Tên: Tên của Tab-Section.

• Hiển thị tên trên giao diện: Hiển thị tên của Tab-Section trên giao diện người dùng cuối.

• Slug: Slug của Tab-Section, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.

• Hiện Border: Hiển thị đường viền bao quanh Tab-Section nếu tích chọn.

• Hiện Tab-Section: Cho phép hiển thị (tích chọn) hoặc ẩn (không tích chọn) Tab-Section và toàn bộ thành phần con chứa trong nó.

• Padding: Là khoảng cách nội bộ giữa các thành phần con và Border của Tab-Section giúp tạo không gian để các thành phần không dính sát vào viền. Có thể thiết lập 4 phía trên, dưới, trái, phải và giá trị khoảng cách được tính bằng pixel (px).

• Khoảng cách giữa các group: Khoảng cách giữa các Group trong Tab-Section, giá trị được tính bằng pixel (px).

• Số lượng tab: Số lượng các tab của Tab-Section.

• Hiển thị gạch dưới: Hiển thị đường gạch dưới ngăn cách thanh chuyển tab với các thành phần con của Tab-Section.

• Danh sách tab: Danh sách chi tiết các tab của Tab-Section, người dùng có thể thay đổi vị trí các tab bằng các kéo thả biểu tượng ⁝⁝ nằm trước tên tab. Người dùng có thể nhấn vào tên của một tab để mở giao diện cấu hình tab đó.

  

  • Tên: Tên của tab.
  • Slug: Slug của tab, dùng trong các tính năng cần truy xuất thông tin của giao diện.
  • Hiện Tab: Cho phép hiển thị (tích chọn) hoặc ẩn (không tích chọn) tab và toàn bộ thành phần con chứa trong nó.

Lưu ý: Tab-Section hiển thị trên giao diện nếu tất cả Container chứa Tab-Section đang được phép hiển thị và thỏa mãn một trong hai điều kiện sau:

• Cấu hình đang tích chọn Hiện Tab-Section và không thỏa mãn điều kiện ẩn Tab-section theo quy tắc giao diện nếu có.
• Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.

Giao diện Group

Group có thể chứa nhiều trường và một số giao diện chức năng khác như Button group, Lộ trình,...

• Tên: Tên của Group.

• Hiển thị tên trên giao diện: Hiển thị tên của Group trên giao diện người dùng cuối.

• Slug: Slug của Group, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.

• Hiện Border: Hiển thị đường viền bao quanh Group nếu tích chọn.

• Hiện Group: Cho phép hiển thị (tích chọn) hoặc ẩn (không tích chọn) Group và toàn bộ thành phần con chứa trong nó.

• Cho phép thu gọn Group: Nếu tích chọn, hiển thị nút cho phép mở rộng/thu nhỏ Group, Group sẽ trở thành Expandable Group.

  

• Padding: Là khoảng cách nội bộ giữa các thành phần con và Border của Group giúp tạo không gian để các thành phần không dính sát vào viền. Có thể thiết lập 4 phía trên, dưới, trái, phải và giá trị khoảng cách được tính bằng pixel (px).

• Khoảng cách giữa các trường: Khoảng cách giữa các trường trong Group, giá trị được tính bằng pixel (px).

• Định dạng cột: Chia Group thành 1 hoặc 2 cột.

• Thứ tự Tab-key: Thứ tự chuyển giao diện nhập/chọn thông tin khi người dùng cuối nhấn phím Tab từ bàn phím máy tính.

Lưu ý: Group hiển thị trên giao diện nếu tất cả Container chứa Group đang được phép hiển thị và thỏa mãn một trong hai điều kiện sau:

• Cấu hình đang tích chọn Hiện Group và không thỏa mãn điều kiện ẩn Group theo quy tắc giao diện nếu có.
• Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.

Giao diện Display Box

Giao diện cho phép chèn các đoạn mã lập trình để hiển thị nội dung theo nhu cầu cụ thể, hỗ trợ hiển thị dữ liệu động và tương tác cũng như nhúng nội dung từ các nguồn bên ngoài.

Display Box chỉ được phép nằm trong Group.

• Tên: Tên của Display Box.
• Slug: Slug của Display Box, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.

• Type: Loại ngôn ngữ lập trình dùng hiển thị trên giao diện Display Box, có 4 loại:

  • TEXT
  • REACT
  • HTML
  • MARK DOWN
• Code: Trình chỉnh sửa mã lập trình.

Lưu ý: Display Box hiển thị trên giao diện nếu tất cả Container chứa Display Box đang được phép hiển thị và thỏa mãn một trong hai điều kiện sau:

• Không thỏa mãn điều kiện ẩn Display-box theo quy tắc giao diện nếu có.
• Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.

Giao diện Button group

Cho phép người dùng hiển thị các nút (Button) chức năng thực hiện các hành động đã được cấu hình trong Hành động & Chuỗi hành động của đối tượng. Tham khảo Hành động & Chuỗi hành động tại đây.

Button group chỉ được phép nằm trong Group.

• Slug: Slug của Button group, dùng trong các tính năng cần truy xuất thông tin của giao diện hoặc quy tắc giao diện.

• Vị trí hiển thị button:

  • Căn trái: Các button được hiển thị ở góc trái trong Button group.
  • Căn phải: Các button được hiển thị ở góc phải trong Button group
  • Căn giữa: Các button được hiển thị nằm giữa trong Button group

• Gộp các button thành menu: Cho phép gộp các button thành một menu. Người dùng cuối có thể nhấn vào menu đó để hiển thị các button đã gộp.

• Menu: Chọn menu sẽ được hiển thị nếu gộp các button thành menu.

• Khoảng cách giữa các thành phần con: Khoảng cách giữa các button trong Button group.

• Thêm button: Thêm một button vào Button group, cấu hình button bằng cách nhấn vào biểu tượng ✏️.

  

  • Kiểu button: Kiểu hiển thị của button.

  • Kích thước: Kích thước của button.

  • Sử dụng icon: Cho phép hiển thị icon trong button.

    

    • Chỉ hiển thị icon: Chỉ hiển thị icon trên button và ẩn tên button.
    • Icon cho chế độ sáng: Icon hiển thị khi WS ở chế độ sáng.
    • Icon cho chế độ tối: Icon hiển thị khi WS ở chế độ tối.

Lưu ý:

• Button group hiển thị trên giao diện nếu tất cả Container chứa Button group đang được phép hiển thị và thỏa mãn một trong hai điều kiện sau:

  • Không thỏa mãn điều kiện ẩn Button-group theo quy tắc giao diện nếu có.
  • Điều kiện hiển thị trong quy tắc giao diện, tham khảo quy tắc giao diện tại đây.
• Button chỉ hiển thị trong Button group nếu Button group chứa nó được phép hiển thị trên giao diện đồng thời trạng thái của hành động được cấu hình trong Hành động & Chuỗi hành động là Đang hoạt động.

Giao diện Lộ trình

Giao diện hiển thị thanh tiến trình cho lộ trình đã được cấu hình trong Quản lý Lộ trình. Tham khảo cấu hình Quản lý lộ trình tại đây.

Lộ trình chỉ được phép cấu hình trong màn hình Xem, Sửa bản ghi.

• Slug: Slug của Lộ trình, dùng trong các tính năng cần truy xuất thông tin của giao diện.

Giao diện hiển thị Lộ trình trên giao diện người dùng cuối:

Giao diện Smart paste

Giao diện hiển thị cho tính năng Copy/dán bằng AI và Làm giàu dữ liệu bằng AI. Cho phép người dùng tải lên tệp tin hoặc sử dụng nội dung trong bộ nhớ đệm để Cogover AI truy xuất và xử lý dữ liệu.

Tham khảo cấu hình Copy/dán bằng AI tại đây và Làm giàu dữ liệu bằng AI tại đây.

• Slug: Slug của Smart paste, dùng trong các tính năng cần truy xuất thông tin của giao diện.

Giao diện hiển thị Smart paste trên giao diện người dùng cuối: