Dataset template debugging failure

[Julien2]

Hello,

After creating a PCF using a dataset template, we are getting the below error when we try to debug/run the component:

Any advice on what might be the issue and how to resolve it?

I would greatly appreciate any assistance.

Best regards,
Julien

[DianaBirkelbach · Accepted solution]

Hi @Julien2 ,

The linting rules were changed. To ignore that rules and go on with the development you can

1. locate the file ".eslintrc.json" in the root of your project, and inside that locate the "rules" node. There you can tuth "no-unused-vars" off. 

I this this is the reason: https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-g...

2. Didn't figured out why that "PropertyHelper" is not defined anymore, but you can disable the rule for that line

// eslint-disable-next-line no-undef
import DataSetInterfaces = ComponentFramework.PropertyHelper.DataSetApi;

After that you should be able to run the "npm run build"

[cchannon]

Yeah, in my opinion the no-unused-vars rule should not be enabled by default, but that's the way it is.

It applies to parameters in function signature as well, so even "state" in init is considered an unused var if you don't do something with it, which makes this a manual step you will have to take for the majority of all pcfs... annoying, but at least it isn't a big lift, and the eslint rule violations are pretty clear about what you need to fix, so could be much worse...

[cchannon · Accepted solution]

Oh, just one more thing to add to what @DianaBirkelbach said: in addition to turning this rule off, you can also just set it to Warning so eslint still tells you when you've got unused vars, but it doesn't stop you from building.

"rules": {
    "no-unused-vars": ["warn"]
}

[Julien2]

Hello again @DianaBirkelbach  @cchannon ,

Thank you for your assistance.

I applied what you mentioned and when I try to publish again I got the below errors:

[pcf-1065] [Error] ESLint validation error:
C:\Users\\Dev\ConvertPayComponent\ConvertPayComponent\component.tsx
    1:1   error    Definition for rule 'react/jsx-no-bind' was not found  react/jsx-no-bind
   51:5   warning  'Xrm' is not defined                                   no-undef
  122:15  warning  'Xrm' is not defined                                   no-undef
  122:75  warning  'Xrm' is not defined                                   no-undef
  134:5   warning  'Xrm' is not defined                                   no-undef
  164:9   warning  'Xrm' is not defined                                   no-undef

Any idea what should be added or changed?

Thank you!

[DianaBirkelbach]

Hi @Julien2 , 

Is this still the PCF  generated with the template? Have you added some code or configs?

I can build the new PCF created from the template. 
If you've changed the code a little, maybe you can provide the project ?
Otherwise maybe you can have a look to the changes ..?

[Julien2]

Hello @DianaBirkelbach ,

Yes, the PCF was generated with the template without any code modifications, and the only thing that I modified is the ".eslintrc.json" based on what you mentioned.

Please find attached the PCF project which includes all the details including the CLI, Typescript, and the Node version we're using.

Kindly let me know what we are missing or doing wrong.

Awaiting your response.

Best regards,
Julien

[cchannon]

There is no Xrm object in PCFs. That is only in Client form script. Whatever code you have in there using Xrm.<whatever> will not work. PCF does have its own web API object in context though. I suggest you read up on that here.

[DianaBirkelbach]

Hi @Julien2 , 

As I've guessed, your project is not the standard template anymore. The issues are with the code you've added.

So, to make it work you need to:

 - declare the "no-used-vars" : "off" inside the rules node of the .eslintrc.json (as posted above)

- As @cchannon posted, using the Xrm obejct inside a PCF is not allowed. Inside your project you need to change:

• to get the userId use "context.userSettings.userId"
• to work with webAPI you need to declare the the webAPI usage in the manifest. 
  <uses-feature name="WebAPI" required="true" />​
  then you'll have access to context.webAPI (inside the model-driven apps, including Custom Pages)
• to use the navigation features, instead of Xrm.Navigation  declare the "uses-feature" Utility in the manifest (similar to webAPI)- Then you'll have access to context.navigation. I have here a blog about the ways to open a record: https://dianabirkelbach.wordpress.com/2020/10/09/dataset-pcf-using-fluentui-open-record/. There is also a dataset.openDatasetItem method.
• that " 96:7 error Definition for rule 'react/jsx-no-bind' was not found react/jsx-no-bind" error seems to be caused by the eslint disable command (comment line inside select.tsx on line 96), inside the "select.tsx". By removing that I could build the project.,

To see all the context features, have a look to the context sdk: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/reference/context?WT.mc_i...

Maybe it helps to add that the dataset PCF are able to get the date from the platform, and also to save the data using the save dataset methods. That way the requests are not hardcode inside the code, but the customizer can choose which table to use. That will also allow to interact with the ribbon.
So maybe you don't need all that webAPI requests.
For more info, here is my blog about the way to save the data: https://dianabirkelbach.wordpress.com/2021/12/20/editable-dataset-pcf-new-sdk-methods/

I have a blog series about implementing a dataset PCF, with links to further blogs on every subject: https://dianabirkelbach.wordpress.com/2020/10/09/dataset-pcf-using-fluentui-open-record/

Hope it helps!

[Julien2]

Hello @DianaBirkelbach @cchannon   ,

Thank you for your assistance.

I will just be using the Web API instead of XRM and follow the steps mentioned by Diana including the blog posts that I am always following up on. (Thank you for sharing such interesting content)

I just wanted to ask you regarding the Power Apps CLI version on how can I install a previous version of the CLI since I am not able to find it in the official microsoft docs:

https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction

What is the command that should be executed to revert back to a previous CLI version?

Awaiting your response.

Best regards,

 Julien