Custom Command Bar Formatting in SharePoint
Learn to enhance SharePoint user experience by customizing command bars. Add custom buttons, change icons, and edit titles easily with JSON formatting.
Author Daniel Anderson introduces SharePoint command bar customization to enhance user experience in a recent You Tube video. He guides the viewers on personalizing the traditionally plain 'New' button, introducing context-rich, custom buttons like "Upload a New Invoice" or "Upload a Policy."
SharePoint online customization features are leveraged to modify the buttons icons and titles, leading to a unique interface. The 'text' and 'iconName' properties receive defined values to facilitate this.
A JSON snippet portrayal is shared as an example, serving as view formatter in a view, that replaces native icons/text for various buttons/menus. This results in major alterations, for instance, 'New' button's icon changes and the text adjusts to ‘Add a new Event Session’ instead.
The other alterations are 'Export' button's text changes to 'Export this list', 'Automate' button's icon changes, and its text becomes ‘Workflows’. Finally, 'Integrate' button's icon changes and its text becomes ‘Power Platform’.
The icons accessible for command bar customization are procedurally similar to Microsoft's Fluent UI. Those needing to customize can search and pick the name from the Fluent UI Icons page.
Jason coding facilitates easy changes in icons and text for the SharePoint site's command bar buttons. Note that these changes solely impact the view where they're implemented, necessitating manual application for each view.
More on SharePoint Command Bar Customization
The command bar customization introduced is a pivotal tool in enhancing user engagement and interaction. The creation of a distinctive interface bolsters a user-friendly environment and streamlines various processes through the implementation of context-rich navigation buttons.
Targets of such alterations include habitual tasks such as uploading unique business documents, workflows, or lists. The implementation of clear, concise command labels and visually appealing icons boosts productivity and consolidates SharePoint Online as a crucial business tool.
The use of JSON formatting presents the advantage of ease and convenience, making customization accessible to even non-technical users. This opens up SharePoint Online's potential to be molded to the business's unique needs, fostering an ever-evolving platform tailored to its users.
Learn about Custom SharePoint Command Bar Formatting
In this discussion, we are focusing on the customization of the SharePoint Command Bar, a feature of Microsoft SharePoint Online. This is a technique that significantly enhances the SharePoint user experience by altering key components within the existing toolbar. You'll discover how to turn the standard 'New' button into a more context-conscious interface with bespoke buttons such as "Upload a New Invoice" or "Upload a Policy."
We will delve into the customization options available that allow you to modify the buttons' icons and titles. This is achieved by inputting specific values into the 'text' and 'iconName' properties within the JSON formatting view. One example of this has replaced some of the original buttons' icons and text with custom versions. Below, there are details on how you can do this too.
By applying a particular JSON snippet to your view as the view formatter, you can make individual replacements to the inbuilt icons and text for the buttons and menus. For instance, the native 'New' button can be changed into 'Add a new Event Session', with a change of icon as well. Similar modifications can be made for 'Export', 'Automate' and 'Integrate', altering the text and the images associated with these buttons.
Your source for customizing icons comes directly from Microsoft’s Fluent UI. The Fluent UI Icons page is an excellent resource for finding new images to incorporate into your SharePoint Online command bar. Remember to make note of the image names, as they will be needed in the JSON snippet.
- Customize the 'New' button by adjusting the icon and changing the text to 'Add a new Event Session'
- Alter the 'Export' button to 'Export this List'
- Adjust both the text and icon of the 'Automate' button to 'Workflows'
- Change the 'Integrate' button to 'Power Platform' with a 'Rocket' icon
It's crucial to note that although JSON formatting is a tool that makes the modification process smooth, the changes only apply to the view where you've applied them. If you intend to have them in other views, you'll need to manually add them.
For more in-depth knowledge about the syntax for command bar customization, you can explore: Command bar customization syntax reference – Microsoft Learn. This will provide comprehensive directions to enhance the user interface of your document libraries on SharePoint Online.
More links on about Custom SharePoint Command Bar Formatting
- Command bar customization syntax reference
- Aug 19, 2022 — Command bar customization helps personalize a list to suit specific requirements. The JSON based feature allows basic changes to the command bar ...
- Customize the SharePoint command bar icons and titles ...
- Feb 11, 2023 — Customize the SharePoint command bar icons and titles with JSON formatting · New: Change the icon and change the text to 'Add a new Event Session ...
Keywords
Custom SharePoint, Command Bar Formatting, SharePoint Customization, SharePoint Command Bar, Custom Command Bar, SharePoint Formatting, SharePoint UI Customization, Command Bar Design, SharePoint Development, SharePoint Bar Custom Format.