캔버스 앱 빌드

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

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

모범 사례 및 표준 준수

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

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

전역 앱 색 테마

모든 앱은 사용자 지정 테마를 따르며 조직의 기본 설정 색 구성표에 따라 변경할 수 있습니다. 전역 변수는 모든 앱의 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 블록 내의 Text 속성에 설정된 영어로 설정됩니다.

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

브라우저 로캘 설정

캔버스 앱의 모든 숫자, 날짜 및 시간 필드는 기본적으로 사용자의 브라우저 로캘 설정을 적용합니다. 예를 들어 미국을 로캘 설정으로 사용하는 사용자의 경우 2023년 3월 23 일로 표시된 날짜는 독일 로캘 설정을 사용하는 사용자의 경우 23.03.2023 으로 표시됩니다.

추가 정보: 캔버스 앱에 글로벌 지원 빌드

Components

구성 요소는 앱 개발 및 유지 관리 프로세스를 간소화하고 성능을 향상시키는 데 유용한 방법입니다.

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

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

경고

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

앱 전체에서 사용되는 일반적인 구성 요소는 다음과 같습니다.

구성 요소	Description
스크린 헤더	모든 화면에서 공통 헤더
좌측 탐색	메뉴 항목 Dataverse 원본에서 구동하는 다른 앱에 빠르게 액세스할 수 있는 기본 탐색
CommandBar	만들기, 변경, 저장, 취소, 검색, 최근 검색 또는 고급 검색 개체에 대한 일반적인 컨트롤 목록
ScreenTabs	쉽게 탐색할 수 있도록 탭에 함께 정렬된 논리 구성 요소 그룹
아이템 없음 표시	레코드가 없는 경우 항목이 표에 표시됩니다.
ObjectNameSearch	일반적인 SAP 개체 검색 구성 요소는 사용되는 적절한 앱에 포함되며 필요한 경우 다른 앱으로 가져올 수 있습니다. 예를 들어 VendorSearch, GLAccountSearch, MaterialSearch 및 RequisitionSearch가 있습니다.

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

추가 SAP 필드

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

공용 컨트롤 컨테이너

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

비고

콤보박스, 날짜 선택기 및 단추와 같은 다른 유형의 입력 컨트롤에 대해 비슷한 컨테이너가 있습니다.

반응형 컨테이너

앱은 다음 스크린샷에 표시된 것처럼 세로 및 가로 컨테이너 컨트롤을 사용하여 태블릿/데스크톱 디바이스 유형에 응답하도록 설계되었습니다. 이러한 컨테이너는 높이, 너비, LayoutMinHeight, LayoutMinWidth 및 Wrap과 같은 속성에 대한 시작점을 갖도록 구성됩니다. 이러한 컨테이너에 필드를 더 추가할 때 응답성을 적절하게 처리하도록 이러한 속성도 업데이트되었는지 확인합니다.

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

다른 데이터와 연결

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

예를 들어 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용 캔버스 앱

다음 단계

모델 기반 앱 및 Dataverse 확장

참고하십시오

SAP 조달 템플릿 시작