Customer experience | Sales, Customer Insights,...

Answered

Hide a custom ribbon button with JavaScript

(0) Share

Report

Posted on by SB-28050802-0

I need to hide a button in ribbon with javascript(without ribbon workbench),

I am trying to get the button with it's arial-label dynamic, because I need to be sure my code works well in all our environments.

I use this code, but it doesn't work:

even if I eliminate addeventlistener(), the buttoncontrols always return null.

function HideInfoButton(executionContext) {

// Wait for the DOM to be fully loaded

document.addEventListener('DOMContentLoaded', function () {

var formContext = executionContext.getFormContext(); // Get the form context

// Use querySelectorAll to get all elements with data-id attribute

var buttonControls = formContext.ui.controls.get(

function (control) {

// Replace 'aria-label' and 'To update' with the actual attribute and value

return control.getAttribute().getName() === 'aria-label' && control.getAttribute().getValue() === 'Aktualisieren';

}

);

if (buttonControls.length > 0) {

console.log('Button will be hidden');

buttonControls.forEach(function (buttonControl) {

buttonControl.setVisible(false); // Hide each button

});

}

});

}

I have the same question (0)

All responses (4)

Answers (1)

Suggested answer

Dengliang Li Microsoft Employee on at

Like (0)

Report

Hi,

According to the official documentation, the type of control does not include buttons.

Controls in model-driven apps for Dynamics 365 - Power Apps | Microsoft Learn

You need to get the HTML element of the button through the element selector.

Then hide the button by setting the button: style.display = "none".

Best Regards,
Dengliang Li

Was this reply helpful? Yes No
SB-28050802-0 12 on at

Like (0)

Report

Thanks Dengliang Li,

So I've changed it to this but it doesn't work. queryselector can not find the element, even with or without button[].

Was this reply helpful? Yes No
Verified answer

Dengliang Li Microsoft Employee on at

Like (0)

Report

Hi,

You need to precede document.queryselector with /window.top./ i.e. window.top.document.queryselector.

Get the button's HTML element in the top browser context frame.

Best Regards,
Dengliang Li

Was this reply helpful? Yes No
SB-28050802-0 12 on at

Like (0)

Report

Finally I used this code and it works, but I always have to press+f5 to hide the button, it doesn't happen at first time.
anybody has a suggestion?

function HideRibbonButton() {

var iAmInAFrame = (window.top !== window.self);

const buttonControls = window.top.document.querySelector('button[aria-label="Info/Frage. Eine E-Mail wird an den hinterlegten Benutzer verschickt"]');

console.log(buttonControls) ;

if (buttonControls!=null) {

console.log("Button Info/Frage will be hidden");

buttonControls.style.display= "none";

};

}

Was this reply helpful? Yes No

Join the conversation

Community site session details

Hide a custom ribbon button with JavaScript

Helpful resources

Quick Links

Responsible AI policies

Neeraj Kumar – Community Spotlight

Congratulations to the November Top 10 Community Leaders!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

Featured topics

Product updates

Community site session details

Hide a custom ribbon button with JavaScript

Helpful resources

Quick Links

Responsible AI policies

Neeraj Kumar – Community Spotlight

Congratulations to the November Top 10 Community Leaders!

Subscribe to this forum!

Select categories

Leaderboard > Customer experience | Sales, Customer Insights, CRM

Featured topics

Product updates