모델기반 앱 서브그리드에서 팝업 상세보기 사용해보기

모델기반 앱에서 관계있는 테이블에 대해서 서브그리드를 추가하는 경우가 있습니다. 

예를 들어, 연락처(1) 메뉴에서 경력(N) 테이블의 데이터를 보기 위해서 경력에 대한 서브그리드를 추가해서 선택한 연락처에 대한 경력을 확인할 수 있습니다. 

 

1. 아래와 같이 연락처 메뉴에서 경력이라는 서브그리드를 생성하고, 일반적으로 더블클릭하면 해당 상세화면으로 페이지 전환이 생깁니다. 

2. 하지만 아래와 같이 한번 클릭해서 체크박스가 선택될 경우 팝업으로 볼 수 있는 기능을 추가해보려고 합니다. 이렇게 되면 화면 전환이 생기지 않기 때문에 빠르게 데이터를 확인하고, 수정할 수 있습니다. 

3. 팝업을 위한 스크립트를 추가하기 위해서 고급 설정으로 이동합니다. 웹 리소스의 경우 Power Apps 설정에서도 가능하지만, 팝업을 위한 다른 작업을 위해 편하게 고급 설정에서 작업했습니다. 

4. 커스터마이제이션에서 시스템 사용자 지정을 클릭합니다. 솔루션을 직접 만들었다면 솔루션에서 작업하시면 됩니다. 

5. 웹 리소스 새로 만들기를 클릭하여 파일을 생성합니다. 

6. 이름과 표시이름을 설정하고, 유형은 스크립트로 선택합니다. 그리고 텍스트 편집기는 눌러서 새로운 Javascript 코드를 작성할 수 있습니다. 

7. popup이라는 function을 만들어서 아래와 같이 코드를 입력합니다. 

function popup(executionContext) {
	var selected = executionContext.getFormContext().data.entity;
	var Id = selected.getId();
	 
	var pageInput = {
		pageType: "entityrecord",
		entityName: "new_경력",		// entity name
		entityId: Id
	};
	
	var navigationOptions = {
		target: 2,
		height: {value: 80, unit:"%"},
		width: {value: 80, unit:"%"},
		position: 1
	};
	
	Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
		function success() {},
		function error() {}
	);
}

8. 모든 코드를 작성하고, 저장한 뒤 게시버튼을 클릭하여 작성한 코드를 화면에 적용합니다. 이제 코드에 대한 부분은 완료되었습니다. 

9. 이제 연락처의 경력 그리드에서 팝업을 사용하려고 하기 때문에 연락처의 양식을 수정하려고 합니다. 아까와 같이 커스터마이제이션의 시스템 사용자 지정 팝업 화면에서 연락처 테이블을 선택하고 양식을 선택하여 수정하려는 양식을 클릭합니다. 

10. 연락처 양식에서 경력 섹션을 선택하여 더블클릭하여 수정합니다. 

11. 속성 설정 화면에서 컨트롤 탭을 클릭하여 컨트롤 추가를 합니다. 읽기 전용 표에서는 클릭 이벤트를 사용할 수 없기 때문에 새로운 컨트롤을 축하여 클릭 이벤트에 아까 만들었던 Function을 호출하려고 합니다. 

12. 편집 가능한 표를 선택하고 웹, 태블릿에서 사용하도록 라디오버튼을 클릭합니다. 

13. 편집가능한 표로 변경하고 이벤트 탭이 생성되었다면, 양식 라이브러리에 아까 만들었던 웹 리소스 new_popup을 추가합니다. 

14. 이벤트 처리기에 onRecordSelect를 선택합니다. 레코드를 선택했을 경우 이벤트를 추가할 수 있는 메뉴입니다. 

15. onRecordSelect 이벤트를 선택하고 추가버튼을 클릭합니다. onRecordSelect 이벤트에 여러 가지 라이브러리 함수를 추가할 수 있습니다. 

16. 저는 아까 new_popup 파일에서 생성했던 자바스크립트 Function인 popup을 선택하고 "실행 컨텍스트를 첫 번째 매개 변수로 전달"을 체크하고 확인을 클릭합니다. 

17. 정상적으로 라이브러리 함수가 설정이 되었다면 확인을 클릭하여 마무리합니다. 

18. 모든 작업은 끝났고, 저장 후 게시를 클릭하여 양식을 업데이트합니다. 

19. 이제 모델기반앱 페이지를 새로고침하고, 팝업을 사용하려고 작업했던 연락처의 경력 탭에서 레코드를 선택합니다. 

20. 그럼 아래와 같이 팝업으로 경력 양식이 출력되고, 이 팝업화면의 정보를 수정하려고 하면, 경력의 양식을 수정하면 됩니다. 

이렇게 서브그리드에서 팝업으로 데이터를 보는 방법을 알아보았습니다. 서브그리드에서 모든 데이터 확인이 어렵고, 클릭했을 경우 다른 작업이 필요하지 않다고 하면 이러한 방법으로 해결해보는 것도 좋은 방법이라고 생각됩니다.