캔버스 앱 빌드

Power Apps는 비즈니스 앱을 위한 고생산성 플랫폼입니다. Power Apps Studio에서 빈 캔버스의 기능을 사용하여 맞춤형 픽셀 완벽한 앱을 만들 수 있습니다. 사용자와 공유하려면 브라우저에서 앱을 렌더링하거나 Teams 및 SharePoint 사이트와 같은 다양한 컨테이너에 포함하세요.

SAP 조달 템플릿 솔루션의 핵심 최종 사용자 환경은 캔버스 앱을 사용하여 구축되며 현지 비즈니스 요구 사항을 지원하도록 쉽게 확장할 수 있습니다. 시작하려면 이 문서의 패턴과 모범 사례를 따르세요.

모범 사례 및 표준 준수

모든 앱은 게시된 모범 사례 및 표준을 사용하여 개발됩니다. 새 앱을 확장하거나 생성할 때 동일하거나 유사한 모범 사례 및 표준을 채택하는 것이 좋습니다.

표준	댓글	자세한 정보
기능 상태	기본적으로 켜져 있거나 꺼져 있는 기능입니다. 실험적 기능을 제외한 프리뷰 기능의 하위 집합을 포함합니다.	캔버스 앱에서 실험적, 프리뷰 및 중단된 기능을 이해하세요.
반응성	태블릿 또는 모바일과 같은 단일 디바이스 유형에 반응합니다. Microsoft Teams 내에 앱을 포함하는 것을 포함하여 앱이 다양한 표준 화면 및 컨테이너 크기에 맞춰질 수 있습니다. 자동 레이아웃 반응형 컨테이너 컨트롤을 광범위하게 사용합니다.	반응형 캔버스 앱 구축
명명 및 코딩 표준	컨트롤, 변수, 컬렉션 및 Dataverse 명명 표준을 준수하여 검색 및 유지 관리를 용이하게 합니다.	Power Apps Canvas 앱 코딩 표준 및 가이드라인
접근성	접근성을 지원하는 속성. 예를 들어 액세스 가능한 레이블, 역할, 라이브, 포커스 테두리 두께, 색상 대비 및 탭 순서가 있습니다. 이러한 속성은 접근성 요구 사항을 지원하지 않는 알려진 디자인 패턴을 방지합니다.	접근 가능한 캔버스 앱 만들기 및 캔버스 앱의 접근성 제한
실적	알려진 성능 제한을 피하기 위해 모범 사례를 따릅니다.	캔버스 앱의 성능을 개선하기 위한 팁과 모범 사례

전역 앱 색상 테마

모든 앱은 사용자 지정 테마를 따르며 조직에서 선호하는 색 구성표에 따라 변경할 수 있습니다. 전역 변수는 모든 앱의 App.OnStart 속성에서 설정됩니다. 이 변수는 앱의 모든 컨트롤에서 대부분의 색상 관련 속성에 사용됩니다. 한 곳에서 색상 전역 테마 변수를 변경하면 App.OnStart 이벤트를 실행한 후 앱 전체에 즉시 적용됩니다.

중요

다양한 색상 팔레트 속성을 변경할 수 있지만 전역 테마 변수에서 기본 색상 속성만 변경하는 것이 좋습니다.

    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")
        }
    )

회사 로고 추가

먼저 회사 로고 이미지 파일을 앱에 업로드한 다음 ScreenHeader 구성 요소에 추가하여 회사 로고를 앱에 추가합니다.

추가 정보: 캔버스 앱에서 멀티미디어 파일 사용

지역화 및 전역 앱 지원

모든 캔버스 앱은 영어를 지원합니다. 그러나 모든 앱은 지역화가 가능하도록 설계되었으며 더 많은 언어를 지원하도록 관리할 수 있습니다. 컨트롤 너비 속성은 배포하기 위해 선택한 언어에 따라 직접 변경해야 할 수 있습니다.

문자열 지역화 패턴

1. 앱 실행 중 첫 번째 화면의 OnVisible 속성에서 앱은 사용자의 브라우저 언어 설정을 읽고 해당 ISO 언어 코드선택 값을 결정합니다.

      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
        )
    )

노트

레이블 및 입력 컨트롤 속성은 지역화된 텍스트 값의 너비를 예상하려고 시도하지만 해당 계산의 복잡성으로 인해 항상 성공적인 것은 아닙니다. 따라서 지역화된 문자열과 변경 사항이 적용되면 항상 앱을 테스트하고 사소한 편집을 수행하는 것이 좋습니다.

팁

SAP 기본 솔루션에 포함된 ISO 언어 코드 선택 구성 요소에 더 많은 값을 추가하여 추가 언어를 추가하고 지원할 수 있습니다.

앱은 SAP 지역화 Dataverse 엔터티에서 사용자의 로그인 언어별로 지역화된 문자열을 쿼리하고 이를 컬렉션에 로컬로 캐시합니다.

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

Text, HintText, Accessible Label, InputTextPlaceholder, NoSelectionText 및 ToolTips와 같은 다양한 컨트롤 내의 모든 텍스트 관련 속성에는 동등한 지역화된 문자열을 먼저 찾는 수식이 있습니다. 동등한 항목을 찾지 못하면 기본적으로 With 블록 내의 텍스트 속성에 설정된 영어로 설정됩니다.

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

SAP 값 목록 테이블에서 값을 필터링하는 콤보 박스 컨트롤의 경우 브라우저 설정에서 사용자의 매핑된 ISO 언어 코드가 항상 필터 기준에 적용되며 해당 언어에 대해 관리되는 값 목록이 없는 경우 기본값은 영어입니다.

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

브라우저 로캘 설정

캔버스 앱의 모든 숫자, 날짜 및 시간 필드는 기본적으로 사용자의 브라우저 로캘 설정을 따릅니다. 예를 들어 미국을 로캘 설정으로 사용하는 사용자에 대해 3/23/2023로 표시되는 날짜는 독일 로캘 설정을 사용하는 사용자에게는 23.03.2023으로 표시됩니다.

추가 정보: 캔버스 앱에 전역 지원 빌드

구성 요소

구성 요소는 앱 개발 및 유지 관리 프로세스를 단순화하고 성능을 개선하는 데 도움이 되는 좋은 방법입니다.

내부적으로 또는 앱 전체에서 공통 사용자 경험이 필요한 영역의 경우 구성 요소가 구성됩니다. 앱 범위 및 포함된 클라우드 흐름에 대한 액세스와 같은 항목을 지원하기 위해 구성 요소 라이브러리에 대한 제한이 있는 경우 로컬 구성 요소는 다른 앱으로 가져올 수 있는 모든 앱에서 사용할 수 있습니다.

예를 들어 VendorSearch 구성 요소는 조달-지불 프로세스를 지원하는 모든 앱에서 사용되며 주로 SAP 공급업체 관리 앱 내에서 빌드되었으며 다른 조달-지불 앱 내에서 사용하기 위해 가져왔습니다.

경고

로컬 앱 구성 요소와 구성 요소 라이브러리를 사용하는 것의 부정적인 결과는 변경이 결정되면 해당 구성 요소를 이미 가져온 모든 앱에서 변경해야 한다는 것입니다.

앱 전체에서 사용되는 공통 구성 요소:

구성 요소	설명
ScreenHeader	모든 화면에서 공통 헤더
LeftNavigation	메뉴 아이템 Dataverse 소스로 구동되는 다른 앱에 빠르게 액세스할 수 있는 기본 탐색
CommandBar	만들기, 변경, 저장, 취소, 검색, 최근 검색 또는 상세 검색 개체에 대한 공통 컨트롤 목록
ScreenTabs	쉬운 탐색을 위해 탭으로 함께 정렬된 논리적 구성 요소 그룹
NoItemsDisplay	레코드가 없을 때 항목이 그리드에 표시됨
ObjectNameSearch	일반적인 SAP 개체 검색 구성 요소는 사용되는 적절한 앱에 포함되며 필요한 경우 다른 앱으로 가져올 수 있습니다. 예를 들면 VendorSearch, GLAccountSearch, MaterialSearch 및 RequisitionSearch가 있습니다

추가 정보: 캔버스 구성 요소 개요

추가 SAP 필드

모든 SAP 구현은 다르며 비즈니스 프로세스를 지원하는 자체 필드를 추가해야 합니다. 따라서 필요한 필드를 쉽게 추가할 수 있도록 충분한 화면 공간과 디자인 고려 사항을 구현했습니다.

공통 컨트롤 컨테이너

대부분의 컨트롤은 레이블과 입력 컨트롤로 구성된 컨테이너 내에 포함됩니다. 예를 들어 SAP 공급업체 관리 앱 내에서 공급업체 이름을 캡처하는 필드는 다음 스크린샷에 표시된 대로 레이블 및 텍스트 입력 컨트롤로 구성됩니다. 새 필드를 추가하려면 기존 컨테이너 컨트롤을 복사하고 적절한 반응형 구성 요소에 붙여넣어 이름, 텍스트 및 궁극적으로 매핑된 필드를 업데이트합니다.

노트

Comboboxes, Date Pickers 및 Buttons와 같은 다른 유형의 입력 컨트롤에 대한 유사한 컨테이너가 있습니다.

반응형 컨테이너

앱은 다음 스크린샷에 표시된 것과 같은 수직 및 수평 컨테이너 컨트롤을 사용하여 태블릿/데스크톱 디바이스 유형에 반응하도록 설계되었습니다. 이러한 컨테이너는 높이, 너비, LayoutMinHeight, LayoutMinWidth 및 래핑와 같은 속성의 시작점을 갖도록 구성됩니다. 이러한 컨테이너에 더 많은 필드를 추가할 때 반응성을 적절하게 계속 처리하려면 이러한 속성도 업데이트되어야 합니다.

추가 정보: 자동 레이아웃 컨테이너

다른 데이터와 연결

캔버스 앱의 장점은 기본 커넥터 라이브러리를 사용하여 수백 개의 다른 시스템 및 애플리케이션 중 하나에 안전하게 쉽게 연결할 수 있다는 것입니다.

예를 들어 SAP 조달 구매 주문 프로세스에서 프로세스를 완료하기 위해 CRM에 있는 업스트림 사전 판매 기회의 데이터가 필요한 경우 Salesforce 또는 Dataverse 커넥터를 사용하여 Dynamics 365와 통합할 수 있으므로 간단히 버튼을 선택하여 해당 데이터를 SAP 구매 주문 앱에 쉽게 추가할 수 있습니다.

또한 내부 독점 시스템이 있거나 기본 커넥터가 없는 시스템이 있는 경우 IT 팀과 협력하여 Power Apps가 지원되는 API를 통해 해당 시스템과 쉽게 인터페이스할 수 있도록 하는 사용자 지정 커넥터를 만들 수 있습니다.

추가 정보:

• 커넥터 목록
• 사용자 정의 커넥터 개요

앱 오류 처리

모든 포함된 흐름 호출은 기본적으로 흐름에서 다시 전송된 응답 상태 필드를 평가하고 Notify 함수를 통해 메시지를 발생시켜 처리합니다. 자세한 내용은 오류 처리를 참조하세요.

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);  
)

앱에서 생성된 모든 예기치 않은 예외는 오류가 다시 발생하고 추적되기 전에 SAP 솔루션 템플릿 오류 레코드가 생성되는 App.OnError 속성에서 처리됩니다. 관리자는 오류 세부 정보를 보고 오류 모니터링 문서에서 볼 수 있는 것처럼 앱에서 처리되지 않은 예외에 대해 경고하도록 트리거를 배치할 수 있습니다.

추가 정보: OnError 속성

관련 콘텐츠

• 캔버스 앱이란?
• 이해하다 Power Apps Studio
• 솔루션 내에서 캔버스 앱 만들기
• Power Apps 구성 요소 프레임워크 및 캔버스 앱 구성 요소를 사용하여 재사용 가능한 UI 구축
• 관리하다 Microsoft Power Platform
• 기업 개발자, 파트너 및 ISV를 위한 Canvas 앱

다음 단계

모델 기반 앱 확장 및 Dataverse

참조 항목

SAP 구매 템플릿 시작하기