Chia sẻ qua

Xây dựng ứng dụng canvas

  • Bài viết

Power Apps là nền tảng năng suất cao dành cho các ứng dụng kinh doanh. Bạn có thể tạo ra các ứng dụng tùy chỉnh, hoàn hảo đến từng pixel với sức mạnh của một trang giấy trắng Power Apps Studio. Để chia sẻ với người dùng, hãy hiển thị ứng dụng trong trình duyệt hoặc nhúng vào nhiều vùng chứa khác nhau như Teams và SharePoint sites.

Trải nghiệm cốt lõi của người dùng cuối đối với các giải pháp mẫu mua sắm SAP được xây dựng bằng ứng dụng canvas và có thể dễ dàng mở rộng để hỗ trợ các yêu cầu kinh doanh tại địa phương của bạn. Để bắt đầu, hãy làm theo các mẫu và phương pháp hay nhất trong bài viết này.

Thực hiện theo các tiêu chuẩn và thông lệ tốt nhất

Tất cả các ứng dụng đều được phát triển dựa trên các tiêu chuẩn và phương pháp hay nhất đã được công bố. Chúng tôi khuyên bạn nên áp dụng các tiêu chuẩn và biện pháp thực hành tốt nhất giống hoặc tương tự khi mở rộng hoặc tạo ứng dụng mới.

Tiêu chuẩn Bình luận Thông tin thêm
Trạng thái tính năng Các tính năng được bật hoặc tắt theo mặc định. Bao gồm một tập hợp con các tính năng bản xem trước ngoại trừ các tính năng thử nghiệm. Hiểu các tính năng thử nghiệm, bản xem trước và đã ngừng hoạt động trong ứng dụng canvas
Sự phản hồi Phản hồi trên từng loại thiết bị như máy tính bảng hoặc điện thoại di động. Cho phép ứng dụng phù hợp với nhiều kích thước màn hình và vùng chứa chuẩn khác nhau, bao gồm cả việc nhúng ứng dụng vào bên trong Microsoft Teams. Sử dụng rộng rãi các điều khiển container phản hồi tự động. Xây dựng ứng dụng canvas phản hồi
Tiêu chuẩn đặt tên và mã hóa Các điều khiển, biến, bộ sưu tập và tiêu chuẩn đặt tên được tuân theo để tăng cấp dễ khám phá và bảo trì. Dataverse Power Apps Tiêu chuẩn và hướng dẫn mã hóa ứng dụng Canvas
Trợ năng Thuộc tính hỗ trợ khả năng truy cập. Ví dụ: Nhãn có thể truy cập, Vai trò, Trực tiếp, Độ dày đường viền tiêu điểm, Độ tương phản màu và Thứ tự tab. Các thuộc tính này tránh các mẫu thiết kế đã biết không hỗ trợ các yêu cầu về khả năng truy cập. Tạo ứng dụng canvas có thể truy cập và Hạn chế khả năng truy cập trong ứng dụng canvas
Hiệu năng Thực hiện các biện pháp tốt nhất để tránh những hạn chế về hiệu suất đã biết. Mẹo và phương pháp hay nhất để cải thiện hiệu suất của ứng dụng canvas

ứng dụng toàn cầu chủ đề màu sắc

Tất cả các ứng dụng đều theo chủ đề tùy chỉnh và có thể thay đổi theo phối màu ưa thích của tổ chức bạn. Biến toàn cục được đặt trong thuộc tính App.OnStart trên tất cả các ứng dụng. Biến này được sử dụng bởi hầu hết các thuộc tính liên quan đến màu sắc trên tất cả các điều khiển trong ứng dụng. Việc thay đổi biến chủ đề toàn cục màu ở một nơi sẽ có hiệu lực ngay lập tức trên toàn bộ ứng dụng sau khi chạy sự kiện App.OnStart .

Quan trọng

Mặc dù có thể thay đổi nhiều thuộc tính bảng màu, chúng tôi khuyên bạn chỉ nên thay đổi thuộc tính màu chính trong biến chủ đề toàn cục.

    Set(
        varThemeColors,
        {
            background: ColorValue("#FAF9F8"),
            backgroundFill: ColorValue("#FFFFFF"),
            backgroundFillDisabled: ColorValue("#F3F2F1"),
            text: ColorValue("#201F1E"),
            altText: ColorValue("#FFFFFF"),
            disabledText: ColorValue("#A19F9D"),
            primary: ColorValue("#0078D4"),
            secondary: ColorValue("#EFF6FC"),
            tertiary: ColorValue("#005A9E"),
            primaryGray: ColorValue("#8A8886"),
            secondaryGray: ColorValue ("#C8C6C4"),
            tertiaryGray: ColorValue("#605E5C"),
            requiredRed: ColorValue("#A80000"),
            lookupBlue: ColorValue("#0078D4")
        }
    )

Thêm logo công ty của bạn vào ứng dụng bằng cách trước tiên tải tệp hình ảnh logo công ty lên ứng dụng, sau đó thêm vào thành phần ScreenHeader .

Thêm logo công ty của bạn vào ứng dụng

Thông tin thêm: Sử dụng tệp đa phương tiện trong ứng dụng canvas

Bản địa hóa và hỗ trợ ứng dụng toàn cầu

Theo mặc định, tất cả các ứng dụng canvas đều hỗ trợ tiếng Anh. Tuy nhiên, tất cả các ứng dụng đều được thiết kế để sẵn sàng bản địa hóa và có thể được quản lý để hỗ trợ nhiều ngôn ngữ hơn. Thuộc tính chiều rộng điều khiển có thể cần phải được thay đổi trực tiếp tùy thuộc vào ngôn ngữ được chọn để triển khai.

Mẫu bản địa hóa chuỗi

  1. Trên thuộc tính OnVisible của màn hình đầu tiên trong quá trình khởi chạy ứng dụng, ứng dụng sẽ đọc cài đặt ngôn ngữ của trình duyệt của người dùng và xác định giá trị lựa chọn Mã ngôn ngữ ISO tương ứng.
      Set(
        varISOUserLanguageCode,
        Switch(
            Left(
                Language(),
                2
            ),
            "ar",
            'ISO Language Code'.ar,
            "de",
            'ISO Language Code'.de,
            "en",
            'ISO Language Code'.en,
            "es",
            'ISO Language Code'.es,
            "fr",
            'ISO Language Code'.fr,
            "he",
            'ISO Language Code'.he,
            "it",
            'ISO Language Code'.it,
            "ja",
            'ISO Language Code'.ja,
            "pt",
            'ISO Language Code'.pt,
            "zh",
            'ISO Language Code'.zh,
            'ISO Language Code'.en
        )
    )

Lưu ý

Các thuộc tính điều khiển nhãn và đầu vào cố gắng dự đoán chiều rộng của giá trị văn bản bản địa hóa nhưng không phải lúc nào cũng thành công do tính phức tạp của phép tính đó. Vì vậy, chúng tôi khuyên bạn nên luôn kiểm tra và thực hiện những chỉnh sửa nhỏ cho ứng dụng sau khi đã bản địa hóa các chuỗi và thay đổi.

Tiền bo

Có thể thêm và hỗ trợ thêm các ngôn ngữ khác bằng cách thêm nhiều giá trị hơn vào thành phần lựa chọn Mã ngôn ngữ ISO có trong giải pháp SAP Base.

Ứng dụng truy vấn thực thể SAP Localization Dataverse để tìm các chuỗi đã được bản địa hóa theo ngôn ngữ mà người dùng đã đăng nhập và lưu trữ chúng cục bộ trong một bộ sưu tập.

        ClearCollect(
            colUserLocalizedStrings,
            Filter(
                'SAP Localizations',
                Language = varISOUserLanguageCode,
                'SAP Localizations (Views)'.'Active SAP Localizations'
            )
        )

Tất cả các thuộc tính liên quan đến văn bản trong nhiều điều khiển khác nhau như Text, HintText, Accessible Label, InputTextPlaceholder, NoSelectionText và ToolTips đều có các công thức tìm kiếm chuỗi bản địa hóa tương đương trước tiên. Nếu không tìm thấy từ tương đương, nó sẽ mặc định là tiếng Anh, được thiết lập trong thuộc tính Văn bản trong khối Với .

  With(
      {Text: "Vendor name"},
      If(
          IsBlank(
              LookUp(
                  colUserLocalizedStrings,
                  'English Value' = Text
              ).'Localized Value'
          ),
          Text,
          LookUp(
              colUserLocalizedStrings,
              'English Value' = Text
          ).'Localized Value'
      )
  )

Đối với các điều khiển hộp kết hợp lọc các giá trị từ bảng Danh sách giá trị SAP , Mã ngôn ngữ ISO được người dùng ánh xạ từ cài đặt của trình duyệt luôn được áp dụng cho tiêu chí lọc, mặc định là tiếng Anh nếu không có danh sách giá trị nào được quản lý cho ngôn ngữ của họ. 

Sort(
    Filter(
        'SAP List of Values',
        Status = 'Status (SAP List of Values)'.Active,
        Domain = 'Domain (SAP List of Values)'.Country,
        Language = varISOUserLanguageCode
    ),
    'Display Value'
)

Cài đặt ngôn ngữ trình duyệt

Theo mặc định, tất cả các trường số, ngày tháng và thời gian trong ứng dụng canvas đều tôn trọng cài đặt ngôn ngữ trình duyệt của người dùng. Ví dụ: ngày hiển thị là 23/3/2023 đối với người dùng sử dụng cài đặt địa phương là Hoa Kỳ sẽ hiển thị là 23.03.2023 đối với người dùng sử dụng cài đặt địa phương là Đức.

Thông tin thêm: Xây dựng hỗ trợ toàn cầu vào các ứng dụng canvas

Cấu phần

Các thành phần là một cách tuyệt vời để đơn giản hóa quá trình phát triển và bảo trì ứng dụng và giúp cải thiện hiệu suất.

Đối với những khu vực cần có trải nghiệm người dùng chung ở cả nội bộ hoặc trên nhiều ứng dụng, các thành phần sẽ được cấu hình. Do các thư viện thành phần có hạn chế trong việc hỗ trợ những thứ như quyền truy cập vào phạm vi ứng dụng và luồng đám mây nhúng, các thành phần cục bộ có thể được sử dụng trong tất cả các ứng dụng, sau đó có thể được nhập vào các ứng dụng khác.

Ví dụ, thành phần VendorSearch được sử dụng trên tất cả các ứng dụng hỗ trợ quy trình mua sắm đến thanh toán và thành phần này chủ yếu được xây dựng trong ứng dụng SAP Vendor Management và được nhập để sử dụng trong các ứng dụng mua sắm đến thanh toán khác.

Cảnh báo

Một hậu quả tiêu cực của việc sử dụng các thành phần ứng dụng cục bộ so với các thư viện thành phần là nếu xác định có thay đổi, những thay đổi đó cần phải được thực hiện trên tất cả các ứng dụng đã nhập thành phần đó.

Các thành phần chung được sử dụng trong toàn bộ ứng dụng:

Cấu phần Description
Tiêu đề màn hình Tiêu đề chung trên mọi màn hình
Điều hướng bên trái Điều hướng chính cho phép truy cập nhanh vào các ứng dụng khác được điều khiển bởi Mục menu Dataverse nguồn
CommandBar Danh sách các điều khiển chung để tạo, thay đổi, lưu, hủy, tìm kiếm, tìm kiếm gần đây hoặc tìm kiếm nâng cao đối tượng
Màn hình Tab Các nhóm thành phần logic được sắp xếp lại với nhau thành các tab để dễ dàng điều hướng
Không có mụcHiển thị Các mục được hiển thị trong lưới khi không có bản ghi nào
Tìm kiếm tên đối tượng Các thành phần tìm kiếm đối tượng SAP phổ biến được bao gồm trong ứng dụng phù hợp khi sử dụng và có thể được nhập vào các ứng dụng khác nếu cần. Các ví dụ bao gồm VendorSearch, GLAccountSearch, MaterialSearch và RequisitionSearch

Thông tin thêm: Tổng quan về thành phần Canvas

Các trường SAP bổ sung

Mỗi cách triển khai SAP đều khác nhau và bạn hoàn toàn có thể thêm các trường riêng để hỗ trợ quy trình kinh doanh của mình. Do đó, không gian màn hình rộng rãi và các cân nhắc về thiết kế đã được triển khai để bạn có thể dễ dàng thêm các trường bạn cần.

Container kiểm soát chung

Hầu hết các điều khiển đều nằm trong một hộp chứa bao gồm cả nhãn và điều khiển đầu vào. Ví dụ, trường để ghi lại tên nhà cung cấp trong ứng dụng Quản lý nhà cung cấp SAP bao gồm điều khiển Nhãn và Nhập văn bản như trong ảnh chụp màn hình sau. Để thêm trường mới, hãy sao chép điều khiển vùng chứa hiện có và dán vào thành phần phản hồi thích hợp, cập nhật tên, văn bản và cuối cùng là các trường được ánh xạ.

Làm việc với các điều khiển container.

Lưu ý

Có những vùng chứa tương tự cho các loại điều khiển đầu vào khác như Combobox, Date Picker và Button.

Container phản hồi

Các ứng dụng được thiết kế để phản hồi với loại thiết bị máy tính bảng/máy tính để bàn bằng cách sử dụng các nút điều khiển chứa theo chiều dọc và chiều ngang như được hiển thị trong ảnh chụp màn hình bên dưới. Các vùng chứa này được cấu hình để có điểm bắt đầu cho các thuộc tính như chiều cao, chiều rộng, LayoutMinHeight, LayoutMinWidth và Đóng gói. Khi bạn thêm nhiều trường hơn vào các vùng chứa này, hãy đảm bảo các thuộc tính này cũng được cập nhật để tiếp tục xử lý khả năng phản hồi một cách phù hợp.

Làm việc với các container phản hồi.

Thông tin thêm: Tự động bố trí container

Kết nối với dữ liệu khác

Sức mạnh của ứng dụng canvas là chúng có thể dễ dàng kết nối an toàn với một trong hàng trăm hệ thống và ứng dụng khác bằng thư viện kết nối gốc của chúng.

Ví dụ: nếu quy trình đặt hàng mua sắm SAP của bạn yêu cầu dữ liệu từ các cơ hội bán trước thượng nguồn có trong CRM để hoàn tất quy trình, bạn có thể sử dụng Salesforce hoặc Dataverse trình kết nối để tích hợp với Dynamics 365 để bạn có thể dễ dàng thêm dữ liệu đó vào ứng dụng Đặt hàng mua sắm SAP chỉ bằng cách chọn một nút.

Ngoài ra, nếu bạn có hệ thống độc quyền nội bộ hoặc hệ thống không có trình kết nối gốc, bạn có thể làm việc với Nhóm CNTT của mình để tạo trình kết nối tùy chỉnh cho phép dễ dàng giao tiếp với hệ thống đó thông qua API được hỗ trợ. Power Apps

Thông tin khác:

Xử lý lỗi ứng dụng

Tất cả các lệnh gọi luồng nhúng đều đánh giá trường trạng thái phản hồi được các luồng gửi lại theo mặc định và xử lý bằng cách đưa ra thông báo thông qua hàm Thông báo . Để tìm hiểu thêm, hãy xem Xử lý lỗi.

If(
    !IsBlank(FirstError.Message),
    Patch(
        'SAP Integration Errors',
        Defaults('SAP Integration Errors'),
        {
            Action: FirstError.Source,
            'Additional Information': App.ActiveScreen.Name,
            'Error Message': FirstError.Message,
            Name: "SAP Vendor Management",
            'Source Type': 'Source Type (SAP Integration Errors)'.'Power App',
            'Workflow Status': 'Workflow Status (SAP Integration Errors)'.Failed
        }
    );
Trace(FirstError.Message);
Error(FirstError);  
)

Tất cả các ngoại lệ không mong muốn do ứng dụng tạo ra đều được xử lý trong thuộc tính App.OnError nơi bản ghi lỗi mẫu giải pháp SAP được tạo trước khi lỗi được gửi lại và theo dõi. Quản trị viên có thể xem chi tiết lỗi và đặt các kích hoạt để được cảnh báo về các ngoại lệ chưa được xử lý của ứng dụng như được thấy trong tài liệu Theo dõi lỗi .

Thông tin thêm: Thuộc tính OnError

Nội dung liên quan

Các bước tiếp theo

Mở rộng các ứng dụng dựa trên mô hình và Dataverse

Xem thêm

Bắt đầu với mẫu SAP Procurement