Giới thiệu về Trường, Widget và Giao diện

Trong ứng dụng Trình tùy chỉnh Viindoo, có ba khái niệm về: trường, kiểu hiển thị và giao diện mà chúng ta sẽ cần phân biệt:

  • Trường: Trường đại diện cho các thành phần dữ liệu hoặc thuộc tính của một đối tượng. Các trường xác định cấu trúc và nội dung của bản ghi trong một bảng cơ sở dữ liệu. Với Viindoo Customizer bạn được phép tạo và sửa đổi các trường để tùy chỉnh ứng dụng của bạn theo nhu cầu cụ thể.

  • Widgets: Widget là các kiểu hiển thị để người dùng tương tác với dữ liệu tại các trường. Chúng cung cấp những cách khác nhau để trình bày và thao tác dữ liệu theo cách thân thiện với người dùng. Tùy từng tình huống hoặc lĩnh vực khác nhau, bạn có thể cấu hình các kiểu hiển thị khác nhau để nâng cao trải nghiệm người dùng và đảm bảo rằng dữ liệu được ghi lại chính xác.

  • Giao diện: Giao diện xác định cách hiển thị và sắp xếp dữ liệu trong ứng dụng. Giao diện là cách trình bày trực quan của một hoặc nhiều bản ghi cho phép người dùng để tương tác với dữ liệu.

Module cần cài đặt

Để thao tác theo hướng dẫn trong bài viết, bạn cần cài đặt ứng dụng sau:

Trường và các Kiểu hiển thị (Widget)

Viindoo Customizer hỗ trợ nhiều loại kiểu trường khác nhau. Nó sẽ giúp bạn linh hoạt để tạo các giao diện phù hợp nhằm cải thiện năng suất và trải nghiệm của người dùng.

Các trường cơ bản và widget của chúng

Văn bản nhiều dòng và Văn bản

  • Văn bản nhiều dòng: Trường này được sử dụng cho văn bản dài chứa bất kỳ loại ký tự nào. Các Kiểu hiển thị được hỗ trợ bao gồm:

    • Văn bản nhiều dòng (text) and Văn bản nhiều dòng (list.text): Hiển thị dữ liệu theo kiểu đoạn văn bản nhiều dòng.

    • Văn bản nhiều dòng (text_emojis): Hiển thị dữ liệu theo kiểu đoạn văn bản và có thể lựa chọn thêm các biểu tượng cảm xúc.

    • Sao chép văn bản nhiều dòng: Người dùng có thể sao chép giá trị của trường này bằng cách ấn vào nút Sao chép.

    • Văn bản nhiều dòng (sms_widget): Dữ liệu được hiển thị theo dạng văn bản, tin nhắn. Nếu kích hoạt tính năng gửi SMS thì có thể gửi tin nhắn trực tiếp từ giao diện này trên Viindoo.

Trường văn bản và kiểu hiển thị
  • Văn bản: Trường này được sử dụng cho văn bản ngắn chứa bất kỳ loại ký tự nào. Các Kiểu hiển thị được hỗ trợ bao gồm:

    • Văn bản: Hiển thị dữ liệu dạng văn bản.

    • Huy hiệu: Hiển thị dữ liệu dạng huy hiệu có đường cong bao quanh, tương tự như thẻ.

    • ColorField: Hiển thị dữ liệu dạng màu sắc.

    • Hình ảnh: Bạn có thể chọn và lưu trữ hình ảnh tại trường này.

    • Điện thoại: Giá trị được điền vào trường này sẽ hiển thị ở dạng số có thể ấn vào để gọi điện hoặc gửi tin nhắn SMS.

    • Liên kết (URL): Giá trị được điền vào trường này sẽ hiển thị thành dạng đường link và có thể truy cập trực tiếp vào đường link này.

    • Sao chép văn bản vào Clipboard: Người dùng có thể sao chép giá trị bằng cách ấn vào nút Sao chép.

Trường văn bản và kiểu hiển thị

HTML

  • HTML: Trường dạng HTML được sử dụng để lưu các văn bản mà có thể được chỉnh sửa bằng trình chỉnh sửa HTML. Các widget được hỗ trợ bao gồm:

    • HTML;

    • Văn bản nhiều dòng (text);

    • SMS Widget;

Trường kiểu HTML và kiểu hiển thị

Số thực (float) và số nguyên

  • Số thực (float): Nó có khả năng biểu diễn cả số nguyên và số thập phân. Các widget được hỗ trợ bao gồm:

    • Float: Kiểu hiển thị mặc định của trường dạng Float (số thực). Giá trị của nó được hiển thị dưới dạng số thập phân.

    • FloatToggle: Giá trị được hiển thị dưới dạng số thập phân, bạn có thể thay đổi giá trị bằng cách nhấn nút.

    • Thời gian (float_time): Giá trị được hiển thị dưới dạng định dạng thời gian hh:mm với giới hạn 59 phút.

    • Tiền tệ (monetary): Giá trị được hiển thị dưới dạng tiền tệ có định dạng thập phân.

    • Phần trăm (percentage): Giá trị được hiển thị dưới dạng phần trăm. Ví dụ 7 sẽ hiển thị là 700%.

    • Thanh tiến trình (progress bar): Giá trị được hiển thị dưới dạng định dạng thanh tiến trình.

Trường kiểu float và widget được hỗ trợ
  • Số nguyên: Đây là loại trường dữ liệu dùng để lưu trữ số nguyên. Nó đại diện cho một giá trị số không có phần thập phân. Các widget đã được hỗ trợ bao gồm:

    • Số nguyên (integer): Giá trị được hiển thị dưới dạng tiền tệ có định dạng thập phân.

    • Color: Giá trị được hiển thị dưới dạng màu sắc.

    • PercentPie: Giá trị được hiển thị dưới dạng hình tròn với tỷ lệ phần trăm.

    • Phần trăm (percentage): Giá trị được hiển thị dưới dạng phần trăm. Ví dụ 7 sẽ hiển thị là 700%.

    • Thanh tiến trình (progress bar): Giá trị được hiển thị dưới dạng định dạng thanh tiến trình.

Trường kiểu số nguyên và các widget được hỗ  trợ

Ngày và Ngày giờ

  • Ngày: Nó được thiết kế để lưu giữ các ngày theo định dạng ngày, tháng và năm. Ví dụ: 2024-03-09. Các widget hỗ trợ bao gồm:

    • Ngày: Cho phép người dùng chọn giá trị ngày.

    • DateRange: Nó cho phép người dùng chỉ định ngày bắt đầu và ngày kết thúc, xác địnhmột phạm vi bao gồm một khoảng thời gian.

Trường kiểu Ngày và widget được hỗ trợ
  • Ngày giờ: Nó được sử dụng để lưu trữ và thể hiện cả ngày và giờ cùng nhau. Nó kết hợp các thành phần của ngày (ngày, tháng và năm) với các thành phần về thời gian (giờ, phút, giây). Ví dụ: 2024-03-09 12:15:00. Các widget đã hỗ trợ bao gồm:

    • Ngày & giờ (datetime): Cho phép người dùng chọn giá trị ngày giờ nhất định.

    • DateRange: Nó cho phép người dùng chỉ định ngày bắt đầu và ngày kết thúc, xác địnhmột phạm vi bao gồm một khoảng thời gian.

    • Ngày: Cho phép người dùng chọn giá trị ngày.

    • Ngày & giờ (countup_timer): Nó được hiển thị kiểu bộ đếm theo thời gian được tính từ ngày đã chọn.

Trường kiểu ngày giờ và các widget hỗ trợ

Hộp kiểm

  • Hộp kiểm: Trường boolean được sử dụng khi một giá trị cần phải lựa chọn đúng hoặc sai. Các widget đã hỗ trợ bao gồm:

    • Hộp kiểm (boolean): Giá trị của trường sẽ được hiển thị dưới dạng nút hộp kiểm.

    • Chuyển đổi (boolean_toggle): Giá trị của trường sẽ được hiển thị dưới dạng nút chuyển đổi.

    • Yêu thích (boolean_favorite): Giá trị của trường sẽ được hiển thị dưới dạng nút sao yêu thích.

Trường kiểu hộp kiểm và các widget hỗ trợ

Lựa chọn

  • Lựa chọn: Trường lựa chọn đề cập đến loại trường cho phép người dùng có thể chọn một hoặc một số giá trị trong danh sách tùy chọn. Các widget đã hỗ trợ bao gồm:

    • Huy hiệu (selection_badges): Các giá trị tùy chọn có thể lựa chọn sẽ hiển thị dưới dạng huy hiệu.

    • Radio: Tùy chọn có thể chọn sẽ hiển thị dưới dạng loại radio và bạn có thể đánh dấu vào các tùy chọn này.

    • Timezone: Các lựa chọn sẽ hiển thị kèm theo biểu tượng múi giờ.

    • Lựa chọn: Kiểu thả xuống thông thường của danh sách tùy chọn.

    • Mức độ ưu tiên (priority): Nó sẽ hiển thị dưới dạng ngôi sao diễn tả mức độ ưu tiên.

    • Trạng thái (statusbar): Danh sách tùy chọn sẽ được hiển thị dưới dạng tiến trình trạng thái.

Trường kiểu Lựa chọn và các widget được hỗ trợ

Tham chiếu

  • Tham chiếu (reference): Đề cập đến loại trường cho phép bạn tạo tham chiếu hoặc liên kết tới một bản ghi khác trong hệ thống. Nó cho phép bạn thiết lập mối quan hệ giữa các bản ghi khác nhau trong cơ sở dữ liệu.

Trường kiểu tham chiếu

Nhị phân

  • Tập tin: Đề cập đến loại trường cho phép bạn lưu trữ dữ liệu dạng nhị phân, chẳng hạn như hình ảnh, tài liệu hoặc bất kỳ loại tệp nào khác trong cơ sở dữ liệu. Các widget đã được hỗ trợ bao gồm:

    • Tập tin (Tệp): Các tập tin sẽ được hiển thị dưới dạng tệp nhị phân.

    • Hình ảnh: Các tập tin sẽ được hiển thị dướ dạng hình ảnh.

    • Trình xem PDF: Các tập tin sẽ được hiển thị ngay trên màn hình trình xem.

Trường kiểu nhị phân và widget được hỗ trợ

Tiền tệ

  • Tiền tệ: Đề cập đến loại trường được sử dụng để thể hiện các giá trị tiền tệ hoặc số tiền bằng một loại tiền tệ cụ thể.

Các trường nâng cao và các widget được hỗ trợ

Ba loại trường nâng cao có thể được sử dụng trên Trình tùy chỉnh Viindoo để liên kết một mô hình với các mô hình khác:

  • Many2one,

  • One2many,

  • Many2many.

Vậy mô hình là gì? Mô hình đề cập đến một lớp đại diện cho một thực thể hoặc khái niệm trong hệ thống. Nó giống như một bản thiết kế chi tiết để tạo và thao tác các bản ghi trong cơ sở dữ liệu. Mỗi mô hình đại diện cho một bảng trong cơ sở dữ liệu và đóng gói các trường, phương thức và hành vi liên quan đến thực thể đó. Các mô hình xác định cấu trúc của dữ liệu và các mối quan hệ của nó với các mô hình khác và cung cấp các chức năng như xác thực dữ liệu,kiểm soát truy cập và logic vận hành.

Many2one and Many2one_reference

Trường Many2one đề cập đến loại trường thiết lập mối quan hệ nhiều-một giữa hai mô hình. Nó cho phép bạn tạo liên kết từ mô hình đến một bản ghi trong một mô hình liên quan khác. Từ trường này, bạn có thể đi thẳng đến chi tiết của bản ghi đó. Các tiện ích được hỗ trợ bao gồm:

  • Many2one: Đây là widget mặc định của trường kiểu Many2one. Nó sẽ được hiển thị dưới dạng danh sách thả xuống và bạn có thể chọn hoặc tạo hoặc chỉnh sửa bản ghi liên quan này.

Trường many2one và widget được hỗ trợ

One2many

Trường One2many đề cập đến loại trường thiết lập mối quan hệ một-nhiều giữa hai mô hình. Nó cho phép bạn tạo liên kết từ một mô hình với nhiều bản ghi trong một mô hình liên quan khác.

ví dụ:

Trường one2many

Ghi chú

Để tạo trường one2many trong mô hình cụ thể, bạn phải tạo trường many2one trong mô hình liên quan và thiết lập mối quan hệ ngược lại. Ví dụ: Bạn cần tạo trường one2many Danh bạ tại một mô hình X mới thì bạn cần tạo một trường many2one tại mô hình 'res.partner'.

Các widget được hỗ trợ bao gồm:

  • One2many: Đây là widget mặc định của trường One2many. Nó sẽ được hiển thị dưới dạng cửa sổ bật lên và bạn chỉ có thể tạo hoặc chỉnh sửa bản ghi liên quan này.

Trường one2many và các widget hỗ trợ
  • Many2many: Nó sẽ được hiển thị dưới dạng cửa sổ bật lên và bạn có thể chọn nhiều bản ghi một lúc hoặc tạo một bản ghi mới.

Trường one2many và các widget hỗ trợ

Many2many

Trường Many2many là loại trường phổ biến được sử dụng để thiết lập mối quan hệ nhiều-nhiều giữa hai mô hình. Nó cho phép bạn tạo mối quan hệ trong đó nhiều bản ghi từ một mô hình có thể được liên kết với nhiều bản ghi từmột mô hình khác.

Trường many2many và các widget được hỗ trợ

Giao diện

Giao diện là một phần thiết yếu của thiết kế giao diện người dùng (UI) và nó xác định cách mà dữ liệu được hiển thị, sắp xếp và tương tác trong hệ thống. Giao diện xác định cấu trúc, bố cục và hình thức của bản ghi và các trường của chúngtrong giao diện. Trong Trình tùy chỉnh Viindoo, khi tạo mô hình mới, bạn có thể được hỗ trợ với các giao diện: Giao diện danh sách, Giao diện biểu mẫu, Giao diện biểu đồ và Giao diện Pivot.

  • Giao diện danh sách: Nó trình bày các bản ghi ở định dạng bảng, tương tự như bảng tính hoặc một danh sách. Giao diện danh sách thường được sử dụng để hiển thị nhiều bản ghi, đồng thời cho phép người dùng điều hướng và lọc dữ liệu hiệu quả.

Giao diện danh sách
  • Giao diện biểu mẫu: Nó được sử dụng để hiển thị và chỉnh sửa các bản ghi riêng lẻ. Mỗi trường của bản ghi được thể hiện bằng một widget đầu vào trong chế độ xem biểu mẫu. Người dùng có thể nhập hoặc sửa đổi dữ liệu trực tiếp trong chế độ xem biểu mẫu.

Giao diện biểu mẫu
  • Giao diện biểu đồ: Nó trình bày dữ liệu dưới dạng biểu đồ hoặc đồ thị đồ họa, cho phép người dùng trực quan hóa và phân tích xu hướng dữ liệu, so sánh hoặc phân phối.

Giao diện biểu đồ
  • Giao diện Pivot: Nó cung cấp chế độ xem phân tích dữ liệu thông qua các bảng. Người dùng có thể tùy chỉnh dữ liệu hàng và cột để hiển thị dữ liệu dùng để phân tích và tóm tắt thông tin.

Giao diện Pivot