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

Notifications

Announcements

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Apps

#1
Kalathiya Profile Picture

Kalathiya 445

#2
WarrenBelz Profile Picture

WarrenBelz 386 Most Valuable Professional

#3
MS.Ragavendar Profile Picture

MS.Ragavendar 321 Super User 2025 Season 2

Last 30 days Overall leaderboard