Power Platform Community Forum Thread Details

Hello! I'm tring to create custom multiselect control using PCF. But dropdown list part can't be displayed on page.

How can i fixed it?

P.S. Maybe i need use the custom dialog, instead of list with checkboxes. How can i create custom dialog that can be called from PCF??

Update:

Here is manual for creation of popup dialog : https://powerusers.microsoft.com/t5/PowerApps-Component-Framework/Error-when-invoking-the-openPopup-method-from-the-PopupService/m-p/277927

Thanks

Снимок экрана 2019-05-13 в 22.55.24.png

Categories:

Power Apps Pro Dev & ISV

here are snippets from the azure maps sample I have, sorry this code is not ready for publishing yet so just use this as reference.

1. Add a div for the pop out container _popupServiceDialogDiv is class variable here

		private renderDropDrownDialog() {
			this._popupServiceDialogDiv = document.createElement("div");
			this._popupServiceDialogDiv.id = "autoCompleteSamplePopupDialog";
			this._popupServiceDialogDiv.setAttribute("role", "dialog");
			this._popupServiceDialogDiv.style.height = "100%";

			let ul = document.createElement("ul");
			ul.setAttribute("id", "entityListUl");
			ul.addEventListener("click", this.itemClick.bind(this));

			for (let i = 0; i < this.optionListItems.length; i++) {
				let listItem = document.createElement("li");
				let testNode = document.createTextNode(this.optionListItems[i]);
				listItem.setAttribute("addJson", this.optionListItemsJson[i]);
				listItem.appendChild(testNode);
				ul.appendChild(listItem);
			}

			this._popupServiceDialogDiv.appendChild(ul);
			return this._popupServiceDialogDiv;
		}

2. Call above when the popup needs to be rendered

		public renderPopup(event?: any) {
			let popupContent = this.renderDropDrownDialog();
			if (this._popupServiceDialogDiv) {
				const popupService = this._context.factory.getPopupService() as any;
				const popupProps: any = {
					name: POPUP_SERVICE_NAME,
					popupToOpen: POPUP_SERVICE_NAME,
					closeOnOutsideClick: true, //This prop takes popup out of visibility but element still remains on DOM
					onPopupForcedClosed: this.closePopupDialog.bind(this),//This prop is set to a method to actually close the popup dialog
					popupStyle: {
						"width": "auto",
						"height": `${HEIGHT}px`,
						"border": "1px solid #666666",
						"boxShadow": "0px 2px 4px 0px rgba(0, 0, 0, 0.5);",
						"overflow": "hidden",
						"backgroundColor": "white",
						"display": "flex",
						"top": `${this.TopOffset}px`,
						"left": `${this.LeftOffset}px`,
						"flexDirection": "column",
						"position": "absolute",
						"margin-top": 28 + "px"
					},
					shadowStyle: {
						position: "absolute",
						width: "100%",
						height: "100%"
					},
					type: 1,
					content: popupContent
				};
				if (popupService.getPopupsId()) {
					popupService.updatePopup(POPUP_SERVICE_NAME, popupProps)
				}
				else {
					popupService.setPopupsId(POPUP_SERVICE_NAME);
					popupService.createPopup(popupProps);
				}
				this.inputElement.focus();
			}
		}

Alternatevely you can try adding z-index property to the drop down so that the overlay is on the top. Control container height can also be adjusted if you add height declaration to the div container.