cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Anonymous
Not applicable

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
Highlighted
Power Apps
Power Apps

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. 

 

View solution in original post

1 REPLY 1
Highlighted
Power Apps
Power Apps

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. 

 

View solution in original post

Helpful resources

Announcements
MBAS Gallery 2020

MBAS Gallery 2020

Watch Microsoft Business Applications Summit sessions on-demand.

firstImage

New Ranks and Rank Icons released on April 21!

The time has come: We are finally able to share more details on the brand-new ranks coming to the Power Apps Community!

Power Platform 2020 release wave 1 plan

Power Platform 2020 release wave 1 plan

Features releasing from April 2020 through September 2020

Users online (7,130)