SP.UI.Controls.Navigation – Issues

This is just a quick post about a few issues we have noticed with the SP.UI.Controls.Navigation control. The navigation control is the ribbon strip found at the top of provider hosted apps and it is usually instantiated via client side code on each given page in your app.

So as an example you might have some calling code that looks something like the following:


Now this works great most of the time. It dynamically creates a navigation strip at the top of your app in your chosen delegated html element (in the example above, this had the ID of ‘chrome_ctrl_placeholder’) and the now common place cog menu is placed in the top right of the screen.

Some Issues to Look out For

However, every now and then the dynamic retrieval of the stylesheet that contains the cog styles (and therefore the cog image) is not downloaded properly and it can cause some issues.

Another issue you may see, is when someone installs your app on their private MySite. As you can see from the screenshot above, this control inexplicably replaces the name of the person (the mysite after all belongs to them) with a ‘+’ character replacing any spaces.

Confusingly, this does not happen for any site which has a space in the title, but regardless, you will probably want to introduce some cleanup code to resolve this.

Finally, we found that the default styles that get imported with this control can sometimes not play nice with your app, so all in all, you will want to amend the script to catch all of these problems (like in the following example):

SP.UI.Controls.Navigation – Issues

Leave a Reply

%d bloggers like this: