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

[eliz_talent]

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?

[DianaBirkelbach]

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

[eliz_talent]

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.