Skip to main content

Notifications

Power Apps - Building Power Apps
Suggested answer

Is there a way to add a button to the menu bar of a SharePoint list form?

Like (2) ShareShare
ReportReport
Posted on 4 Oct 2024 20:07:30 by 359
Is there a way to add an additional button to the nav bar of the SharePoint List form.
 
 
 
 
 
 
Categories:
  • timl Profile Picture
    timl 32,211 on 08 Oct 2024 at 10:27:17
    Is there a way to add a button to the menu bar of a SharePoint list form?
    Hi Trout19
     
    Whist it's possible to add a button using JSON, I don't think it's possible to configure the button to call a Power Apps formula.
     
    As per the documentation, you could execute a Flow by specifying executeFlow, but there wouldn't be any way to interact with your Power Apps form. 
     
     
    One thing to note is that you want to override the default behaviour of the Cancel button, you can do that via the OnCancel property of the SharePoint integration object.
     
  • Trout19 Profile Picture
    Trout19 359 on 07 Oct 2024 at 18:20:32
    Is there a way to add a button to the menu bar of a SharePoint list form?
    Ok, i figured out where to put it, but when i try to add code, nothing happens. This is the code I am using
     
    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
      "commandBarProps": {
        "commands": [
          {
            "key": "customButton",
            "text": "My Custom Button",
            "iconName": "Add",
            "onClick": {
              "action": "defaultClick",
              "parameters": {
                "url": "https://your-custom-url.com"
              }
            }
          }
        ]
      }
    }
     
     
    After I press save nothing happens. Am i missing a step to get it to show up?
  • Trout19 Profile Picture
    Trout19 359 on 07 Oct 2024 at 14:06:04
    Is there a way to add a button to the menu bar of a SharePoint list form?
    Great Thanks, I am a little unsure how or where I put the code.
     
    This is what I am looking at. 
     
  • Suggested answer
    RobotRising Profile Picture
    RobotRising 402 on 04 Oct 2024 at 20:52:26
    Is there a way to add a button to the menu bar of a SharePoint list form?

    Yes, it is possible to add a custom button (such as the "Cancel Request" button you highlighted) to the command bar (navbar) of a SharePoint List form. This can be done by customizing the list using Power Apps or using SharePoint JSON formatting to modify the UI.

    Here’s a breakdown of both approaches:

    1. Using Power Apps to Customize the Form

    If you switch to using Power Apps to customize the SharePoint list form, you can add custom buttons directly in the app interface:

    • Steps to add a button in Power Apps:
      1. Open the SharePoint List.
      2. Click on Integrate > Power Apps > Customize forms.
      3. In Power Apps Studio, you can add a new button to the form by going to the left panel and selecting Insert > Button.
      4. Once you add the button, you can write a formula for the OnSelect property of the button to handle specific actions (e.g., canceling the request, submitting the form, etc.).
      5. Save and publish the Power App form back to SharePoint.

    2. Using SharePoint JSON Formatting to Add Custom Actions

    SharePoint allows you to use JSON formatting to customize the appearance and functionality of list views and command bars (such as adding custom buttons).

    • Steps to add a button using JSON formatting:
      1. Go to the SharePoint list.
      2. Click on the gear icon (settings) > List settings > Advanced settings.
      3. Ensure that custom scripting is enabled.
      4. Back in the list, select the view where you want to add the button, then click on the View dropdown and select Format current view.
      5. In the formatting pane, add the JSON code to insert the custom button. You can use the "customRowAction" property to define what happens when the button is clicked.

    Example JSON for a button might look like this:

    {
    "commandBar": {
    "commands": [
    {
    "key": "customCancelButton",
    "text": "Cancel Request",
    "iconName": "Cancel",
    "onClick": {
    "action": "customAction",
    "parameters": {
    "message": "You clicked the cancel button!"
    }
    }
    }
    ]
    }
    }

    This JSON code would add a "Cancel Request" button that displays a message when clicked. You could customize the action to suit your requirements (like triggering a workflow or redirecting the user).

    Which Method to Choose:

    • If you need more advanced logic (e.g., interacting with multiple fields or running specific workflows), Power Apps is likely the better option.
    • For simpler customizations that don't require building complex logic, JSON formatting can be quick and effective.
     
     
    Robot Rising

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

November 2024 Newsletter…

November 2024 Community Newsletter…

Community Update Oct 28…

Power Platform Community Update…

Tuesday Tip #9 Get Recognized…

Welcome to a brand new series, Tuesday Tips…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 144,316

#2
RandyHayes Profile Picture

RandyHayes 76,308

#3
Pstork1 Profile Picture

Pstork1 64,290

Leaderboard
Loading complete