The Making Waves blog

Build 2016, Day Two

2016-04-01T08:11:00.000+02:00

Back in the hotel after another eventful day. As tired as yesterday. I’m getting to old for this, I think.

Awesome news during the keynote today. As you’ve probably already have heard by now, Microsoft is going to be including Xamarin for free together with every version of Visual Studio. Yes, every version. That does include the Community Edition, which means that you will be able to develop iOS, Android and Windows Phone apps for free!

Well, you still have to have a mac with xcode installed for iOS. And you need to pay all three the developer fees. BUT! That you would’ve had to do either way.

And best of all - you will use C# for them all. Which is really nice. For obvious reasons.

You still won’t have free access to the Xamarin Test Cloud though. Which I can understand, there’s a lot of infrastructure behind that one! You will be able to buy it as a standalone service and it will be accessible through Visual Studio Teams Services. Nice having everything in the same place, and they showed some real impressive deploy and test functionality for it.

We actually tried out Xamarin for our last internal conference, NAPC15. Personally I really digged it. Awesome being able to share code in between different platforms, and using Xamarin Forms a lot of the UI could be shared as well, cutting down on development time for everyone. Really nice being able to preview the iOS from your windows machine as well with their remote viewer for the iOS simulator.

But, I digress. Back to Build!

Was a lot of talk about Azure today. And about how awesome it is. They now have 30 unique Azure regions and locations around the world, making sure everything is served as locally as possible. Quite impressive!

Another really impressive number is that over 85% of the Fortune 500 companies use Azure in some capacity!

Saw one really cool feature of Azure that I’ve totally missed until now… RemoteApp. You remotely connect straight to an app hosted in the cloud. This means you can access it from whatever device, pretty much. The example I saw was running Visual Studio on a Windows Lumia 950 phone, through Continuum. Super cool!

Angular have had quite a presence during this Build as well. With Angular 2 soon coming out, it’s been a lot of talk about it. Seems rather sweet, they have definitely gotten up the speed even more, and have nice solutions when it comes to precompiling templates on .Net, Java, Node.js and more. They wrote all of Angular 2 using Typescript, which definitely tells us how good Typescript is becoming as well.

I definitely look forward to my third and last day of Build 2016 tomorrow. I can’t wait to see what more goodies we will learn! Until then - Good night America… wherever you are.

…Oh yeah. Midnight Caller, 1988. Good times, good times.

Build 2016, Day One

2016-03-31T06:47:00.001+02:00

First day of Build 2016 is over, at least for my part. It’s been fun, a bit chaotic, and man… My feet hurt like crazy!

After registering I went straight up to get in line for the keynote. Good call, there were already at least 200 other that had the same great idea - 1.5 hours before it was to start! Pretty much everyone attends the keynote, which is the broader look at what Microsoft has in store for the near and far future.

After some fluff about how they are to empower every person and organization on the planet, and figures about how many Windows 10 installations that have been made (270+ million. whoah!) they dropped the first bit of good news - the Windows 10 Anniversary Update is coming this summer. Seem to have a lot of goodies in that one, for sure! And, it will be totally free. Awesome!

They went on with some news about Microsoft Edge. They will integrate the Windows Hello authentication so you can get to it by some simple javascript api’s. Great for logins to different sites etc - albeit, if people want to log in with their fingerprint there’s already good solutions for it with third party software - that works across browsers. My 2 cents: Good feature, sure, but just another Edge-exclusive api.

Big news for anyone looking into development for the Xbox One! From this summer (and out as a preview TONIGHT) any retail Xbox can become a developer edition by just flicking a checkbox in the settings. This removes the ability to start any games and apps you have installed, but instead you can connect to your Xbox from a Visual Studio 2015 installation and install any Universal Window Platform application to test. When finished with the app, just release it to the store as usual. If marked as Xbox compatible, it will automatically turn up in the Xbox store as well. Pretty darn sweet! You can of course turn it back into a regular non-dev console at any time.

I’m really starting to dig the whole UWP thing. Will have to mess around with that a bit more. You get a lot for free as well, they automatically hook up the controller instead of mouse events etc on the Xbox, and touch on phones/tablets/touchscreens. Of course you can also very easily override it all to tailor it for each device.

They have talked a lot about bots and experts. Experts are essentially your app telling Cortana how she can use it, which keywords to trigger on etc. Seems easy enough to hook up to her. No pun intended. I really like this. Instead of going the route Apple is taking with Siri, as well as Google with Google Now, they let developers around the world extend Cortana as they see fit, and essentially make her smarter by helping out with the brain power. That also means she will become more tailored to you since it’s based on what applications you have installed giving her a boost through experts.

Integrations with Cortana seem to be huge within Microsoft as well. They showed some really cool (and kinda scary) demos of Cortana reading through your emails, looking for things you might have forgotten and automatically add as reminders and calendar events. Did you tell your mom you’ll call her tomorrow instead? Busted; this time Cortana will remind you of your white lie.

Bots are… Well, bots. Satya Nadella (Microsoft's CEO) was talking about a world powered by bots, where conversation is the platform, and voice is the UI. Good examples would be an automated bot taking your order at a drive-through restaurant, and other bots residing inside your favorite messaging app (which of course during Build everyone agrees is Skype no matter what we use otherwise). These bots could trigger on certain keywords, for instance if you talk about being hungry, instantly ask you if you want to order your favorite pizza. Like even easier access to pizza is a good thing for the world.

I can definitely see a lot of potential in this, and it really hit me when they showed a video of a blind man having helped design technology that, with a pair of smart glasses, let him take pictures, and have it described back to him through speech synthesis. Technology helping a blind person to see the world. Simply amazing.

And in other news;

Visual Studio Update 2 was released today.
Hololens is ready, and started to ship to preorder customers today.

Coincidence? I… Think… Not!

Hopefully I have the strength to stand in that humongous line tomorrow and let you guys know if it’s worth the hype or not. If, I manage to keep my sanity after standing in that line. That line. That line scares me.

And alas, I saved the best for last!

Bash is coming to Windows! Amazing news! We’re talking real Bash, with all your favorite gnu tools, finally native on windows.

Yes, I am a happy camper. A tired one though, so good night for now!

Documentation with code examples - the maintainable(?) way

2016-02-19T15:56:00.000+01:00

We keep an internal base code platform at Nansen, which several of our sites are based. We like to think of this as our bread and butter. Meaning, those parts of every project you copy+paste to the next. Sadly, we have been quite bad at documenting it, or we have been documenting it, but the problem is often that the code examples tend to get out-of-date as code naturally evolve with time.

To alleviate this I wanted to create a way to keep the documentation and examples to support it up-to-date, but also contain readable text. One could argue that an SDK is a way, but SDK's usually contain way too much fluff in the way of tables upon tables of method, property and event definitions. And they are also plagued by the out-of-date example code problem above, as examples are written in the <example>-section of the summary documentation. It is easy to get lazy and forget about an example if a method or class is updated.

Anyways, my colleague Andreas 'Honungsprinsen' Oldeskog used a clever way to document our front-end framework by pulling markdown from github, and generating documentation pages from those files. I wanted to find a similar way, but with c# source code instead. This gave me three problems to solve:

Having code examples that actually compile, and are relevant to the code I want to document.
The ability to easily attach human readable documentation and informational text to said code.
Some way of combining 1 and 2 in order to present it to the developers (hopefully) reading the documentation.

Now, for problem 1, part of the solution was so simple Andreas had to point it out to me: Use tests! I could just write unit tests, they run the actual code, and you can use assertions to verify the examples actually do what you show to the reader of the documentation.

The second part of the solution to problem 1 was finding a way to actually run the tests and present them to the reader. This was solved by using NUnit, and its test runner functionality somewhat hidden away in Nunit.core.dll, an assembly that is unfortunately not distributed along with nunit.framework.dll in the NUnit nuget package. I found it tucked away in a package named NUnit.Runners, and I had to manually reference the assemblies nunit.code.dll and nunit.core.interfaces.dll from my web project designated to run and present the results of my example tests.

When all that is achieved, it is pretty simple to actually run tests:

public class TestResultsEventListener : EventListener
{
    public TestResultsEventListener()
    {
        ListResults = new List<testresult>();
    }

    public List<testresult> ListResults { get; }

    public void TestFinished(TestResult result)
    {
        ListResults.Add(result);
    }

    // noop all other methods
}

public List<testresult> RunSomeTests(IEnumerable<string> testNames)
{
    var testPackage = new TestPackage("ExampleCode"); // this can be named anything
    testPackage.Assemblies.Add(Assembly.Load("my.assembly.with.tests").Location);

    var eventListener = new TestResultsEventListener();
    var runner = new SimpleTestRunner();
    if (runner.Load(_testPackage)) {
        var filter = TestFilter.Empty;
        if (testNames != null && testNames.Any()) {
            filter = new SimpleNameFilter(testNames.ToArray());
        }
        runner.Run(eventListener, filter, true, LoggingThreshold.All);
    }
    return eventListener.ListResults;
}

The result is a neat list of all our tests and their results, this solved problem 1, neat!
A bonus of this approach is also, since we use Episerver in our project platform, and the documentation/demo site is a basic implementation of said platform, all the service loading for epsierver is already done and the site is running so I can use real data for any code interacting with the site without having to mock my heart out (seriously, unit testing episerver code is 98% service mocking).

For problem 2, I decided to just use markdown syntax in the summary documentation of each test. If a more generic description or informative text was needed, I used the summary documentation of the test class. I also made sure to comment as much as possible of the test method code.

Now, problem 3 was trickier, I needed to somehow parse both the code and summary documentation for my test cases, and present the result. Cue Roslyn! Using the new Roslyn code parser Microsoft came up with, I could easily read a source file, and extract whatever I wanted.

Combining all three solutions above gave me a helper that:

Found all tests for a specific class,
Ran the tests, and recorded the results,
Parsed the source code for said tests and formatted the result

The code for my helper:

public class ExampleCodeHelper
{
    private readonly DirectoryInfo _baseDirectory;

    private readonly TestPackage _testPackage;

    public ExampleCodeHelper(string baseDirectory, IEnumerable<string> assemblyNames)
    {
        _baseDirectory = new DirectoryInfo(baseDirectory);
        _testPackage = new TestPackage("ExampleCode");
        foreach (var assemblyName in assemblyNames) {
            _testPackage.Assemblies.Add(Assembly.Load(assemblyName).Location);
        }
        CoreExtensions.Host.InitializeService();
    }

    public static ExampleCodeHelper Default
    {
        get
        {
            var root = HttpContext.Current.Server.MapPath("~") + ConfigurationManager.AppSettings["examplecode.sourcefile.rootpath"];
            var assemblies = ConfigurationManager.AppSettings["examplecode.test.assemblies"].Split(';');
            return new ExampleCodeHelper(root, assemblies);
        }
    }

    private IEnumerable<string> CodeFiles => Directory.GetFiles(_baseDirectory.FullName, "*.cs", SearchOption.AllDirectories);

    private IEnumerable<TestResult> RunTests(IEnumerable<string> testNames)
    {
        var eventListener = new TestResultsEventListener();
        var runner = new SimpleTestRunner();
        if (runner.Load(_testPackage)) {
            runner.Run(eventListener, new SimpleNameFilter(testNames.ToArray()), true, LoggingThreshold.All);
        }
        return eventListener.ListResults;
    }

    public ClassDeclarationSyntax GetTestClass(string classFullName)
    {
        var definitions = GetAllTestClassDefinitions();
        var classSymbol = definitions.Keys.FirstOrDefault(k => k.ToString() == classFullName);
        return classSymbol != null ? definitions[classSymbol] : null;
    }

    /// <summary>
    /// Retrieves a <see cref="ExampleCodeContent"/> containing a number of <see cref="TestResultItem"/> objects with test results
    /// </summary>
    /// <param name="classFullName">Full name (including namespace) for the test class</param>
    public ExampleCodeContent GetTestResults(string classFullName)
    {
        var definitions = GetAllTestClassDefinitions();
        var classSymbol = definitions.Keys.FirstOrDefault(k => k.ToString() == classFullName);

        if (classSymbol == null) {
            return null;
        }

        var classDeclaration = definitions[classSymbol];

        var content = new ExampleCodeContent {
            Text = GetSyntaxNodeDocumentation(classSymbol),
            ContainerClass = classDeclaration
        };

        var testCases = classDeclaration.DescendantNodes()
                                        .OfType<MethodDeclarationSyntax>()
                                        .Where(m => HasNamedAttribute(m.AttributeLists, nameof(TestAttribute)))
                                        .ToList();

        var tests = RunTests(testCases.Select(t => $"{classSymbol.ToString()}.{t.Identifier.ValueText}"))
            .ToDictionary(key => testCases.Single(m => m.Identifier.ValueText == key.Test.MethodName), value => value);

        content.TestResults = tests.Keys.Select(method => new TestResultItem {
            Method = method,
            TestResult = tests[method],
            Text = GetSyntaxNodeDocumentation(GetDeclaredSymbol(method))
        }).ToList();

        return content;
    }

    /// <summary>
    /// Returns all test class definitions found in the defined source folder.
    /// </summary>
    /// <remarks>
    /// Only classes decorated with the <see cref="TestFixtureAttribute"/> attribute is returned.
    /// </remarks>
    public IDictionary<ISymbol, ClassDeclarationSyntax> GetAllTestClassDefinitions()
    {
        var classes = new List<ClassDeclarationSyntax>();
        foreach (var file in CodeFiles) {
            try {
                var testClasses = CSharpSyntaxTree.ParseText(File.ReadAllText(file))
                                                  .GetRoot()
                                                  .DescendantNodes()
                                                  .OfType<ClassDeclarationSyntax>()
                                                  .Where(c => HasNamedAttribute(c.AttributeLists, nameof(TestFixtureAttribute)));

                classes.AddRange(testClasses);
            }
            catch (Exception) {
                // just ignore failing source files
            }
        }

        return classes.ToDictionary(GetDeclaredSymbol, value => value);
    }

    #region helper methods

    private static bool HasNamedAttribute(SyntaxList<AttributeListSyntax> attributes, string attributeName)
    {
        var simpleAttributeName = attributeName.EndsWith("Attribute")
            ? attributeName.Substring(0, attributeName.LastIndexOf("Attribute", StringComparison.Ordinal))
            : attributeName;
        return attributes.SelectMany(a => a.Attributes).Any(a => a.Name.ToString().EndsWith(simpleAttributeName));
    }

    /// <summary>
    /// Retrives the <<paramref name="documentationSection"/>> documentation element "innertext" from the provided <see cref="ISymbol"/>
    /// </summary>
    private static string GetSyntaxNodeDocumentation(ISymbol symbol, string documentationSection = "summary")
    {
        var methodDocumentation = symbol.GetDocumentationCommentXml();
        if (!string.IsNullOrEmpty(methodDocumentation)) {
            var doc = XDocument.Parse(methodDocumentation);
            var nodes = doc.Descendants(documentationSection).FirstOrDefault()?.Nodes() ?? Enumerable.Empty<XNode>();
            return ParseSeeCrefs(string.Concat(nodes));
        }
        return null;
    }

    /// <summary>
    /// Changes any <see cref="TEXT" /> into <em>TEXT</em>, making it usable in html
    /// </summary>
    private static string ParseSeeCrefs(string inputText)
    {
        if (string.IsNullOrEmpty(inputText)) {
            return inputText;
        }
        var seeRegex = new Regex("< *see( +)cref=\"[^\"]:([^\"]+)\" */>");
        return seeRegex.Replace(inputText, m => "<em>" + m.Groups[2].Value + "</em>");
    }

    /// <summary>
    /// Returns the declared <see cref="ISymbol"/> for a specified <see cref="SyntaxNode"/>
    /// </summary>
    private static ISymbol GetDeclaredSymbol(SyntaxNode syntaxNode)
    {
        return CSharpCompilation.Create("MyCompilation", new[] {syntaxNode.SyntaxTree}).GetSemanticModel(syntaxNode.SyntaxTree).GetDeclaredSymbol(syntaxNode);
    }

    #endregion
}

With it, I can call ExampleCodeHelper.Default.GetTestResults("MyTestAssembly.MyTestResultClass") to compile a simple data model (source not shown), with documentation, and test source code. The result looking something like below:

Source code:

/// <summary>
/// #Content utilities#
/// <see cref="ContentUtility"/> contain a number of useful methods and extensions for Episerver content.
/// Basically, it can be seen as extension methods for <see cref="IContentLoader"/>. Though there are a number
/// of addiotional useful functions added.
/// 
/// Important to know is that the extensions, as opposed to the <see cref="IContentLoader"/>, will return null
/// instead of throwing a <see cref="EPiServerException"/> if not found or otherwise failing.
/// </summary>
[TestFixture(Category = "Episerver", Description = "Content utillties")]
public class ContentUtilityTests
{
    [Test]
    public void Load_Content()
    {
        var contentLink = SiteDefinition.Current.StartPage;

        //load content
        var content = contentLink.Get<IContent>();
        Assert.AreEqual(contentLink, content.ContentLink);

        //load content typed
        var startPage = contentLink.Get<PageData>();
        Assert.IsNotNull(startPage);

        // a wrong type or otherwise will return null
        var invalid = contentLink.Get<BlockData>();
        Assert.IsNull(invalid);
    }

    [Test]
    public void Load_content_using_a_specific_language()
    {
        var contentLink = SiteDefinition.Current.StartPage;
        var content = contentLink.Get<PageData>(LanguageLoaderOption.FallbackWithMaster());
        Assert.IsNotNull(content);
    }
}

Rendered result:

NDC London 2016 - På plats

2016-01-14T18:24:00.000+01:00

Nansen är på plats i London för att delta i konferensen NDC London. Efter nästan två dagar har vi hunnit med ett antal föreläsningar. Vi har fått höra om nyheter i ASP.NET 5, MVC 6 och Entity Framework 7. Och också hur man kan attackera sin egen sajt för att identifiera framtida problem och innan de blir problem. Det har även varit mycket prat om Azure och automatiseringar. Jon Skeet och Scott Allen har även haft en liten battle på scen där de fick tävla om att svara på frågor från stackoverflow. Tycker nog att Jon gick vinnande ur den kampen,
Förhoppningsvis så kommer även alla talks snart publiceras på vimeo.

Christer Ottosson får smaka på Jon Skeets magi.

Christer Ottosson, Jenny Atmer och Kalle Hoppe

Nansens protein junkies bevakar sina intressen

2016-01-12T15:19:00.001+01:00

Friskvårdsbidragen nyttjas frekvent på Nansen. Kokosbollarna och kakorna är inte fullt lika poplära som under andra tider på året. Ägg är hårdvaran just nu.

Nansen Stockholm- kontorsliv

2015-11-11T13:25:00.001+01:00

(Swedish) Kära besökare. Vi på Nansen gillar att dela med oss av både mjuka och hårda värden och även låta er ta del av högt och lågt vad gäller vad vi sysslar med. Fluffiga ord som inte alltid är lätta att konkretisera. Idag så ska jag dock ge er ett exempel på viktiga detaljer som vi brottas med men vars innehållsvärde kanske inte ligger högst upp på skalan.

Vi har haft en jobbig vattenläcka på stockholmskontoret vilket medför en del olägenhet just nu. Ett rör har stått och läckt en längre tid vid en av toaletterna och det har varit hantverkare här som hållit på och rivit ner väggar och golv. S ånu står det fläktar och torkar ut en del av lokalen. Fläktarna brummar en del och därför vill vi gärna ha stängt mellan den delen av lokalen och där vi sitter och jobbar i kontorslandskapet så folk slipper ådra sig tinnitus som arbetsmiljörelaterad skada.
Dörrhelvetet som ska dras igen krånglar dock lite och den är lite trixig att stänga igen. Genierna här på Nansen är dock inte bara jevvligt skarpa på att koka webb, vi är även rätt vassa på att skapa pedagogiska lappar och instruktionsvideos. Så, naturligtvis löste vi dörrstängningsproblematiken genom att sätta upp en otroligt pedagogisk lapp samt en instruktionsvideo för hur man går tillväga för att på ett korrekt sätt stänga dörren trots att den är lite kajko.

"Koka webb" in progress

2015-10-09T15:23:00.002+02:00

What you see here is actually a rockstar and a sailor discussing some very intricate system architecture structure stuff at Nansen HQ, Stockholm. This is what we call "koka webb"
.

Timeout exception during PageTypeBuilder update - DefaultValueType need a companion

2015-10-02T10:43:00.000+02:00

TL DR; On a page property in PageTypeBuilder (PTB) - If you have DefaultValueType = DefaultValueType.Value, you must have DefaultValue set to something. Otherwise your site might cause timeout on startup while PTB does it’s thing.

Background

The last months we've had problems with a clients test environment (EPiServer 6) regarding nasty timeouts while PageTypeBuilder does it's update on site startup. I spent some time cleaning the page types from missing/conflicting sort index on properties and removed tons of old page types that weren't in use anymore.

The issue

After the above mentinoed optimization, it felt like the startup ran smoother, but it was all an illusion. Every startup when PTB ran it's update, we got this exception:
Timeout expired. The timeout period elapsed prior to completion of the operation or the server is not responding.
At first I assumed it was network related since the hosting provider have had problems during this period with their firewall and other network issues.

The solution

[PageTypeProperty(EditCaption = "Prenumerationen registreras på din..",
Type = typeof(PropertyString),
Tab = typeof(PurchaseFlowAddressSlimTab),
DefaultValueType = EPiServer.DataAbstraction.DefaultValueType.Value,
SortOrder = 1120)]
public virtual string AddressSlimInfoText { get; set; }

Took a while before I saw what was different from the other properties. This:
DefaultValueType = EPiServer.DataAbstraction.DefaultValueType.Value
But no DefaultValue was set.

I corrected this and then updated the test environment. Still got the same error, but now the log told me about the next property that had the same issue, and the next and the next etc.

So I had to go through all the page type properties in the code that used DefaultValueType and check to see if it had the matching DefaultValue or not.

When this was done, took a while, the site has about 100 page types and I found about 10-15 properties that had to be corrected, I updated the test site again and tried to trigged the timeout.

But alas, there was none.

Wisdom

It seems weird that this causes a timeout, there should be an ArgumentException or something further inside the EPiServer.DataAccess-assembly that actually does the page definition update. So when you set DefaultValueType to Value, you have to set DefaultValue to something

For us I think it was a combination of unstable network environment and time consuming PTB update that triggered this timeout. As a developer, at least you can give PTB the best possible conditions so it runs as smooth as possible.

Anywho… if you have weird timeouts on an Epi 6 site. Check the obvious PTB mistakes such as duplicate/missing sort index etc, but also check the DefaultValueType/DefaultValue pairings.

Getting Visual Studio intellisense to play nice with RequireJS

2015-09-17T13:31:00.000+02:00

I was trying to get the intellisense to work in my javascript files in my ASP.NET MVC project, for which i'm using RequireJS and here's how it all worked out.

Working with _references.js

Visual studio is using a file called _references.js to grant you the wisdom of intellisense in JavaScript files. First off, we need to make sure we have our _references.js file where Visual Studio can find it. By default Visual Studio will search for this file in the location "~/Scripts/_references.js" if your'e working with a web project. However if your scripts-folder resides in a different area of your project you can easily change where Visual Studio looks for this file.

Options → Text Editor → JavaScript → IntelliSense → References

In the dropdown called "Reference Group" choose "Implicit (Web)".

If you're interested you can read more on the history of _references.js here http://madskristensen.net/post/the-story-behind-_referencesjs

Configuring _references.js for RequireJS

I was reading up on the subject on at https://msdn.microsoft.com/en-us/library/dn904583(v=vs.120).aspx) but i was having issues with how the path was resolved to my RequireJS modules. So my scripts wasn't loaded correctly.

While reading the debug messages in the output window for JavaScript Language Service, saw from where Visual Studio tried to load my files, C:\Program Files (x86)\Microsoft Visual Studio 14.0\JavaScript\References\require.config.

The solution was to configure the basePath for RequireJS in the _references.js file, and after RequireJS will handle the dependencies you have in your modules and Visual Studio will grant you IntelliSense.

Code

/// <autosync enabled="true" />
/// <reference path="Vendor/require.js" data-main="main.js" />

require.config({
baseUrl: '~/Assets/Scripts/'
});

Decorate your scripts with comments

In Visual Studio 2015, Microsoft has added support for JSDoc. Which is a documenting/comment syntax, and if you use it you get really sweet intellisense in correlation with _references.js. So instead of just getting what functions and properties an object might have you also get information of parameters and types if you choose to write it. Visual Studio also has support for xml based comments to complement your intllisense, but personally i prefer JSDoc.

You can read the documentation of JSDoc at http://usejsdoc.org/

E.g. creating a module like this will grant you the intellisense of the picture below.

Code

/**
* AWESOM-O
* @module modules/awesomo
*/
define('modules/awesomo', [
'underscore'
], function(_){
'use strict';

return {

/** Will return a random number between 0 and 100. */
randomNumber: function(){

return _.random(0, 100);
},

/**
* AWESOM-O will try to give you medical help
* @param {string} bodyPart - The bodypart in need of medical assistance
*/
giveMedicalHelp: function(bodyPart){

return 'Um, actually A.W.E.S.O.M-O is not programmed for that function.';
}
};
});

Result

Happy coding.

Offline, can not save EPiServer 7.x

2015-06-25T15:48:00.000+02:00

We recently started getting an odd error message whenever we edited a page. EPiServers auto save functionality was throwing an error in the console

“POST http://mysite.local/episerver/cms/Stores/contentdata/500 (Internal Server Error)”.

We searched the internets for some clues about what could be wrong. Many posts hinted about page properties beeing missmatched with the settings in the database

http://world.episerver.com/forum/developer-forum/EPiServer-7-CMS/Thread-Container/2012/12/offline-cant-save---error/

http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=118783

http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=112200

http://stackoverflow.com/questions/4864746/episerver-configuration-settings-instance-application-is-initialized-with-sett

Further digging into the logs we found this

Here’s the stack trace:

[InvalidOperationException: This request has probably been tampered with. Close the browser and try again.]

EPiServer.Framework.Web.AspNetAntiForgery.ThrowForgeryException() +374

EPiServer.Shell.Services.Rest.RestHttpHandler.ProcessRequest(HttpContextBase httpContext) +109

System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +913

System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +165

and

ERROR - 1.2.5 Unhandled exception in ASP.NET

System.InvalidOperationException: This request has probably been tampered with. Close the browser and try again.

at EPiServer.Framework.Web.AspNetAntiForgery.ThrowForgeryException()

at EPiServer.Shell.Services.Rest.RestHttpHandler.ProcessRequest(HttpContextBase httpContext)

at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()

at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

ERROR - Cross-site request forgery detected [Client IP: XX.XX.XX.XX, Referer: http://mysite.local/episerver/CMS/#context=epi.cms.contentdata:///317, Url: http://mysite.local/episerver/cms/Stores/contentversion/, User: UserName]

although, the error that led us to the solution was this little fella

"the required anti-forgery cookie __requestverificationtoken is not present"

It turns out that we had marked the cookies as secure (as we all should) with the configuration setting

<system.web><httpCookies requireSSL="true" /></system.web>

But we were accessing the site with http. So the real underlying error was that last one, “the required anti-forgery cookie __requestverificationtoken is not present”. The site was requesting secure anti-forgery cookies but was getting standard unsecure cookies, thus the tampering exception

The solution, query the site with https or change the setting to requireSSL=”false”

EPiServer Digital Experience Cloud nyheterna

2015-06-01T09:40:00.002+02:00

EPiServer Digital Experience Cloud DXC avtäcktes i slutet i förra veckan. Den nya paketeringen av EPiServer CMS, kundupplevelsehantering, digital marknadsföring och e-handel är riktad mot den nya tidens sälj- och marknadsinriktade organisationer som senaste året lärt sig utnyttja molnet för fördelar som enkel upprättning, flexibel skalbarhet och agil hantering av nya behov hos sina kunder.

Plattformen som tjänst erbjuds numera i pakteringar riktade sig mot de fyra målgrupperna:

Professional
Group
Corporate och
Enterprise

Integrationsmotorn Digital Experience Hub (DXH) ingår numera i produkten och kopplar an till system som Marketo, Salesforce Marketing Cloud (ExactTarget), Microsoft Dynamics CRM, Google Universal Analytics, Hubspot och Salesforce Sales Cloud (Pardot).

Dessutom finns omfattande förbättringar inom Content Staging samt Content collaboration för effektivare samarbete kontor världen över.

Hör gärna av er om ni är intresserade av att veta mer om den nya plattformen.

Getting started with CXM - The User Journey Purchase Loop

2015-05-20T17:19:00.001+02:00

No one is like the other
In Sweden four large new pharmacies was founded exactly the same day. The first of July 2009 was the first day when deregulated non-government owned pharmacies was allowed in the country.

None of the new pharmacies had any time consuming legacy that day. No existing marketing plans, no previous IT-systems setup, specific digital marketing consultancies contracted nor any other general policies guides up and running.

Not even those four companies, founded at the exact same moment, should try to copy each other’s customer experience strategy.

Even if two competitors are in the same business, have the same clients, goals and means – successful customer experience management has turned out to be something absolutely unique.

The management of a customer experience is much more than a market and a product. It boils down to one company’s:

• General marketing ambitions
• Basic knowledge of analysis
• Will to quickly adapt and..
• Type of contracted and employed staff as well as hierarchies

However there are some aids to help you get started. Nansen will go through some of them here!

User Journey Purchase Loop
The definition of the customer journey has long been looked upon as a good start for Customer Experience strategy definition. One of the second best templates to originate from is the User Journey Purchase Loop.

A great and modern look into how the purchase process and the decision making steps within a buy rolls out. The sum of all interactions with a customer. Answers when the customers will feel and ask questions like "Be transparent", "Reward me", "Make it easy", Earn my trust" and so on.

A broad definition, open for each CXM-interested company to adapt and make their own. And once completed possible to plan for, target analytics and KPI:s towards as well as marketing automation. Therefor really useful. Take a look!

Localize Property Name Based on Content Language

2015-05-12T00:13:00.000+02:00

We recently had a client request that a page property have a different display name for each language branch. The function of the property was as an identifier and would always be used the same in the back end but the editors in each country had a different name for the property.

This isn't a particularly inspired solution, but I'm hoping to save someone else the time it took to stumble upon this.

It is possible to localize EPi property names using the built in Display attribute and keeping the translations in resources files (see this stackoverflow post here), but this is only based on the UI language in Edit/Admin mode and not on content language.

I created an EditorDescriptor that will take the string entered in the Name field and try to translate it using the registered LocalizationService (whatever that may be). An important thing to note is the EditorDescriptorBehavior. We have to have it as EditorDescriptorBehavior.PlaceLast to ensure that any other logic to get the Display Name (built in translation, etc) does not interfere with what we want displayed.

Code

[EditorDescriptorRegistration(TargetType = typeof(String), UIHint = SiteUIHints.LocalizedDisplay, EditorDescriptorBehavior = EditorDescriptorBehavior.PlaceLast)]
public class LocalizableDisplayEditorDescriptor : EditorDescriptor
{
   public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
   {
      base.ModifyMetadata(metadata, attributes);

      Attribute attr = attributes.FirstOrDefault(a => a.GetType() == typeof(DisplayAttribute));
      if (attr != null)
      {
         string translated =

ServiceLocator.Current.GetInstance<LocalizationService().GetStringByCulture(metadata.DisplayName,
FallbackBehaviors.None, ContentLanguage.PreferredCulture);


         if (!string.IsNullOrWhiteSpace(translated))
            metadata.DisplayName = translated;
      }
   }
}

Usage

 [UIHint(SiteUIHints.LocalizedDisplay)]
 [Display(Name = "/properties/InternalId/displayname", Order = 200)]
 public virtual string InternalId { get; set; }

Web site infrastructure security

2015-04-27T17:46:00.000+02:00

Google Chrome has started to show sites that still uses the old SHA-1 cipher as not verified. https://support.servertastic.com/deprecation-of-sha1-and-moving-to-sha2/

Sites with SSL certificates that expire before January 1, 2016 won’t be affected, but sites with certificates that expire later will need to have their certificates reissued.

“Early 2015 – Chrome 41: Sites with end-entity certificates that expire between 1 January 2016 and 31 December 2016 (inclusive), and which include a SHA1-based signature as part of the certificate chain, will be treated as “secure, but with minor errors”.

Sites with end-entity certificates that expire on or after 1 January 2017, and which include a SHA1-based signature as part of the certificate chain, will be treated as “affirmatively insecure”. Subresources from such domain will be treated as “active mixed content”. The current visual display for “affirmatively insecure” is a lock with a red X, and a red strike-through text treatment in the URL scheme.”

Last month we had an issue with a customer site regarding this issue and some others more concerning issues. It all started as the customer had some unwanted publicity when the site was rated F by the ssllabs validation tool. It turns out that the infrastructure guys had missed was to turn on TLS 2.0 support and to disable the SSL V1-V3 and RC4 cipher on the web front servers and for the load balancers that terminates the SSL traffic. Along with a weak SSL certificate that uses SHA-1. This was bad news, but also things that where very easily fixed and the customer is at a considerable better, A- rating.

The remedies for this is to

Disable SSL V1, V2 and V3 https://www.sslshopper.com/article-how-to-disable-ssl-2.0-in-iis-7.html
Disable RC4 Cipher (same link)
Upgrade your SSL certificate to use the SHA-2 cipher.
If possible use DNS-SEC

There are more things you can do proactively to protect your sites. Some things must be dealt by the IT org. but some things can be done on the servers.

Check out this links:

PEN test your site

https://asafaweb.com/

Other PEN testing tools

https://www.owasp.org/index.php/Category:Penetration_Testing_Tools

PEN test the infrastructure

https://www.ssllabs.com/ssltest/analyze.html

http://www.pluralsight.com/courses/owasp-top10-aspdotnet-application-security-risks

OWASP

Is a great resource for web security. Here you can find almost everything you'l ever need regarding web security.

Cheat sheet

https://www.owasp.org/index.php/.NET_Security_Cheat_Sheet

And Troy Hunt has a great Plurar sigth course, top 10 ASP.NET list to check

http://www.pluralsight.com/courses/owasp-top10-aspdotnet-application-security-risks

This is how you disable exessivve response headers

http://www.troyhunt.com/2012/02/shhh-dont-let-your-response-headers.html

<system.web>

</system.web>

The MVC version is also easy, although it does require us to touch code. Over in the Global.asax, we want to jump into the Application_Start event and add the following:

MvcHandler.DisableMvcResponseHeader = true;

I hope these tips can help you get a more secure site.

EPi Initialization Modules: A Practical Guide

2015-03-31T04:16:00.002+02:00

If you've been working with EPi 7 or 7.5 (or even 8 for you early adopters), you've most likely created an initialization module. For a thorough introduction, this link is a good resource. While they are really extensible, I've run into a few hiccups during development and would like to share some (hopefully) time saving tips.

Debugging

Debugging has proven to be quite a headache for me whenever I create an initialization module since I don't do it very often and always forget how I was able to do it the last time. Since you need to be attached to the debugger while the site is initializing, many common forms of debugging don't work very well (if you are using traditional IIS and not IIS Express). I've seen a couple blog posts on this topic, but none have worked for me (because it's for an older version of EPi or because it recycles the whole app pool).

Here is the easiest way I've found to quickly and easily debug my initialization modules:

1. In your Initialization module, add this line where you would like the debugger to break

System.Diagnostics.Debugger.Break();

2. Using Visual Studio's Debug > Attach to Process menu, attach to all of the w3wp processes. This makes sure that you are still attached to the process running the initialization even when you restart the site in the next step.

3. In IIS, restart the website you'd like to initialize

You should see your break point hit and be able to debug your initialization module now. If you know a better way to accomplish this, please let me know in the comments! This has been the simplest solution I've found.

InitComplete

In EPi's documentation, they mention that the InitComplete event's "typical use case (also featured in EPiServer Community) is to attach event handlers to an instance property that may be overridden by third-party code."

Another use case for InitComplete is if you need to access the Start page of your site or any other site specific properties. These are only available after the site has been initialized.

One "gotcha" to keep in mind, is that you must have the wild card site binding in order for the initialization module to properly find your Start Page. Otherwise, ContentReference.StartPage returns an empty content reference.

Do you know of any other tips when developing initialization modules? Let me know in the comments!

How agile is reviving the marketing industry

2015-03-30T11:29:00.001+02:00

"Best practice" has been a mantra that many in the marketing industry have depended on over the last few years. On first glance it makes sense: sticking to what has - in the past - been proven to yield the most effective results seems like a guaranteed strategy for future success.

But “past” is the key word. Progress requires that we make new discoveries - and if we always do what we have done in the past, the future will look very similar.

For outstanding success going forward, we need to find new ways of doing things; we need to forge solutions, not follow them.

This is not going to be achieved by following best practice.

EPiServer explains here why agile marketing is the wake-up call that all marketers have been waiting for:

Why Best Practice is Killing Marketing Rant | EPiServer from EPiServer

Wintercamp II – Day 1, arriving

2015-03-16T09:56:00.001+01:00

The second Wintercamp took place at Koppars on the 11-14 march 2015.

Feedback from last years’ Wintercamp was that we should decide and prepare some themes and projects prior to going up to Koppars.

So, when we, the 20 people from the Chicago, Stockholm, and London offices drove up to Koppars, there were six themes pre-baked and everyone felt roughly prepared for what was going to take place.

The idea behind Wintercamp is to unite people from all the offices and create, code, build, write, hang out, cook, and spend some time together outside of client projects.

There are no rules except :

1. We do Wintercamp stuff from 09.00-17.00 - even though it was really hard to get people away from the keyboards before 20.00 sometimes :-)
2. We do a short demo of the progress each day at 17.00.

We arrived at Koppars just outside Järvsö. The place is at the shore of river Ljusnan and consists of one main building and a few smaller. Once settled in we started off with lunch, a brief intro to all the themes.

Koppars is located just next to the Ljusnan river and it's a beautiful place in the wintertime.

Lunchtime day one.

Theme briefing

This is the pre-defined themes we wanted to dive deeper into at the wintercamp:

New Nansen.com

Initial wireframe for the news Nansen.com

This is the big one! It’s the most demanding theme since it will be the replacement of the current Nansen site that has existed for three years.

The goal was to leave Koppars with very, very well worked version 0.96 of the site. Everything had to be created from scratch.

GUI for Blueprint prototype tool

Proof of concept for the prototyping GUI is built in Umbraco.

Last year we refined and continued to build upon our prototype framework Blueprint. It is now in such a mature state that we have decided to try to build a graphical interface for it so that we UX:ers and designers can create prototypes without having to touch HTML and CSS.

NAPC 2015 conference app

Photo-feed in the NAPC conferance app.

This is a theme initiated by the Chicago office. The idea is to dive into Xamarin, a framework where you build native apps for iOS, Android, Mac, and Windows, and build an app for our yearly internal Nansen NAPC conference. This year the conferance will be held in Chicago and will include staff from all our offices; Stockholm, London, New York and Chicago. The app will house travel information, speaker/session schedules, photo-stream so that the attendees can get the most out of the conferance.

Create templates for our new PRINCE2 project management process

The project management team has been working with our new project process Nansen NEXT. We are integrating the PRINCE2 project methodology with the agile development process. The work involves creating project management templates, and defining which work is done when.

"Concept" section for our client preview area

We have a Preview.nansen.com domain where our clients can login and access the visual design and prototypes that we build for them. But one thing that has been missing is a section where we can summarize concept and strategy for the clients projects. Goal is to get this in place.

Automatic style guides

We all love style guides! In a few projects we have drafted a style guide tool that automatically generates them for us from our LESS, SASS, or CSS files. At this Wintercamp it was time to refactor it, structure it a bit more seriously and integrate it more deeply with our Preview-area and the Blueprint framework.

Digital consumers don't experience what we expect

2015-03-13T16:45:00.001+01:00

A new eConsultancy Digital marketing report about what consumers find really important online vs. what we as an agency finds important contained some groundbreaking facts.

Our view of the consumers’ digital experience doesn't always correlate with their own.

Especially the -70% factor regarding how consumers request "information about your account" support and the -65% difference regarding the importance of "account details" is remarkable. Integrity aside, a digital solution never seems to become too relevant for users. Worth keeping in mind.

Also, the 106% difference between "social touch points", the 72% on a tablet and the 128% smartphone are interesting numbers.

The report featured 1500 respondents and was published in February2015.

Vi är överallt, iallafall i Järvsö, Vemdalen och Austin Texas

2015-03-13T14:35:00.001+01:00

Det händer otroligt mycket hos oss just nu. Inte bara när det gäller kunder och projekt.
Här på Nansen så försöker vi, förutom att koka riktigt bra webb, även att ha kul tillsammans och även vidareutveckla oss. Så vad händer just nu då undrar ni?

Vi skyfflat iväg 22 personer, från våra kontor i London, Chicago och Stockholm, till vår årliga wintercamp uppe på gården Koppars i Järvsö. Där är tanken att vi ska skapa en massa nyttiga och coola verktyg, proccesser och material som vi använder i vår dagliga verksamhet.
Grejer som tex vårt prototypverktyg Blueprint och vår plattform Encore filas det på. Saker som våra kunder får nytta av i våra projekt sen. Men även interna grejer tas fram.
Följ hasthtaggen #napc på twitter och facebook för massa fina bilder och intressanta posts från wintercampen!

Vi har även ett gäng sköningar som är uppe och åker skidor och bräda i Vemdalen denna helg. 10 vintersportare intryckta i en trevlig stuga. De kanske inte producerar en massa coola verktyg, men de bygger väl nån slags broar tillsammans...who knows?

Markus Bereflod och Joe Grause från vårt chicagokontor är just nu iväg på SXSW Interactive i Austing, Texas.

Vi andra som inte åker nerför pisten i Vemdalen, är på wintercamp i Järvsö eller konferensar i Austin Texas håller ställningarna här hemma. Jag köpte iaf glass till oss som var kvar här på kontoret och faktiskt såg till att det kokades lite webb åt alla våra kunder.

/Rudde

Så börjar allt arbete med CXM, kundupplevelsen. Praktiska exempel från Nansen

2015-02-13T12:08:00.001+01:00

På Nansen fick vi den första förfrågningen om att föreläsa och om kundupplevelser, Customer Experiences eller CXM redan för 3 år sedan. Sedan dess har vi dissekerat ämnet på Webbdagarna, Hyper Island och Berghs samt skrivit krönikor i Resumé.

Än idag tolkas den välanvända akronymen på helt nya sätt. Synen på vad som ingår i hanteringen av en digital och fysisk kundupplevelse förändras. Så må vara, det är ett brett begrepp och praktiska tillämpningar är fortfarande ovanliga både i Sverige och internationellt.

Men efter att jobbat med CXM för Telia.se, Electrolux och många fler av våra kunder har vi några handfasta tips att bjuda på.

Samt en absolut grundregel: Vet ni inte - så vet ni inte.

Det finns ingen CXM-checklista. Det finns inget färdigt CXM-paket. Inte ens något definitiva fakta framtagna för er bransch.

På pappret kan ni vara väldigt lika er närmsta konkurrent. Sett till omsättning, målgruppsfokus och geografisk spridning. Men ändå så är ni ändå inte det.

Ni har helt olika hierarkiska organisationer, olika system, olika säkerhetspolicies och olika syn på hur projekt ska drivas. Det gör att ni inte kommer veta hur ni ska få de olika digitala delarna med innehåll, kommers, analys, befintliga och nya data samt alla kopplingar dessa emellan att fungera. Inte innan ni faktiskt testat.

Det finns bara ett sätt att påbörja ett CXM-arbete. Genom att starta någonstans.

Tänk er en tårtbit. Ett tvärsnitt rakt in på er webbplats. Där hittar ni på sidnivå två eller tre en relativt viktig sida med en typ av konvertering. Kanske ett köpavslut eller ett formulär ska ska fyllas i. Utgå från den. Bygg in profilering med CRM-kopplingar, marketing automation triggers, tät analys, A/B-test och få in alla e-handelskopplingar till just den sidan. Bara den.

Sedan väntar ni. Sedan analyserar ni. Sedan förbättrar ni. Sedan börjar ni om. Sedan för ni ut erhållna kunskaper på fler sidor, kanske en nivå upp i trädet. Mät igen. Förbättra igen osv.

Några månader fram kallar ni till ett ledningsmöte och redovisar alla resultat. Därefter kommer ni finna er i en situation där ni både får medel, all teknisk tillgång och framförallt beslutsrätten att välja ett system framför ett annat inom organisationens tekniska stack.

Men börja med mandatet att förändra just den där sidan på nivå två eller tre. Det är så upplevelsearbetet börjar.

Fyra nya GAIQ!

2015-02-11T14:46:00.001+01:00

Grattis till Tove, Jens, Robert och Steve som igår tog certet Google Analytics Individual Qualification, GAIQ. Nansen har nu totalt 13 stycken certifierade GAIQs.

Läs mer här på vår facebooksida

New ownership at EPiServer - how will it affect your organisation?

2014-12-09T11:45:00.001+01:00

EPiServer today officially announces new ownership. The US private equity firm Accel-KKR will be taking over the formerly Swedish owned company.

With the change of ownership, EPiServer will inherit a new portfolio of similar technology companies. Most notably, EPiServer’s former competitor Ektron CMS has also been taken over by Accel-KKR. So what does this new ownership mean for EPiServer clients?

Initially, very little will change. First of all, clients' concerns about the deal will be addressed and reconciled through several user studies.

It will also take some time before the new American or European sales offering gets to a serious stage, and it’s unlikely that the new owners will try to push the new products onto existing customers. There are earlier product options for the critical evaluation platform, and the owners will acknowledge this.

But on paper the deal makes great business sense for everyone. Ektron is affordable with a strong American base (around 3,000 active customers), while EPiServer is high on innovation and has a strong market in Europe. There are no direct technical collisions, so there is nothing to suggest that there will be problems or clashes ahead. Both systems are based on the Microsoft .NET environment and are similar in terms of cloud connectors and architecture.

As a client however, you might notice this change of ownership in other ways.

Investment by EPiServer over the last few years in e-commerce (Media Chase), search technology (SiteSeeker, Trufflr), and collaborations in marketing automation (Silverpop), and DAM (Celum, QBank); has helped create an innovative profile. Compared with the new corporate partner, EPiServer offers a solid digital marketing package with full control of the customer experience. With a new owner, EPiServer products are expected to rank higher than Ektron’s, and EPiServer 7.5 / 8 is expected to be the one on top.

Ektron also offers services in Persona Management, Marketing Optimization, and Digital Experience; but EPiServer's portfolio of digital marketing, analysis, testing, and personalization with the associated e-commerce is considered more sophisticated, well-integrated, and technologically advanced.

EPiServer clients can now take advantage of the clear benefits, with doubled R & D, and marketing and sales support partially controlled by the fast-moving US market. This will also be reflected in Europe, where it will be easy to quickly modify according to new trends and findings.

So, sit back, relax, and look forward to an even better, more innovative product content management, marketing support, and e-commerce in 2015. If you have any further concerns about the "new EPiServer”, get in touch with Nansen and we’ll be happy to answer any questions.

EPiServer får helt nya ägare, vad betyder det för er som kund?

2014-12-09T09:54:00.000+01:00

EPiServer får idag officiellt nya ägare. Amerikanska private equity-bolaget Accel-KKR tar över det tidigare svenskägda bolaget.

EPiServer hamnar i och med ägarbytet i en ny typ av bolagsportfölj där mer snarlika teknikbolag återfinns. Inte minst den forna konkurrenten Ektron CMS som även de just togs över av Accel-KKR.

Initialt väntas inte affären påverka mycket. Först ska alla partners och kunders kunskap om, och känsla för, affären få tid att smälta in. Och sedan eventuellt stämmas av genom olika användarundersökningar.

Det kommer ta ett tag innan nya amerikanska eller europeiska säljambitioner når hela vägen fram till ett möte och vid det tillfället är det dessutom osäkert om de nya ägarna kommer våga prata om den ena eller andra produkten till alla befintliga kunder. Det finns ett tidigare produktval efter kritisk plattformsutvärdering som de nya ägarna måste respektera.

Men på pappret fungerar verkligen affären, Ett prisvärt Ektron med stark amerikansk bas om 3000 aktiva kunder slås samman med ett innovativt EPiServer starka i Europa. Inte heller finns några direkta tekniska kollisioner som kan orsaka huvudbry för de nya ägarna. Båda systemen bygger på samma Microsoft .NET miljö och är lika varandra sett till molnkopplingar och syn på arkitektur.

På längre sikt kan ni nuvarande kunder däremot komma att märka av sammanslagningen på andra sätt.

EPiServers medvetna förvärv inom e-handel (MediaChase), sökteknologi (Siteseeker, Trufflr) och samarbeten inom marketing automation (SilverPop) samt DAM (Celum, Qbank) de senaste åren har hjälpt till att skapa en innovativ profil. Jämfört med nya koncerngrannen erbjuder EPiServer idag ett solitt digital marketing paket med full kontroll av kundupplevelsen.

Hos en ny ägare väntas EPiServers produkter rankas högre än Ektrons. EPiServer 7.5/8 väntas framöver bli vad ägarna tekniskt satsar på.

Ektron erbjuder även de tjänster inom Persona management, Marketing optimization och Digital Experience men EPiServers portfolio inom digital marketing, analys, test, och personalisering med tillhörande e-handel anses mer avancerad, välintegrerad och tekniskt långt kommen.

Kunder till EPiServer får därmed framöver en produktleverantör med fördubblad R&D, marketing och säljstöd delvis kontrollerat från den snabbrörliga, viktiga amerikanska marknaden. Det kommer förhoppningsvis även spegla sig i Europa där vi snabbare kommer få ta del av trendanpassningar och nya rön.

Så, ta det lugnt och se fram mot en ännu bättre, mer innovativ produkt för innehållshantering, marknadsstöd och e-handel 2015. Och prata gärna med oss på Nansen om ni har ytterligare funderingar om det ”nya EPiServer”.

Multiple DisplayFor templates in asp.net MVC

2014-11-08T16:23:00.002+01:00

When working with MVC and display templates I have time and again experienced a shortcoming of the DisplayFor method of rendering objects, or maybe I shouldn't call it a shortcoming, lets call it a design decision for simplicity: The inability to easily define and use multiple display templates for one model type.

I work with a CMS, lets call it EPiServer, where a common scenario is that I have a number of different page models, all inheriting a common ancestor. The most basic properties of a page would be a name and its url, a more advanced page could be an article where there is also a image and a preamble. These pages are mixed in the tree structure of my site, and are used in a number of different ways, like in the support navigation at the top of the page, a page listing, or perhaps a sidebar teaser list.

Above I have already defined three different display templates I want to use when showing information about my pages to the visitor while not visiting the acutal page in where the page controller index method will be used. But MVC does only support one, with a possible local overload in the controller folder: /Views/Shared/DisplayTemplates/MyPageTypeClassName.cshtml.

First of all

Lets recap some ground rules for the display template system used in MVC. Assume you have a data model:

public class MyItem {
  public string Name { get; set; }
  public string Image { get; set; }
  public string Preamble { get; set; }
  public string Url { get; set; }
}

And in a view model of some sort:

public class MyViewModel {
  public MyItem Teaser { get; set; }
}

Now to render this in a view, you would call:

@model MyViewModel
@Html.DisplayFor(m => m.Teaser)

This would just simply render out each individual property from the MyItem object. To enhance it, you would do something like so:

@Html.DisplayFor(m => m.Teaser, "MyTeaserView")

And the view /Views/Shared/DisplayTemplates/MyTeaserView.cshtml would be used.
There is also another possibility to just add a display template with the same name as the class to the /views/shared/displaytemplates/ folder and that will be used if I call:

@Html.DisplayFor(m => m.Teaser)

Another option is to use a UIHint:

public class MyViewModel {
  [UIHint("MyDisplayTemplate")]
  public MyItem Teaser { get; set; }
}

and when calling DisplayFor using @Html.DisplayFor(m => m.Teaser), the display template /views/shared/displaytemplates/MyDisplayTemplate.cshtml would be used.
Another powerful convention using DisplayFor is when you use it on objects with the same ancestry or interfaces, consider the following items:

public abstract class ItemBase {
  public string Name { get; set; }
  public string Url { get; set; }
}
public class MyItem : ItemBase {
  public string Image { get; set; }
  public string Preamble { get; set; }
}
public class MySimpleItem : ItemBase {
}
public class MyItemListViewModel {
  IEnumerable<itembase> Items { get; set; }
}

Using conventions, I can add some display templates to tweak the display of my items: MyItem.cshtml:

@model MyItem
@Html.DisplayFor(m => m.Name)
@Html.DisplayFor(m => m.Image)
@Html.DisplayFor(m => m.Preamble)
@Html.DisplayFor(m => m.Url)

MySimpleItem.cshtml:

@model MySimpleItem
@Html.DisplayFor(m => m.Name)
@Html.DisplayFor(m => m.Url)

I can even add a template for the base class, so if I later add another implementation of ItemBase, it will display like the base item.
ItemBase.cshtml:

@model ItemBase
@Html.DisplayFor(m => m.Name)
@Html.DisplayFor(m => m.Url)

The problem

Remember when I talked about my pages in the beginning of this post, where I commonly had different page types that need to be rendered differently in the same list?

Now, combine the display templates of MVC and my pages, and I could create a page list using a foreach loop and Html.DisplayFor(m => page). For each page I create a display template and the page will be rendered in its own unique way in my page listing depending on what properties I have available, like so:

@foreach (var page in Model.PagesToList) {
 @Html.DisplayFor(m => page)
}

Next I want to list other pages as teasers in the sidebar, using different html for each type ofcourse:

@foreach (var page in Model.SideBarTeasers) {
 @Html.DisplayFor(m => page)
}

But I can't! Because the display template for each page is already occupied by my page listing, what do I do?
There are a number of solutions:

I can create a whole new controller for just the side bar listing, as controllers can have their own display templates.
I can create a new view model for each page type, combine them with a new base type, and use those in my listing instead, even though there will be no new data so I am effectively duplicating my models just to gain access to a new display template.
I can use a specific display template, using @Html.DisplayFor(m => item, "MySideBarPageModel") , but this would limit me to just one view for all different page types, which would fail my requirement of having different html per model.
I could use something like item.GetType().Name as template argument, but that could easily break if I later add another page type to the list as there is no fallback to base.

There are probably more clever ways to achieve this, but all ways I tried have revolving around duplicated code (view model bonanza!), or just been a case of killing ants with cannons to stay within the conventions of MVC and DisplayFor.

The solution

Cue the DisplayForWithPrefix html helper:

public static class DisplayExtensions {
  public const string DEFAULT_PREFIX_VIEW_FORMAT = "{0}.{1}";
  public const string DIRECTORY_PREFIX_VIEW_FORMAT = "{0}/{1}";

  /// <summary>
  /// <see cref="System.Web.Mvc.Html.DisplayExtensions.DisplayFor{TModel,TValue}(System.Web.Mvc.HtmlHelper{TModel},System.Linq.Expressions.Expression{System.Func{TModel,TValue}})"/>
  /// overload using a template prefix. Used to display for the value type using a custom prefix so one object type can have different templates. Will fall back to base types.
  /// </summary>
  /// <remarks>
  /// Works similar to regular <see cref="System.Web.Mvc.Html.DisplayExtensions.DisplayFor{TModel,TValue}(System.Web.Mvc.HtmlHelper{TModel},System.Linq.Expressions.Expression{System.Func{TModel,TValue}})"/> 
  /// where the template type is searched recursively using <see cref="Type.BaseType"/>. If no template can be found, it will fallback to the default System.Web.Mvc.Html.DisplayExtensions.DisplayFor method 
  /// using no template at all.
  /// </remarks>
  /// <typeparam name="TModel">The model type</typeparam>
  /// <typeparam name="TValue">The value type</typeparam>
  /// <param name="html">The html helper</param>
  /// <param name="expression">The value expression</param>
  /// <param name="templatePrefix">The template prefix, ex using "MyStringList" for <typeparamref name="TValue"/> string would, using default <paramref name="viewFormat" />, look for the display template named MyStringList.string.cshtml</param>
  /// <param name="viewFormat">How to format the view template name, format arguments: {0} - <paramref name="templatePrefix"/>, {1} - model type name. / can also be used to make the prefix be a directory</param>
  /// <param name="fallbackTemplate">If set, will be used if no display template can be found, otherwise DisplayFor without template will be called as fallback</param>
  /// <param name="preferInterfaceBeforeBaseClass">If true, the display template search prefers interfaces before base classes, otherwise all base classes will be checked before any interface. Also, only interfaces defined directly on the current type being searched is considered each <see cref="Type.BaseType"/> iteration</param>
  /// <returns>The rendered html</returns>
  public static MvcHtmlString DisplayForWithPrefix<TModel, TValue>(this HtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string templatePrefix,
    string viewFormat = DEFAULT_PREFIX_VIEW_FORMAT, string fallbackTemplate = null, bool preferInterfaceBeforeBaseClass = false)
  {
    var metaData = ModelMetadata.FromLambdaExpression(expression, html.ViewData);
    var modelType = metaData.Model.GetType(); // this is the most derived type of the model

    Func<string, MvcHtmlString> renderer = templateName => System.Web.Mvc.Html.DisplayExtensions.DisplayFor(html, expression, templateName);

    // first, check all concrete implementations
    while(modelType != null) {
      var viewName = string.Format(viewFormat, templatePrefix, modelType.Name);

      if(DisplayTemplateExist(html.ViewContext, viewName)) {
        return renderer(viewName);
      }

      if(preferInterfaceBeforeBaseClass) {
        // check interfaces defined on the model type directly
        var exceptions = modelType.BaseType != null ? modelType.BaseType.GetInterfaces() : Enumerable.Empty<Type>();
        foreach(var @interface in metaData.Model.GetType().GetInterfaces().Except(exceptions)) {
          viewName = string.Format(viewFormat, templatePrefix, @interface.Name);
          if(DisplayTemplateExist(html.ViewContext, viewName)) {
            return renderer(viewName);
          }
        }
      }

      modelType = modelType.BaseType;
    }

    // check all interfaces, if not already checked per implementation
    if(!preferInterfaceBeforeBaseClass) {
      foreach(var @interface in metaData.Model.GetType().GetInterfaces()) {
        var viewName = string.Format(viewFormat, templatePrefix, @interface.Name);
        if(DisplayTemplateExist(html.ViewContext, viewName)) {
          return renderer(viewName);
        }
      }
    }

    // fallback
    return renderer(fallbackTemplate);
  }

  private static bool DisplayTemplateExist(ViewContext context, params string[] templateNames)
  {
    foreach(var templateName in templateNames) {
      // the FindPartialView will not automatically search the displaytemplates folder, but the DisplayFor method will
      var viewResult = ViewEngines.Engines.FindPartialView(context, "DisplayTemplates/" + templateName);
      return viewResult.View != null;
    }
    return false;
  }
}

The html helper is quite simple, it works like DisplayFor, infact it uses DisplayFor to do the actual rendering, but it will behave slightly different when looking for display templates. The helper will use the prefix when looking for display templates, enabling me to use different templates to render the same objects using my requirement to automatically choose template based on what page type model is being rendered.

Taking my previous example, I can now use my helper:

@foreach (var page in Model.PagesToList) {
 @Html.DisplayForWithPrefix(m => page, "PageList")
}

@foreach (var page in Model.SideBarTeasers) {
 @Html.DisplayForWithPrefix(m => page, "SideBar")
}

And the display templates the view engine looks for will be, for eaxmple:

PageList.MyPageType.cshtml
PageList.BasePageType.cshtml
SideBar.MyPageType.cshtml
SideBar.SomeOtherPageType.cshtml
SideBar.IMyPageTypeInterface.cshtml

Bonus!

I can also, if I change the viewFormat parameter to "{0}/{1}", use each prefix as a subfolder in the DisplayTemplates folder, very neat and tidy if I have a lot of templates.

Questions and answers

-"Why not just a DisplayFor overload?"
As you can see, the helper uses an expression and a string as arguments, which would cause an ambiguity with the "real" DisplayFor, and I do not want any of the optional arguments to be required. Besides, this way any new person opening your project will immediately see there is some special handing being done when rendering some properties.

-"What about the silly preferInterfaceBeforeBaseClass flag?"
I added this as a switch to change the order the system searches for templates, enabling it make the helper search for interfaces directly defined on the current type in the chain first, instead of only searching for interfaces if it fail to find any views based on base implementations. If you know the correct order, please share.

-"What about speed?"
Well, I don't know, there is one instance of reflection when interfaces are being searched for, but those lookups should be cached by asp.net, so I don't think there is any problem, but I did not performance test this.

Finally

What do you think? Is there a better, built-in way of achieving this? If so I admit my google-fu isn't up to speed as I have tried to find something like this online but failed. Or is the whole helper a horrible crime against MVC conventions? Do not hesitate to let me know what you think.

You can download the full helper class here: http://pastebin.com/Y1ES6gg7

(Sorry about the tag with my name, Blogger does not support feed filtering based on author)

Page tree icons in EPiServer CMS 7.5

2014-10-27T18:26:00.000+01:00

One appreciated feature we had in our old EPiServer 6 framework here at Nansen was the ability to set different icons for different page types in the page tree. This makes it easier for editors to distinguish between different page types to generally make

CMS6 pagetree with custom icons

their life easier. And we all know the happier the editor, the better the content, and better content make for more visitors, right?

Anyways, the EPi 6 system we built was a bit of a hack, we added a ControlAdapter to the PageTree control to inject css classes on the different nodes depending on what page type it was.

Now in EPiServer 7.5 there are systems in place to make this a lot cleaner, using the tools provided by the CMS UI we can avoid using hacks, which make for a cleaner approach that will hopefully not break as easily should the underlying structure change in future updates.

The most basic way is to add a editor descriptor for your class, like so:

 [UIDescriptorRegistration]
 public class ContainerPageUIDescriptor : UIDescriptor
 {
  public ContainerPageUIDescriptor()
   : base(ContentTypeCssClassNames.Container)
  {
   DefaultView = CmsViewNames.AllPropertiesView;
  }
 }

Now this approach will get tedious once you start adding page types as you will need one UI descriptor for each page type. There are several ways to make this more streamlined. This post will show you one approach using attributes on your page type classes.

We are going to use the EPiServer.Shell.UIDescriptor objects registered for all content types, these are added to the EPiServer.Shell.UIDescriptorRegistry during site startup. The UIDescriptor contain one important property that makes all of this work, IconClass. This class is added to the icon shown for each item in the page tree.

Requirements

I used EPiServer CMS v7.14.1 and EPiServer CMS UI version 7.15.0 when building this.

The parts

We will need to glue together three different parts to achieve this:

An attribute for page (content) type classes, where a icon class can be chosen
An initialization module to add the icon class to the page types
Some icons

1. The attribute

The attribute is pretty straight forward, all we need is the ability to select a css class for our content types:

 [AttributeUsage(AttributeTargets.Class)]
 public class ContentIconAttribute : Attribute
 {
  public ContentIconAttribute(string iconClass)
  {
   IconClass = iconClass;
  }

  /// <summary>
  /// Css class to apply to the icon
  /// </summary>
  public string IconClass { get; set; }
 }

2. The initialization module

The initialization module is invoked after the EPiServer.Shell.UIDescriptorRegistry is populated, and for each content type that have our custom attribute, append the css class to the IConClass attribute. This is, as per usual for attributes, done using reflection, but as it only happen once during site startup, the preformance impact is of no issue.

/// <summary>
/// Used in conjunction with <see cref="ContentIconAttribute"/> to add custom content icons for the page tree.
/// </summary>
/// <remarks><see cref="ContentIcon"/> and <see cref="ContentIconAttribute"/> for more information</remarks>
[InitializableModule]
[ModuleDependency(typeof(EPiServer.Cms.Shell.InitializableModule))]
public class ContentTypeUIDescriptorInitializer : IInitializableModule
{
 public void Initialize(InitializationEngine context)
 {
  var registry = context.Locate.Advanced.GetInstance<UIDescriptorRegistry>();
  var classes = GetDescriptorClasses();
  foreach(var descriptor in registry.UIDescriptors) {
   if(classes.ContainsKey(descriptor.ForType)) {
    descriptor.IconClass += classes[descriptor.ForType];
   }
  }
 }

 public void Uninitialize(InitializationEngine context) {}

 public void Preload(string[] parameters) {}

 private Dictionary<Type, string> GetDescriptorClasses()
 {
  var types = AppDomain.CurrentDomain.GetAssemblies()
        .SelectMany(ass => ass.GetTypes().Where(type => type.IsDefined(typeof(ContentIconAttribute), false)));

  var descriptors = from type in types
   select new {
    type,
    iconClass = ((ContentIconAttribute)Attribute.GetCustomAttribute(type, typeof(ContentIconAttribute))).IconClass
   };

  return descriptors.ToDictionary(key => key.type, value => value.iconClass);
 }
}

The initializer is pretty straightforward, it finds all classes with out ContentIcon attribute and use that to modify the registered UIDescriptors by appending our IconClass. One important detail is that it has a dependency on EPiServer.Cms.Shell.InitializableModule, which ensure it is initialized after the UIDescriptorRegistry is populated with all the UIDescriptors.

3. The icons

As all we can do is add a css class to each item in the page tree, we need icons that can be displayed using only a css class. This can be achieved in a number of ways, like adding the css for each icon, like so:

.myPageTypeIcon {
  background: url('../Images/Icons/pageIcons16x16.png') 0px -16px no-repeat;
  height: 16px;
  width: 16px;
}

This approach is almost as tedious as making one UI descriptor class for each page type, this is no good. A faster way is to use a icon library, where all icons are already configured. Here, we picked Icomoon (https://icomoon.io/), they have a free library of about 400 icons in a convenient woff font format.

I did make a few small changes to the css supplied, I added a prefix as the class names were very generic, and it didn't display entirely correct, the icons were compacted to 13px instead of 16px. Anyways, here is the base css for the icomoon font icons:

[class^="icomoon-icon-"], [class*=" icomoon-icon-"] {
 font: normal normal normal 16px/1 icomoon;
 speak: none;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.icomoon-icon-home:before {
 content: "\e600";
}
…
.icomoon-icon-IcoMoon:before {
 content: "\e7c2";
}

As you can see, I prefixed each icon with icomoon, and also modified the font directive in the base class slightly.

Once you have your icons, place everything somewhere under /ClientResources, In this example I placed them under clientresources/styles/icomoon, and modify your module.config file in the web root:

<clientResources>
  <add name="epi-cms.widgets.base" path="Styles/icomoon/icomoon.css" resourceType="Style"/>
<clientResources>

3b. Convenience factor - icon names

As there are a lot of icons, you can add constants for all the icons by using some clever search and replace, like so:

 public class ContentIcon
{
 /// <summary>
 /// IcoMoon free icons, see more here https://icomoon.io/#preview-free
 /// </summary>
 public static class IcoMoon
 {
  public const string accessibility = "icomoon-icon-accessibility";
  public const string address_book = "icomoon-icon-address-book";
  public const string aid = "icomoon-icon-aid";
  public const string airplane = "icomoon-icon-airplane";
  public const string alarm = "icomoon-icon-alarm";
  public const string alarm2 = "icomoon-icon-alarm2";
  …
  public const string youtube = "icomoon-icon-youtube";
  public const string youtube2 = "icomoon-icon-youtube2";
  public const string zoomin = "icomoon-icon-zoomin";
  public const string zoomout = "icomoon-icon-zoomout";
 }
}

Using it all

After gluing it all together, you can now in a simple way add page tree icons to your content using just one attribute per content item. The constant class help you avoid misspelling anything, and you can also use the icomoon website as quick reference for how each icon look:

[ContentType(
 GUID = "00000000-0000-0000-0000-000000000000",
 DisplayName = "Section page",
 GroupName = SystemTabNames.Settings)]
[ContentIcon(ContentIcon.IcoMoon.copy)]
public class MyVeryOwnPage : PageData
{
}

Finally

Here is the result in all its glory:

The fruits of our labor

You can get the c# code source parts from here: http://pastebin.com/znYXReXc