cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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

6 REPLIES 6
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 

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.

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

 

 

Helpful resources

Announcements
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

Top Kudoed Authors (Last 30 Days)
Users online (4,169)