web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / How to toggle or updat...
Power Apps
Answered

How to toggle or update elements in PCF

(0) ShareShare
ReportReport
Posted on by 61

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 

I have the same question (0)
  • Sheldon Copper Profile Picture
    200 on at

    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";
        }
  • Nijos Profile Picture
    61 on at

    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 

  • Verified answer
    a33ik Profile Picture
    3,306 Most Valuable Professional on at

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 525 Most Valuable Professional

#2
Haque Profile Picture

Haque 308

#3
Kalathiya Profile Picture

Kalathiya 234 Super User 2026 Season 1

Last 30 days Overall leaderboard