Blog posts by Håkon Nordli

Blog posts by Håkon Nordli2016-04-08T12:33:20.0000000Zhttps://world.optimizely.com/blogs/hakon-nordli/ Optimizely World Episerver full-text search moduleEpiserver full-text search module aka Standard Search Inspector The last years I've set up and worked with several sites using Episerver full-text search. Episerver Search is like you might already know, a search engine delivered together with Episerver CMS without any extra costs. It is based on Lucene which gives it a powerful foundation. Several of times I've had issues when customers wanted something extra like facets or want an explanation on how the relevance work. For me it has been difficult to find good examples, good practices and/or blog posts about the search API. To solve this I've started to develop a module. I hope this can be a module that more people contribute to. The goal is not to compete with Find. Find is still a better search engine with more functionality, and the search engine I recommend customers. But for different reasons some customers don't want Find. At the moment the module only have two functions: <ol> <li>A search inspector which shows indexed items as JSON objects. This gives us as developers a lot more control on which data that are indexed. <a href="/link/79fcde2c68a24059ab1f6a1a3a7e9555.aspx"><img title="blogg image1" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="blogg image1" src="/link/aa9a2f7f615a468e9c698f8b75c58939.aspx" width="763" height="814" /></a> <li>A reindexing page. As several of us know, the reindex page is a hidden feature in Episerver which is a bit annoying. To be honest I visit my colleague <a href="http://sveinaandahl.blogspot.no/2013/06/how-to-install-episerver-search-for.html">Svein Aandahls blog post</a> everytime I need the URL to the reindex-page. Sorry Svein, your visit numbers might go down. <a href="/link/5edf246f25b04a69afe643329a913444.aspx"><img title="blogg image2" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="blogg image2" src="/link/056de0a0b2f5479e95e3ef2ef3f2313f.aspx" width="806" height="342" /></a> </li></li></ol> The module is available through Episervers nuget feed, <a href="http://nuget.episerver.com/en/OtherPages/Package/?packageId=Knowit.EPiModules.StandardSearchInspector">http://nuget.episerver.com/en/OtherPages/Package/?packageId=Knowit.EPiModules.StandardSearchInspector</a> It is also added to Github, <a href="https://github.com/knowit/Knowit.EPiModules.StandardSearchInspector">https://github.com/knowit/Knowit.EPiModules.StandardSearchInspector</a>, where anyone may add pull requests. Please be brave and add features, that would be awesome!2016-04-08T12:33:20.0000000Z

Blog post

Dojo - How to keep the widget's scopeWhen binding an event in JavaScript the scope outside the binding is not the same as inside. Which means that "this" is not the same outside as inside the binding. Below there is a JavaScript example, which console.logs two different "this". The first console.log prints the object Foo, the second console.log prints the button object.   <a href="/link/c7829cf2c319497689c9ea9193d46dc4.aspx"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="/link/a131293c02234bfdb98189d08344fbce.aspx" width="598" height="301" /></a>   However, sometimes we want to keep the scope. This is often solved by putting "this" in a variable, like the example below. This way both console.logs prints the Foo object.   <a href="/link/99e5df8e8e1c4b469c8281178df04efb.aspx"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="/link/b3bd27470abf485298214576272b33a9.aspx" width="592" height="301" /></a>   In Dojo there is a built-in function, hitch, which can keep the scope. This can come in handy when developing Dijit widgets. In the example below hitch forces the on method to retain the original scope. In this way we keep "this" inside the callback, and we do not need to create a variable for "this" like we did above.   <a href="/link/dda8dfc60d9d41c186d2a9cecc24df14.aspx"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="/link/aa21c30f13c7459db8fb7eeb910146dc.aspx" width="596" height="203" /></a>2016-01-08T13:59:42.0000000Z

Blog post

Extend Dojo's onChange event by using intermediateChangesOne of JavaScripts built-in events are 'change'. It is triggered different depending on which input type you are using. For text input it is fired when the element looses focus after its value has changed.  Not suprisingly, onChange in Dojo works the same. However it is possible to make it fire whenever the value changes by using intermediateChanges.  The built-in dijit property, intermediateChanges, is a part of dijit.form widgets. By default it is set to false, but when it is set to true, it fires the onChange event whenever the value of the form widget changes.  This way it is possible to trigger something while the user is editing a property and before a text input looses focus.     <a href="/link/1ad9bdcaa96b4c37925a71c536b5aaec.aspx"><img title="image" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="image" src="/link/b1c53a27942b45e78e48af32e032cdec.aspx" width="1000" height="257" /></a>2015-11-25T13:12:17.0000000Z

Blog post

5 things to know about DojoThis blog post is part 2 of “Learn how to develop your own Dojo widget”. If you haven’t read part 1, I recommend you to read it. You may find it <a href="/link/9a723b97500542b8ba7ea8048fc0498a.aspx">here</a>.  In part 1 I promised to write 10 tips, it ended up being 5. I hope you can forgive me.  <h2>1. Including modules – define </h2> When looking at Dojo you will find a lot of definitions at the top. Dojo is separated into several small modules, which means that you only add the parts you are going to use. This is very nice since you only add the once you actually need. On the other hand, it is a bit annoying since you have to keep track of several modules.  EPiServer has built some modules of their own. To be honest I do not have a complete overview of all of them, but they are documented here <a href="/link/b1d8e803c99c4339b6fc912d5332f171.aspx?version=9&product=cms">http://world.episerver.com/documentation/Javascript-Library/?version=9&product=cms</a> After the definitions there is a list of function names which is the name you give the added modules. Through these function names you may use the modules in your javascript code.<code>define([     "dojo/_base/array",     "dojo/on",     "dojo/_base/declare",     "dojo/_base/lang",     "dijit/_CssStateMixin",     "dijit/_Widget",     "dijit/_TemplatedMixin",     "dijit/_WidgetsInTemplateMixin",     "dijit/form/Textarea",     "epi/epi",     "epi/shell/widget/_ValueRequiredMixin" ], function (     array,     on,     declare,     lang,     _CssStateMixin,     _Widget,     _TemplatedMixin,     _WidgetsInTemplateMixin,     Textarea,     epi,     _ValueRequiredMixin ) { </code> <h2>2. templateString</h2> This is the HTML representing your widget. Say, if you want to create an input text field, this is where you put your HTML. The important thing to know is that instead of using IDs or class names to handle your HTML in the JavaScript you should/must use data-dojo-attach-point. This way Dojo will create a reference to it and it will be available through the widget as this.attach-point-name. Example templateString: <code>'<div class="dijitInline">\                                  <div data-dojo-attach-point="textArea" data-dojo-type="dijit.form.Textarea"></div>\ </div>'</code> Notice the data-dojo-type in the example above. Dojo creates new elements based on the Dojo-type. In our case it will create a textarea since we are using the dijit.form.Textarea. <h2>3. startup and postCreate</h2> PostCreate is a built-in Dojo method which runs after all the properties are set up, but it runs before the templateString is added to the DOM. It is a method where you may start/initialize other methods. Startup is also a built-in Dojo method, but runs after postCreate and after the templateString is added to the DOM. This is where you may add bindings or any other needed setups. <h2>4. Saving changes </h2> When the editor is done, you want to save the data that is changed or added. There are mainly two methods you want to run doing that, this.onChange and this. set. this._set sets the value to the widget and notify any observers. this.onChange is for letting the widget wrapper updating the UI when the value is changed. The exampe below is taken from the other blog post, part 1. It uses both this_set and this.onChange when saving changes.<code> _setValue: function (value, updateTextarea) {     //avoids running this if the widget already is started      if (this._started && epi.areEqual(this.value, value)) {         return;     }         this._set("value", value);         // set value to textarea      updateTextarea && this.textArea.set("value", value);          if (this._started && this.validate()) {         // Trigger change event          this.onChange(value);     } },</code> <h2>5. Connect vs on</h2> The built-in methods for binding events, connect and on, is two methods for the same thing. I've noticed that connect is used in several EPiServer Dojo examples. According to the Dojo Documentation connect is deprecated. Based on that we should use the dojo/on module to bind events instead.<code> this.connect(this.textArea, "onChange", this._onTextAreaChanged); on(this.textArea, "change", lang.hitch(this, this._onTextAreaChanged)); </code>2015-11-03T19:56:12.0000000Z

Blog post

Learn how to develop your own Dojo widget“It was like getting a brick in the head, » a developer told me after a dojo seminar a while back.   Often when I talk to developers about dojo, I get the same message, they have no idea where to start. They find it a bit too difficult and it takes too much time to understand the basics.  This has led me to write a new blog post on how to build your own Dojo widget. I have decided to split the article in two separate parts, first how and where to start building a widget and second, 10 tips that may come in handy when developing.  Before we start developing, I would like to point out a few things. Dojo is a library much like jQuery, you may do DOM manipulations and other fun things. Together with Dojo, you will also get Dijit, which is Dojo’s UI library. We use Dijit when dealing with widgets in EPiServer.  <h2>Step by step guide  </h2> Here is a list of files that are necessary for you to build your first widget. Depending on what you would like to develop, you might need other files as well. However, these are the ones you must have.  <h3>Step 1 – EditorDescriptor.cs  </h3> First, you need an EditorDescriptor. I suggest putting it in your Business/EditorDescriptors folder.  It defines which editor to use for a specific property for a page or shared content. You may read more about it here. <a href="/link/0bb46ad404ee48c5a57cdecbb01ab8f8.aspx">http://world.episerver.com/documentation/Items/Developers-Guide/EPiServer-CMS/7/Editing/How-To/Registering-a-Custom-Editor/</a> <code>using System; using System.Collections.Generic; using EPiServer.Shell.ObjectEditing.EditorDescriptors; namespace Alloy.Business.EditorDescriptors {     [EditorDescriptorRegistration(TargetType = typeof(String), UIHint = "NewTextarea")]     public class NewTextareaEditorDescriptor : EditorDescriptor     {         public override void ModifyMetadata(EPiServer.Shell.ObjectEditing.ExtendedMetadata metadata, IEnumerable<Attribute> attributes)         {             ClientEditingClass = "alloy/editors/NewTextarea";             base.ModifyMetadata(metadata, attributes);         }     } }</code> <h3>Step 2 – The dojo widget (JavaScript file) </h3> This is the actual widget where a lot of the magic happens. I suggest putting the file in your ClientResources/Scripts/Editors folder.  Here is an example of a small widget, a textarea. I recommend starting with this when building a widget for the first time. Later you can rewrite it and make it do whatever you need it to be. This way you have an excellent starting point with no errors. The reason I have built a textarea is because EPiServer already have a textarea. That way no one will actually use this widget, but instead use it as a starting point.  The widget is based on StringList from Alloy, but are rewritten and have several comments that explain several of the methods and modules. <code> define([     "dojo/_base/array",     "dojo/query",     "dojo/on",     "dojo/_base/declare",     "dojo/_base/lang",     "dijit/_CssStateMixin",     "dijit/_Widget",     "dijit/_TemplatedMixin",     "dijit/_WidgetsInTemplateMixin",     "dijit/form/Textarea",         "epi/epi",     "epi/shell/widget/_ValueRequiredMixin" ], function (     array,     query,     on,     declare,     lang,     _CssStateMixin, //_CssStateMixin is a mixin for widgets that set CSS classes on their nodes depending on hover/active/focused state, and also semantic state (checked, selected, disabled, etc.).     _Widget, //BaseClass for all dijit widgets     _TemplatedMixin, //dijit/_TemplatedMixin is a mixin for most widgets in dijit. It takes an HTML template, and creates the widget’s DOM tree according to that template.     _WidgetsInTemplateMixin, //When using this template in a directly extended widget class, you will need to mixin dijit._WidgetsInTemplateMixin in addition to dijit._TemplatedMixin.         Textarea,         epi,     _ValueRequiredMixin //Extends dijit/_CssStateMixin: <a href="/link/b1d8e803c99c4339b6fc912d5332f171.aspx?documentId=episerverframework/7.1/epi/shell/widget/_ValueRequiredMixin">http://world.episerver.com/Documentation/Javascript-Library/?documentId=episerverframework/7.1/epi/shell/widget/_ValueRequiredMixin</a> ) {     return declare("alloy.editors.NewTextarea", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {         templateString: "<div class=\"dijitInline\">\                             <div data-dojo-attach-point=\"textArea\" data-dojo-type=\"dijit.form.Textarea\"></div>\                         </div>",         intermediateChanges: false, //default false. intermediatechanges is a dijit property which fire the change event when there is an actually change.          value: null,         onChange: function (value) {             // Event         },         //built-in dijit widget. postCreate is run after all the properties are set up, but before the templateString is added to the DOM         postCreate: function () {             // call base implementation             this.inherited(arguments);             // Init textarea and bind event             this.textArea.set("intermediateChanges", this.intermediateChanges);                         // Notice the lang.hitch. It forces the on method to retain it’s original scope.               on(this.textArea, "change", lang.hitch(this, this._onTextAreaChanged));         },                 //built-in dijit widget. Runs after the templateString is added to the DOM.          startup: function () {         },         // build-in dojo method. Prevents an invalid form from submitting         isValid: function () {             return !this.required || lang.isArray(this.value) && this.value.length > 0 && this.value.join() != "";         },         // Setter for value property. Runs at startup.          _setValueAttr: function (value) {             this._setValue(value, true);         },         //runs at startup.          _setReadOnlyAttr: function (value) {             this._set("readOnly", value);             this.textArea.set("readOnly", value);         },         //A setter for intermediateChanges         _setIntermediateChangesAttr: function (value) {             this.textArea.set("intermediateChanges", value);             this._set("intermediateChanges", value);         },         // Event handler for textarea         _onTextAreaChanged: function (value) {             this._setValue(value, false);         },         _setValue: function (value, updateTextarea) {             //avoids running this if the widget already is started             if (this._started && epi.areEqual(this.value, value)) {                 return;             }             // set value to this widget (and notify observers). Built-in dijit method. Source: <a href="https://www.sitepen.com/blog/2013/10/16/dojo-faq-what-is-the-difference-between-set-and-_set/">https://www.sitepen.com/blog/2013/10/16/dojo-faq-what-is-the-difference-between-set-and-_set/</a>             this._set("value", value);             // set value to textarea             updateTextarea && this.textArea.set("value", value);             if (this._started && this.validate()) {                 // Trigger change event                 this.onChange(value);             }         },     }); }); </code> <h3>Step 3 - Module.config </h3> Module.config should be in your web root folder. It is to add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration. If you do not have this, you will get 404 errors for your widget file.  <code> <?xml version="1.0" encoding="utf-8"?> <module>     <dojo>                  <paths>             <add name="alloy" path="Scripts" />         </paths>     </dojo> </module></code> Here is EPiServer’s documentation about module.config  <a href="/link/5b5dc2ad61394b848503a77e114c38fd.aspx">http://world.episerver.com/documentation/items/developers-guide/episerver-framework/7/configuration/configuring-moduleconfig/</a>    <h3>Step 4 – Use the widget on a page </h3> To add the widget to a property, use the UIHint showed below: <code> [UIHint("NewTextarea")] [Display(GroupName = SystemTabNames.Content, Order = 10)] public virtual string NewTextarea { get; set; } </code> <h2>The End </h2> These files are only meant as a starting point. You may use them and rewrite them to whatever you want.  Remember to update the namespaces.  Happy coding!  2015-10-20T09:53:14.0000000Z

Blog post

Dojo – a color picker widgetNow and then, a web editor needs to pick a color either in a block or a page. There are several ways to pick colors, for instance you can use the built in dijit widget for picking colors, <a href="http://dojotoolkit.org/reference-guide/1.10/dijit/ColorPalette.html">http://dojotoolkit.org/reference-guide/1.10/dijit/ColorPalette.html</a>, or just add a dropdown. In my opinion, I think the built-in ColorPalette from Dojo is too difficult and not as extendable. That is why I have created my own color picker. I have refactored the code and shared the property on github. Here is a screen dump from editmode: <a href="/link/e26a4848beca4e8c85418f46ecb09807.aspx"><img title="clip_image001" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="clip_image001" src="/link/aa3f7b66b20944d9aa1913153040e50a.aspx" width="677" height="209" /></a> This is a lightweight widget where you as a developer can decide which colors that will be available. In the templateString all the colors are visible through the A-tag.<code><div class=\"dijitInline\">\ <ul data-dojo-attach-point=\"colorPickerList\" class=\"colorPickerList\">\ <li><a href=\"#\" data-color=\"#7cb5ec\" style=\"background-color:#7cb5ec;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#434348\" style=\"background-color:#434348;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#90ed7d\" style=\"background-color:#90ed7d;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#f7a35c\" style=\"background-color:#f7a35c;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#8085e9\" style=\"background-color:#8085e9;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#f15c80\" style=\"background-color:#f15c80;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#e4d354\" style=\"background-color:#e4d354;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#8085e8\" style=\"background-color:#8085e8;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#8d4653\" style=\"background-color:#8d4653;\">Color name 1</a></li>\ <li><a href=\"#\" data-color=\"#91e8e1\" style=\"background-color:#91e8e1;\">Color name 1</a></li>\ </ul>\ </div> </code> As you can see, the data-color attribute holds the color, and the style attribute is for showing the color. Notice the span-tag which holds the color name. This way it is more accessible. If you are going to use this in a project, I suggest that you to put the colors in the CSS and SASS/LESS variables, which may be used several places in your project. If you are not using SASS, LESS or other style preprocessors, I recommend you to have a look at it. To add the color picker to a project just add the descriptor file, css file and the dojo javascript file to the project code. Then you can start using it by adding the UIHint ColorPickerEditor. Also notice that I use string as a property. There is no need for a custom property in this case. <code>[UIHint("ColorPickerEditor")] [Display(GroupName = SystemTabNames.Content, Order = 25)] public virtual string ColorPicker { get; set; } </code> There is a more detailed description on git on how to add the widget. Please have a look! The widget is tested for EPiServer 8 and 9. The property is available on <a href="https://github.com/knowit/ColorPickerEditor">Github</a> and is open for everyone to use. Please give me feedback if you find any bugs. 2015-09-23T20:05:18.0000000Z

Blog post

Dojo widget - Multiple images in one propertyFor some time I’ve had several customers who wanted an easy way to structure multiple images in one property. They needed a way to add images, descriptions and sort the images as easy as possible. This lead me to build the Multiple Images property.   <h3>How did I start</h3> At the beginning I read several different blog posts about dojo and EPiServer. I’m gonna be honest and say that I used a lot of time to understand how dojo works and work together with EPiServer. However, after a while I came to the conclusion that dojo was the correct thing to do and perfect match for EPiServer. Dojo gives EPiServer a lot of flexibility and it makes it is possible to create pretty much whatever you want. My best learning resource was the StringList.js from the Alloy solution. Well written code and a lot of comments made it easy to understand the widget. If you want to make you’re own widget I would suggest to take a look at it.   <h3>How does it work</h3> The Multiple Images property is easy to use. The editor can just drag images from the media archive into the property. The editor can then add a description and sort the images. <a href="/link/a9bbfcd1aa514e1aa48292185d1f0e6b.aspx"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="/link/a67c03d6080b4c89ad45b82dd82ff267.aspx" width="850" height="534" /></a>     <a href="/link/7dc1fdb8ea7d4bfeb63f88d01881e391.aspx"><img title="image" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; padding-top: 0px; padding-left: 0px; display: inline; padding-right: 0px; border-top-width: 0px" border="0" alt="image" src="/link/0972771524d445ab80e11e394cc590f0.aspx" width="578" height="299" /></a> When handling images on a website there are often two description fields or areas, the alternative text and the text below the image. The description for this property is not suppose to be the alternative text, but typically the text below the image. It would be possible to add a second text description, but I’ve only added one to avoid too many choices and to keep it simple. My suggestion is to rather put the alternative text in a separate text property on the image itself. However this is up to the developer and customer to decide.   <h3>Handling all the images</h3> To handle all the images and the attached description, I put everything in a json-object. This made it very easy to work with the image-objects. When dragging an object in dojo you have to create a target and a source. EPiServer has already created all we need for the source objects. This meant I only had to create a target which could accept the EPiServer source type. When dragging an image to the drop zone (target) I got an object (source object) with all the necessary info about the image. Here is an example for the object received when dragging an item:   <code class="javascript">{ </code><code>"url": "/globalassets/events/patrick-jane_keynote.png", </code><code>"previewUrl": "/EPiServer/CMS/Content/globalassets/events/patrick-jane_keynote.png,,109?epieditmode=False", "permanentUrl": "/link/1735c52fff064081b4d6251ddff76cd9.aspx", "text": "Patrick-Jane_KeyNote.png", "typeIdentifier": "alloyepi8.models.media.imagefile" } </code>   To handle the description I just added an extra string variable in the json-item.   <h3>EPiServer tip - saving a property</h3> At first the property was saved as a string, but it didn’t take me long before I realized I had to do something about that since EPiServer wasn’t aware of the images being used. I therefor created a new EPiServer property. This was a lot more hassle then I had anticipated. To create the property itself was well documented, but the saving part of it was not. Luckily other have had the same issue before me. In Alexander Haneng's <a href="/link/8f2cbf76bfd8405c81da65828325b6c4.aspx">blogpost</a> from 2013, I found that EPiServer didn’t know how to serialize the multiple images object. Based on that I added a converter which inherited from JsonConverter. Have a look at the MultipleImagesConverter class for how it is done.   <h3>Available for everyone</h3> The Multiple Images property is tested in EPiServer 8. The property is available on <a href="https://github.com/knowit/MultipleImages">Github</a> and is open for everyone to use. Please give me feedback if you find any bugs. 2015-08-26T10:06:56.0000000Z

Blog post