Blog posts by Tahir Naveed2020-02-14T09:29:34.0000000Zhttps://world.optimizely.com/blogs/Tahir-Naveed/Optimizely WorldUsing Microsoft cognitive services to improve content sentiments<p>In this blog post, I will describe how we have utilised Microsoft cognitive services (Text Analytics API) to analyse content before a content author publishes it so it can be rewritten in a more positive tone. The Text Analytics API uses a machine learning classification algorithm to generate a sentiment score between 0 and 1. Scores closer to 1 indicate positive sentiment, while scores closer to 0 indicate negative sentiment.</p>
<p>Content author will be encourged to rewrite content if a score closer to zero is returned - the idea is to make sure our content conveys the message in a postive manner.</p>
<p>A working example can be seen below and all the code is in <a href="https://github.com/tahirnaveed/sentiment-analysis">github</a>.</p>
<p><img src="https://lh3.googleusercontent.com/4-tr9h8r5slzVXhrZJ76r6qlTpM_bC8vNbsdypQv1h3v3vSbXZE04i7De2kXni1uYupCjovsCq6wr519I0Ga0NTU-p9O2CzVlmfNuXjsWCGGmDz9ovHjw-RhEF9UhezCLil9iByr=w2400" /></p>
<h2>The basic steps are as follows</h2>
<ol>
<li>Create a Microsoft azure account and subscribe to Microsoft cognitive services. You will need the end point and a key. A detail documentation can be found <a href="https://azure.microsoft.com/en-us/services/cognitive-services/">here</a></li>
<li>Create a plugin (button) in tinymce
<ol>
<li>The button when clicked will call a server side web api and pass the tinymce content alongwith via an ajax call.</li>
</ol>
</li>
<li>Create a server side web api controller to process content
<ol>
<li>This controller will receive the content from tinymce and will call microsoft cognitive services to analyse sentiments of the content</li>
</ol>
</li>
</ol>
<h2>Visual studio solution architecture:</h2>
<ol>
<li>Use visual studio extension to create basic episerver alloy vinealla website.</li>
<li>Install the following nuget packages
<ol>
<li>install-package Microsoft.AspNet.WebApi
<ol>
<li>You will need to configure some basic routes ( see the working example)</li>
</ol>
</li>
<li>install-package Microsoft.Azure.CognitiveServices.Language.TextAnalytics
<ol>
<li>You will need to configure Cognitive services in Azure portal and then copy/paste the key in the sample</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>Once it is configured, the backend code is all setup.</p>
<p>For front end code, I have utilised yomen TinyMCE Plugin Generator to generate a tinymce plugin. More documentation can found <a href="https://www.tiny.cloud/docs/advanced/yeoman-generator/">here</a>. Simple code to add a button to tinymce editor which when clicked will made an ajax call to backend web api and show the result to end use.<br /><br /></p>
<p>(Please note the code share is a basic example of making it all work together and it is not production ready code)</p>2020-02-14T09:29:34.0000000ZBlog postSet display options for content area item via code<p>On the subject of “note to self” & “for future reference”, when required to setup display options programmatically for a given content area item</p>
<p><code>ContentAreaItem newContentAreaItem = new ContentAreaItem() { ContentLink = “ID of your content”};</code></p>
<p><code>newContentAreaItem.RenderSettings = new Dictionary<string, object>();</code><br /><code>newContentAreaItem.RenderSettings.Add("data-epi-content-display-option",”Id of display option”);</code></p>
<p>And to get all the registered displayoptions</p>
<p><code>var options = ServiceLocator.Current.GetInstance<DisplayOptions>();</code></p>
<p>Hope this might be useful for someone</p>2019-10-11T13:46:11.0000000ZBlog postAdding a menu item into Context Menu - EPiServer 10.1 way<p>A while back, I <a href="/link/be858eba9b4540e4ba5ace135c438a17.aspx">blogged</a> about how to customise the context menu in EPiServer 7. The code used to extend the context menu was not an approach supported by EPiServer and it was not guaranteed to work with any future releases.</p>
<p>I was looking at the EPiServer documentation and came accross plugin areas <a href="/link/54b2ad595a1340ada5f37300957b7934.aspx">document</a> in which EPiServer explains the introduction of "Plug-in areas" for EPiServer 10.1 and higher which can be utilised to customise context menu both for commerce and cms.</p>
<p>The end result will be same and will look like</p>
<p><img src="/link/ccd18442ec864e9a839ab57bfc0d3371.aspx" alt="Image Blog_1.png" /></p>
<p>The VS project looks like </p>
<p><img src="/link/9f91d7bf06f74b6c8d018fe689a3c747.aspx" alt="Image VS.png" /></p>
<p>The gist for the code is <a href="https://gist.github.com/tahirnaveed/c9d0efc9f68475ee858aeb18bdddc17c">here</a>.</p>
<p>Please note that this code will only work for EPiServer.CMS.UI version 10.1 and higher.</p>
<p>It is a very simple code but if you have any questions please feel free to ask.</p>2016-11-17T17:59:09.5530000ZBlog postEPiServer model object browser<p>The Object Browser lets you examine the .net models available for use in EPiServer solution. It is a simple admin plugin in MVC that displays the EPiServer Model Inhertiance Hierarchy. It can also (eventually but not currently :) ) be used to delete the orphan properties (properties with no codebase) & their assosiated content. </p>
<p>All the code needed for this object browser is in <a href="https://gist.github.com/tahirnaveed/62162bfd5c40e1302aa5">this </a>gist. The code is self explainatory, it just gets all the page types using EPiServer API and then using Reflection get the C# class hierarchy.</p>
<p>If you deploy this plugin into AlloyTech and browse the url "/ObjectBrowser/Index", you will see all the models (blocks/PageData/MediaData) available within solution and their corresponding properties. The properties with no codebase will be highlighted in red. </p>
<p>Example for one of the page type is shown below.</p>
<p><img src="/link/c4815dab1d384af3be1f02c8bac2ba0d.aspx" alt="Image Model2.png" /></p>
<p>Hope this will be useful to someone :)</p>2016-02-23T15:30:52.6330000ZBlog postCode snippet to get Available Page Types for a specific page type<p>Couple of days back, I have to write some code to produce an excel sheet listing all the page types and the corresponding page types that are allowed to be created under the page type. </p>
<pre class="language-html"><code>for each page type in the solution,
produce a list of page types that are allowed to be created under this page type.</code></pre>
<p>This excel sheet will then be used by QA guys, as a starting point, to write some test scripts for an EPiServer 6 R2 and composer based solution to EPiServer 8 migration/upgrade project. </p>
<p>To start with, you need to find all the page types in the solution.</p>
<p>Below is simple function to list all the page types</p>
<pre class="language-csharp"><code> private IEnumerable<PageType> GetAllPageTypes()
{
var contentTypeRepository = ServiceLocator.Current.GetInstance<IContentTypeRepository>();
return contentTypeRepository.List().OfType<PageType>();
}</code></pre>
<p>The following snippet (self explanatory I think) will help you identify all the avaialable page types for a particular page type</p>
<pre class="language-csharp"><code> void GetAvailableContentTypes(ContentType contentType)
{
var contentTypeAvailablilityService = ServiceLocator.Current.GetInstance<ContentTypeAvailabilityService>();
// Get Available settings
AvailableSetting setting = contentTypeAvailablilityService.GetSetting(contentType.Name);
bool allAvailable = setting.Availability == Availability.All ||
setting.Availability == Availability.Undefined &&
!setting.AllowedContentTypeNames.Any();
var availableList = new List<PageType>();
if (!allAvailable)
{
foreach (PageType pageType in this.GetAllPageTypes())
{
foreach (string str in setting.AllowedContentTypeNames)
{
if (str.Equals(pageType.Name))
{
availableList.Add(pageType);
}
}
}
}
if (allAvailable)
{
// All the page types are allowed
}
else
{
// Allowed page types are in the availableList
}
}</code></pre>
<p>Hope this will be useful :)</p>2015-09-18T11:13:29.1800000ZBlog postAdding menu item to page tree context menu<p><em>Update: For EPiServer version 10.1 and above see <a href="/link/cd261a24083e42d0b9a100f033239fe7.aspx">this </a>link</em></p>
<p>Recently I have migrated/upgraded an EPiServer 6 R2 composer based website to EPiServer 7.xx. In EPiServer 6 R2 website, the EPiServer right click context menu (page tree right click menu) was highly customized. This functionality, however, is totally removed in EPiServer 7.xx. EPiServer 7, however, does provide you a similar context menu to copy/cut/paste the content. My job was to customize this context menu and add menu items to it. </p>
<p><img src="/link/834b78b3a710422da7c53267f3285091.aspx" alt="Image Menu item.png" /></p>
<h2></h2>
<p>A quick Google search resulted in a great<a href="/link/e1d1ece8894e4a9ba14417a80f77cc84.aspx"> blog post</a> published by Shamrez Iqbal to change the tooltip of the page tree and this acted as a starting point for my investigation. For the sake of completeness, I am going to mention all the steps required to customize the context menu, however all the credit goes to Shamrez Iqbal for such a great blog. To get started, install Alloy Tech (webforms) website using visual studio extension, and enable the uncompressed (non-minified) version of javascript files in edit mode.</p>
<h2>Enable client side debugging for JavaScript Files</h2>
<p>The first thing that needs to be done is to tell EPiServer to use the uncompressed version of JavaScript files in edit mode so you can easily debug the js files. This is well explained in “Uncompressed JavaScript for EPiServer 7.6+” article <a href="/link/379470be10da41ac8956b9e69cd5e16c.aspx">here</a>, however, in summary, you have to install the “EPiServer.CMS.UI.Sources” from nuget</p>
<p><img src="/link/c3adba76509e4e43a33df9b7fbe82d76.aspx" alt="Image Install_package_cms_ui_sources.png" /></p>
<p>and simply add the</p>
<pre class="language-html"><code><clientResources debug="true" /></code></pre>
<p><br /> to the EPiServerFramework.config file underneath the episerver.framework element.</p>
<p>Once this is installed, you should see EPiServer.Cms.Shell.UI.zip under modules\_protected\CMS directory</p>
<h2>Override the Context Menu creation process</h2>
<p>So to customize the context menu, we have to a) identify where this menu is created and b) find out a way to override/customize the process so we can inject our own menu item. The page tree menu is created in \epi-cms\component\ContentNavigationTree.js and this can be customized by using an InitializableModule to override PageRepositoryDescriptor. (see <a href="/link/e1d1ece8894e4a9ba14417a80f77cc84.aspx">this </a>blog for detail description) Full code is below.</p>
<pre class="language-html"><code> public class OurDescriptor : PageRepositoryDescriptor
{
public override string CustomNavigationWidget
{
get
{
return "alloy/component/ContentNavigationTree";
}
}
}
[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class DescriptorInitialization : EPiServer.ServiceLocation.IConfigurableModule
{
public void ConfigureContainer(EPiServer.ServiceLocation.ServiceConfigurationContext context)
{
context.Container.Configure(ConfigureContainer);
}
public void Initialize(EPiServer.Framework.Initialization.InitializationEngine context)
{
}
public void Preload(string[] parameters)
{
}
public void Uninitialize(EPiServer.Framework.Initialization.InitializationEngine context)
{
}
private static void ConfigureContainer(StructureMap.ConfigurationExpression container)
{
container.IfTypeMatches(type => type.Equals(typeof(PageRepositoryDescriptor))).InterceptWith(i => new OurDescriptor());
}
}
</code></pre>
<p> Second step is to copy the original EPiServer JS uncompressed files provided by EPiServer and modify it to customize the menu. To do this, open the EPiServer.Cms.Shell.UI.zip under modules\_protected\CMS directory and </p>
<ul>
<li>Copy all the JS code from ContentNavigationTree.uncompressed.js. Create a file ContentNavigationTree.js under ClientResources\Scripts\Component directory and paste the copied content.</li>
<ul>
<li>change "epi-cms/component/ContentNavigationTree" to alloy/component/ContentNavigationTree</li>
<li>Change "epi-cms/component/ContentContextMenuCommandProvider" to "alloy/component/ContentContextMenuCommandProvider"</li>
<li>Change "./command/_GlobalToolbarCommandProvider", to "epi-cms/component/command/_GlobalToolbarCommandProvider",</li>
<li>Change "../command/CopyContent", to "epi-cms/command/CopyContent"</li>
<li>Change "../command/CutContent", to "epi-cms/command/CutContent"</li>
<li>Change "../command/DeleteContent", to "epi-cms/command/DeleteContent"</li>
<li>Change "../command/PasteContent", to "epi-cms/command/PasteContent"</li>
</ul>
<li>Copy all the JS code from ContentContextMenuCommandProvider.js, create a file ContentContextMenuCommandProvider.js under ClientResources\Scripts\Component directory and paste the copied content. The full code is below (notice the newly added RefreshTreeCommand)</li>
</ul>
<pre class="language-csharp"><code>define("alloy/component/ContentContextMenuCommandProvider", [
// dojo
"dojo/_base/declare",
"dojo/_base/array",
// epi
"epi/shell/command/_CommandProviderMixin",
"epi-cms/command/CopyContent",
"alloy/component/RefreshTreeCommand",
"epi-cms/command/CutContent",
"epi-cms/command/PasteContent",
"epi-cms/command/TranslateContent",
"epi-cms/command/DeleteContent",
"epi-cms/widget/CreateCommandsMixin",
"epi/shell/selection"
],
function (
// dojo
declare,
array,
// epi
_CommandProviderMixin,
CopyCommand,
RefreshTreeCommand,
CutCommand,
PasteCommand,
TranslateCommand,
DeleteCommand,
CreateCommandsMixin,
Selection
) {
return declare([_CommandProviderMixin, CreateCommandsMixin], {
// summary:
// Command provider for content context menus
// tags:
// internal xproduct
// treeModel: [Object]
// Model use for the commands
treeModel: null,
clipboardManager: null,
_settings: null,
_newContentCommand: null,
_translateContentCommand: null,
constructor: function (params) {
declare.safeMixin(this, params);
},
postscript: function () {
this.inherited(arguments);
//Create the commands
this._settings = {
category: "context",
model: this.treeModel,
clipboard: this.clipboardManager,
selection: new Selection()
};
this._translateContentCommand = new TranslateCommand({ category: "context"});
var createCommands = this.getCreateCommands(),
commands = [];
for (var key in createCommands) {
commands.push(createCommands[key].command);
}
commands.push(
this._translateContentCommand,
new RefreshTreeCommand(this._settings),
new CutCommand(this._settings),
new CopyCommand(this._settings),
new PasteCommand(this._settings),
new DeleteCommand(this._settings)
);
this.set("commands", commands);
},
updateCommandModel: function (model) {
// summary:
// Updates the model for the commands.
// tags:
// public
array.forEach(this.get("commands"), function(command){
if (command.isInstanceOf(this.createCommandClass) || command.popup){
command.set("model", model);
}
}, this);
this._translateContentCommand.set("model", model);
this._settings.selection.set("data", [{ type: "epi.cms.contentdata", data: model}]);
}
});
});</code></pre>
<p>Now under the component directory add the file RefreshTreeCommand.js and add the following code. The below code is copied from "copy command" and modified. As an example, I am just getting the clicked page id, calling the asmx webservice and reloading the whole page.</p>
<pre class="language-csharp"><code>define("alloy/component/RefreshTreeCommand", [
"dojo/_base/declare",
"dojo/_base/array",
"epi",
"epi/shell/command/_Command",
"epi/shell/command/_ClipboardCommandMixin",
"epi/shell/command/_SelectionCommandMixin"
], function (declare, array, epi, _Command, _ClipboardCommandMixin, _SelectionCommandMixin) {
return declare([_Command, _ClipboardCommandMixin, _SelectionCommandMixin], {
// summary:
// A command that starts the create new content process when executed.
//
// tags:
// public
// label: [readonly] String
// The action text of the command to be used in visual elements.
label: "Refresh",
// iconClass: [readonly] String
// The icon class of the command to be used in visual elements.
iconClass: "epi-iconRevert",
_execute: function () {
// summary:
// Copies the currently selected items to the clipboard and sets the clipboard copy flag.
// tags:
// protected
//this.clipboard.set("copy", true);
//this.clipboard.set("data", this.selection.data.concat());
//alert('Thanks for calling me');
//debugger;
// Standard jQuery to call an action method of our ASP.NET MVC controller
var pageId = { "id": this.selection.data[0].data.contentLink };
dojo.rawXhrPost({
url: "/HelperService.asmx/Update",
//handleAs: "json",
headers: { "Content-Type": "application/json" },
timeout: 10000,
postData: dojo.toJson(pageId),
load: function (data) {
var result = dojo.fromJson(data);
if (result.d.Data != '') {
window.location.reload();
}
},
error: function (error) {
}
});
},
_onModelChange: function () {
// summary:
// Updates canExecute after the model has been updated.
// tags:
// protected
var model = this.model,
selection = this.selection.data,
canExecute = false;
if (model && selection.length) {
canExecute = array.every(selection, function (item) {
return model.canCopy(item.data);
});
}
this.set("canExecute", canExecute);
}
});
});</code></pre>
<p>The visual studio structure should be</p>
<p><img src="/link/73ba928f8e7c4724ae73c1004ab739d6.aspx" alt="Image VS_Structure.png" /></p>
<p>Now compile and run the project. You should see a new menu something like</p>
<p><img src="/link/14b83096684348fd83da1db0547941bb.aspx" alt="Image Final.png" /></p>
<p>Clicking on this menu will call a asmx webservice passing page id as parameter. On server end, you can clear the EPiServer cache or do something else useful.</p>2015-05-29T12:38:41.7130000ZBlog postChange EPiServer file manager start folder<p>On the subject of “for future reference” and “note to self”, when needed to setup the start-up folder within EPiServer folder manager.</p> <p>var cookie = new HttpCookie("EPiDPCKEY");</p> <p>cookie.Values.Add("path", "/Globals/Clients/1/");</p> <p>this.Response.Cookies.Add(cookie);</p> <p>When done so, EPiServer folder manager will load the path saved in the cookie on initial load. This will be useful, if you have different business areas accessible to different users and you would like to facilitate EPiServer editors with loading the appropriate “Folder” in EPiServer Folder manager.</p>2013-01-17T16:21:26.0000000ZBlog postCode snippet to modify EPiServer pagetype definitions programmatically.<p> </p> <p>Few days back, I was assigned a project to amend an already created site and enable globalization on it. So I started by enabling globalization in EPiServer admin mode. Once done, the next task was to go to EPiServer edit mode and make “unique value per language” checked for all the properties. There are too many pagetypes that requires changes, so i decided to write a small code that does this for me <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="/link/457c410cdc624d8aafc6f1eaa3b161f9.png" />. </p> <p>//Get All the pageTypes</p> <p>PageTypeCollection pageTypeCollection = PageType.List();</p> <p>foreach (var pagetype in pageTypeCollection)</p> <p>{</p> <p>//get all the properties on pagetype</p> <p>PageDefinitionCollection pageDefinitionCollection = pagetype.Definitions;</p> <p>foreach (var pageDefinition in pageDefinitionCollection)</p> <p>{</p> <p>//Enable globalization and save</p> <p>pageDefinition.LanguageSpecific = true;</p> <p>pageDefinition.Save();</p> <p>}</p> <p>}</p>2011-05-01T22:27:27.0000000ZBlog post