Configure Mercury¶

If you're a site owner, you can use this option to set up how various components in the Top Bar behave, without needing to modify the underlying topbarconfig.json file.

To get started, click the "Configure" icon in the top right.

Configure: Open

When making changes, if you click the "X" at the top right you preview how the Command Bar looks & behaves prior to commiting the changes. The Wrench icon that launches the Configuration Panel shows a red hint indicating there are unsaved changes. To save these, go back into the Panel and click "Save" at the bottom, or "Cancel" to back out all changes.

Command Bar Items¶

This section lists all the command bar items that can be configured. Each one can be turned on or off (by checking or unchecking the Active checkbox), have their display title set, decide whether to open their panel from the left or right of the screen, and what width the panel should be.

Ordering the items¶

You can drag & drop the double-arrow icon to choose which order the items should be displayed in.

Associated Sites¶

In this section, you can customise how site items appear by choosing a border position and width to show on each site.

Announcements & Service Updates¶

In these two respective sections, you can configure a "Ticker" to appear next to the Announcements or Service Updates icons.

You can specify how wide the ticker should be, and how frequently it "ticks over" to the next time.

For each of these, there is the ability to choose which colour should be used to highlight items of various categories or levels.

The list which feeds these two components can also be specified here by choosing the Site then selecting the List used to drive the content for these.

Connected Hubs¶

In this section you can select which hubs are shown as "Connected Hubs" in the Associated Sites panel.

Pinned Sites¶

In this section, you can search for and select which sites are shown in the "Pinned Sites" section of the Associated Sites panel.

The search will use the Title and Description of the site in order to locate the site. Ensure your sites have reasonable titles and descriptive descriptions to allow discoverability.

To select a site by it's URL, enter the Site URL prefixed with the the text Path: into the search box, e.g.

Path:https://demo.sharepoint.com/sites/documentsite

Event Category Colours¶

Here, you can specify colours to use for showing Events in the Mercury Calendar. The Category column is the name of the Category in the Event itself, and the colour is any CSS-compatible colour value (e.g. RGB, Hex).

FavIcon URL¶

Specify or upload a favicon to use for this hub. Note, you need to save & reload the page to see the new FavIcon being used.

Use this section to set up Social Media links that will appear at the off-side of your Command Bar.

Set up a social media link by first selecting a network from the dropdown.
Provide a link to the social media: you can copy this right out of the browser search bar when viewing the page.

Provide alt text for what appears when uses hover their mouse over the icon.

You can also specify a custom logo to use for the icon if the Dropdown list wasn't sufficient for the icons it provides.

Web Part Date Format¶

Set here the format string to use for Web Parts that show a date. Mercury uses the Luxon date & time library, so the format string must conform to the Luxon formatting tokens. You can see the reference for these here:

https://moment.github.io/luxon/#/formatting?id=table-of-tokens

Command Bar Design¶

You can choose to use standard Icons, or Graphical icons for the command bar by selecting from the two options.

Graphical Icons¶

When you select the Graphical Icons mode - a more colourful icon is shown for each command.

Each command's icon can be overridden in that command's settings, in the "Icon Settings" section.

By default, the standard Graphical Icons are served from the Mercury Intranet CDN, so we periodically update these.

Learn more about how to enable and configure Graphical Icons

About¶

This section displays information about the version of Mercury currently installed in your site. You can use this to identify if the App Catalog has been updated, but the latest version hasn't been updated in your site.