Power Apps 코드 구성요소(PCF) - 팝업

Power Apps 코드 구성요소 - 팝업

팝업을 만드는 코드 구성요소를 만들어보자

코드 구성요소 초기화

1. 다음 명령을 파워쉘에서 실행해 초기화된 프로젝트를 만든다.

pac pcf init --namespace SampleNamespace --name PopupComponent --template field

2. 다음 명령어를 입력하여 프로젝트에 종속 라이브러리를 로드한다.

npm install

코드 구성요소 로직 구현

1. 코드 구성 요소의 매니페스트 파일(ControlManifest.Input.xml)을 열고 다음과 같이 바꾼다.

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="SampleNamespace" constructor="PopupComponent" version="0.0.1" display-name-key="PopupComponent_Display_Key" description-key="PopupComponent_Desc_Key" control-type="standard">
    <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
    <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> 
    <resources>
    <code path="index.ts" order="1"/>
    <css path="css/loader.css" order="1" />
    </resources>
</control>
</manifest>

2. index.ts 파일을 연다.
3. 클래스 위에 팝업에서 제공하는 추가 설정을 입력 가능하도록 인터페이스를 삽입한다.(따로 인터페이스를 안만들어도 된다.)

interface Popup extends ComponentFramework.FactoryApi.Popup.Popup {
    popupStyle: object;
    shadowStyle: object;
}

4. init 함수 안에 다음 로직을 추가한다. 버튼과 팝업에 대한 개체를 만든다.

this._container = document.createElement('div');

let popUpButton = document.createElement('button');
popUpButton.innerHTML = "Show Popup";
popUpButton.onclick = () => this.buttonClick();

this._container.appendChild(popUpButton);


let popUpContent = document.createElement('div');
popUpContent.innerHTML = 'Hello World!';

popUpContent.style.display

let popUpOptions: Popup = {
    closeOnOutsideClick: true,
    content: popUpContent,
    name: 'loaderPopup', // 팝업 고유 이름
    type: 1, // Root popup
    popupStyle: {
        "width": "300px",
        "height": "300px",
        "overflow": "hidden",
        "backgroundColor": "Green",
        "display": "flex",
        "flexDirection": "column",
        "position": "absolute",
        "margin-top": 28 + "px"

    }
};


this._popUpService = context.factory.getPopupService();
this._popUpService.createPopup(popUpOptions);

container.appendChild(this._container);

5. 버튼 클릭시 실행될 ButtonClick 함수 추가
6. private buttonClick(){ this._popUpService.openPopup('loaderPopup'); }

• 참고로 popup 인터페이스를 생성하지 않았을시 다음과 같은 방식으로 스타일을 지정해야 한다.

popUpContent.innerHTML = 'Hello World!';
popUpContent.style.width = "200px"; 
popUpContent.style.height = "200px"; 
popUpContent.style.backgroundColor = "white";

• 참고로 팝업 그림자 부분은 인터페이스에 shdowStyle: object; 를 추가하여 설정할 수 있다.

빌드 및 실행

1. npm run build 를 파워쉘에서 실행해 빌드한다.
2. npm start 로 실행해서 잘 적용됬는지 확인한다.
3.