Cách tùy chỉnh giao diện ứng dụng (View) trong Appsheet

Nội dung được viết bởi Kim Thu

Giao diện người dùng (User Interface) đóng vai trò quan trọng trong trải nghiệm sử dụng ứng dụng với nút điều hướng đến menu, hình ảnh và các thành phần khác. Bài viết này sẽ hướng dẫn cách tùy chỉnh giao diện ứng dụng (View) trong nền tảng AppSheet. Cùng tìm hiểu ngay thôi!

Vai trò của cài đặt View trong Appsheet

Ứng dụng Google AppSheet mang đến người dùng nhiều loại view khác nhau để hiển thị và tương tác với dữ liệu trong ứng dụng của mình. 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ác cài đặt của view, bao gồm việc tạo mới, 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 cả cài đặt Action và Automation. Điều này giúp tối ưu hóa trải nghiệm người dùng thông qua việc kết hợp các hành động tương tác linh hoạt.

Các loại hiển thị (View Type) trong Appsheet

Khi tạo ứng dụng bằng AppSheet, có nhiều loại View khác nhau để người dùng có thể tương tác và xem dữ liệu trong ứng dụng của mình:

Calendar view: dữ liệu được hiển thị theo dạng lịch để dễ dàng xem các sự kiện trong tương lai hoặc quá khứ.

Calendar view trong Appsheet
Calendar view trong Appsheet

Deck và table view: Dữ liệu hiện thị ở dạng bảng để người dùng dễ dàng xem và sắp xếp dữ liệu theo yêu cầu.

Deck view trong Appsheet
Deck view trong Appsheet
table view trong Appsheet
table view trong Appsheet

Gallery view: dữ liệu được hiển thị ở dạng thư viện hình ảnh trên ứng dụng để dễ dàng xem và quản lý hình ảnh.

Gallery view trong Appsheet
Gallery view trong Appsheet

Detail view: Hiển thị chi tiết cho mỗi bản ghi

Detail view trong Appsheet
Detail view trong Appsheet

Map view: Dữ liệu hiển thị trên bản đồ để xem và đánh dấu vị trí các địa điểm liên quan đến dữ liệu.

Map view trong Appsheet
Map view trong Appsheet

Chart view: dữ liệu được hiển thị ở đồ giúp trực quan hóa sự biến động của số liệu theo thời gian.

Chart view trong Appsheet
Chart view trong Appsheet

Dashboard view: hiển thị dữ liệu ở dạng bảng điều khiển để người dùng có thể theo dõi tất cả thông tin quan trọng trên một trang.

Dashboard view trong Appsheet
Dashboard view trong Appsheet

Form view: hiển thị một mẫu thông tin để người dùng nhập vào dữ liệu.

Form view trong Appsheet
Form view trong Appsheet

Onboarding view: Hiển thị một chuỗi các trang trên màn hình dùng để hướng dẫn cách sử dụng ứng dụng.

Onboarding view trong Appsheet
Onboarding view trong Appsheet

Card view: Dữ liệu được hiển thị ở dạng thẻ để người dùng dễ theo dõi thông tin chi tiết của mỗi bản ghi. Card view cũng có thể dùng để tạo các menu cho ứng dụng.

Card view trong Appsheet
Card view trong Appsheet

Các cài đặt View trong Appsheet

Create a view (tạo một hiển thị):

Tại trình chỉnh sửa ứng dụng trên Appsheet, vào menu Views.

tạo một hiển thị cho ứng dụng
tạo một hiển thị cho ứng dụng

Tùy thuộc vào vị trí (position) mà bạn muốn tạo view trong ứng dụng, hãy nhấp vào biểu tượng dấu (+) thêm mới bên cạnh các mục Primary navigation (Điều hướng chính), Menu navigation (Điều hướng menu) hoặc Other views (Chế độ xem khác).

Các vị trí hiển thị của view
Các vị trí hiển thị của view

Sau đó nhập từ khóa tìm kiếm thêm mới view vào ô đề xuất hoặc bạn có thể tự tạo mới một view cho app bằng cách nhấp Create a new view.

tạo mới một view cho app
tạo mới một view cho app

Configure a view (Cấu hình một view)

Configure a view có nghĩa là điều chỉnh và thiết lập các thuộc tính, tính năng, và giao diện của một loại hiển thị (view) cụ thể trong một ứng dụng của AppSheet. Cấu hình chế độ xem bao gồm các cài đặt sau:

View details:

Phần này cho phép bạn xem và chỉnh sửa các thông tin chi tiết của một loại view cụ thể, bao gồm tên, mô tả, loại dữ liệu và các thiết lập khác.

mô tả View details
mô tả View details

View details bao gồm:

Cài đặt view

Mô tả

View name

Trường đặt tên cho view, và nó không được trùng lặp. 

Nếu tên của view không là duy nhất, Appsheet sẽ tự động thêm một số vào tên để phân biệt giữa các view có tên giống nhau.

For this data

Cài đặt chế độ xem hiện tại sẽ tham chiếu tới dữ liệu nào.

Bạn có thể chọn một bảng dữ liệu hoặc một phần trong bảng từ danh sách xổ xuống. Và tạo một phần mới với Use slices to filter your data.

Lưu ý: Tùy chọn này không có sẵn cho chế độ xem dashboard.

View type

Xác định kiểu hiển thị dữ liệu trên giao diện của ứng dụng với nhiều tùy chọn như chart, form, detail, map, table,... (như tôi vừa trình bày ở phần trên)

Với mỗi kiểu xem lại có các đặc điểm riêng và các cài đặt chế độ xem cho từng loại.

Position

Khi cài đặt View cho ứng dụng trên Appsheet, bạn có thể lựa chọn nhiều vị trí hiển thị như:

  • Primary navigation: được hiển thị để truy cập trong thanh điều hướng chính ở cuối màn hình dành cho ứng dụng (đối với thiết bị di động và máy tính bảng) và thanh điều hướng bên trái của ứng dụng (máy tính để bàn). Bạn có thể cài đặt vị trí thành first, next, middle, later, hoặc last theo ý muốn.
  • Menu navigation: Truy cập trong menu chính của ứng dụng. Cài đặt là menu
  • Other view: thường là view ẩn đi hoặc chỉ có thể xem khi nó được liên kết một cách tự động trong quá trình điều hướng qua dữ liệu. Cài đặt position thành ref.

View options

Đây là nơi bạn có thể cấu hình các tùy chọn và tính năng cho view đó. Điều này có thể bao gồm các cài đặt như sắp xếp, lọc, tìm kiếm, v.v. Tùy thuộc vào kiểu view bạn chọn mà View options sẽ hiển thị các tùy chọn khác nhau, tuy nhiên một số cài đặt cơ bản như sau:

mô tả View options
mô tả View options

Mô tả cài đặt View options:

Sort by

Tính năng này cho phép chúng ta sắp xếp thông tin một cách có logic để hiển thị dữ liệu một cách dễ dàng và rõ ràng hơn. 

Theo cài đặt mặc định, dòng dữ liệu mới nhất thường được đặt ở cuối, điều này có thể làm khó khăn trong việc tìm kiếm và hiển thị thông tin cần thiết. 

Bởi vậy, chúng ta nên sử dụng 'Sort by' với cột '_Rownumber' được sắp xếp theo thứ tự giảm dần.

Group byGroup by là tính năng giúp bạn tổ chức dữ liệu thành các nhóm dựa trên giá trị của một hoặc nhiều cột. Sau đó, nó hiển thị một số thông tin đại diện cho mỗi nhóm, như số lượng dòng, giá trị trung bình, hoặc giá trị lớn nhất/nhỏ nhất.
Group aggregate

Để sử dụng tính năng này, bạn chỉ cần thêm một hoặc nhiều cột vào phần "Group by" của view. Sau đó, bạn có thể tùy chỉnh cách hiển thị thông tin cho từng nhóm trong phần "Group aggregate."

Ví dụ, nếu bạn có một bảng chứa thông tin về 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.

Column order

Là tính năng cho phép người dùng tự thiết lập thứ tự xuất hiện của các cột trong giao diện. 

Lưu ý: Khi sử dụng column order, hãy đảm bảo sự nhất quán giữa các view detail và form.

Column widthColumn width là tính năng cho phép người dùng điều chỉnh độ rộng của các cột trong giao diện. 
Enable Quick Edit (beta)Tính năng này cho phép người dùng dễ dàng chỉnh sửa các giá trị trong bảng dữ liệu mà không cần mở từng bản ghi trong view chi tiết. Khi tính năng này được kích hoạt, người dùng có thể chỉnh sửa trực tiếp trên bảng dữ liệu và lưu lại những thay đổi ngay lập tức.

Display

Phần này cho phép bạn tùy chỉnh cách dữ liệu được hiển thị trong view, bao gồm tên hiển thị và các thiết lập trực quan khác:

Mô tả cài đặt Display
Mô tả cài đặt Display

Mô tả cài đặt Display:

Icon

Phần này cho phép bạn cấu hình biểu tượng để hiển thị cho người dùng. Hãy chọn các biểu tượng phù hợp nhất để thể hiện thông tin. Khi chọn biểu tượng, hãy tuân thủ các nguyên tắc sau:

  • Đồng nhất giữa các ứng dụng
  • Đơn giản và dễ nhận diện

Nếu có các view không cần hiển thị biểu tượng (như view tham chiếu), hãy cài đặt biểu tượng là "ẩn" (-) để dễ nhận biết sau này.

Display name

Chức năng "Display name" cho phép người dùng điều chỉnh tên được hiển thị của các cột trong giao diện mà không làm thay đổi tên thật của các cột trong dữ liệu gốc. 

Điều này hữu ích khi người dùng muốn sử dụng các tên khác nhau để làm cho việc hiển thị dữ liệu trở nên dễ dàng và tiện lợi hơn.

Show ifDùng để điều chỉnh việc hiển thị hoặc ẩn các cột, nút hoặc phần tử dựa trên điều kiện nào đó. Điều này rất hữu ích khi bạn muốn ẩn hoặc hiển thị các phần tử trong ứng dụng dựa trên ngữ cảnh hoặc trạng thái của ứng dụng.

Behavior (Hành vi)

Tính năng này cho phép bạn tự động thực hiện các tác vụ dựa trên tương tác của người dùng với ứng dụng. 

Cài đặt Behavior trong view
Cài đặt Behavior trong view

Ví dụ, bạn có thể thiết lập hành động để gửi email đến người dùng khi họ hoàn thành một biểu mẫu cụ thể. Hơn nữa, bạn cũng có thể sử dụng Behavior để cập nhật dữ liệu trong ứng dụng hoặc thực hiện các tác vụ tùy chỉnh khác.

Documentation

Phần này có nhiệm vụ cung cấp thông tin mô tả hỗ trợ liên quan đến cách sử dụng và tùy chỉnh view đó để giúp người dùng hiểu rõ hơn về cách tận dụng và cấu hình view một cách hiệu quả.

Cài đặt Documentation trong view
Cài đặt Documentation trong view

Rename a view (đổi tên view)

Tại menu View trong trình chỉnh sửa ứng dụng của Appsheet, chọn view mà bạn muốn đổi tên > Nhấn vào biểu tượng More.

đổi tên view
đổi tên view

Bấm vào Rename > Nhập lại tên view mà bạn muốn chỉnh sửa > Nhấn Enter

nhập tên mới cho view
nhập tên mới cho view

Lưu lại thay đổi với 2 tùy chọn sau:

Lưu lại thay đổi
Lưu lại thay đổi
  • Save: chỉ lưu lại thay đổi cài đặt của ứng dụng.
  • Save & verify data: Lưu ứng dụng và xác minh dữ liệu có thể chạy được không.

Chuyển một view sang một vị trí khác

Trong menu View của Appsheet, chọn view mà bạn muốn đổi tên > Nhấn vào biểu tượng More > chọn Move to sau đó chọn đến vị trí hiển thị mà bạn muốn chuyển view (Primary navigation, Menu navigation, or Other view)

Chuyển một view sang một vị trí khác
Chuyển một view sang một vị trí khác

Nhấn Save hoặc Save & verify data để lưu lại thay đổi.

Copy a view (Sao chép view)

Điều hướng đến phần view mà bạn muốn sao chép > chọn More > nhấn Duplicate.

Sao chép view
Sao chép view

Lưu lại thay đổi của ứng dụng.

Delete a view (Xóa view)

Trong tùy chọn More của view muốn xóa, nhấn vào Delete.

Xóa view trong Appsheet
Xóa view trong Appsheet

Add to favorites (Thêm chế độ xem vào mục yêu thích)

Nhấn vào biểu tượng More của view mà bạn muốn thêm vào mục yêu thích > Add to favorites.

Thêm chế độ xem vào mục yêu thích
Thêm chế độ xem vào mục yêu thích

Xóa chế độ xem khỏi mục ưa thích của bạn bằng cách nhấn vào biểu tượng X ở view hiển thị trong danh sách Mục ưa thích.

Xóa chế độ xem khỏi mục ưa thích
Xóa chế độ xem khỏi mục ưa thích

Format rules trong Appsheet

Format rules cho phép bạn điều chỉnh biểu tượng, văn bản, và nhiều tính năng khác.Bạn cũng có thể thiết lập các quy tắc định dạng riêng biệt cho từng hàng, tùy chỉnh định dạng dữ liệu theo cách riêng biệt.

Tạo Format rules mới:

Điều hướng đến menu Format rules trong Appsheet, nhấn vào biểu tượng dấu (+) Add Format ruleCreate a new format rule để thêm mới.

Tạo Format rules mới
Tạo Format rules mới

Các cài đặt trong format rules:

Rule name: đặt tên cho quy tắc định dạng (nên để tên của điều kiện)

For this data: Bảng tham chiếu áp dụng cho quy tắc định dạng.

If this condition is true: Quy tắc định dạng chỉ có hiệu lực khi điều kiện được đáp ứng. Nếu bạn bỏ trống điều này, quy tắc sẽ áp dụng cho tất cả các hàng trong bảng. Tuy nhiên, bạn cũng 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 để định rõ hành vi phù hợp hơn.

Format these columns and actions: Chọn các cột trong bảng mà bạn muốn định dạng. Mẹo: nhấn và giữ phím Ctrl để chọn nhiều mục.

Các cài đặt trong format rules
Các cài đặt trong format rules

Cài đặt màu sắc cho ứng dụng trong Format rules:

Trong AppSheet, bạn có thể thiết lập bất kỳ màu sắc cho ứng dụng của mình. Tuy nhiên, bạn nên chọn màu sắc hài hòa, dễ nhìn và phù hợp với màu sắc mang đặc trưng riêng của thương hiệu bạn. Tránh sử dụng quá nhiều màu sắc làm giao diện rối mắt và khó tập trung. Một số mẹo chọn màu sắc cho ứng dụng như sau:

Lựa chọn màu sắc có mục đích: màu sắc được dùng giúp người dùng dễ dàng nhận biết thông tin đang được hiển thị trên ứng dụng. Chẳng hạn, màu đỏ thường được sử dụng để chỉ ra lỗi hoặc vấn đề cần lưu ý, trong khi màu xanh lá cây có thể thể hiện một quy trình hoạt động ổn định.

Lựa chọn màu sắc có mục đích cho ứng dụng
Lựa chọn màu sắc có mục đích cho ứng dụng

Cài đặt các màu sắc đơn giản: Bạn nên giới hạn số lượng màu sắc khác nhau trên một màn hình. Nếu bạn đặt quá nhiều màu sắc sẽ khiến giao diện trở nên phức tạp và khó nhìn. Nên dùng khoảng 4-5 màu trong ứng dụng thôi nhé.

Nên cài đặt các màu sắc đơn giản
Nên cài đặt các màu sắc đơn giản

Lựa chọn một bảng màu phù hợp: màu sắc nên phản ánh thương hiệu của bạn hay chủ đề đặc trưng của app để dễ phân biệt nếu bạn có nhiều app.

Tham khảo một số mã màu thường dùng trong Appsheet:

  • #EA4335 
  • #FF9900
  • #FBBC05
  • #4285F4
  • #34A853
  • #8A3AB9
một số mã màu thường dùng trong Appsheet 1
một số mã màu thường dùng trong Appsheet

hay 

  • #e53935 
  • #DA7A00
  • #C3AD00
  • #00B11F
  • #01CEBC
  • #037BE4
  • #FB0A82
  • #3C4043
một số mã màu thường dùng trong Appsheet 2
một số mã màu thường dùng trong Appsheet

Các cài đặt view khác trong Appsheet

Bạn có thể xem toàn bộ cài đặt khác liên quan đến view ở menu View > Setting

View type options:

Một số cài đặt view cần chú ý:

  • Right-align numeric columns: Hiển thị sổ căn lề bên phải.
Hiển thị sổ căn lề bên phải
Hiển thị sổ căn lề bên phải
  • Nested row display: Hiển thị số hàng con bên trong một hàng cha trong giao diện người dùng.
Hiển thị số hàng con bên trong một hàng cha
Hiển thị số hàng con bên trong một hàng cha
  • Show primary actions in dashboards: Hiển thị action lên dashboard.
Hiển thị action lên dashboard
Hiển thị action lên dashboard

Localization:

Cài đặt này dùng để dịch và cấu hình ứng dụng để nó hoạt động và hiển thị đúng với ngôn ngữ và văn hóa của người dùng cuối. Cách thực hiện cài đặt Localization cho ứng dụng trong AppSheet như sau:

cài đặt Localization cho ứng dụng
cài đặt Localization cho ứng dụng

Kết luận

Tùy chỉnh giao diện ứng dụng (view) trong AppSheet không chỉ là một tính năng, mà còn là một cách để định hình trải nghiệm người dùng tốt hơn. Qua việc điều chỉnh, sắp xếp và thêm các thành phần view, bạn có thể tối ưu hóa trải nghiệm ứng dụng cho người dùng.

Để trở thành chuyên gia trong lĩnh vực này, tham khảo ngay khóa học Làm chủ Google Appsheet từ cơ bản tới nâng cao tại Gitiho.com. 

Ngoài được học về cách tạo và tùy biến giao diện cho ứng dụng, bạn còn học được tất cả mọi thứ bao gồm cách làm việc với dữ liệu, tạo và sử dụng các action, hay tự động hóa quy trình Automation trên Appsheet,...

Đăng ký học ngay để bắt đầu xây dựng ứng dụng riêng cho doanh nghiệp của bạn mà không cần biết lập trình nhé! Chúc bạn thành công!

Google sheets - công cụ thay thế hoàn hảo cho Excel có lẽ đã quá quen thuộc với hầu hết chúng ta, đặc biệt là dân văn phòng. Nhưng bạn có biết, Google Sheets có khoảng 900 triệu người dùng, nhưng không phải ai cũng biết sử dụng thành thạo những tính năng hữu ích từ những cái cơ bản nhất.

Để giúp đỡ bạn trên hành trình chinh phục công cụ làm việc “quốc dân” này, Gitiho đã cho ra mắt khóa học Google Sheets từ Cơ bản đến Nâng cao, công cụ thay thế Excel chỉ với 45 bài giảng và 9 giờ học, bạn đã hòan toàn có thể làm chủ công cụ này.

Giờ đây, bạn hoàn toàn có thể tự tin phân tích và xử lý dữ liệu trên Google Sheet, lập bảng biểu, báo cáo trực quan và hơn thế nữa. Và chắc chắn rằng, bạn sẽ được sếp và đồng nghiệp “yêu” hơn đấy!

0/5 - (0 bình chọn)

0/5 - (0 bình chọn)

0 thảo luận

@ 2020 - Bản quyền của Công ty cổ phần công nghệ giáo dục Gitiho Việt Nam
Giấy chứng nhận Đăng ký doanh nghiệp số: 0109077145, cấp bởi Sở kế hoạch và đầu tư TP. Hà Nội
Giấy phép mạng xã hội số: 588, cấp bởi Bộ thông tin và truyền thông