cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
SumitThakran
Helper I
Helper I

PCF Control giving error when its added in Form on Dynamics 365 Platform

Hi 

 

I have developed custom PCF Control in Typescript . I have used some React JS code to open React-Modal as popup window in Control Button Click.

This custom PCF Control is running fine when i am running it locally i.e from Visual Studio code. But when i deployed PCF Control to my Dynamics 365 environment.

And tried to access control in CRM Form then getting below error show in screenshot.

 

SumitThakran_0-1592824471412.png

 

Basically i have used React js inside my Typescript project. I have used React-Modal component for showing popup window .

i did some analysis and found that when i remove Modal tsx file from my PCF Control and deployed simple component on Dynamics 365 platform then this error is not coming .

 

Can anyone tell me what i am doing wrong while calling Modal component or in its contructor.

So below is my piece of code i wrote it down to call my Modal component. Basically passing one parameter to Modal Component.

<MyModal inputABN = {this.state.inputValue}/>

 

And below is constructor of My Modal component.

export class MyModal extends React.Component<ModalProps, any> {
constructor (props: ModalProps) {
super(props);
this.state = {
showModal: false , inputABN: props.inputABN
};
............................

 

Any help will be appreciated .

 

Thanks

11 REPLIES 11
DianaBirkelbach
Super User
Super User

Hi @SumitThakran , 

 

I have the feeling that there are some missing pieces in understanding your issue.

I don't know what you mean by "I tried to access the control in CRM Form". The only way you can interact with the PCF control from a form is by changing the value, show/hide, enable/disabled, the same as you work with every OOB control.

The PCF control is bounded to one control on a form, and one or more attributes from your entity. 

In order to open modal content, you have there two possibilities from inside the PCF component:

 - you can open your PCF component full-screen, by using control.mode.setFullScreen()

 - you can use the PopupService to open further dialogs: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/popupservice

It case this doesn't help, maybe you can tell more, about how you try to access the PCF from the Form.

 

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."

 

 

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."

Usually this error is caused by the webpack complication failing and so your control's index.js class not being available at runtime.

 

I suspect that the reason it is working when you remove some part of the code - is that there is an error in the code (syntax error, missing import etc.) that is preventing the code from building.

 

Look carefully at the output when you run npm start

 

Hope this helps

Hi Diana,

 

Below is my CRM Form on which i added my PCF Control to text field i.e ABN and this PCF control is also bounded with this entity attribute. You can refer below screenshots 

SumitThakran_0-1592895949463.png

When i click on error that error window comes which i have already shared in my above message.

 

SumitThakran_1-1592895989096.png

 

This PCF Control not working in Dynamics 365 but when i run it locally in VS Code. There its working fine.

So not sure what's the problem

 

Thanks

Hi Scott,

 

If webpack compilation failing and index.js not available at runtime , then why i did not got any type of error while running this PCF Control in VS Code.

In VS Code , its running fine and there is no error coming.But when this control is imported in Dynamics and added in Form then its not working.

 

Also you mentioned to watch npm start . below are lines generated in VS code when i run command :- npm start

PS C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl> npm start

> pcf-project@1.0.0 start C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl
> pcf-scripts start

[12:44:39] [start] Initializing...
[12:44:39] [start] Validating manifest...
[12:44:39] [start] Validating control...
[12:44:43] [start] Generating manifest types...
[12:44:43] [start] Compiling and bundling control...
[BABEL] Note: The code generator has deoptimised the styling of C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl\node_modules\react-dom\cjs\react-dom.development.js as it exceeds the max of 500KB.
[Webpack stats]:
Hash: 820fdf6cb7f27cf48276
Version: webpack 4.42.1
Time: 31575ms
Built at: 06/23/2020 12:45:15 PM
Asset Size Chunks Chunk Names
bundle.js 4.96 MiB main [emitted] main
Entrypoint main = bundle.js
[./ABNVerification/ABNControl.tsx] 3.38 KiB {main} [built]
[./ABNVerification/ABNModal.tsx] 3.17 KiB {main} [built]
[./ABNVerification/index.ts] 3.6 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-0.js] 3.63 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-1.js] 3.5 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-10.js] 3.87 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-11.js] 3.87 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-12.js] 4.09 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-13.js] 4.09 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-14.js] 3.88 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/fabric-icons-15.js] 3.98 KiB {main} [built]
[./node_modules/@uifabric/icons/lib/index.js] 1.54 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.32 KiB {main} [built]
[./node_modules/react/index.js] 189 bytes {main} [built]
[./node_modules/util/util.js] 18.6 KiB {main} [built]
+ 833 hidden modules
[12:45:15] [start] Generating build outputs...
[12:45:15] [start] Starting control harness...

Starting control harness...

Mapping / to "C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl\node_modules\pcf-start"

Serving "C:\Sumit\Desktop Files\CRM\PCF\Controls\ABNVerificationControl\out\controls\ABNVerification" at http://127.0.0.1:8181

Ready for changes

 

can you point out any issue in webpack compilation that could help me to sort this issue out.

 

Thanks

 

Looking at that npm start output I see no mention of ABNVerifysPCF.ABNVerifys or even ABNVerifys are you sure you the issue isn't either

a) a namespace issue (the error message references ABNVerifysPCF yet the start output references ABNVerification and doesn't reference ABNVerifysPCF

b) a missing import within the index.ts file?

 

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

 

Hi Ben,

 

Oh sorry its my mistake. Actually i created another duplicate project "ABNVerification" to do some R&D at my end for fixing this issue.

So i might have shared npm start output of another duplication project. But i can share npm start output of original project too "ABNVerifys" but i checked that too and its output is same too.

So i think namespace issue is not there.

 

you mentioned that i might be missing import in index.ts file. Let me explain my file hierarchy so that you might get some idea about files.

There are three files in my PCF Control project.

a) index.ts 

b) ABNControl.tsx

c) ABNModal.tsx

 

Obviously index.ts file is first one to start with. Index.ts file import my ABNControl.tsx file and then ABNControl.tsx file import third file i.e "ABNModal.tsx"

Second file is having one textbox and one button . On click on this button , it will invoke my third file . Third file is basically React Modal component which will open a pop up window and show some more details.

I did some hit and trial methods at my end to solve this issue and found that invoking constructor issue is coming due to third file only. Becuz when i remove third file from my PCF Control and deploy it on Dynamics 365. Then this error does not come But if i include third file then this error comes in Dynamics 365 .

 

So i think there is something wrong while invoking third file from second file. Which i am not able to figure it out.

Below is my piece of code in second file which invokes third file 

<MyModal inputABN = {this.state.inputValue}/>

 

Below is Third file which is basically Modal component and its constructor code

export interface IModalProps {
  inputABN?: string;
  onInputChanged?:(newValue:string)=>void;
};
export interface IModalState extends React.ComponentState,IModalProps{}

 

ReactModal.setAppElement('#app-root');
export class MyModal extends React.Component<IModalProps, IModalState> {
  constructor (props: IModalProps) {
    super(props);
    this.state = {
      showModal: false , inputABN: props.inputABN
    };

 

    this.handleOpenModal = this.handleOpenModal.bind(this);
    this.handleCloseModal = this.handleCloseModal.bind(this);
  }
.....................................................
 
Can you point out what i am doing wrong.
 
Thanks

 

Hi Everyone,

 

FYI , my issue is sorted . Below line of code was not working in Dynamics 365 so i removed it and its working now.

ReactModal.setAppElement('#app-root');

 

I added this line of code becuz i was getting some warning message in console window. As now i have removed it so still i am getting warning message as shown below

 

webpack://pcf_tools_652ac3f36e1e4bca82eb3c1dc44e6fad/./node_modules/warning/warning.js?:34 Warning: react-modal: App element is not defined. Please use `Modal.setAppElement(el)` or set `appElement={el}`. This is needed so screen readers don't see main content when modal is opened. It is not recommended, but you can opt-out by setting `ariaHideApp={false}`

 

Can you anyone suggest line of code that will remove this warning message.

 

Thanks

Looking at the docs - it seems that ReactModal attempts to hide the root app content when the modal dialog is open. I don't think this is going to work with PCF because you cannot access any nodes outside of the PCF component.

You could set it to the id of a div in your PCF component - but I that wouldn't achieve what it is trying to do.
http://reactcommunity.org/react-modal/accessibility/

 

 

Helpful resources

Announcements

Announcing | Super Users - 2023 Season 1

Super Users – 2023 Season 1    We are excited to kick off the Power Users Super User Program for 2023 - Season 1.  The Power Platform Super Users have done an amazing job in keeping the Power Platform communities helpful, accurate and responsive. We would like to send these amazing folks a big THANK YOU for their efforts.      Super User Season 1 | Contributions July 1, 2022 – December 31, 2022  Super User Season 2 | Contributions January 1, 2023 – June 30, 2023    Curious what a Super User is? Super Users are especially active community members who are eager to help others with their community questions. There are 2 Super User seasons in a year, and we monitor the community for new potential Super Users at the end of each season. Super Users are recognized in the community with both a rank name and icon next to their username, and a seasonal badge on their profile.    Power Apps  Power Automate  Power Virtual Agents  Power Pages  Pstork1*  Pstork1*  Pstork1*  OliverRodrigues  BCBuizer  Expiscornovus*  Expiscornovus*  ragavanrajan  AhmedSalih  grantjenkins  renatoromao    Mira_Ghaly*  Mira_Ghaly*      Sundeep_Malik*  Sundeep_Malik*      SudeepGhatakNZ*  SudeepGhatakNZ*      StretchFredrik*  StretchFredrik*      365-Assist*  365-Assist*      cha_cha  ekarim2020      timl  Hardesh15      iAm_ManCat  annajhaveri      SebS  Rhiassuring      LaurensM  abm      TheRobRush  Ankesh_49      WiZey  lbendlin      Nogueira1306  Kaif_Siddique      victorcp  RobElliott      dpoggemann  srduval      SBax  CFernandes      Roverandom  schwibach      Akser  CraigStewart      PowerRanger  MichaelAnnis      subsguts  David_MA      EricRegnier  edgonzales      zmansuri  GeorgiosG      ChrisPiasecki  ryule      AmDev  fchopo      phipps0218  tom_riha      theapurva  takolota     Akash17  momlo     BCLS776  Shuvam-rpa     rampprakash  ScottShearer     Rusk  ChristianAbata     cchannon  Koen5     a33ik        AaronKnox        Matren        Alex_10        Jeff_Thorpe        poweractivate        Ramole        DianaBirkelbach        DavidZoon        AJ_Z        PriyankaGeethik        BrianS        StalinPonnusamy        HamidBee        CNT        Anonymous_Hippo        Anchov        KeithAtherton        alaabitar        Tolu_Victor        KRider        sperry1625        IPC_ahaas      zuurg    rubin_boer   cwebb365      If an * is at the end of a user's name this means they are a Multi Super User, in more than one community. Please note this is not the final list, as we are pending a few acceptances.  Once they are received the list will be updated. 

Microsoft Power Platform Conference | Registration Open | Oct. 3-5 2023

We are so excited to see you for the Microsoft Power Platform Conference in Las Vegas October 3-5 2023! But first, let's take a look back at some fun moments and the best community in tech from MPPC 2022 in Orlando, Florida.   Featuring guest speakers such as Charles Lamanna, Heather Cook, Julie Strauss, Nirav Shah, Ryan Cunningham, Sangya Singh, Stephen Siciliano, Hugo Bernier and many more.   Register today: https://www.powerplatformconf.com/   

Register now for the Business Applications Launch Event | Tuesday, April 4, 2023

Join us for an in-depth look into the latest updates across Microsoft Dynamics 365 and Microsoft Power Platform that are helping businesses overcome their biggest challenges today.   Find out about new features, capabilities, and best practices for connecting data to deliver exceptional customer experiences, collaborating, and creating using AI-powered capabilities, driving productivity with automation—and building towards future growth with today’s leading technology.   Microsoft leaders and experts will guide you through the full 2023 release wave 1 and how these advancements will help you: Expand visibility, reduce time, and enhance creativity in your departments and teams with unified, AI-powered capabilities.Empower your employees to focus on revenue-generating tasks while automating repetitive tasks.Connect people, data, and processes across your organization with modern collaboration tools.Innovate without limits using the latest in low-code development, including new GPT-powered capabilities.    Click Here to Register Today!    

Check out the new Power Platform Communities Front Door Experience!

We are excited to share the ‘Power Platform Communities Front Door’ experience with you!   Front Door brings together content from all the Power Platform communities into a single place for our community members, customers and low-code, no-code enthusiasts to learn, share and engage with peers, advocates, community program managers and our product team members. There are a host of features and new capabilities now available on Power Platform Communities Front Door to make content more discoverable for all power product community users which includes ForumsUser GroupsEventsCommunity highlightsCommunity by numbersLinks to all communities Users can see top discussions from across all the Power Platform communities and easily navigate to the latest or trending posts for further interaction. Additionally, they can filter to individual products as well.       Users can filter and browse the user group events from all power platform products with feature parity to existing community user group experience and added filtering capabilities.     Users can now explore user groups on the Power Platform Front Door landing page with capability to view all products in Power Platform.    Explore Power Platform Communities Front Door today. Visit Power Platform Community Front door to easily navigate to the different product communities, view a roll up of user groups, events and forums.

Welcome to the Power Apps Community

Welcome! Congratulations on joining the Microsoft Power Apps community! You are now a part of a vibrant group of peers and industry experts who are here to network, share knowledge, and even have a little fun! Now that you are a member, you can enjoy the following resources:   The Microsoft Power Apps Community Forums If you are looking for support with any part of Microsoft Power Apps, our forums are the place to go. They are titled "Get Help with Microsoft Power Apps " and there you will find thousands of technical professionals with years of experience who are ready and eager to answer your questions. You now have the ability to post, reply and give "kudos" on the Power Apps community forums! Make sure you conduct a quick search before creating a new post because your question may have already been asked and answered!   Microsoft Power Apps IdeasDo you have an idea to improve the Microsoft Power Apps experience, or a feature request for future product updates? Then the "Power Apps Ideas" section is where you can contribute your suggestions and vote for ideas posted by other community members. We constantly look to the most voted Ideas when planning updates, so your suggestions and votes will always make a difference.   Community Blog & NewsOver the years, more than 600 Power Apps Community Blog Articles have been written and published by our thriving community. Our community members have learned some excellent tips and have keen insights on building Power Apps. On the Power Apps Community Blog, read the latest Power Apps related posts from our community blog authors around the world. Let us know if you would like to become an author and contribute your own writing — everything Power Apps related is welcome!   Power Apps Samples, Learning and Videos GalleriesOur galleries have a little bit of everything to do with Power Apps. Our galleries are great for finding inspiration for your next app or component. You can view, comment and kudo the apps and component gallery to see what others have created! Or share Power Apps that you have created with other Power Apps enthusiasts. Along with all of that awesome content, there is the Power Apps Community Video & MBAS gallery where you can watch tutorials and demos by Microsoft staff, partners, and community gurus in our community video gallery.   Again, we are excited to welcome you to the Microsoft Power Apps community family! Whether you are brand new to the world of process automation or you are a seasoned Power Apps veteran. Our goal is to shape the community to be your ‘go to’ for support, networking, education, inspiration and encouragement as we enjoy this adventure together!   Let us know in the Community Feedback if you have any questions or comments about your community experience.To learn more about the community and your account be sure to visit our Community Support Area boards to learn more! We look forward to seeing you in the Power Apps Community!The Power Apps Team

Microsoft Power Platform | March 2023 Newsletter

Welcome to our March 2023 Newsletter, where we'll be highlighting the great work of our members within our Biz Apps communities, alongside the latest news, video releases, and upcoming events. If you're new to the community, be sure to subscribe to the News & Announcements and stay up to date with the latest news from our ever-growing membership network who find real "Power in the Community".    LATEST NEWS Power Platform Connections Check out Episode Five of Power Platform Connections, as David Warner II and Hugo Bernier chat with #PowerAutomate Vice President, Stephen Siciliano, alongside reviewing out the great work of Vesa Juvonen, Waldek Mastykarz, Maximilian Müller, Kristine Kolodziejski, Danish Naglekar, Cat Schneider, Victor Dantas, and many more.   Use the hashtag #PowerPlatformConnects on social media for a chance to have your work featured on the show!   Did you miss an episode?  Catch up now in the Community Connections Galleries Power Apps, Power Automate, Power Virtual Agents, Power Pages     Power Platform leading a new era of AI-generated low-code development.   **HOT OFF THE PRESS** Fantastic piece here by Charles Lamanna on how we're reinventing software development with Copilot in Power Platform to help you can build apps, flows, and bots with just a simple description! Click here to see the Product Blog         Copilot for Power Apps - Power CAT Live To follow on from Charles' blog, check out #PowerCATLive as Phil Topness gives Clay Wesener Wesner a tour of the capabilities of Copilot in Power Apps.       UPCOMING EVENTS   Modern Workplace Conference Check out the Power Platform and Microsoft 365 Modern Workplace Conference that returns face-to-face at the Espace St Martin in Paris on 27-28th March. The #MWCP23 will feature a wide range of expert speakers, including Nadia Yahiaoui, Amanda Sterner, Pierre-Henri, Chirag Patel, Chris Hoard, Edyta Gorzoń, Erika Beaumier, Estelle Auberix, Femke Cornelissen, Frank POIREAU, Gaëlle Moreau, Gilles Pommier, Ilya Fainberg, Julie Ecolivet, Mai-Lynn Lien, Marijn Somers, Merethe Stave, Nikki Chapple, Patrick Guimonet, Penda Sow, Pieter Op De Beéck, Rémi Riche, Robin Doudoux, Stéphanie Delcroix, Yves Habersaat and many more.  Click here to find out more and register today!     Business Applications Launch 2023 Join us on Tuesday 4th April 2023 for an in-depth look into the latest updates across Microsoft Power Platform and Microsoft Dynamics 365 that are helping businesses overcome their biggest challenges today. Find out about new features, capabilities, and best practices for connecting data to deliver exceptional customer experiences, collaborating and creating using AI-powered capabilities, driving productivity with automation, and building future growth with today’s leading technology. Click Here to Register Today!       Power Platform Conference 2023 We are so excited to see you for the Microsoft Power Platform Conference in Las Vegas October 3-5th, 2023! But first, let's take a look below at some fun moments from MPPC 2022 in Orlando Florida. 2023 sees guest speakers such as Charles Lamanna, Heather Cook, Julie Strauss, Nirav Shah, Ryan Cunningham, Sangya Singh, and many more taking part, so why not click the link below to register for the #PowerPlatformConf today! Vegas, baby! Click Here to Register Today!      COMMUNITY HIGHLIGHTS Check out our top Super and Community Users reaching new levels!  These hardworking members are posting, answering questions, kudos, and providing top solutions in their communities.   Power Apps:  Super Users:  @WarrenBelz  |  @iAm_ManCat  Community Users: @LaurensM | @Rusk | @RJM07    Power Automate:   Super Users: @abm  | @Expiscornovus | @RobElliott  Community Users:  @grantjenkins | @Chriddle    Power Virtual Agents:   Super Users: @Expiscornovus | @Pstork1  Community Users: @MisterBates | @Jupyter123 | Kunal K   Power Pages: Super Users:  @OliverRodriguesOliverRodrigues | @Mira_Ghaly  Community Users: @FubarFubar | @ianwukianwuk  LATEST PRODUCT BLOG ARTICLES  Power Apps Community Blog  Power Automate Community Blog  Power Virtual Agents Community Blog  Power Pages Community Blog  Check out 'Using the Community' for more helpful tips and information:  Power Apps, Power Automate, Power Virtual Agents, Power Pages 

Users online (4,680)