Recently a friend posted on the forums about the idea of being able to share a preview link to an item. While the solution outlined below may not meet his exact needs, it illustrates how easy it is to tap into Episerver plug-in areas to and add additional functionality. For reference, the code below is building on top of the Episerver Foundation CMS project.
There are three parts to creating this enhancement:
- Register your modules in the modules.config
- Update or create an initialization module
- Create a command to execute the menu click event.
<?xml version="1.0" encoding="utf-8"?>
<module>
<dojo>
<!-- Add a mapping from Mosey to ~/ClientResources/Scripts to the dojo loader configuration -->
<paths>
<add name="foundation" path="~/ClientResources/Scripts" />
</paths>
</dojo>
<clientModule initializer="foundation/Initialize">
<moduleDependencies>
<add dependency="CMS" type="RunAfter" />
</moduleDependencies>
</clientModule>
<clientResources>
<add name="epi-cms.widgets.base" path="Styles/Styles.css" resourceType="Style"/>
</clientResources>
</module>
The initialization module loads the necessary modules and then adds the PreviewLink Command into the navigation pane.
define([
"dojo/_base/declare",
"epi/_Module",
"epi/shell/command/_Command",
"epi-cms/plugin-area/navigation-tree",
"foundation/PreviewLink/PreviewLink"
], function (
declare,
_Module,
_Command,
navigationTreePluginArea,
PreviewLink
) {
return declare([_Module], {
initialize: function () {
this.inherited(arguments);
navigationTreePluginArea.add(PreviewLink);
}
});
});
The PreviewLink command defines the command that is executed when the link is clicked. For the preview link we are simply executing taking the model.Preview link property and adding it to the user’s clipboard.
define([
"dojo/topic",
"dojo/_base/declare",
"epi/dependency",
"epi/shell/command/_Command"
], function (topic, declare, dependency, _Command) {
return declare([_Command], {
label: "Preview Url",
iconClass: "epi-iconShare",
constructor: function () {
},
_execute: function () {
var model = this.model;
var previewUrl = window.location.hostname + model.previewUrl;
var copyhelper = document.createElement("input");
document.body.appendChild(copyhelper);
copyhelper.value = previewUrl;
copyhelper.select();
document.execCommand("copy");
document.body.removeChild(copyhelper);
/* Alert the copied text */
alert("Copied Preview Url to Clipboard: " + previewUrl);
},
_onModelChange: function () {
this.set("canExecute", true);
}
});
});
For more information in regards to plug-ins, please see this great article: Plug-in areas
You can have your friend look at this open-source module https://world.episerver.com/blogs/advanced-cms/dates/2019/6/advanced-cms—add-on-for-advanced–external-reviews/. In addition to get a preview link sent in an e-mail, you can actually enable an external person to comment and give feedback on the content.
Nice write up on the Optimizely Full Stack integration! Looking forward to part 2.
Yea, I love the external review. It is one of those items that is a nice differentiator and is extremely powerful. My friend just wanted a copy and paste link that he could email or send in teams. I figured I could show him some basics so that he could develop what was needed. For me, this was the first time that I had done any work with the nav items so it was a good place to learn from. Thanks for stopping by, and thank you for the comment!!