Unanswered

How & Where to initialize Bootstrap's Jquery in PCF Component

(0) Share

Report

Posted on by optimisticdipak

Hi All,

I am new to Powerapps and learning PCF now. I am trying to add the Popover component of Bootstrap to my PCF Component. I have installed Jquery, Bootstrap, PopperJs using npm and have imported them in my index.ts file like this:

import 'popper.js';

import * as $ from "jquery";

import * as Bootstrap from "bootstrap";

I am not getting where & how to initialize Bootstrap Jquery in PCF Component. Here, Initialization code means like this,

For Bootstrap Popover:-

$(function () {

$('[data-toggle="popover"]').popover()

})

For Bootstrap Tooltip:-

$(function () {

$('[data-toggle="tooltip"]').tooltip()

})

I have tried initializing it in the INIT method and there was no error also but that functionality was not coming over my control. I must be making mistake in the way I initialized it. Can someone help me with the steps to initialize Bootstrap's Jquery in the PCF component? or else, if there is any different approach to add Bootstrap popover/tooltips in the PCF component then that would also be fine...

Thank You in advance...

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (9)

Answers (0)

a33ik 3,306 Most Valuable Professional on at

Like (1)

Report

Hello Dipak,
I used popover in my early days with PCF. You can find the example that worked 2 years ago here - https://github.com/AndrewButenko/CompositeAddress_PCF/blob/master/CompositeAddress/index.ts

Was this reply helpful? Yes No
optimisticdipak 39 on at

Like (0)

Report

Hi @a33ik,
Thank You for your quick response. I have tried implementing popover in the same way as you did in your control, I am getting an error saying "$(...).popover is not a function".
Can you/anyone help me with a solution to this?

Thanks in advance...

Was this reply helpful? Yes No
a33ik 3,306 Most Valuable Professional on at

Like (0)

Report

Let me guess. Do you try to run it in a harness? It won't work normally. Push it to the instance and test it there.

Was this reply helpful? Yes No
optimisticdipak 39 on at

Like (0)

Report

Hi @a33ik,
Initially, yeah, I tried to run it on harness only and I got that error. Then I packaged it and tested it in Powerapps, I am getting the same error there too...

Can you/someone provide any other Solution, please...?

Thanks in advance.

Was this reply helpful? Yes No
Ndewitt 136 on at

Like (0)

Report
I think the problem here is that it all gets webpacked to bundle.js and webpack is not configured with the pcf-scripts folder to make this available.

If you read up about externals on the webpack documentation Externals | webpack that should get you started. I don't use Jquery anymore but I had this problem on some old projects and I had to add an externals object to the module.exports object in the webpack config file.

externals: { jquery: "jQuery", $: "jQuery" },

You can edit the webpackconfig in the node_modules/pcf-scripts/webpackconfig.js as Scott Durow mentions here but it's not exactly supported and you will need to update it if you restore/update your npm modules.

Was this reply helpful? Yes No
Danish N. 186 on at

Like (0)

Report

If you want to override webpack.config I would recommend using react-app-rewired (https://www.npmjs.com/package/react-app-rewired). This allows you to override webpack config without changing it in node_modules; because if you do npm install you will lose your changes.

----
Danish Naglekar | Power Maverick
MVP Business Applications
If this post helps, then please consider Accept it as the solution to help the other members.

Was this reply helpful? Yes No
optimisticdipak 39 on at

Like (0)

Report
Hi @NickDewitt,
As you said, I have added the following code to node_modules/pcf-scripts/webpackconfig.js file:
module.exports = { //... externals: { jquery: "jQuery", $: "jQuery" }, };
After adding this and running npm run build or npm start, I am getting the following error:-
[pcf-scripts] [Error] encountered unexpected error: TypeError: webpackConfig_1.getWebpackConfig is not a function npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! pcf-project@1.0.0 start: `pcf-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the pcf-project@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\dipak\AppData\Roaming\npm-cache\_logs\2021-07-28T16_10_22_308Z-debug.log
I don't know whether I have added that code correctly or not. Can you please confirm once? If I have added the code correctly then Can you please help me with some solution to this?

Thanks in advance...

Was this reply helpful? Yes No
optimisticdipak 39 on at

Like (0)

Report

Hi Danish,
In that link, it is mentioned, to change the package.json file also... How would we change that in the PCF scenario? How would we write code for start, build and test in the PCF package.json file? Will it be same as mentioned in that link? Can you please help me with that?

Thanks in advance...

Was this reply helpful? Yes No
Christopher Klein 48 on at

Like (0)

Report

Sorry to necro an old message but was there ever a solution to this? I'm actually trying to implement the exact project that Andrew Butenko mentioned with the exact same issue with popover.

Was this reply helpful? Yes No