Bài 05: Giao diện người dùng (User Interface)
Giao diện người dùng (User Interface): Giao diện người dùng là phần mà người sử dụng sẽ gặp trực tiếp khi sử dụng ứng dụng, bao gồm cả các nút, menu, hình ảnh và các thành phần khác.
Ứng dụng AppSheet cung cấp cho người dùng nhiều loại view khác nhau để xem và sử dụng dữ liệu trong ứng dụng của họ. Các loại view bao gồm: Calendar view, Card view, Chart view, Dashboard view, Deck and table view, Detail view, Form view, Gallery view, Map view và Onboarding view.
Ngoài ra, người dùng có thể quản lý cài đặt các view như tạo, cấu hình, xem trước, đổi tên, di chuyển, sao chép và xóa view.
Cần lưu ý rằng các view không hoạt động độc lập, mà nằm trong một hệ thống vận hành chung với AppSheet bao gồm Automation và Action. Trong đó, view sẽ gắn liền với các action giúp người dùng tương tác hiệu quả hơn.
💡 Appsheet có hỗ trợ một số loại hiển thị nhất định, do việc hiển thị quá nhiều loại view sẽ khiến người dùng khó tiếp cận với Appsheet trong quá trình làm quen với Appsheet.
VỊ TRÍ HIỂN THỊ VIEW
Appsheet hỗ trợ nhiều vị trí hiển thị trong đó 5 vị trí đầu tiên sẽ là hiển thị ở PRIMARY NAVIGATION
Menu sẽ là các view hiển thị ở menu bên cạnh trái
Ref là cài dặt hide menu view đi, chúng ta có thể mở view này bằng action.
CÁC NHÓM VIEW TRONG APPSHEET
Các loại view trong App sheet
Trong Appsheet có nhiều loại view khác nhau nhưng chúng ta có thể chia ra hai nhóm view, view hệ thống và view do người dùng tạo tạo ra.
View hệ thống bao gồm: View Form, View Detail, View Inline. Những view này sẽ tự động sinh ra và mất đi trong quá trình tạo App, và người dùng sẽ không thể xóa đi chúng. Nếu người dùng xóa table chứa view đó, thì view đó sẽ biến mất. | View do người dùng tự tạo ra có rất nhiều loại và người dùng có toàn quyền chỉnh sửa và xóa chúng. |
Các loại view chi tiết
AppsSheet cung cấp một số loại view khác nhau cho người dùng để xem và sử dụng dữ liệu trong ứng dụng của họ. Một số loại view chính bao gồm:
Calendar view: | Hiển thị dữ liệu theo dạng lịch, giúp người dùng dễ dàng xem các sự kiện trong tương lai hoặc quá khứ. |
|
Card view: | Hiển thị dữ liệu trong dạng thẻ, giúp người dùng dễ dàng xem thông tin chi tiết của mỗi bản ghi. Card view cũng dùng để tạo các menu hết sức hiệu quả |
|
Chart view: | Hiển thị dữ liệu trong dạng biểu đồ, giúp người dùng dễ dàng thấy sự biến động của dữ liệu trong thời gian. |
|
|
Dashboard view | Hiển thị dữ liệu trong dạng bảng điều khiển, giúp người dùng có thể xem tất cả thông tin quan trọng trên một trang. |
|
Deck and table view: | Hiển thị dữ liệu trong dạng bảng, giúp người dùng dễ dàng xem và sắp xếp dữ liệu theo yêu cầu. |
|
|
Detail view: | Hiển thị chi tiết của mỗi bản ghi, giúp người dùng xem thông tin chi tiết của mỗi bản ghi. |
|
Form view: | Hiển thị một mẫu để người dùng nhập hoặc chỉnh sửa dữ liệu. |
|
Gallery view: | Hiển thị dữ liệu trong dạng thư viện hình ảnh, giúp người dùng dễ dàng xem và quản lý hình ảnh. |
|
Map view: | Hiển thị dữ liệu trên bản đồ, giúp người dùng xem vị trí của các địa điểm liên quan đến dữ liệu. |
|
Onboarding view: | Hiển thị một chuỗi các màn hình giúp người dùng hướng dẫn cách sử dụng ứng dụng. |
|
CÁC CÀI ĐẶT TRÊN mỗi view
CÁC CÀI ĐẶT CẦN CHÚ Ý
Sort by | Sort by là một tính năng sắp xếp trong Appsheet, giúp chúng ta hiển thị thông tin một cách tốt nhất có thể. Mặc định trong Appsheet, dòng dữ liệu mới nhất sẽ được hiển thị ở dưới cùng, gây khó khăn trong quá trình truy cập và hiển thị thông tin. Để dễ sử dụng hơn, chúng ta nên sử dụng sortby với cột _Rownumber theo thứ tự giảm dần.
Nếu bạn chưa biết _rownumber là gì, đó là một cột do Appsheet tự động sinh ra để đánh số dòng.
|
Group by | **Group by** là tính năng cho phép bạn nhóm các dòng dữ liệu với nhau dựa trên giá trị của một hoặc nhiều cột, và hiển thị một đại diện cho mỗi nhóm. Các đại diện này bao gồm: số lượng dòng trong nhóm, giá trị trung bình của một cột trong nhóm, giá trị lớn nhất hoặc nhỏ nhất trong nhóm.
Để sử dụng tính năng này, bạn có thể thêm một hoặc nhiều cột vào phần Group by của view. Sau đó, bạn có thể định cấu hình hiển thị như thế nào cho mỗi nhóm trong phần Group aggregate.
Ví dụ, nếu bạn có một bảng chứa thông tin về các sinh viên, bạn có thể sử dụng tính năng **Group by** để nhóm các sinh viên theo lớp học và hiển thị số lượng sinh viên trong mỗi lớp.
**Group by** là tính năng cho phép người dùng nhóm các dòng dữ liệu với nhau dựa trên giá trị của một hoặc nhiều cột, và hiển thị một đại diện cho mỗi nhóm. Các đại diện này bao gồm: số lượng dòng trong nhóm, giá trị trung bình của một cột trong nhóm, giá trị lớn nhất hoặc nhỏ nhất trong nhóm.
|
Group aggregate. | Để sử dụng tính năng này, người dùng có thể thêm một hoặc nhiều cột vào phần Group by của view. Sau đó, họ có thể định cấu hình hiển thị như thế nào cho mỗi nhóm trong phần Group aggregate.
Ví dụ, nếu người dùng có một bảng chứa thông tin về các sinh viên, họ có thể sử dụng tính năng **Group by** để nhóm các sinh viên theo lớp học và hiển thị số lượng sinh viên trong mỗi lớp.
|
|
|
Column order | Column order là tính năng cho phép người dùng xác định thứ tự hiển thị của các cột trong view. Điều này rất hữu ích khi người dùng muốn tạo ra một view với sự sắp xếp cột phù hợp với nhu cầu của họ, giúp cho việc hiển thị dữ liệu trở nên dễ dàng và tiện lợi hơn. Lưu ý: Khi sử dụng column order nên sử dụng đồng nhất giữa các view detail và form
|
Column width | Column width là tính năng cho phép người dùng xác định chiều rộng của các cột trong view. Tính năng này hữu ích khi người dùng muốn điều chỉnh chiều rộng của các cột để hiển thị dữ liệu phù hợp với nhu cầu của mình.
|
Enable QuickEdit (beta) | Tính năng Enable QuickEdit (beta) được cung cấp trong Appsheet nhằm giúp người dùng có thể chỉnh sửa nhanh chóng các giá trị trong bảng dữ liệu, mà không cần phải mở view chi tiết để sửa từng bản ghi một. Khi bật tính năng này, người dùng có thể chỉnh sửa giá trị trong bảng dữ liệu trực tiếp trên view và lưu lại những thay đổi đó ngay lập tức.
Lưu ý: Tính năng này vẫn đang trong giai đoạn beta và có thể gặp phải một số lỗi khi sử dụng. Và tính năng này không cài đặt được bảo mật và giờ hạn thời gian chỉnh sửa. |
Icon | Icon là phần cài đặt các icon hiển thị lên cho người dùng, hãy tìm các icon phù hợp nhất để hiển thị các icon. Việc chọn icon phải tuân thủ các nguyên tắc sau: Nếu những view nào không hiển thị lên (view ref) nên cài đặt icon là hide (-) để sau này dễ dàng nhận biết hơn. |
Display name | Display name là tính năng cho phép người dùng thay đổi tên hiển thị cho các cột trong view mà không ảnh hưởng đến tên của các cột trong bảng dữ liệu. Điều này rất hữu ích khi người dùng muốn sử dụng tên khác nhau cho các cột trong view để giúp cho việc hiển thị dữ liệu trở nên dễ dàng và thuận tiện hơn. |
Show if | Show if là tính năng trong Appsheet cho phép người dùng hiển thị hoặc ẩn các cột, nút hoặc phần tử tùy thuộc vào một số điều kiện. Điều này rất hữu ích khi người dùng muốn ẩn hoặc hiển thị các phần tử trong ứng dụng tùy thuộc vào ngữ cảnh hoặc trạng thái của ứng dụng. |
Behavior | Hành động sự kiện là một tính năng mạnh mẽ của AppSheet cho phép bạn kích hoạt các hành động dựa trên tương tác của người dùng với ứng dụng của bạn. Ví dụ: bạn có thể tạo một hành động sự kiện gửi email đến người dùng khi họ hoàn thành một biểu mẫu nhất định. Bạn cũng có thể sử dụng các hành động sự kiện để cập nhật dữ liệu trong ứng dụng của mình hoặc chạy tập lệnh tùy chỉnh. |
FORMAT RULE
Format Rules cho phép bạn tùy chỉnh các biểu tượng, văn bản và nhiều hơn thế nữa. Điều này giúp bạn làm cho ứng dụng của mình trở nên độc đáo hơn. Bạn cũng có thể tạo các quy tắc định dạng khác nhau cho mỗi hàng, tạo định dạng khác nhau cho các dữ liệu khác nhau.
Tạo Format rules
Bước 1: Đi đến App App icon > Format Rules và nhấp vào + trong tiêu đề Format rules. |
|
Các cài đặt trong format rules
Property | Description |
Rule name | Tên của quy tắc định dạng. (nên để tên của condition )
|
For this data | Bảng mà quy tắc áp dụng cho. |
If this condition is true | Điều kiện phải được đáp ứng để quy tắc định dạng có hiệu lực. Nếu bạn để trống điều này, quy tắc áp dụng cho tất cả các hàng trong bảng. Tuy nhiên, bạn có thể chỉ định một công thức đơn giản như [Country] = "USA" hoặc một công thức phức tạp hơn cho các hành vi phong phú hơn.
Đối với cá loại trạng thái nên đánh số cho các loại trạng thái và đặt điều kiện như sauCONTAINS([trang_thai],1) để hiển thị cho condition vì có thể trạng thái có thể thay đổiVí dụ cho trạng thái 1. Đang tạo 2. Đã tạo 3. Đã làm |
Format these columns and actions | Các cột trong bảng mà bạn muốn định dạng. Giữ phím Ctrl để chọn nhiều mục. |
Màu sắc sử dụng trong Appsheet
Trong Appsheet, chúng ta có thể sử dụng bất kỳ màu sắc nào để định dạng dữ liệu, tuy nhiên, nên hạn chế sử dụng quá nhiều màu sắc trong App để tránh làm cho giao diện trở nên rối mắt và khó tập trung. Dưới đây là một số lời khuyên để chọn màu sắc:
Lời khuyên | Diễn giải |
Sử dụng màu sắc có mục đích | Màu sắc nên được sử dụng để giúp người dùng hiểu hơn về thông tin đang được hiển thị. Ví dụ, bạn có thể sử dụng màu đỏ để biểu thị lỗi hoặc vấn đề cần chú ý, trong khi màu xanh lá cây có thể biểu thị một quy trình hoạt động tốt.
|
Giữ cho nó đơn giản | Hạn chế số lượng màu sắc khác nhau trên một màn hình. Nếu có quá nhiều màu sắc, giao diện có thể trở nên rối rắm và khó nhìn. |
Sử dụng khoảng 4-5 màu trong app | Trong một ứng dụng hoặc một web không nên xài quá nhiều màu sắc, như vậy sẽ khiến cho người dùng bị rối mắt.
|
Chọn một bảng màu phù hợp | Một bảng màu phù hợp là cần thiết cho toàn bộ các app, tránh trường hợp các màu sắc từ app này sang app khác khác nhau. Như vậy thì việc người dùng sẽ hiểu được trạng thái của app. Tham khảo bảng màu phía dưới. |
