cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
vani2000
Level: Powered On

power apps component framework , type script

Hi, I am new to power apps component framework and typescript. I am trying to create a button in type script and add the click listener to the button. I could manage to create a button by calling document.create Element("button");

 

1. Could you please help me about how should i add a click listener to the button. 

Also, i could see the button in the web page http://127.0.0.1:8181/

2. When i import that component in power apps, i could not see the button in power apps, I am not sure what i am doing wrong. 

I am sure that i am importing it correct, because i tried to create a sample components  from the Microsoft documentation, i could see the TS Linear Input Component in the web page, also in power apps.

Please could some one assist me

Thanks in Advance

9 ACCEPTED SOLUTIONS

Accepted Solutions
a33ik
Level 8

Re: power apps component framework , type script

Power Apps Staff HemantG
Power Apps Staff

Re: power apps component framework , type script

>> 1. Could you please help me about how should i add a click listener to the button

Check out the control set state sample button.addEventListener("click", event => this.onButtonClick(event, this._selectedColorElement)

 

>> 2. When i import that component in power apps, i could not see the button in power apps, I am not sure what i am doing wrong. 

Is the custom control rendered at all or you see the default PB control. Cross check that you have published the solution and the control version is bumped in the manifest so that latest control changes are reflected. Check the code in browser debugger  to see if there are any control rendering issues. 

 

Hemant 

View solution in original post

ben-thompson
Level 8

Re: power apps component framework , type script

You need to run pac pcf push -pp vani -f from the same directory you would run npm run build in.

 

 

View solution in original post

ben-thompson
Level 8

Re: power apps component framework , type script

To create a profile the command line command is

 

pac auth create --url https://Url_including_.dynamics.com bit for instance https://testinstance.crm11.dynamics.com but it could be org123srs2.crm4.dynamics.com if you are using a powerapp.

 

that will popup the login screen and allow you login and create your credentials which will then be cached for further use until they change or expire.

View solution in original post

vani2000
Level: Powered On

Re: power apps component framework , type script

Thanks for the reply

I create the authentication profile using the below

PS C:\Users\vani\Documents> pac auth create --url https://testinstance.crm11.dynamics.com
Authentication successfully created.
Validating connection...
Connected to...
Could not connect to the CDS Organization at https://testinstance.crm11.dynamics.com.

Error: Unable to Login to Dynamics CRM

==============================

I also tried as below

PS C:\Users\vani\Documents> pac auth create --url https://metamicro123.crm11.dynamics.com
Microsoft PowerApps CLI
Version: 1.1.6+g29558dc

Error: An error occurred while sending the request.
The remote server returned an error: (502) Bad Gateway.

 

Please could you advise! Thanks

View solution in original post

ben-thompson
Level 8

Re: power apps component framework , type script

When you open / play the application you are trying to attach the PCF component to the url is the bit below in the browser.

Screenshot_43.png

 

 

In the screenshot above https://org875b999.crm4.dynamics.com is my sandbox instance for one of the things we are working on - as with https://testinstance.crm11.dynamics.com you won't be able to connect to it as that is another of my development instances.

 

For reference - the url of a Dynamics or model driven power app is in 2 bits.

 

your instance name . crm / azure region followed by dynamics.com 

 

you need to know your organization name I'm guessing its'  metamicro123 and the number for the crm region metamicro123 is in (as it is clearly not in region  11 which is the UK) so the url will be something like https://metamicro123.crm?.dynamics.com where the ? is the number for the azure region your instance is in. 

 

View solution in original post

vani2000
Level: Powered On

Re: power apps component framework , type script

Thank you very much for the reply. you are correct about this, and i managed to get the URL and created the authentication profile.

Now i am trying to use the command pac pcf push --publisher-prefix dev and i am getting the following errors. I do see the zip file named powerAppsTools_dev in the path C:\Users\vani\Documents\RetrieveQuestionComponent\obj\PowerAppsTools_dev\bin\Debug.

But i dont see the powerAppsTools_dev in power apps.

 

Error: Import Solution Failed: CustomControl with name QuestionNamespace.RetrieveQuestionInputComponent failed to import with error: CustomControls with Name QuestionNamespace.RetrieveQuestionInputComponent Import Solution Failed with following error: The forceupdate flag for the control QuestionNamespace.RetrieveQuestionInputComponent is set to true but the control version in the solution is less than the control version in CDS. Please make sure the versions are atleast equal.

 

Please could you advise,

 i am new to the PCF and learning. 

View solution in original post

ben-thompson
Level 8

Re: power apps component framework , type script

The quickest way to fix that is to:-

 

login to Dynamics and

 

remove the custom control from the page it is on (just open the field and delete it).

publish the page

delete the existing version of the control

 

then publish the control from the command line

 

and add it to the control it was attached to before.

 

I'm sure someone else will come along with the actual solution but I encountered the same issue when I moved from using the build and import approach to the push approach and I didn't have time to wait for an answer.

 

View solution in original post

Power Apps Staff jopursle
Power Apps Staff

Re: power apps component framework , type script

Hi @ben-thompson 

The issue is due to incrementing the control version and using push.  For now the workaround is to not increment the control version and push, or do as you suggested and remove and re-add the solution.  There has already been a fix checked in on the code side to fix the root cause of the issue, but it hasn't made it to all the way down to all regions yet.  It will hopefully be available in the NA region at the end of this week though.

View solution in original post

13 REPLIES 13
a33ik
Level 8

Re: power apps component framework , type script

Power Apps Staff HemantG
Power Apps Staff

Re: power apps component framework , type script

>> 1. Could you please help me about how should i add a click listener to the button

Check out the control set state sample button.addEventListener("click", event => this.onButtonClick(event, this._selectedColorElement)

 

>> 2. When i import that component in power apps, i could not see the button in power apps, I am not sure what i am doing wrong. 

Is the custom control rendered at all or you see the default PB control. Cross check that you have published the solution and the control version is bumped in the manifest so that latest control changes are reflected. Check the code in browser debugger  to see if there are any control rendering issues. 

 

Hemant 

View solution in original post

vani2000
Level: Powered On

Re: power apps component framework , type script

Hi Hemant,

Thanks you for your reply. I could add the click listener to the button now. and it works fine. thanks for that.

 

but if i make some change in the typescript file(index.ts). i could see the change in the browser.

For example, i followed the code as you have mentioned in the GIT hub, to add a button with event listener. The first time, when i import the solution zip file from power apps, i could see the button and i can click on it which is fine

 

Now i make a small change, (eg: i display a text on the button). and run npm start. i can see the change in the web page, i want to see the text in the power apps also. so i follow the same steps again like creating solution folder, running the pac solution init --publisher-name developer --publisher-prefix dev, adding reference, msbuild /t:restore, msbuild. when i import the newly created solution zip file, i am not able to see the change in power apps.

 

Do i need to change the control version in the manifest file  every time i create a solution?

so the first time, i am seeing the control what i need to see in power apps, second time the changes are not shown

 

 

ben-thompson
Level 8

Re: power apps component framework , type script

If you are building the solution file manually you need to increment the version number in the controlmanifest file before compiling the component and building the solution file.

 

Instead of continually doing the manual steps above (which used to be the only way) it's better to just publish the solution from the command line using the following command 

 

pac pcf push -pp (publishername) -f

 

see https://d365spartan.wordpress.com/2019/09/12/powerapps-component-framework-pcf-push/ for slightly more details.

vani2000
Level: Powered On

Re: power apps component framework , type script

Hello,

when i run the pac pcf push -pp vani -f i get the error 

Error: PowerApps component framework project file with extension pcfproj was not found in the directory C:\Users\vani\Documents\loginComponent\solution.

 

But i have manged to get the changes visible in power apps by deleting the solution from the environment in power apps and import the solution zip file again. i think there should be some easier way to do this.

 

Also, could you guide me how to pass parameters from power apps to the typescript (index.ts)

for eg: i have created a input field and button in the typescript. if i type 5 in the input box and press the button, it will return the square of 5  = 25.

I import this component to power apps, and from power apps i have to pass the parameter as 2 and typescript should return 4. is this possible. could you guide me with this?

ben-thompson
Level 8

Re: power apps component framework , type script

You need to run pac pcf push -pp vani -f from the same directory you would run npm run build in.

 

 

View solution in original post

vani2000
Level: Powered On

Re: power apps component framework , type script

Hi, When i run the pac pcf push -pp vani -f. it shows the error Error: No profiles were found on this computer. Please run 'pac auth create' to create one.

so i tried to create a authentication profile.

I am not sure how to find the common data service organization URL, Please could you let me know how will find it?

Thanks 

ben-thompson
Level 8

Re: power apps component framework , type script

To create a profile the command line command is

 

pac auth create --url https://Url_including_.dynamics.com bit for instance https://testinstance.crm11.dynamics.com but it could be org123srs2.crm4.dynamics.com if you are using a powerapp.

 

that will popup the login screen and allow you login and create your credentials which will then be cached for further use until they change or expire.

View solution in original post

vani2000
Level: Powered On

Re: power apps component framework , type script

Thanks for the reply

I create the authentication profile using the below

PS C:\Users\vani\Documents> pac auth create --url https://testinstance.crm11.dynamics.com
Authentication successfully created.
Validating connection...
Connected to...
Could not connect to the CDS Organization at https://testinstance.crm11.dynamics.com.

Error: Unable to Login to Dynamics CRM

==============================

I also tried as below

PS C:\Users\vani\Documents> pac auth create --url https://metamicro123.crm11.dynamics.com
Microsoft PowerApps CLI
Version: 1.1.6+g29558dc

Error: An error occurred while sending the request.
The remote server returned an error: (502) Bad Gateway.

 

Please could you advise! Thanks

View solution in original post

Helpful resources

Announcements
thirdimage

Power Apps Super User Class of 2020

Check it out!

thirdimage

New Badges

Check it out!

thirdimage

Power Apps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

SecondImage

Difinity Conference

The largest Power BI, Power Platform, and Data conference in New Zealand

Users online (5,860)