Unanswered

Adding same dataset PCF control multiple time on CRM dashboard

(0) Share

Report

Posted on by Vikas Negi

Hi All,

I am designing dataset PCF control with reactJS and Bing maps. When we add the same PCF control multiple times on one CRM dashboard, then only one PCF control load correctly, but other PCF control just load the Bing Maps. We debug the control and found that it overwrite the same global variables of PCF control. Could anyone face same kind of issue.

Please helps me!

Thanks,

Vikas

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (9)

Answers (1)

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

HI @Vikasdugi ,

What do you mean by "global variable"? Is it a property inside your class from index.ts?

The rest are just react components, right?
Maybe you can share some parts of your code (just showing where the global variables are placed, and what they should do).

Was this reply helpful? Yes No
Vikas Negi 10 on at

Like (0)

Report

Hi Diana,

We have create multiple react components(map, pushpin, etc.)

Regarding the global variables, we declare various global variables in each component that store values globally. Please find the code of global variables (Red color) below for component:

class MapCommand extends React.Component<any, any, any> {
loadMap: any;
_mapDivId: any;
constructor(props:any) {
super(props)
this.state = {
togglePanel: true,
map: '',
crmcontext: this.props.Context,
isLoading: true,
_pushpinTooltip: [],
setfullscreen: any,
BingMapKey: this.props.BingMapKey,
isDraggable: false
}
}
}

Thanks,
Vikas

Was this reply helpful? Yes No
Vikas Negi 10 on at

Like (0)

Report

Hi Diana,

Basically I am talking about the variables that I declare in react components.

Waiting for your reply.

Thanks,
Vikas

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

Hi @Vikasdugi ,

The state inside your class component shouldn't be exposed outside. Maybe it has to do with the whole PCF context being saved in the state? That one is provided by the platform. Maybe I'm wrong, but at first look seems "unorthodox".

Can you please tell me a little about how the BingMaps are used in the PCF? Is it a npm Package?
For instance I've seen google maps included by injecting a script tag in the DOM. Since the PCFs are not IFrames, they will share that script, I'm thinking if it could be a similar issue?

Was this reply helpful? Yes No
Vikas Negi 10 on at

Like (0)

Report

Hi Diana,

Thanks for your reply.

We did not use npm Package for Bing Maps.

We loads Bing Maps by injecting a script tag in the DOM. I think It sharing the script, we are working to find alternate option to load Bing Maps.

Could you please share an sample code to handle the share script issue, similar like you are facing for google map.

Please find the code that we used to load map:

//load bing map script
loadBingMapScript() {
var BingMaps = document.getElementById("BingMaps");
if (BingMaps) {
document.body.removeChild(BingMaps);
}
const numVal = Math.floor(1000 + Math.random() * 9000);
var loadMapScenario = "loadMapScenario" + numVal.toString();
(window as any)[loadMapScenario] = (numVal:any) => this.InitMap(numVal);
const script = document.createElement("script");
script.src = "https://www.bing.com/maps/sdk/mapcontrol?callback=" + loadMapScenario;
script.async = true;
script.defer = true;
script.id = "BingMaps";
document.body.appendChild(script);
}

Could you please share an sample code to handle the share script issue, similar like you are facing for google map.

Waiting for your reply.

Thanks,
Vikas

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

Hi @Vikasdugi ,

Then that's the reason. The PCFs are not IFrames, so they share the same window. If you inject script tags,both PCFs will write in the same window.

I didn't used that myself. In my opinion it's unsupported to inject script tags in PCFs.

It would be best if you could use another service, where you have a real npm package (I think Azure Maps is one of these).

But if you have to stick with bingmaps, I remember @a33ik did something similar with googlemaps in this pcf: https://pcf.gallery/address-autocomplete/ Maybe he can share from his experience.

If you have it twice on the form, the PCFs will be executed in parallel. With the code you shared above, one of them will unload the code for the other one.

No sure if there is a good way to work around. Maybe it's possible to load the script only once (write in the window that the script tag was started and check that variable). The callback function could send a postMessage. That way all PCFs will be notified when the script was loaded. So the initMap will start when the PCF receive the message.

Hope this helps!

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

Like (0)

Report

In the BingMaps provider case I use script tag injection as well. Actually, npm package is there - bingmaps.
What I don't do is - I don't have a predefined tag id to put the map to. I add a div on the fly and use it as a destination for the displayed map.

Was this reply helpful? Yes No
Verified answer

a33ik 3,306 Most Valuable Professional on at

Like (0)

Report

Anyways, what's the point to reinvent the wheel when there is a solution available already - https://github.com/AndrewButenko/ABControlsToolkit

Was this reply helpful? Yes No
Priyanka Maru 12 on at

Like (0)

Report

yeah but source code is not available. Need to customize it according to customer requirement.

Was this reply helpful? Yes No