cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Nijo
Helper I
Helper I

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

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
sheldoncopper73
Resolver I
Resolver I

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";
    }

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 

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
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (1,738)