power apps component framework , type script

[vani2000]

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

[a33ik · Accepted solution]

Hello,

You can check following control - https://github.com/ManirajKV/PCF/blob/master/ButtonControl_BIDS/ButtonControl/index.ts

[HemantG · Accepted solution]

>> 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]

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]

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]

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 · Accepted solution]

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

[vani2000]

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 · Accepted solution]

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.

[vani2000 · Accepted solution]

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