cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
T-REX-XP
Level: Powered On

Create custom multiselect control

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-...

 

 

 

Thanks

 

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

 

1 ACCEPTED SOLUTION

Accepted Solutions
PowerApps Staff HemantG
PowerApps Staff

Re: Create custom multiselect control

 

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. 

 

1 REPLY 1
PowerApps Staff HemantG
PowerApps Staff

Re: Create custom multiselect control

 

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. 

 

Helpful resources

Announcements
firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

SecondImage

PowerApps Monthly Community Call

Tomorrow, September 18th at 8am PDT

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

SecondImage

Power Platform Summit North America

Register by September 5 to save $200

Users Online
Currently online: 123 members 4,494 guests
Please welcome our newest community members: