주소 입력 및 맵 컨트롤이 있는 앱 만들기

사용자가 앱에 주소를 입력해야 하는 많은 시나리오가 있습니다. 역사적으로 사용자가 주소, 도시 및 우편 번호를 제공하고 시/도를 선택하는 주소의 각 요소를 캡처하는 여러 필드가 있었습니다. 특히 모바일 시나리오에서 주소를 입력하면 실망스럽고 오류가 발생할 수 있습니다.

주소 입력 컨트롤은 사용자가 입력할 때 동적 주소 제안을 제공합니다. 유사 일치 논리를 사용하여 컨트롤은 사용자가 선택할 수 있는 여러 잠재적 주소 일치를 제안하므로—정확한 주소를 더 빠르고 쉽게 입력할 수 있습니다.

컨트롤은 주소를 구조화된 데이터로 반환하여 애플리케이션이 도시, 거리, 자치체, 심지어 위도와 경도와 같은 정보를 추출할 수 있도록 합니다. 데이터는 많은 로케일 및 국제 주소 형식에 적합한 형식입니다.

컨트롤을 사용하려면 환경에 대해 지리 공간적 서비스를 사용해야 합니다.

• 주소 입력 컨트롤을 사용하는 방법을 배우려면 다음 영상을 시청하세요.

• 맵 컨트롤을 사용하는 방법을 배우려면 다음 영상을 시청하세요.

이 기사에서는 캔버스 앱에서 주소 입력 컨트롤을 사용하는 방법을 배웁니다.

필수 항목

이 강의를 완료하려면 Microsoft Dataverse 데이터베이스가 있는 Power Apps 환경이 필요합니다. 라이선스가 없는 경우 Power Apps 개발자 플랜에 등록하거나 Power Apps 평가판을 사용할 수 있습니다.

평가판 환경 만들기

Power Apps의 환경은 조직의 비즈니스 데이터, 앱, 챗봇 및 흐름을 저장, 관리 및 공유하는 공간입니다. 또한 역할, 보안 요구 사항 또는 대상 그룹이 다를 수 있는 앱을 분리하기 위한 컨테이너 역할을 합니다.

각 환경은 하나의 Dataverse 데이터 베이스를 가질 수 있습니다.

이 단원을 완료하는 데 필요한 사항이 있는지 확인하기 위해 Dataverse 데이터베이스를 포함하는 새 환경을 만들 것입니다. 이는 30일 평가판으로 30일이 지나면 사라지지만, 유지하고 싶은 경우 샌드박스 또는 프로덕션 환경으로 업그레이드할 수 있습니다.

Dataverse 데이터베이스를 포함하는 평가판 환경과 이 토픽에서 사용된 샘플 데이터를 만들 것입니다.

1. 웹 브라우저에서에서 Power Platform 관리 센터로 이동합니다.

2. 환경을 선택합니다.

3. 새로 만들기를 선택합니다.

4. 예를 들어 "Dataverse 평가판"이라고 이름을 입력합니다.

5. 환경 유형에 대한 평가판을 선택합니다.

6. 데이터베이스 만들기를 예로 전환합니다.

7. 다음을 선택합니다.

   

8. 샘플 앱 및 데이터 배포를 예로 전환합니다.

9. 저장을 선택합니다.

이제 Dataverse 데이터베이스와 Dataverse 테이블의 샘플 데이터를 포함한 평가판 환경이 생성됩니다.

환경에 대한 지리 공간 서비스 사용

캔버스 앱에서 지리 공간 서비스를 사용하려면 먼저 관리자가 앱을 만들려는 환경의 기능에 대한 액세스를 사용해야 합니다.

환경에서 지리 공간 서비스를 사용하는 방법에 대해 알아보려면 환경에 대한 지리 공간 기능 사용을 확인하세요.

캔버스 앱 빌드

앱을 만드는 것으로 시작한 다음 앱 내에서 다른 화면에서 헤더의 모양과 느낌을 표준화하는 데 사용할 헤더 컨트롤을 만듭니다.

1. 이전에 만든 환경에 빈 캔버스 앱을 만듭니다.

2. 삽입 > 새 화면 > 스크롤 가능을 선택하여 새 화면을 추가합니다.

   

3. 레이블 텍스트를 "새 계정"으로 변경합니다.

   

4. 삽입 > 양식 > 편집을 선택하여 화면에 양식을 추가합니다.

   

   Form 컨트롤이 추가됩니다

   

5. 양식의 다음 속성을 업데이트합니다.

   Property	Value
   Data source	Accounts
   Columns	2
   DefaultMode	FormMode.New

6. 필드 옆에 있는 편집을 선택하여 양식에 필드를 더 추가하고 다음 주소 필드를 선택합니다.

   • 주소 1: 나머지 주소
   • 주소 1: 구/군/시
   • 주소 1: 시/도
   • 주소 1: 우편 번호
   • 주소 1: 국가/지역
   • 주소 1: 위도
   • 주소 1: 경도

   

7. 아래와 같이 필드의 순서를 조정합니다.

   

주소 입력 컨트롤

이 섹션에서는 주소 입력 컨트롤을 앱에 추가합니다.

1. 삽입 > 입력 > 주소 입력을 선택하여 화면에 컨트롤을 추가합니다.

   

2. 컨트롤을 화면 오른쪽으로 이동시킵니다.

   

주소 입력 컨트롤에 대한 속성 구성

이 섹션에서는 address 컨트롤의 다양한 속성을 검토하고 필요한 경우 설정합니다. 주소 입력 컨트롤별 속성 몇 가지가 있습니다.

주소 입력 컨트롤에 대한 출력 속성 구성

컨트롤은 사용자가 앱 내에서 컨트롤과 상호 작용할 때 다양한 속성을 출력합니다. 이러한 출력을 다른 컨트롤에서 사용하거나 경험을 사용자 지정할 수 있습니다.

다음 테이블에는 사용 가능한 출력 속성이 나열되어 있습니다.

앱을 실행하고 주소 입력을 시작하면 입력한 값과 일치하는 주소가 표시되며 현재 위치에서 100,000미터 이내에만 있습니다. 또한 주소 입력을 시작할 때 한 번에 5개 이상의 주소 제안이 표시되지 않습니다.

위의 컨트롤을 사용하여 양식의 주소 필드에서 주소를 캡처하여 새 계정을 만듭니다. 이 단계는 사용자가 각 주소 요소를 개별적으로 입력할 필요가 없도록 하는 데 유용합니다.

데이터 카드 값을 주소 입력에서 적절한 속성 값으로 설정합니다.

주소 1: 번지 1 데이터 카드의 예:

주소 입력 컨트롤에서 주소를 선택하면 양식에 모든 주소 필드가 채워집니다.

맵 컨트롤

이 섹션에서는 앱에 맵 컨트롤을 추가하여 맵에서 선택한 위치를 표시하는 방법을 알아봅니다.

1. 맵 컨트롤을 추가하기 전에 주소 입력에서 주소를 캡처하는 컬렉션을 만들어야 합니다. 이 컬렉션은 지도의 데이터 원본로 사용됩니다.

   주소 입력 컨트롤의 OnAddressSelect 속성에서 다음 수식을 입력하여 주소 데이터를 캡처하는 컬렉션을 만듭니다.

   ClearCollect(
       colSelectedAddress,
       {
           Street: AddressInput1.StreetNumber & " " & AddressInput1.StreetName,
           City: AddressInput1.Municipality,
           State: AddressInput1.CountrySubdivision,
           Zip: AddressInput1.PostalCode,
           Country: AddressInput1.Country,
           Latitude: AddressInput1.SelectedLatitude,
           Longitude: AddressInput1.SelectedLongitude
       }
   )
   

   

2. 주소 입력 컨트롤의 외부 영역을 선택하고 삽입 > 미디어 > 맵을 선택하여 화면에 맵 컨트롤을 추가합니다.

   

3. 컬렉션을 데이터 원본으로 선택합니다.

   

4. 주소 입력 섹션 아래로 맵을 이동합니다.

   

맵 컨트롤에 대한 속성 구성

이 섹션에서는 맵 컨트롤의 다양한 속성을 검토하고 필요한 경우 설정합니다.

다음 테이블에는 사용할 수 있는 속성이 나와 있습니다.

맵 컨트롤에 대한 출력 속성 구성

맵 컨트롤은 사용자가 앱 내에서 컨트롤과 상호 작용할 때 다양한 속성을 출력합니다. 이러한 출력을 다른 컨트롤에서 사용하거나 경험을 사용자 지정할 수 있습니다.

다음 테이블에는 사용 가능한 출력 속성이 나열되어 있습니다.

주소 입력에 입력한 주소에 핀을 고정하기 위해 OnAddressSelect 속성에서 만든 컬렉션을 만들고 이를 맵 컨트롤에서 사용합니다.

핀의 속성 중 일부는 위치 핀별로 사용자 정의할 수 있습니다. 아래에 설명되어 있습니다.

1. ItemsColors - 핀의 색상을 위치마다 다른 색상으로 업데이트하려면 색상: 빨강 컬렉션에 열을 추가하고 이를 맵 컨트롤의 ItemsColors 데이터 속성에서 사용합니다.

2. ItemsLabels - 핀의 레이블을 위치마다 주소를 표시하는 다른 레이블로 업데이트하려면 레이블:AddressInput1.FreeformAddress 컬렉션에 열을 추가하고 이를 맵 컨트롤의 ItemsLabels 데이터 속성에서 사용합니다.

3. ItemsIcons - 각 위치의 핀 아이콘을 변경하려면 콜렉션에 열을 추가하고 이를 맵 컨트롤의 ItemsIcons 데이터 속성에서 사용합니다. 이 예에서는 수식이 Icon: triangle과 같은 삼각형 아이콘을 추가합니다.

   팁

   아이콘의 전체 목록을 보려면 이미지 템플릿 목록으로 이동하세요.

   ClearCollect(
       colSelectedAddress,
       {
           Street: AddressInput1.StreetNumber & " " & AddressInput1.StreetName,
           City: AddressInput1.Municipality,
           State: AddressInput1.CountrySubdivision,
           Zip: AddressInput1.PostalCode,
           Country: AddressInput1.Country,
           Latitude: AddressInput1.SelectedLatitude,
           Longitude: AddressInput1.SelectedLongitude,
           Label: AddressInput1.FreeformAddress,
           Color: Red,
           Icon: Triangle
       }
   );
   

이를 컬렉션에 추가한 후 맵 컨트롤의 고급 탭으로 이동하고 ItemsColors, ItemsLabels 및 ItemsIcons 속성을 업데이트합니다.

프리뷰 모드에서 테스트할 앱을 실행합니다. 지도는 주소 입력에서 선택한 위치를 삼각형 아이콘으로 표시하고 주소는 지도에 레이블로 표시됩니다.

참고 항목:

Interactive 맵 컨트롤