How to apply background color to a custom button in the command bar of a SharePoint list using SPFx ListView Command Set?

Question

The background color is not applying when the custom button moves from the overflow section to the command bar

I want to apply a background color to a custom button. The background color is applied when the button is in the command bar but not when the button moves from the overflow section to the command bar.

also, the background color does not apply while opening the overflow section a second time

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Sep 29, 2024 at 15:25
const intervalId = setInterval(() => { if (buttonElement.length > 0) { buttonElement[1].classList.add('propertyClosurBtn'); clearInterval(intervalId); } }, 100) i finding custom button in the dom and applying styles to the button in onListViewUpdated method — VijayBhaskar Vennapusa
– VijayBhaskar Vennapusa, Commented Sep 30, 2024 at 4:15

William · Accepted Answer · 2024-09-29 15:41:28Z

1

I am assuming you are trying to add a buttonStyle to the custom button, like so:

{
    key: 'buttonKey',
    text: 'buttonText',
    buttonStyles: { root: { backgroundColor: 'red' } }
}

I've confirmed that this style only appears on the command bar, and not if it appears in the overflow dropdown.

What you might try is instead adding a custom class to the button and applying the background color to that class. I have found that that will carry over from the command bar to the overflow dropdown.

{
    key: 'buttonKey',
    text: 'buttonText',
    className: 'customClass' //customClass has background color set
}

Note this CodePen - you will see that the red background is maintained both when the button is in the command bar as well as when it is overflowed (you can test this by reducing the width of the window).

Hope this helps!

answered Sep 29, 2024 at 15:41

William

111 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

VijayBhaskar Vennapusa Over a year ago

where i need to add that

William Over a year ago

To confirm, you are using a Fluent UI commandbar, yes? You can see it in line 142 of the CodePen in my answer - where you add the key/text/onclick/etc to a given button, you can also add a className.

VijayBhaskar Vennapusa Over a year ago

Thanks for answering my question, here we are creating a button with the spfx list view command set and I need to apply styles to that button. here is why we need to use the command bar, we already have the command bar and some buttons in the command bar in the SharePoint list.

Travis Pluff · Accepted Answer · 2024-12-14 14:17:28Z

I couldn't find an answer anywhere that worked for me, and I figured this out so I wanted to share. I have a spfx listview command bar extension as well and it's to replace the New/Edit buttons on a list with PowerApps deeplinks which I'm sure is a growing need. Seems to be what OP is looking for.

The "Key" is to add SpfxCustomActionNavigationCommand_ as a prefix to your custom button keys as they're defined in your spfx code. Then you can do whatever you want with them like normal command bar buttons in the list view JSON formatting. If you want to replace the New button you can use the Primary property but it must be in postion 0 for it to assume the Primary button style. Also hide the new button as well of course. As your needs determine etc. See mine below:

My custom button keys are COMMAND_1_MTR_NEW and COMMAND_2_MTR_EDIT, but I had to add the prefix for it to work, this is a cut out I'm assuming you have the schema and are hiding buttons or doing other thigns above this:

  {
    "key": "SpfxCustomActionNavigationCommand_COMMAND_1_MTR_NEW",
    "position": 0,
    "primary": "true",
    "text": "Create New Transfer Request",
    "iconName": "Add"
  },
  {
    "key": "SpfxCustomActionNavigationCommand_COMMAND_2_MTR_EDIT",
    "position": 1
  }

Collectives™ on Stack Overflow

How to apply background color to a custom button in the command bar of a SharePoint list using SPFx ListView Command Set?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related