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

How to toggle or update elements in PCF

Hi,

 

How to update or toggle elements.  see the following code.

 

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
	{
	
		
		this.mainContainer = document.createElement("div");
		//this.mainContainer.classList.add("SimpleTable_MainContainer_Style");
		container.appendChild(this.mainContainer);
		let clickMe:HTMLButtonElement;
		clickMe = document.createElement("button");
		clickMe.setAttribute("type", "button");
		clickMe.innerText = "ClickMe";
		clickMe.id="ClickMe";
		this.mainContainer.appendChild(clickMe);
		clickMe.addEventListener("click", this.addNewButtonClick.bind(this));
				
	}
	private addNewButtonClick(event: Event): void {
		
			var currentButton=document.getElementById('ClickMe') as HTMLButtonElement;
			currentButton.innerText="done";
			
		

		}

 

 

Nothing is happening when I click the button. I debugged using the browser, it is getting into the method but the element is not updating. I tried to set style, toggle() etc. 

But this is working when am using the PCFin the local test harness..

 

Please advise.

Many Thanks 

1 ACCEPTED SOLUTION

Accepted Solutions
a33ik
Level 8

Re: How to toggle or update elements in PCF

Hello,

So the way to solve is following:

1. Don't use getElementById to get your element.

2. Create a private property in your control code and assign created control to it.

3. Use this property when you have a need to do anything with your control.

 

You can find an example here  -https://github.com/AndrewButenko/EntityFieldOptionset_PCF/blob/master/EntityFieldOptionset/index.ts

View solution in original post

3 REPLIES 3

Re: How to toggle or update elements in PCF

Hi @Nijo,

 

Please update you addNewButtonClick() then it will work.

 

    private addNewButtonClick(event: Event): void {
        var currentButton = document.getElementById('ClickMe'as HTMLButtonElement;
        currentButton.innerText = currentButton.innerText == "ClickMe" ? "Done":"ClickMe";
    }
Nijo
Level: Powered On

Re: How to toggle or update elements in PCF

Hello,

Finally, I found the reason, the code was working but I had the same control added in another tab on the same form which was hidden. So if I click on this the changes were reflecting on the other one.

So does anyone know who to avoid this issue? if I have added the same PCF for same field or grid multiple times, the ID generated for components on the DOM will be same, is there a way to overcome this?

 

May thanks 

a33ik
Level 8

Re: How to toggle or update elements in PCF

Hello,

So the way to solve is following:

1. Don't use getElementById to get your element.

2. Create a private property in your control code and assign created control to it.

3. Use this property when you have a need to do anything with your control.

 

You can find an example here  -https://github.com/AndrewButenko/EntityFieldOptionset_PCF/blob/master/EntityFieldOptionset/index.ts

View solution in original post

Helpful resources

Announcements
thirdimage

Power Platform 24

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

Users online (5,406)