cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
eliz_talent
Helper II
Helper II

PCF jquery & bootstrap: "error occured during initialization of control: AB.FirstPCF;Message: control.popover is not a function"

I am trying to create a PCF control with popover for a text field.

I have installed jquery, bootstrap, types/jquery, types/bootstrap.

In index.ts file I import jquery and bootstrap:

import * as $ from "jquery";
import * as Bootstrap from "bootstrap";

This is the code I use:

this.setPopover = (function () {
			var control = $(this.inputControl);
			if (typeof (control) == 'undefined') {
				setTimeout(this.setPopover, 500);
			}
			else {
				control.popover(
					{
						content: (context.parameters.sampleProperty.attributes && context.parameters.sampleProperty.attributes.Description) || "Description is not available",
						placement: "right",
						trigger: "hover"
					});
			}
		});
		this.setPopover();

 and receive an error "error occured during initialization of control: AB.FirstPCF;Message: control.popover is not a function".

Any suggestion here?

 

2 REPLIES 2
DianaBirkelbach
Super User
Super User

Hi @eliz_talent , 

I think the problem is calling the setPopover directly after definition.
The definition of your controls should be inside the init method of your PCF.

Hope this helps!

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."
eliz_talent
Helper II
Helper II

Thank you, Diana for responding.

Unfortunately, I didn't manage to fix the issue. From other experience with PCF, it looks like the harness does not work properly with a lot of things in custom controls.  

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Top Solution Authors
Top Kudoed Authors
Users online (3,510)