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 + “//” + + this.model.publicUrl;, “_blank”);

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

And here is the full source code:

// Parent class
// Commands
], function (
// Dojo
// Parent class
// Commands
) {
return declare([module], {
initialize: function () {

view raw
hosted with ❤ by GitHub

<?xml version="1.0" encoding="utf-8"?>
<!– This adds the Alloy template assembly to the "default module" –>
<add assembly="AlloyDemoKit" />
<add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
<!– Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration –>
<add name="alloy" path="Scripts" />
<clientModule initializer="alloy.Initializer">
<add dependency="CMS" type="RunAfter" />

view raw
hosted with ❤ by GitHub

], function (topic, declare, dependency, command) {
return declare([command], {
label: "View on Website",
iconClass: "epi-iconNewWindow",
constructor: function () {
var registry = dependency.resolve("epi.storeregistry"); = registry.get("epi.cms.contentdata");
_execute: function () {
if (this.model != null && this.model.publicUrl != null) {
var publicUrl = location.protocol + "//" + + this.model.publicUrl;, "_blank");
_onModelChange: function () {
this.set("canExecute", true);

view raw
hosted with ❤ by GitHub

This work is based on Tahir Naveed’s blog post about adding an item in the context menu. So, thanks Tahir! (—episerver-10-1-way/)

Update: There is also a similar solution by Marija Jemuovic. You can find it from her blog:

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.