Answered

power apps component framework , type script

(0) Share

Report

Posted on by 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

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (13)

Answers (9)

Sort by

Verified answer

a33ik 3,306 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Verified answer

Hemant Gaur Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
vani2000 67 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Ben Thompson 1,400 on at

Like (0)

Report
Copy link

Link copied!
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.

Was this reply helpful? Yes No
vani2000 67 on at

Like (0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
Verified answer

Ben Thompson 1,400 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
vani2000 67 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Verified answer

Ben Thompson 1,400 on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
Verified answer

vani2000 67 on at

Like (0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No
Verified answer

Ben Thompson 1,400 on at

Like (0)

Report
Copy link

Link copied!

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

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.

Was this reply helpful? Yes No