"Couldn't import components" error when importing custom component into Canvas app

(0) Share

Report

Posted on by OPEC-JoshWalsh

Hi there,

I'm developing my first PowerApps code component. I have been following this guide.

I'm able to upload my solution and "Publish all customizations" without any issues, but when it's time to import the component into my Canvas App then I get this error:

Doing some Googling, I found this thread. The error message is the same, but I think the cause is different. In that thread the root cause was found to be that uploading an update to a solution that removes a resource causes the issue. But this is the first time I've uploaded the solution, so I don't think that's the cause.

I don't have any unsupported resources, my only resource is a TypeScript file. My solution is unmanaged.

I would be happy to send a copy of my component to a Microsoft staff member for troubleshooting.

Thanks,

Josh

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (14)

Answers (1)

ScottDurow 1,039 on at

Like (0)

Report

Hi @OPEC-JoshWalsh -
A couple of questions:
1. Can you post your manifest file? It could be that you have an unsupported feature such as setting preview-image or including type-groups in a dataset property.
2. Does your control work in the test harness after running npm start watch?
3. Does your control work in a Model Driven App?

Thanks
Scott

Was this reply helpful? Yes No
OPEC-JoshWalsh 20 on at

Like (0)

Report
Thanks for the reply @ScottDurow .

1. Here is a simplified/anonymised manifest file that uses all the same features that my real manifest file uses:

<?xml version="1.0" encoding="utf-8" ?> <manifest> <control namespace="com.opecsystems" constructor="MyFirstComponent" version="0.0.1" display-name-key="My First Component" description-key="Does something" control-type="standard"> <property name="payload" display-name-key="Payload" description-key="A string" of-type="SingleLine.Text" usage="input" required="true" /> <property name="type" display-name-key="Type" description-key="A choice" of-type="Enum" usage="input" required="true"> <value name="Option A" display-name-key="Option A" description-key="a_Desc">a</value> <value name="Option B" display-name-key="Option B" description-key="b_Desc">b</value> <value name="Option C" display-name-key="Option C" description-key="c_Desc">c</value> <value name="Option D" display-name-key="Option D" description-key="d_Desc">d</value> </property> <resources> <code path="index.ts" order="1"/> </resources> </control> </manifest>
In order to post the real one I would need to get permission from my employer.
2. Yes, it works in the test harness.
3. I haven't made a model driven app before and I'm struggling to test this. I tried following these instructions, but Field Properties does not appear to have a "Controls" option for me. It has a "Components" section, but when I try to add a component the only options are "Canvas app" and "AI Builder Business Card control".

Thanks for your help!

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

Nothing looks out of the ordinary there.
Can you try and build the sample control https://docs.microsoft.com/en-us/powerapps/developer/component-framework/sample-controls/data-set-component-canvas and importing that?

Was this reply helpful? Yes No
OPEC-JoshWalsh 20 on at

Like (0)

Report

The sample control works, so I guess that means the process I'm following to build my control/solution is definitely correct. (I did things the exact same way for the sample control)

It's frustrating that "Couldn't import components" doesn't provide any additional details about what went wrong.

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report

Yes that is frustrating - do you get any more info from the the down chevrons to the right of the ping bar?

Next steps would be to strip back your control until it basically looks like the sample until it works.
Often there can be something in the control that doesn't agree with the CanvasApp JavaScript runtime.

Was this reply helpful? Yes No
OPEC-JoshWalsh 20 on at

Like (1)

Report

Thanks for the advice, I am trying the reverse approach: gradually adding stuff to the example control until it breaks.

Unfortunately I'm hitting an issue, which is that I can't deploy an updated version of the control. I've updated the version number to 1.1 (or 1.1.0) in every location I can find (package.json, project.assets.json, TS_PRopertySetTableControl.pcfproj.nuget.dgspec.json, ControlManifest.xml), but when I upload the solution it still says 1.0 and "This version of the solution package is already installed."

It gives me the option to proceed with the import anyway, but after doing that and then clicking "Publish all customizations", when I add the component to a canvas app it's still the first version. (I know it's not the new version because in my most recent version I've commented out all the code for adding DOM elements, but the DOM elements are still being created)

Is there something obvious that I'm missing for how to bump the version number?

Was this reply helpful? Yes No
Verified answer

OPEC-JoshWalsh 20 on at

Like (0)

Report

I've discovered some things since my last post:

1. It's not mentioned in the documentation, but the version number used for the solution is the one in YourSolutionDirectory/src/Other/Solution.xml.
2. Uploading an updated solution (even with a higher version number!) does NOT update the components within that solution. You need to delete the components manually in order to upload a new version.
3. The cause of the initial error I encountered is because I am using an enum. If I remove the enum, my component works fine. This confuses me, because the enum works fine in the test harness and also is mentioned in the documentation.

Thanks @ScottDurow for your help!

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

Like (0)

Report

Hi @OPEC-JoshWalsh ,
Great that you could import the component.
I have a little input to your comments:

To 2. You don't need to delete the components in order to update them. During the development phase, you can upload it using
"pac pcf push -pp <prefix>" (executed in the folder of your ".pcfproj") . This will upload the component to a solution named "PowerAppsTools_<prefix>".
When your're done with the development, and want to make a new release, you can build the solution using "msbuild", but need to increment the version number in the manifest. Just don't change the "Major" part of the number. Then you can update the component by installing the solution.

To 3: I have already components with "Enum" properties which I've imported in CanvasApps. This should work for you too.
Check your "display-name-key", "description-key" parts of your property defined as Enum, or maybe the "value" nodes inside. There is a bug: some special chars (like ' "Apostrophe" or semicolon are not treated right and it breaks your manifest import). Maybe you have an issue with that.

Kind regards,
Diana

Was this reply helpful? Yes No
OPEC-JoshWalsh 20 on at

Like (0)

Report

Thanks @DianaBirkelbach , that command is very useful, it makes it much quicker to try things out.

It turns out that spaces are not allowed in the "name" property of "value" nodes. I find the structure of the <value> element quite strange in general. In HTML you have a <select> element with multiple <option> elements inside it. On an <option> element, the content of the node is the displayed text, and the "value" attribute defines the underlying value of that option.

But (at least in the test harness) this behaviour is inverted in PCF. The node content is the underlying value, and the "name" property becomes the displayed text.

It doesn't seem like it matters very much though, as in PowerApps Studio's Properties pane Enum seems to be treated just like SingleLine.Text, allowing free typing instead of a dropdown.

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

Like (0)

Report
Hi @OPEC-JoshWalsh ,

I've just tested the Enums in CanvasApp. It's true that you can input any text, but you can still use the enum you defined.

In my case, I can choose from the defined options.

while the Manifest for my Enum is this:

<property name="displayTextType" display-name-key="Display_text_type" description-key="Display text type" of-type="Enum" usage="input" required="true"> <value name="SIMPLE" display-name-key="No decoration" description-key="No decoration" default="true">SIMPLE</value> <value name="BOX" display-name-key="Colorful background" description-key="Colorful background">BOX</value> <value name="BORDER" display-name-key="Colorful Border" description-key="Colorful Border">BORDER</value> </property>

I haven't thought to use spaces in the name, since they are the Enum properties that I use in the code. For the user, there is the "display-name-key", which can be translated too. But unfortunately I don't see that in CanvasApps.

Hope this helps!

Kind regards,

Diana

Was this reply helpful? Yes No