What is the best way to completely change the Header of smart view and classic view?

Yasir Ansari

Hi,

We have a requirement to completely change the header of the smart UI and classic view. What is the best possible way to make this change? Sample header attached for reference.

Header UI.PNG

Greg Griffiths

In Classic View you can add a Global Appearance to replace it for the most part, Smart UI is little more complex.

Ferdinand Prantl

You can explore capabilities of Appearances and ActiveViews for Classic UI.

About Smart UI

You cannot replace the application header. You can customise it, but the current capabilities will not be enough for your example. You can file a feature request about adding custom buttons to the application header.

Your picture can be translated to the following customisations:

1. Change the background colour.
2. Replace the company logo
3. Move the company logo all the way to the left.
4. Hide Help, Home, Breadcrumb, Search, Favourites, Insights and Profile buttons.
5. Insert org.sp.admin, gear and English buttons.

The first four customisations are supported. They include CSS style overrides (1, 2) and the configuration method CSUI::Extension:GetDynamicConfiguration in OScript (3, 4).

The fifth customisation is the most important, but not feasible today. Adding new buttons/icons is blocked, because Smart UI has no concept how to accommodate all of them, when the window with the Smart UI page gets narrower.

As a workaround, globally available actions can be added to the dropdown menu below the user icon on the right side.