-
Power Apps 코드 구성요소(PCF) - 서식(Formatting) 사용Power Platform/Power Apps 2022. 3. 25. 12:34728x90
Power Apps 코드 구성요소 - 서식(Formatting) 사용
보통 코드 구성요소는 Power Apps나 D365에서 사용할 것이다. 사용시 서식을 사용해 특정 방식으로 만들것이다.(보통 화폐) 여기서는 간단한 서식을 사용해보자.
코드 구성요소 초기화
- 다음 명령을 파워쉘에서 실행해 초기화된 프로젝트를 만든다.
pac pcf init --namespace SampleNamespace --name FormattingAPI --template field
- 다음 명령어를 입력하여 프로젝트에 종속 라이브러리를 로드한다.
npm install
코드 구성요소 로직 구현
- 코드 구성 요소의 매니페스트 파일(ControlManifest.Input.xml)을 열고 다음과 같이 바꾼다.
<?xml version="1.0" encoding="utf-8" ?> <manifest> <control namespace="SampleNamespace" constructor="FormattingAPI" version="1.1.0" display-name-key="TS_FormattingAPI_Display_Key" description-key="TS_FormattingAPI_Desc_Key" control-type="standard"> <property name="controlValue" display-name-key="controlValue_Display_Key" description-key="controlValue_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> <resources> <code path="index.ts" order="1" /> <css path="css/TS_FormattingAPI.css" order="2" /> </resources> </control> </manifest>
- index.ts 파일을 연다.
- 클래스 내부 최상단에 다음 private 변수를 삽입
// 업데이트가 발생할떄 호출되는 PCF 프레임워크 대리자 private _notifyOutputChanged: () => void; // 이 컨트롤을 감싸는 div 요소에 대한 참조 private divElement: HTMLDivElement; // 제어에 의해 렌더링된 HTMLTableElement에 대한 참조 private _tableElement: HTMLTableElement; // 제어 컨테이너 HTMLDivElement에 대한 참조 // 이 요소에는 사용자 지정 제어 예제의 모든 요소가 포함되어 있습니다. private _container: HTMLDivElement; // 구성 요소 프레임워크 컨텍스트 개체에 대한 참조 private _context: ComponentFramework.Context<IInputs>; // 컨트롤 뷰가 렌더링된 경우 확인 private _controlViewRendered: Boolean; };
- 다음 로직을 init 함수 안에 추가한다.
this._notifyOutputChanged = notifyOutputChanged; this._controlViewRendered = false; this._context = context; this._container = document.createElement("div"); this._container.classList.add("TSFormatting_Container"); container.appendChild(this._container);
- 다음 로직을 updateView 함수 안에 추가한다.
if (!this._controlViewRendered) { // Render and add HTMLTable to the custom control container element let tableElement: HTMLTableElement = this.createHTMLTableElement(); this._container.appendChild(tableElement); this._controlViewRendered = true; }
- 다음 Html 테이블을 생성하는 함수를 추가한다.
/** * Helper method to create an HTML Table Row Element * @param key : string value to show in left column cell * @param value : string value to show in right column cell * @param isHeaderRow : true if method should generate a header row */ private createHTMLTableRowElement(key: string, value: string, isHeaderRow: boolean): HTMLTableRowElement { let keyCell: HTMLTableCellElement = this.createHTMLTableCellElement(key, "FormattingControlSampleHtmlTable_HtmlCell_Key", isHeaderRow); let valueCell: HTMLTableCellElement = this.createHTMLTableCellElement(value, "FormattingControlSampleHtmlTable_HtmlCell_Value", isHeaderRow); let rowElement: HTMLTableRowElement = document.createElement("tr"); rowElement.setAttribute("class", "FormattingControlSampleHtmlTable_HtmlRow"); rowElement.appendChild(keyCell); rowElement.appendChild(valueCell); return rowElement; } /** * Helper method to create an HTML Table Cell Element * @param cellValue : string value to inject in the cell * @param className : class name for the cell * @param isHeaderRow : true if method should generate a header row cell */ private createHTMLTableCellElement(cellValue: string, className: string, isHeaderRow: boolean): HTMLTableCellElement { let cellElement: HTMLTableCellElement; if (isHeaderRow) { cellElement = document.createElement("th"); cellElement.setAttribute("class", "FormattingControlSampleHtmlTable_HtmlHeaderCell " + className); let textElement: Text = document.createTextNode(cellValue); cellElement.appendChild(textElement); } else { cellElement = document.createElement("td"); cellElement.setAttribute("class", "FormattingControlSampleHtmlTable_HtmlCell " + className); let textElement: Text = document.createTextNode(cellValue); cellElement.appendChild(textElement); } return cellElement; }
- 다음 서식 API를 이용해 값을 집어넣는 함수를 추가한다.
/** * Creates an HTML Table that showcases examples of basic methods available to the custom control * The left column of the table shows the method name or property that is being used * The right column of the table shows the result of that method name or property */ private createHTMLTableElement(): HTMLTableElement { // Create HTML Table Element let tableElement: HTMLTableElement = document.createElement("table"); tableElement.setAttribute("class", "FormattingControlSampleHtmlTable_HtmlTable"); // Create header row for table let key: string = "Example Method"; let value: string = "Result"; tableElement.appendChild(this.createHTMLTableRowElement(key, value, true)); // Example use of formatCurrency() method // Change the default currency and the precision or pass in the precision and currency as additional parameters. key = "formatCurrency()"; value = this._context.formatting.formatCurrency(10250030); tableElement.appendChild(this.createHTMLTableRowElement(key, value, false)); // Example use of formatDecimal() method // Change the settings from user settings to see the output change its format accordingly key = "formatDecimal()"; value = this._context.formatting.formatDecimal(123456.2782); tableElement.appendChild(this.createHTMLTableRowElement(key, value, false)); // Example use of formatInteger() method // change the settings from user settings to see the output change its format accordingly. key = "formatInteger()"; value = this._context.formatting.formatInteger(12345); tableElement.appendChild(this.createHTMLTableRowElement(key, value, false)); // Example use of formatLanguage() method // Install additional languages and pass in the corresponding language code to see its string value key = "formatLanguage()"; value = this._context.formatting.formatLanguage(1033); tableElement.appendChild(this.createHTMLTableRowElement(key, value, false)); // Example of formatDateYearMonth() method // Pass a JavaScript Data object set to the current time into formatDateYearMonth method to format the data // and get the return in Year, Month format key = "formatDateYearMonth()"; value = this._context.formatting.formatDateYearMonth(new Date()); tableElement.appendChild(this.createHTMLTableRowElement(key, value, false)); // Example of getWeekOfYear() method // Pass a JavaScript Data object set to the current time into getWeekOfYear method to get the value for week of the year key = "getWeekOfYear()"; value = this._context.formatting.getWeekOfYear(new Date()).toString(); tableElement.appendChild(this.createHTMLTableRowElement(key, value, false)); return tableElement; }
코드 구성요소의 스타일 추가(CSS)
- ReactContorl 폴더 안에 CSS 폴더를 추가한다.
- CSS 폴더 안에 ReactStandardControl.css 파일을 추가한다.
- ReactStandardControl.css 에 다음 css 스타일을 입력한다.
.SampleNamespace\.FormattingAPI { font-family: 'SegoeUI-Semibold', 'Segoe UI Semibold', 'Segoe UI Regular', 'Segoe UI'; } .SampleNamespace\.FormattingAPI .TSFormatting_Container { overflow-x: auto; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlRow { background-color: #FFFFFF; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlHeaderCell { text-align: center; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlCell, .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlHeaderCell { border: 1px solid black; padding-left: 3px; padding-right: 3px; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlInputTextCell { border: 1px solid black; padding: 0px; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlHeaderCell { font-weight: bold; font-size: 16px; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlCell_Key { color: #1160B7; } .SampleNamespace\.FormattingAPI .FormattingControlSampleHtmlTable_HtmlCell_Value { color: #1160B7; text-align: center; }
빌드 및 실행
npm run build
를 파워쉘에서 실행해 빌드한다.npm start
로 실행해서 잘 적용됬는지 확인한다.
728x90반응형'Power Platform > Power Apps' 카테고리의 다른 글
Power Apps - 앱 종류 (0) 2022.03.27 Power Apps 코드 구성요소(PCF) - 팝업 (0) 2022.03.26 Power Apps 코드 구성 요소(PCF) - Dataverse API 사용 (0) 2022.03.24 Power Apps 코드 구성요소(PCF) - React 사용 (0) 2022.03.23 AI Builder - 양식 처리 (0) 2022.03.22 - 다음 명령을 파워쉘에서 실행해 초기화된 프로젝트를 만든다.