Linh kiện VDS

VDS là viết tắt của Vtiger Design Systems, định nghĩa các thành phần HTML cốt lõi được cung cấp bởi nền tảng VTAP. VDS cung cấp các thành phần là các khối giao diện người dùng có thể tái sử dụng.

Bạn có thể sử dụng các thành phần để xây dựng và tùy chỉnh các ứng dụng của mình. Chúng có thể được sử dụng ở mọi nơi - trang tùy chỉnh, tiện ích con, cửa sổ bật lên hoặc bên trong các thành phần tùy chỉnh khác.

Dưới đây là danh sách các linh kiện mà VTAP cung cấp:

vds-văn bản

Sử dụng: Được sử dụng cho một hộp đầu vào. Cho phép người dùng nhập thông tin.

cú pháp:

Chi tiết thuộc tính:
tên để đặt bất kỳ tên nào cho phần tử đầu vào
bị vô hiệu hóa true/false, để vô hiệu hóa nó
giữ chỗ để hiển thị bất kỳ gợi ý cho đầu vào
kiểu đầu vào Mọi loại đầu vào HTML hợp lệ như email, số, v.v. (Đọc bên dưới để biết chi tiết.)
bắt buộc để làm cho lĩnh vực này bắt buộc 
mô hình v Đây là liên kết dữ liệu vue (phản ứng), nó có thể được sử dụng để đặt hoặc đọc giá trị.

Cùng với văn bản, VDS cũng hỗ trợ các loại đầu vào khác. Ví dụ: 

  • vds-email
  • vds-số
  • vds-tỷ lệ phần trăm
  • vds-thập phân
  • vds-điện thoại
  • vds-ngày
  • thời gian vds
  • vds-url

Tất cả các thành phần này là các loại đầu vào khác nhau. Chúng có các thuộc tính của loại văn bản vds nhưng đi kèm với các xác thực loại đầu vào của riêng chúng. 

Vds-thả xuống

Sử dụng: Để hiển thị danh sách thả xuống với một danh sách các mục nhất định

Cú pháp:

Các thuộc tính được hỗ trợ:
lựa chọn Mảng các mục thả xuống
nhiều đúng/sai, để hiển thị danh sách thả xuống nhiều lựa chọn
tùy chọn trống Nếu bạn muốn hiển thị một tùy chọn trống lúc đầu
bị vô hiệu hóa đúng sai
bắt buộc đúng sai

vds-chủ sở hữu

Sử dụng: Đây là một thành phần tương tác sẽ hiển thị người dùng và nhóm dưới dạng trình đơn thả xuống. Nó sẽ giống với trường Được gán cho trong bất kỳ mô-đun nào trong CRM.

Cú pháp:

Các thuộc tính được hỗ trợ:
người dùng duy nhất Nếu bạn chỉ muốn xem người dùng trong danh sách thả xuống
nhóm duy nhất Nếu bạn chỉ muốn xem các nhóm trong danh sách thả xuống

hộp kiểm vds

Sử dụng: Để hiển thị đầu vào hộp kiểm

Cú pháp:

chuyển đổi vds

Sử dụng: Để hiển thị một chuyển đổi

Cú pháp:

vds-datepicker

Sử dụng: Để hiển thị bộ chọn ngày cho bất kỳ trường ngày nào.

Cú pháp:

Thuộc tính được hỗ trợ:
Định dạng ngày tháng Định dạng ngày sẽ được hiển thị như DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD

vds-daterange-picker

Sử dụng: Để hiển thị bộ chọn ngày để chọn phạm vi ngày

Cú pháp:

Thuộc tính được hỗ trợ:
Định dạng ngày tháng Định dạng ngày sẽ được hiển thị như DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD

vds-timepicker

Sử dụng: Để hiển thị bộ chọn thời gian

Cú pháp:

Thuộc tính được hỗ trợ:
định dạng Định dạng 12 hoặc 24 giờ 

vds-rte

Sử dụng: Để hiển thị CKEditor, giao diện người dùng trường bạn đang thấy trong trường trình soạn thảo văn bản đa dạng thức 

Cú pháp:

đánh giá vds

Sử dụng: Để hiển thị trường sao xếp hạng. Nó sẽ hiển thị tối đa 5 sao.

Cú pháp:

Thuộc tính được hỗ trợ:
phạm vi Giá trị từ 1 đến 5

vds-iframe

Sử dụng: Để hiển thị iframe với nội dung HTML đã cho

Cú pháp:

tiến trình vds

Sử dụng: Để hiển thị phần trăm tiến độ

Cú pháp:

Các thuộc tính được hỗ trợ:
giá trị % màu sắc
mã màu tùy chỉnh theo mặc định, tiến trình sẽ hiển thị màu xanh lam, bạn có thể chuyển bất kỳ tên màu hợp lệ nào
 
 
 

Trường hợp sử dụng khách hàng VTAP

 
 

Một trong những khách hàng của chúng tôi sử dụng một ứng dụng khác để theo dõi các dự án và tiến độ của họ. 

Họ muốn bắt đầu sử dụng Dự án Vtiger, nhưng giao diện người dùng là một trở ngại khi sử dụng Dự án Vtiger. Giao diện không cung cấp đầy đủ chi tiết về các mốc quan trọng và nhiệm vụ trên một màn hình duy nhất cho một dự án như khách hàng mong muốn.

Để vượt qua rào cản này, chúng tôi đề xuất giải pháp sau.

Họ có thể sử dụng Trình thiết kế mô-đun nền tảng mã thấp của chúng tôi để thiết kế một trang sẽ được chia thành 3 phần. 

Phần đầu tiên sẽ hiển thị Danh sách Dự án, phần tiếp theo sẽ hiển thị Các mốc quan trọng được liên kết với Dự án đã chọn và phần thứ ba sẽ hiển thị các Nhiệm vụ được liên kết với Dự án và Cột mốc đã chọn. Nó trông giống như hộp thư Outlook, hiển thị các email và nội dung của chúng ở phía bên tay phải. Trong trường hợp này, 3 cấp độ của nó hiển thị chi tiết nhiệm vụ ở cuối.

Để xây dựng khả năng này, chúng tôi sẽ tạo một trang danh sách tùy chỉnh có thể được thêm vào bằng cách sử dụng 'LIST_ADD_VIEWTYPE' thành phần. Nhìn thấy tại đây Ví dụ. 

Sau đó, hàm VTAP.API.Get sẽ được sử dụng để tìm nạp dữ liệu Dự án, Cột mốc dự án và Nhiệm vụ. Chúng sẽ được hiển thị trong các cột riêng biệt nhưng vẫn được kết nối với nhau. Bạn có thể sao chép mã từ tại đây để xem nó trong hành động.
 

Một trong những khách hàng của chúng tôi sử dụng một ứng dụng khác để theo dõi các dự án và tiến độ của họ. 

Họ muốn bắt đầu sử dụng Dự án Vtiger, nhưng giao diện người dùng là một trở ngại khi sử dụng Dự án Vtiger. Giao diện không cung cấp đầy đủ chi tiết về các mốc quan trọng và nhiệm vụ trên một màn hình duy nhất cho một dự án như khách hàng mong muốn.

Để vượt qua rào cản này, chúng tôi đề xuất giải pháp sau.

Họ có thể sử dụng Trình thiết kế mô-đun nền tảng mã thấp của chúng tôi để thiết kế một trang sẽ được chia thành 3 phần. 

Phần đầu tiên sẽ hiển thị Danh sách Dự án, phần tiếp theo sẽ hiển thị Các mốc quan trọng được liên kết với Dự án đã chọn và phần thứ ba sẽ hiển thị các Nhiệm vụ được liên kết với Dự án và Cột mốc đã chọn. Nó trông giống như hộp thư Outlook, hiển thị các email và nội dung của chúng ở phía bên tay phải. Trong trường hợp này, 3 cấp độ của nó hiển thị chi tiết nhiệm vụ ở cuối.

Để xây dựng khả năng này, chúng tôi sẽ tạo một trang danh sách tùy chỉnh có thể được thêm vào bằng cách sử dụng 'LIST_ADD_VIEWTYPE' thành phần. Nhìn thấy tại đây Ví dụ. 

Sau đó, hàm VTAP.API.Get sẽ được sử dụng để tìm nạp dữ liệu Dự án, Cột mốc dự án và Nhiệm vụ. Chúng sẽ được hiển thị trong các cột riêng biệt nhưng vẫn được kết nối với nhau. Bạn có thể sao chép mã từ tại đây để xem nó trong hành động.
 
 

thái độ Vtiger 

 

Công cụ chúng tôi thích

 
 

Elasticsearch là một dự án nguồn mở tuyệt vời để đóng góp nếu bạn quan tâm đến khoa học dữ liệu. Nó có thể phân tích, tìm kiếm và lưu trữ khối lượng lớn dữ liệu trong thời gian thực. Elaticsearch giúp người dùng đưa dữ liệu vào hoạt động theo nhiều cách khác nhau.
 

Elasticsearch là một dự án nguồn mở tuyệt vời để đóng góp nếu bạn quan tâm đến khoa học dữ liệu. Nó có thể phân tích, tìm kiếm và lưu trữ khối lượng lớn dữ liệu trong thời gian thực. Elaticsearch giúp người dùng đưa dữ liệu vào hoạt động theo nhiều cách khác nhau.
 
 

Sắp Ra Mắt

 
 

Nhà thiết kế ứng dụng 

Trình thiết kế ứng dụng của Vtiger sẽ cho phép bạn tạo các ứng dụng tùy chỉnh có thể phụ thuộc hoặc không phụ thuộc vào CRM. Nó sẽ cung cấp cho bạn sự linh hoạt để viết ứng dụng trong bất kỳ khung JavaScript nào mà bạn có chuyên môn.

Với các API JavaScript VTAP mạnh mẽ, bạn cũng có thể kết nối với CRM và đẩy/kéo dữ liệu từ đó để dễ dàng xây dựng các ứng dụng tùy chỉnh.
 

Nhà thiết kế ứng dụng 

Trình thiết kế ứng dụng của Vtiger sẽ cho phép bạn tạo các ứng dụng tùy chỉnh có thể phụ thuộc hoặc không phụ thuộc vào CRM. Nó sẽ cung cấp cho bạn sự linh hoạt để viết ứng dụng trong bất kỳ khung JavaScript nào mà bạn có chuyên môn.

Với các API JavaScript VTAP mạnh mẽ, bạn cũng có thể kết nối với CRM và đẩy/kéo dữ liệu từ đó để dễ dàng xây dựng các ứng dụng tùy chỉnh.
 
 

Đăng ký để nhận thông tin cập nhật mới nhất!

 
 

Bản quyền 2024 Vtiger. Đã đăng ký Bản quyền. Nhãn hiệu khác nhau được tổ chức bởi chủ sở hữu tương ứng của họ.