목록 보기에서 값과 함께 사용자 지정 아이콘 표시
Power Apps 환경 관리자 및 사용자는 보기에 그래픽을 추가하고 JavaScript를 사용하여 열 값을 기반으로 그래픽을 선택하는 데 사용되는 논리를 설정할 수 있습니다. 이 기능을 사용하면 텍스트 또는 숫자 값과 함께 아이콘을 표시하는 목록 보기를 사용자 지정할 수 있습니다.
이 예에서는 Dynamics 365 Sales와 같은 특정 앱에서 사용할 수있는 영업 기회 테이블에 대한 보기에 사용자 지정 아이콘을 표시합니다. 계정 또는 연락처 테이블과 같은 다른 표준 테이블과 사용자 지정 테이블이 있는 보기에 사용자 지정 아이콘을 표시 할 수 있습니다.
목록 보기의 사용자 지정 아이콘은 통합 인터페이스, 레거시 웹 클라이언트, 모바일 앱 및 Outlook용 앱에 표시될 수 있습니다.
참고
앱이 모바일 오프라인 모드인 경우 사용자 지정 아이콘을 사용할 수 없습니다.
사용자 지정 그래픽 및 JavaScript를 웹 리소스로 추가
사용자 지정에 필요한 새 그래픽 파일을 만듭니다. 아이콘 크기는 16x16 픽셀을 사용하는 것이 좋습니다(더 큰 이미지는 축소됨).
해당 값을 표시하는 아이콘을 설정하는 하나 또는 그 이상의 JavaScript 함수를 작성합니다.(일반적으로 사용자 지정하려는 각 열에 대해 하나의 함수가 필요합니다.) 각 함수는 이미지 이름 및 도구 설명 텍스트를 포함하는 배열을 반환하는 행 데이터 개체와 언어(LCID) 코드 입력을 허용해야 합니다. 함수 예제는 이 문서의 뒷부분에 나오는 샘플 JavaScript 함수를 참조하십시오.
관리자로 환경에 로그인하고 솔루션 탐색기를 엽니다.
기본 솔루션 팝업 창이 열립니다. 여기에서 구성 요소 > 웹 리소스로 이동합니다..
이제 사용자 지정 그래픽이 웹 리소스로 한 번에 하나씩 업로드됩니다. 도구 모음에서 새로 만들기 단추를 선택하여 새 웹 리소스를 만듭니다. 리소스를 만들 수 있는 다른 팝업 창이 열립니다. 다음 단계를 수행합니다.
새 리소스에 알기 쉬운 이름을 지정합니다. JavaScript 코드에서 각 그래픽을 참조하는 데 사용할 이름입니다.
유형을 그래픽 파일을 저장하는 데 사용된 그래픽 형식(PNG, JPEG, 또는 GIF)으로 설정합니다.
파일 선택을 선택하여 파일 브라우저 창을 엽니다. 그래픽 파일을 찾고 선택하는 데 사용합니다.
표시 이름 및/또는 원할 경우 설명울 추가합니다.
저장을 선택하고 웹 리소스 창을 닫습니다.
갖고 있는 각 그래픽 파일에 대해 이전 단계를 반복합니다.
이제 최종 웹 리소스로 해당 JavaScript를 추가합니다. 도구 모음에서 새로 만들기를 선택하여 새 웹 리소스를 만듭니다. 리소스를 만들 수 있는 다른 팝업 창이 열립니다. 합니다.
새 리소스에 알기 쉬운 이름을 지정합니다.
유형을 스크립트(JScript) 로 설정합니다.
유형 설정 옆에 있는 텍스트 편집기를 선택하여 텍스트 편집기 창을 엽니다. 여기에 Javascript 코드를 붙여 넣고 확인을 선택하여 저장합니다.
표시 이름 및/또는 원할 경우 설명울 추가합니다.
저장을 선택하고 웹 리소스 창을 닫습니다.
기본 솔루션 팝업 창을 계속 연 채로 구성 요소 > 테이블 트리를 확장하여 사용자 지정할 테이블을 찾습니다.
테이블을 확장하고 해당 보기 아이콘을 선택합니다.
선택한 테이블에 대한 보기 목록이 표시됩니다. 목록에서 보기를 선택합니다. 그 다음 도구 모음에서 기타 작업 드롭다운 목록을 열고 편집을 선택합니다.
선택한 보기를 편집할 수 있도록 컨트롤 팝업 창이 열립니다. 보기의 일부인 각 열이 표시됩니다. 대상 열을 선택한 다음 일반 작업 상자의 속성 변경을 선택합니다. 열 속성 변경 대화 상자가 열립니다. 여기에서 다음을 설정하십시오.
웹 리소스: Javascript 함수를 저장하기 위해 만든 웹 리소스의 이름을 지정합니다(목록에서 찾아보기 선택).
함수 이름: 선택한 열과 보기를 수정하기 위해 작성한 함수의 이름을 입력합니다.
확인을 선택하여 열 속성 변경 대화 상자를 닫습니다.
저장 후 닫기를 선택하여 보기를 저장합니다.
필요에 따라 각 테이블, 보기 및 열에 대해 이 단계를 반복합니다.
준비 되면 모든 사용자 지정 항목 게시를 선택하여 변경 내용을 게시할 수 있습니다. 그런 다음 기본 솔루션 창을 닫습니다.
JavaScript 함수 예제
사용자 지정 아이콘 및 도구 설명을 표시하기 위한 JavaScript 함수는 layoutxml에서 지정된 전체 행 개체 및 사용자의 로캘 ID(LCID) 호출의 두 개의 인수를 필요로 합니다. LCID 매개 변수를 사용하면 여러 언어의 도구 설명 텍스트를 지정할 수 있습니다. 환경에서 지원되는 언어에 대한 자세한 내용은 언어 활성화 및 언어 팩 설치 또는 업그레이드를 참조하십시오. 코드에서 사용할 수 있는 로캘 ID(LCID) 값 목록은 Microsoft에서 할당한 로캘 ID를 참조하십시오.
제한적인 미리 정의된 옵션을 가진 속성의 옵션 집합 유형에 대한 사용자 지정 아이콘을 추가하는 경우 지역화 문제를 방지하려면 레이블 대신 옵션의 정수 값을 사용해야 합니다.
메모: 아이콘을 결정하기 위해 데이터를 검색해야 하는 경우 통합 인터페이스는 부울(리본 규칙과 유사)로 확인되는 JavaScript Promise 객체 반환을 지원합니다. 사용자 정의 함수에서 동기 XMLHttpRequest (XHR)를 사용하지 마십시오.
다음 샘플 코드는 opportunityratingcode(등급) 특성의 다음 세 값(1: 관심 높음, 2: 관심 있음, 3: 관심 낮음) 중 하나를 기준으로 아이콘 및 도구 설명을 표시합니다. 샘플 코드에서 지역화된 도구 설명 텍스트를 표시하는 방법도 보여줍니다. 이 샘플에서 작업하려면 new_Hot, new_Warm 및 new_Cold과 같은 이름의 16x16 이미지를 사용하여 세 개의 이미지 웹 리소스를 만들어야 합니다.
중요
이 샘플에는 Dynamics 365 Sales 앱에서 사용할 수 있는 영업 기회 테이블이 필요합니다.
function displayIconTooltip(rowData, userLCID) {
var str = JSON.parse(rowData);
var coldata = str.opportunityratingcode_Value;
var imgName = "";
var tooltip = "";
switch (parseInt(coldata,10)) {
case 1:
imgName = "new_Hot";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Hot";
break;
default:
tooltip = "Opportunity is Hot";
break;
}
break;
case 2:
imgName = "new_Warm";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Warm";
break;
default:
tooltip = "Opportunity is Warm";
break;
}
break;
case 3:
imgName = "new_Cold";
switch (userLCID) {
case 1036:
tooltip = "French: Opportunity is Cold";
break;
default:
tooltip = "Opportunity is Cold";
break;
}
break;
default:
imgName = "";
tooltip = "";
break;
}
var resultarray = [imgName, tooltip];
return resultarray;
}
사용자 지정 아이콘 보기 표시 동작
기본 열
그리드 목록 보기에서 테이블 기본 열에 적용된 사용자 지정 아이콘이 기본 시스템 생성 아이콘을 대체합니다.
기타 열
표 목록 보기에서 테이블 기본 열이 아닌 열에 적용된 사용자 지정 아이콘은 기본 시스템 생성 아이콘과 함께 보조 아이콘으로 표시됩니다.
카드 양식
보기가 카드 양식을 사용하도록 구성된 경우 사용자 지정 아이콘이 기본 시스템 생성 아이콘을 대체합니다.
참조
참고
귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)
이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).