cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Axal
Post Partisan
Post Partisan

My first PCF not working

Hi,

 

I'm beginner and looking for some advice for what's wrong with my first PCF. I get the tutorial from Youtube : https://www.youtube.com/watch?app=desktop&v=H7vMXphR8Eo

 

It looks for me the PCF only for show some text in browser, but it seems not working for me. The steps I took :

1.  Go to index.ts in Visual Studio Code then add these variables :

        //Value of the field is stored and use inside the control
	private _value: string;

	//Reference to ComponentFramework Context object
	private _context: ComponentFramework.Context<IInputs>;

	//Reference to the control container HTMLDivElement
	//This element contains all elements of our custom control example
	private _container: HTMLDivElement;

 

2. Add the init method like below:

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
	{
		// Add control initialization code
		this._context = context;
		this._container = document.createElement("div");
		this._value = context.parameters.sampleProperty.raw!;
		this._container.innerText = this._value;
		container.appendChild(this._container)
	}

 

3. Then UpdateView method :

public updateView(context: ComponentFramework.Context<IInputs>): void
	{
		// Add code to update control view
		this._value = context.parameters.sampleProperty.raw!;
		this._context = context;
		this._container.innerText = this._value;
	}

 

While no error on the code, but in my browser, whatever I input text in the Input, nothing change. But the width and height of the box reflected as my setting :

Axal_0-1625382145927.png

 

Is there something I missed ? What could be the problem ?

 

Please help,

Thanks.

1 ACCEPTED SOLUTION

Accepted Solutions
DianaBirkelbach
Super User
Super User

Hi @Axal , 

 

It looks ok to me. Maybe it could help to restart the Harness (npm start watch). 
You could try to debug, using the developer tools (F12), and see what happens when the updateView is called.

The next step could be to upload the PCF im your environment and check if it shows the value there.

 

Just in case you didn't noticed: the docs were updated. You can find there:

- tutorials: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/implementing-controls-using...

 - How-To guides, one of them about how to debug: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls?W...

 

Hope this helps!

 

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

2 REPLIES 2
DianaBirkelbach
Super User
Super User

Hi @Axal , 

 

It looks ok to me. Maybe it could help to restart the Harness (npm start watch). 
You could try to debug, using the developer tools (F12), and see what happens when the updateView is called.

The next step could be to upload the PCF im your environment and check if it shows the value there.

 

Just in case you didn't noticed: the docs were updated. You can find there:

- tutorials: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/implementing-controls-using...

 - How-To guides, one of them about how to debug: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/debugging-custom-controls?W...

 

Hope this helps!

 

Kind regards,

Diana

Kind regards,
Diana
----------
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

View solution in original post

Hi @DianaBirkelbach 

Thank you. Works after npm start watch.

 

 

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (3,351)