Adding a “View on Website” -button to context menu in navigation tree

Ever had a problem where you would like to open or get the full public address of a page from the editor view in Episerver? Or is it a problem at all?

So, we have a few ways to get the full public url:

  • Navigating the site, if you have a navigation for those pages. Pages could also be hidden from the navigation and be accessible only by direct url.
  • Using search in the site and hope it finds the page.
  • From the editor, select Page > Options > View on website (opens by the way in the same window).
  • There’s probably more, but I’ll settle for these.

I’d like to introduce another option which is quite handy and very simple to implement. Navigating straight from the page tree’s context menu without loading or selecting the page on the editor.

Like this:

Basically, we want to create a client module with a command: ViewOnWebsite and plug it in to the NavigationTreePluginArea.

We will be needing two files: Initializer.js and ViewOnWebsite.js. We also have to add the client module to the module.config. All we need is a bit of JavaScript and the information about the page’s public url. We can see from the Episerver documentation that there is a publicUrl property which we can use.

This is all the logic we need for this to work:
var publicUrl = location.protocol + “//” + location.host + this.model.publicUrl;
window.open(publicUrl, “_blank”);

Here you can see the final file structure in the VS solution:

And here is the full source code:

This work is based on Tahir Naveed’s blog post about adding an item in the context menu. So, thanks Tahir! (https://world.episerver.com/blogs/Tahir-Naveed/Dates/2016/11/adding-a-menu-item-into-context-menu—episerver-10-1-way/)

Update: There is also a similar solution by Marija Jemuovic. You can find it from her blog: http://mariajemaria.net/open-unselected-page-new-tab-episerver-tree

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s