Umbraco bloggen, webbutveckling, design tips och ticks.

Programmatically create Umbraco Members and set Password

Sun, 15 Mar 2026 14:19:20 Z

Over the last months, I've been working on moving websites from Umbraco 13 up to Umbraco 17. I had a really hard time to find good documentation on how to work with Members so I figured I'll write a short blog post to fill some of the "gaps" I experienced in the documentation.

What is Member in Umbraco?

A Member in Umbraco is an external or frontend user. In other words, this is the kind of account you would use for things like a customer area, intranet login, gated content, forums, and similar functionality on the public-facing site.

Working with Members programmatically

When working with Umbraco Members programmatically you need to familiarize your self with the IMemberService and the IMemberManager.

IMemberService is used to work with the IMember object, set username, email and update custom properties.
IMemberManager is used to perform login, get current member and set password.

Here is a code sample that will create a member programmatically and set the password programmatically.

public class MemberRegistrationService
{
    private readonly IMemberService _memberService;
    private readonly IMemberManager _memberManager;
    private readonly IPasswordHasher _passwordHasher;

    public MemberRegistrationService(
        IMemberService memberService,
        IMemberManager memberManager,
        IPasswordHasher passwordHasher
        )
    {
        _memberService = memberService;
        _memberManager = memberManager;
        _passwordHasher = passwordHasher;
    }

    public async Task<IMember> CreateMemberAsync(string email, string password, string name)
    {
        var member = _memberService.CreateMember(
            email,
            email,
            name,
            "Member"); // or Member.ModelTypeAlias with ModelsBuilder
        
        member.IsApproved = true;

        _memberService.Save(member);

        // Optionally add to a role
        _memberService.AssignRole(member.Id, "Member"); 

        // Set password
        var memberIdentity = await _memberManager.FindByIdAsync(member.Id.ToString());
        var passwordResult = await _memberManager.AddPasswordAsync(memberIdentity!, password);

        // Alternative way of setting password
        member.RawPasswordValue = _passwordHasher.HashPassword(password);

        return member;
    }
}

Testing Lit components created with TypeScript and Vite using Web Test Runner

Mon, 22 Apr 2024 23:07:07 Z

With only about a month left until the initial release of Umbraco 14 aka Bellissima and the new Backoffice, I'm working hard to migrate/update my email package Newsletter Studio. This package makes it possible to create and design emails to send as campaigns or use as transactional emails.

The new Backoffice

The new Umbraco backoffice is based on Web Components and implemented using Lit and TypeScript. Web Components and Lit were new technologies to me when I started the migration, and it took quite some learning to get up to speed, but it has been a fun journey.

My package is quite complicated so I figured I needed a way to run different kinds of tests (unit tests, end-2-end tests). As always, I looked at the Umbraco source code to find some inspiration. I must say that it has been very interesting and I've learned a lot from looking at how the great minds at Umbraco HQ have done things.

Web Test Runner

When it comes to testing they've chosen to use Web Test Runner which is a modern test runner that will execute tests in a real browser. Many other test runners will execute in a Node environment and "mock" the browser DOM (which is not an easy thing to do), Web Test Runner will execute all the unit tests in a real browser which saves us a lot of hassle.

Now I've set up my project to be ready for the new import map feature in modern browsers. This feature basically allows us to write JavaScript code imports like:"import {Thing} from 'lib';" and then tell the browser which file/URL to load when it sees "lib".

When using TypeScript and Vite it's quite easy to set this up using TypeScript paths, Matt Brailsford wrote a a great article about this that I highly recommend reading.

Now, when I added Web Test Runner to my project I started by trying to use the same dependencies as Bellissima but I had a really hard time getting my imports to work in the browser that executed the tests. The @web/test-runner uses @web/dev-server to serve code to the browser during the test runs. Since we're using TypeScript the recommended approach seems to be to use @web/dev-server-esbuild and since we want import maps we would also need @web/dev-server-import-maps.

Not that easy

Setting this up basically makes us have two different build pipelines, one with Vite and another one for the Web Test Runner. I spent a fair amount of time trying to get this to work but kept getting an error in the test run browser: "Error: Failed to fetch dynamically imported module". I think I looked at all websites on the internet 🤥 but I could not find a solution. Obviously, it works since the Bellissima project uses this approach, but since I was frustrated I started to look for alternatives.

Another approach

Luckily this brought my attention to the plugin @remcovaes/web-test-runner-vite-plugin. This plugin will reuse all the configuration from the Vite setup (including the Paths from tsconfig.json which had to be duplicated in the Web Test Runner configuration) and after installing it, my tests were working in 2 minutes. After spending many hours debugging I could not believe it was working, I was actually thinking: "No, this can't be right, it can't be this easy" 😆. But it was. The code in my web-test-runner.config.mjs file went from 50 lines to 15 lines and the experience was really nice.

Now I have a nice setup to be able to unit test my web components and TypeScript code. I've shared a working example of the setup in this github repository if anyone else is struggling with the same problems.

Resources for Umbraco 14 Bellissima (new Backoffice)

Sat, 18 Nov 2023 11:21:04 Z

The release of Umbraco 14 and the new Backoffice (aka Bellissima) is scheduled in May 2024. This release will be a major technical change in the way that developers extend the backoffice.

Since Umbraco 14 is still a work in progress, as well as the official documentation, I wanted to create this blog post to curate some of the content around this that I've found useful when getting up to speed. I will continue to add resources to this list, also feel free to let me know if you think that something should be added.

This articles was last updated: 2024-04-03

The new backoffice removes all the legacy dependencies on AngularJS and uses modern technologies like Web Components with Lit and reactivity using RxJS. I maintain several open-source packages and the email package Newsletter Studio, so this is an exciting time.

Official Sources

The official source code and the official documentation are of course great places to start.

Source code
Reading the real source code is the real "source of truth"
https://github.com/umbraco/Umbraco.CMS.Backoffice
Documentation
The official docs for Bellissima contains a great "Getting started"-section and some useful tutorials.
https://docs.umbraco.com/umbraco-backoffice/
Umbraco UI-library
Used in the current backoffice and even more in the new backoffice.
https://github.com/umbraco/Umbraco.UI

https://uui.umbraco.com
Storybook
The Storybook contains lots of examples and semi-structured documentation.
https://apidocs.umbraco.com/v14/ui/

Video & Presentations

These videos are a great way to get the over all concepts but please be aware that since this is still work in progress some details in the older videos might not be accurate any more.

UmbraCoffe - Bellissima
Marcin and Callum talks with Richard Soeteman about his experience with the new backoffice while working on his packages Member Export, SEO Checker and Media Protect.
https://www.youtube.com/watch?v=COaq5oLRTvE
Umbraco Kent Meetup, Jacob Overgaard from Umbraco HQ on Bellissima
Great talk from one of the master minds behind the new Umbraco backoffice Jacob Overgaard. This video/presentation is a great explanation about the fundamentals about the new backoffice.
https://www.youtube.com/watch?v=SVpHFlKCJSw
Mounting your UI in New Backoffice, 2023
Niels Lyngsø, recording from Community Teams Days at Umbraco 2023.
https://www.youtube.com/watch?v=mxozXXPAALI
Practical adventures with Bellissima
Nathan Woulfe, Package-wizard, Umbraco HQ talks about his experience with the initial migration of "his" Workflow-package to Umbraco 14. There is a preview version of the whole source code for Umbraco Workflow available on Github to serve as inspiration for other package developers.
https://www.youtube.com/live/mrEQm-dgcFk?si=zVzv0NnaIvedQiBw&t=2368
Exploring the new Backoffice
Jacob Overgaard, CodeGarden 2023
https://www.youtube.com/watch?v=P14r9Sr0ATI
Packages Question Time
The new back office, 23rd of August 2023
https://www.youtube.com/watch?v=5vRzEMzrIec
Lit overview with Michele Stieven | jsday 2022
A great overview of Lit and its different building blocks.
https://www.youtube.com/watch?v=I9RbleMxxXw

Starter kit

Kevin Jump has made a great starter kit (as a dotnet new template), you'll find it here.

Andy Butland, Umbraco HQ

Andy works on some of the most popular Umbraco HQ-packages and has shared some of his learnings along the way.

Blog post series about Umbraco 14
In a couple of blog posts, Andy shares his first experiences with Umbraco 14.
https://www.andybutland.dev/2023/09/umbraco-14-package-migration.html
Umbraco 14-branch of Personalisation Groups
Here we can follow the progress of getting the package to work in Umbraco 14.
https://github.com/AndyButland/UmbracoPersonalisationGroupsCore/tree/feature/migrate-to-14

Kevin Jump aka. mr. uSync

Not sure if Kevin needs any introduction to the community as he is the creator of the mighty popular uSync-package that I've used on almost all my websites for as long as I can remember.

Dev.to articles: Early Adopter's Guide Umbraco v14
A great series of blog posts about how to extend the new backoffice with a great visual overview of the most common extension points.
https://dev.to/kevinjump/series/26221
Dev.to articles: Property Editors
How to build a custom property editor for Umbraco Bellissima
https://dev.to/kevinjump/series/26366
Dev.to articles: Trees
Great read about how to extend Umbraco 14 with a custom tree.
https://dev.to/kevinjump/series/26505
Dev.to articles: Server to client communication
Bellissima embraced OpenAPI and Swagger, in the article Kevin explain how to setup C# controllers and communicate between frontend and backen.
https://dev.to/kevinjump/series/26248
Dev.to article: Upgrade preview releases
A great little guide on how to upgrade your project to the latest preview-release.
https://dev.to/kevinjump/early-adopters-guide-to-umbraco-v14-upgrade-preview-releases-39oj
Dev.to article: uSync to v14
It's almost like we're getting to read Kevin's notes during his initial work of getting uSync to compile and almost run on Umbraco 14.
https://dev.to/kevinjump/usync-to-v14-a-journey-14ho
uSync v14 source
Here we can follow the progress inside the uSync GitHub repository.
https://github.com/KevinJump/uSync/tree/v14/convert
Starter Kit
A "dotnet new" template that can be used to setup a package development project for Umbraco v14+. https://github.com/KevinJump/EarlyAdopters.Umbraco.Templates

Sir. Lee Kelleher

Lee is the man behind the Contentment-package that I use almost every day. I have seen some hints on Mastodon that he has been trying out the Umbraco 14-previews.

Contentment source code
In the "dev/wip/bellissima"-branch we can see some hits of what Lee is working on.
https://github.com/leekelleher/umbraco-contentment/tree/dev/wip/bellissima
Blog post about the first steps

Lee shares his thoughts about the approach to the new version of the package - to continue with multi-targeting or to "start fresh".
https://dev.to/leekelleher/contentment-for-bellissima-199d

Matt Brailsford

A well-known community member and nowadays Umbraco HQ member ever since the Vendr package was acquired by HQ and rebranded to Umbraco Commerce. Matt has been writing some very nice articles about his v14 journey.

Simplifying Imports with TypeScript Path Aliases About how to use TypeScript Path Aliases to make your code cleaner and easier to refactor.
https://dev.to/mattbrailsford/simplifying-imports-with-typescript-path-aliases-in-umbraco-v14-301g
Creating your own UI extension points in Umbraco v14
Matt has started a series on the topic of creating custom extension points for a package.
https://dev.to/mattbrailsford/creating-your-own-ui-extension-points-in-umbraco-v14-part-1-the-basics-568h

Richard Soeteman, SEO Checker, CMS Import and more

It feels like Richard has been building Umbraco packages since the day Umbraco was initially released and I just spotted that I have a new blog that I'm eager to follow.

Umbraco 14 auto install
In this blog post, Richard share a Powershell script to automatically install Umbraco 14 and get it ready for package development.
https://richardsoeteman.net/blog/auto-install-latest-umbraco-14/
Using ChatGPT to convert backoffice language files
In this awesome article Richard shares how he used ChatGTP to automatically convert the backoffice language files in to the new Umbraco Bellissima format.
https://richardsoeteman.net/blog/converting-backoffice-language-files-using-chatgpt/

Community threads worth checking out

Discord-question about authentication for custom controllers

More to come

I'm really looking forward to reading more from other community members that is on the same adventure as me and I will of course make sure to share parts of my own journey. I will also put some of my efforts into creating PRs for the
official documentation as I think that this will bring the most value to the community.

If you have examples of content that you think should be listed here - please reach out!

VS Code extensions for the best experiance

Sat, 11 Nov 2023 22:33:53 Z

I have been thinking about writing a couple of lines about my VS Code setup and finally, it's time. As a C#-focused developer, I'm a big fan of both full-blown Visual Studio and JetBrains Rider but I find myself using VS Code more and more. Especially for note-taking and working with markdown. In this blog post, I'll share my favorite extensions and some tips that will hopefully take your documentation and markdown work to the next level.

C# and .NET

I tend to only use VS Code for light-weight changes, small proof of concepts, and so on but I must say that the experience is getting better and better.

Here are some of my favorite extensions for C# and .NET:

C# Dev Kit

Microsoft's latest tools for working with .NET solutions and C# and Razor in VS Code.

Link to Marketplace

JetBrains Rider Dark Theme

I've spent many hours trying to find the right dark theme for VS Code. Since I also use Rider a lot, I ended up feeling that the best approach for me was to use the same, great color scheme in VS code as well.

Link to Marketplace

Notes

I tend to use VS Code a lot for writing documentation and taking notes in markdown files.

Draw.io VS Code Integration

I've been using a lot of different tools for diagrams, flow charts, and so on over the years and always felt that they were "too far from the source code". These days are gone. It was actually this extension that inspired me to finally write this blog post.

With the draw.io-extension you can draw and embed diagrams into markdown files directly from VS Code, if you create a ".drawio.svg" file it will be stored as SVG and you can easily commit them into your source control and Github will even show your diagrams - this almost blew my mind!

Just:

Create a file with the extension ".drawio.svg" for example test.drawio.svg
Open the file in VS Code, add some stuff and save.
Include in md file like so: ![Drawing](test.drawio.svg)

Link to Marketplace

Markdown All in One

Great extension that brings shortcuts, auto completions, and other features to the markdown editing experience.

Link to Marketplace

Dendron Paste Image

This one is another "life server" that makes it super easy to paste images from the clipboard into a markdown file. Perfect in combination with ShareX, just grab screenshots, edit them, and paste them into the markdown.

Link to Marketplace

HTML, Javascript & Typescript

Lit-html

As an Umbraco-developer this is a must-have in the future when the new backoffice comes out. This extension brings syntax highlighting and other lit-related features.

Link to Marketplace

VS Code Import code

This great little extension will indicate the size added to your js-bundle when importing dependencies in your files.

Link to Marketplace

Auto Rename Tag

Will automatically rename paired HTML/XML elements when you edit them in VS Code.

Link to Marketplace

Other tools

Material Icon Theme

This extensions brings these beautiful icons to the tree in VS Code, I was looking around and testing a lot of different options but I really understand why this one has over 20 million downloads as of now.

Link to Marketplace

Todo Tree

Looks for TODOs in your code base and adds a tree with todo-items from your code base.

Link to Marketplace

YAML

Red Hat's extremely popular YAML extension brings highlighting and helps you write your YAML.

Link to Marketplace

PowerShell

Great extension when you need to create PowerShell-scripts, the experience with this extension in VS Coder is almost better than in the PowerShell ISE.

Link to Marketplace

GitHub Actions

Makes it a lot easier to write and manage your workflows in VS Code.

Link to Marketplace

Gotchas when making Umbraco packages run on Linux / Mac

Wed, 01 Nov 2023 10:31:11 Z

Over the last couple of days, I've been working to make my e-mail package Newsletter Studio run well on Linux and Mac. The codebase for the current iteration of the package was created for Umbraco 8 while trying to keep in mind that .NET Core-support for Umbraco was around the corner. Technically, most of the core C# code is in a .NET Standard 2.0 library that is shared between the different versions of the package.

I have a very Windows-heavy background and back when the initial code for the package was created I did not really take into account the massive opportunities that the cross-platform support for modern .NET brings - I was mainly focused on getting it to run in .NET Core on a Windows box.

More and more clients have asked for official Linux support, to be able to run the package e.g. in containers or on bare metal Linux servers. Over the last few days, I've put some effort into this and wanted to share some of the "gotchas" I've encountered along the way.

Expect general tips and trips on how to write C# code that runs cross-platform and some Umbraco-package specific gotchas for packages targeting Umbraco v9-v13.

Case is king

On Unix-like operating systems like Linux and MacOS, the casing of a path or filename matters a lot since the filesystem is case-sensitive. This means that all code-references to folders and files need to match in case as well. This was one of the biggest problems with the code base when I started. The casing was mixed and there were no real standards for the casing. To make the code run well cross-platform I would propose a naming standard like this:

For folder names

Always use lowercase names and kebab-case

For client-side files (HTML, TypeScript, Javascript, CSS, SCSS, LESS)

Always use lowercase names and kebab-case

For C# files and cshtml

Always use CamelCase

Working with Paths

Windows and Unix-like systems use different characters to separate paths. On Windows we use \ and on Unix /. C# has a built-in feature that helps with this:

string myPath = "folder" + Path.DirectorySeparatorChar + "sub-folder";

The .NET-runtime will make sure that Path.DirectorySeparatorChar contains the right character based on the OS where the code is running.

One note here is that you can also use Path.Combine(), but be aware of how it works:

[Test]
public void Test1()
{
    // Note that both path starts and ends with \\
    string path1 = "\\foo\\";
    string path2 = "\\bar\\";

    var merged = Path.Combine(path1, path2);

    // Fails, merged = \\bar\\
    Assert.That(merged,Is.EqualTo("\\foo\\bar\\"));
}

[Test]
public void Test2()
{
    string path1 = "foo";
    string path2 = "bar";

    var merged = Path.Combine(path1, path2);

    // Success, merged = foo\\bar
    Assert.That(merged, Is.EqualTo("foo\\bar"));

}

The takeaway here is that you need to make sure not to try to build a path with input strings that have both leading and trailing slashes - find a way to be consistent.

Umbraco backoffice extensions

Newsletter Studio is built as a custom section with a custom tree, it's important to keep in mind that the alias of the section and trees will be used in the URLs when Umbraco loads the HTML views.

In the image above we see the URL to a view in the package.

Alias of the Section (as in Content, Media etc)
Alias of the Tree
View name

In this scenario, Umbraco will look for a view here: <siteroot>\App_Plugins\newsletterStudio\backoffice\section\campaigns.html. When running on a Unix-like operating system the whole path to that file needs to match in case was well.

Different code on different platforms

Sometimes you need to do different things based on the current platform/OS, there are many ways to do this, and here are some of them.

Check OS from C# during runtime

In the package, we have a default path for the "SMTP Pickup"-configuration used during development and testing. We can use the RuntimeInformation-class to know what platform we are running on and use different defaults.

if (RuntimeInformation.IsOSPlatform(OSPlatform.Linux))
{
  // Do something
}

Checking OS from MSBuild during build

It might be that you need to execute different scripts depending on the build platform etc.

<Exec Command="./foo.sh" Condition=" '$(OS)' != 'Windows_NT' " />

Razor Class Libraries and cross-platform development

In the package, all of the built-in views and assets are shipped as files inside a Razor Class Library (RCL), this way we don't have to ship individual files that need to be copied/synced inside the consuming projects.

I had major issues with this on the Ubuntu-machine I was working on. I kept getting errors that the Razor view did not exist, but I was 100% sure that the file existed in the RCL and that the casing of the path/filename was correct.

After hours of debugging, I tried to upgrade the .Net SKD. When I was working on my PC I was on 7.0.400 but the version shipped in the Ubuntu package repository at the time was 7.0.113 so I used that. After manually installing 7.0.400 on the Ubuntu-machine the error was gone.

I was really surprised about this. Another thing that surprised me even more was when I opened the solution on my MacBook and started it using the same .NET SDK (7.0.400) - I got the same error as with 4.0.117 on Ubuntu!

My objective was to test the package with an Umbraco site running on MacOS, so I tried to work around the error by building the NuGet-package files on my Windows-machine and then copying them over to the Mac. I created a new Umbraco project, installed the NuGet packages from a local package source, and started the website. Now the views worked!

I have not had a closer look at why this is happening but it seems like the SKD builds for the different platforms might produce slightly different builds that work slightly differently. Just keep this in mind when strange things happen, try on another OS, try another SKD version - that might save you a couple of hours.

Development environment

I'm working on Ubuntu Desktop but I'm guessing that a MacOS environment would work just as well. I've found that the following tools are very helpful:

Visual Studio Code - Runs cross-platform
DB Browser for SQLite - To debug the SQLite database if used with Umbraco.
Docker + SQL Server for Linux - If you need to run "full-blown" SQL Server.
Powershell - Also cross-platform, great to reuse scripts for all OS versions
Rider IDE - As an old Resharper fanboy, Rider is great and provides a consistent development experience on all platforms.

Umbraco: Boot failed: Umbraco cannot run. When upgrading to Umbraco 12

Tue, 31 Oct 2023 12:28:39 Z

We have been doing a lot of Umbraco upgrades lately and have been hitting the same issue several times so I decided that I have to blog about it for "future me" and any other Umbraco developer that has the same problem with booting when trying to upgrade to Umbraco 12.

The error message looks something like this:

Umbraco.Cms.Core.Exceptions.BootFailedException: Boot failed: Umbraco cannot run. See Umbraco's log file for more details. 
at Umbraco.Cms.Core.Exceptions.BootFailedException.Rethrow(BootFailedException bootFailedException)
at Umbraco.Cms.Web.Common.Middleware.BootFailedMiddleware.InvokeAsync(HttpContext context, RequestDelegate next) 
at Microsoft.AspNetCore.Builder.UseMiddlewareExtensions.<>c__DisplayClass6_1.<<UseMiddlewareInterface>b__1>d.MoveNext()

--- End of stack trace from previous location ---
at SixLabors.ImageSharp.Web.Middleware.ImageSharpMiddleware.Invoke(HttpContext httpContext, Boolean retry)
at React.AspNet.BabelFileMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

It's really hard to know what went wrong based on this error message. The Umbraco version that I was installing (12.0.1) did not show any kind of helpful information when the site was booting. It's easy to think that it's something wrong with any of the middleware but they are just showing up because they are a part of the pipeline.

After some research, I found a couple of posts in the Umbraco forum around similar issues:

https://our.umbraco.com/forum/using-umbraco-and-getting-started/112173-error-while-upgrade-from-1141-to-12

https://our.umbraco.com/forum/using-umbraco-and-getting-started/112407-umbraco-v12-exception-at-startup-when-run-in-docker

It turns out that dependencies were updated for v12 and that Microsoft.Data.SqlClient has some breaking changes that require us to explicitly trust the SQL Server certificate. This can be done by appending TrustServerCertificate=true to the database connection string:

{
"ConnectionStrings": {
    "umbracoDbDSN": "<server,user,password>;TrustServerCertificate=true;",
  }
}

This made the site start again and the installer to kick in.

TeamCity: Show results from .NET Core / .NET5+ test-projects

Wed, 13 Sep 2023 14:41:34 Z

When using TeamCity and the .NET Runner Type to execute a "dotnet test"-command during the build you will have to add the TeamCity test adapter-package for the test results to show up in TeamCity UI.

In this image we see:

A build where the test adapter was added to the test-project
A build where the test adapter was not added to the test-project.

To make sure test results are shown in TeamCity during the build, add this package to the csproj-file of the test project:

<PackageReference Include="TeamCity.VSTest.TestAdapter" Version="1.0.37" />

Random stuff around migration from Umbraco 7 to vNext

Mon, 21 Aug 2023 08:00:53 Z

This year has been a lot about migration. Since Umbraco 7 will be end of life quite soon we help a lot of clients to migrate.

There is a lot of great content already out there about the migration process so I figured I'll share some of the "bumps"

JQuery and Umbraco Api Controllers

Many times we have code that sends a vanilla MVC-form using JQuery's $.post feature like this:

$.post("/Umbraco/Api/MyController/DoSomething", $("#form").serialize())

When posting this to the controllers we noticed a strange error from the controller.

{
 "type":"https://tools.ietf.org/html/rfc7231#section-6.5.13",
 "title":"Unsupported Media Type",
 "status":415,
}

JQuery will post the data as form data but the controller expects JSON, the simple solution is to add a [FromForm]-attribute in the controller action.

[HttpPost]
public IActionResult DoSomething([FromForm] MyModel model)
{
}

Converting a Umbraco Package to a Razor Class Library

Sat, 29 Jul 2023 20:29:51 Z

Since ASP.NET Core 2.1 the project type "Razor Class Library", or RCL, has been around. This feature allows shipping C#, Razor views, and front-end assets (like JavaScript, CSS, HTML files) in a single DLL file. This is perfect for component vendors and an excellent fit for packages/plugins. We also use Razor Class Libraries for internal utility/helper projects when building websites.

When using a RCL in a web project, any assets or files from the RCL can be served from the website and we can override certain files from the consuming project if we need - which is a really great feature.

Umbraco 11.0.0 was the first version where full support for RCL-packages was introduced. It might be possible to partially ship a package as RCL and run on earlier versions and certainly, you can use a RCL for your utility/helper projects on earlier versions of Umbraco.

Why use Razor Class Library for my package?

I've been building several packages for the "vNext"-versions of Umbraco using the old recommended approach with build-targets to copy App_Plugin-files into the consuming web project. With a Razor Class Library, there is no need for this copy-step and the developer experience is a lot better! We even got "hot reload" when editing assets in the RCL and saving it will automatically update the backoffice (no js-builders, webpack, grunt or so needed).

The main benefits that I see are:

A lot simpler deployments. All files are in one place.
Easier for developers that install the package
Better developer experience
Has a built-in mechanism for making overrides possible which is awesome.

Are you ready to try it out? If you're starting from scratch, use the official Umbraco Package Template which ships with a RCL-version since 11.4.

Upgrade or Migrate an existing Umbraco package to use Razor Class Library

It turns out that moving to a RCL for your package is quite easy, I did this for my Newsletter Studio-package in less than a day and this package is huge. The SeoVizualiser only took me a couple of minutes to move into a RCL.

Here are the basic steps that I performed:

1. Change the csproj

We need to update the .csproj-file to use the "Microsoft.NET.Sdk.Razor"-SDK and add two new elements to the configuration:

AddRazorSupportForMvc
StaticWebAssetBasePath

Should look something like this

<Project Sdk="Microsoft.NET.Sdk.Razor">
  <PropertyGroup>
    <TargetFramework>net7</TargetFramework>
    <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
    <StaticWebAssetBasePath>/</StaticWebAssetBasePath>
    <ContentTargetFolders>.</ContentTargetFolders>
    ....
  </PropertyGroup>
</Project>

Depending on how you used to ship the client side files, you might need to cleanup includes from the csproj file, if you've been using the Umbraco HQ-templates this part needs to be removed:

<Content Include="App_Plugins\{YourPackageFolder}\**\*.*">
    <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    <CopyToPublishDirectory>Always</CopyToPublishDirectory>
</Content>

2. Add wwwroot-folder

The project should now reload and we need to add a wwwroot-folder to the project. This folder works in the same way as the wwwroot-folder in a web-project, any files in this folder will be available in the consuming website just as if they were a part of the website. They can also be overridden in the consuming website which is great. In my projects. I've just moved the App_Plugins-folder into the wwwroot of my RCL:

3. Modify or remove any .target file included in the NuGet package.

The Umbraco HQ-templates for packages used to include a {package-name}.target-file that was used to copy files from the NuGet-package into the project using it. This needs to be removed, or at least cleaned up.

That's it! You will have to build your project and you might need to rebuild and clean the project, I've also had to restart Visual Studio after making these changes.

To create a NuGet-package just use this command: dotnet pack --configuration Release

It's important to make sure that your package includes the folder "staticwebassets". I did have issues with multi-targeted packages so if you don't see this folder, make sure that your package is not multitargeted. In my case, the element "TargetFrameworks" was present in the .csproj but only had NET7 as target, after changing this to "TragetFramework" the pack-command worked.

Other things that are good to know about Razor Class Libraries

Shipping Razor Views

At the end of the day, this is a Razor Class Library. Just as in a web project, the view engine of ASP.NET will look for views (.cshtml) in the application root and not in the wwwroot. So let's say that you're shipping a package that need to contain a Partial view and some special views in the App_Pluggins-folder, your structure might look like this:

wwwroot/App_Plugins/MyPackage - for Javascript, CSS, Html
App_Plugins/MyPackage/Views - for some special view
Views/Partial/Lorem.cshtml - For a partial view that can be reused in the consuming project.

Using files from the RCL in code

Most of the time "things just work", views are used, assets are served and life is happy. Sometimes you might need some more fine-grained control over stuff, you might need to read the content of a file that you know is inside a Razor Class Library, or maybe you need to check if a file is present at a given path?

This intersection between files on the filesystem and the content of RCLs is handled by a IFileProvider, the easiest way to get your hands on the one used in your project is to inject the IWebHostEnvironment from Microsoft.AspNetCore.Hosting into your class and use the WebRootFileProvider:

var fileInfo = _webHostEnvironment.WebRootFileProvider.GetFileInfo(classLibraryFilePath);

using Stream stream = fileInfo.CreateReadStream();
using var reader = new StreamReader(stream, Encoding.UTF8);
var fileContent = reader.ReadToEnd();

I hope that this blog post was helpful and that you're excited to try building your next Umbraco package or extension as a Razor Class Library. Feel free to leave a comment or question!

Cheers!

Folder-level request headers in Postman

Sat, 29 Jul 2023 20:28:43 Z

I guess that most developers have heard of, or used the API tool Postman. I use it every day to test and explore APIs. I used to find my self copying and pasting request headers and tokens for different environments (test, stage, production) I started to look for a better solution.

Turns out that Postman has a nice feature where you can put your authorization-settings on the parent folder to easily reuse these for all requests.

So when you click on a folder like this:

You'll get this view where you can add authorization-settings for all requests in that folder.

Sometimes however the standard options for authorization are not enough, some APIs might require more than one header, etc. In these scenarios the "Pre-request Scripts"-feature comes in really handy. It allows you to manipulate the request before it fires and allow us to configure common headers for all our requests.

Here is a example:

Just put this code in the Script-input to run it for every request:

pm.request.headers.add({key:'Api-Key',value:'xxxxx'});

Umbraco, supported T-SQL in SQL Server vs SQLite

Sat, 16 Jul 2022 20:45:47 Z

Since Umbraco v10 ships with SQLite and no more SQLCE I figured it would be a good idea upgrade my old "compare post" about SQL Server vs SQLCE.

There is a big difference between the databases in that the data types are very different but I was surprised to see that SQLite supports many types of queries that SQL CE did not. The data types in SQLite is basically:

NULL
INTEGER
REAL
TEXT
BLOB

This will be a "work in progress" blog post about the differences between SQL Server and SQLite and I will keep updating it when I find new cases.

Description	Query-example	SQL Serv.	SQLCE
Regular SELECT	SELECT * FROM umbracoNode	x	x
SELECT with Subquery in select-statement	SELECT id, (SELECT COUNT(pk) from cmsDictionary) as Test FROM umbracoNode	x	x
SELECT with Subquery in WHERE-statement	SELECT id, [text] FROM umbracoNode WHERE Id IN (SELECT nodeId from umbracoContentVersion)	x	x
SELECT with Subquery (scalar¹) in WHERE	SELECT id, [text] FROM umbracoNode WHERE Id = (SELECT TOP 1 nodeId from umbracoContentVersion) SQLite: WHERE Id = (SELECT nodeId from umbracoContentVersion LIMIT 1)	x	x⁵
SELECT with Inner Join	SELECT n.id, n.[text] FROM umbracoNode n INNER JOIN cmsDataType d ON d.nodeId = n.id	x	x
SELECT with STUFF-function	SELECT id,[text], STUFF([text],1,1, '') FROM umbracoNode	x
SELECT TOP	SELECT TOP 5 * FROM cmsContentType SELECT * FROM cmsContentType LIMIT 5	x	x⁵
SELECT with “FOR XML PATH”. Will format as a scalar XML-payload	SELECT TOP 10 id,[text] FROM umbracoNode ORDER By [text] FOR XML Path('node')	x
Row_Number() / Paging with SELECT with ROW_NUMBER()	SELECT id,[text], ROW_NUMBER() OVER (ORDER BY [text]) AS RowNumber FROM umbracoNode ORDER By [text]	X	X
Paging with SELECT WITH OFFSET AND FETCH ²	SELECT id,[text] FROM umbracoNode ORDER BY id OFFSET 0 ROWS FETCH NEXT 10 ROWS ONLY	X	X
SELECT DISTINCT-feature	SELECT DISTINCT Id from umbracoContentVersion ORDER BY Id	X	X
SELECT COUNT with DISTINCT³	SELECT COUNT(DISTINCT thumbnail) FROM cmsContentType	X	X
SELECT with LIKE in Where	SELECT * FROM umbracoNode WHERE [text] LIKE '%st%'	X	X
SELECT with Subquery in FROM-statement.	SELECT count(contentId) FROM (SELECT DISTINCT contentId FROM cmsContentVersion) cmsContentVersion	X	X
SELECT with LEFT OUTER JOIN	SELECT n.id, n.[text], d.text, d.preventCleanup FROM umbracoNode as n LEFT OUTER JOIN umbracoContentVersion as d ON n.id = d.nodeId	X	X
Parameter Alias declared as string	SELECT id as 'foo' FROM umbracoNode	X	X
Parameter Alias declared inline	SELECT id as foo FROM umbracoNode	X	X
SELECT with INNER JOIN Subquery in FROM	SELECT * FROM cmsTemplate as t INNER JOIN (SELECT templateId, count(id) as total FROM umbracoDocumentVersion WHERE published = 1 GROUP by templateId) as dv ON dv.templateId = t.nodeId	X	X
CROSS APPLY	SELECT id,userName,ugr.Roles FROM umbracoUser u CROSS APPLY (SELECT COUNT(ug.userId) as Roles FROM umbracoUser2UserGroup AS ug WHERE ug.userId = u.id) as ugr ORDER BY ugr.Roles DESC	X
DATEPART	SELECT DATEPART(YEAR, createDate) AS [Year] FROM umbracoNode	X
CAST⁴	SELECT CAST(id as text) textId FROM umbracoNode	X	X*
DATALENGTH⁶	SELECT DATALENGTH([text]) textId FROM umbracoNode	X	X*
UNION ALL	SELECT id,userLogin as [email] FROM umbracoUser UNION ALL SELECT nodeId as id,email FROM cmsMember	X	X
CONVERT	SELECT CONVERT(nvarchar(50), uniqueId) as data3 FROM umbracoNode	X

....

1. A scalar query is a query that returns one row consisting of one column.
2. Works on SQL Server 2012+, older versions need the ROW_NUMBER()
3. Another version of the query with a join in the FROM-caluse works on SQL CE: SELECT COUNT(thumbs.total) as Total FROM (SELECT DISTINCT thumbnail as total FROM cmsContentType) as thumbs
4. Since the column data types are not the same (SQL Server has nvarchar, varchar while SQLite uses TEXT) this needs to be handled.
5. SELECT TOP is not supported in SQLite. But if the subquery was SELECT nodeId from umbracoContentVersion LIMIT 1 it would work.
6. SQLite calls this function length, used like so: length([columnName])

Remove entries from Umbraco Forms

Tue, 21 Jun 2022 11:51:09 Z

This blog post will explain how this works in Umbraco Forms 8.4.4. Database tables will most likely change between versions so keep this in mind - one might have to adjust the SQL-scripts depending on the Umbraco Forms-version.

Some basics

Before diving into details we need to be on the same page when it comes to the different building blocks in Umbraco Forms.

Forms

A Form is an actual Form, with all its fields, configured in the backoffice. Umbraco Forms stores the actual Forms as json-files on disk (\App_Data\UmbracoForms\Data\forms).

Field

A Form is built up by adding Fields to the form, giving them a name, alias and choosing a Form Field Type.

Entry

An entry is what gets stored when a visitor/user posts a Form. One can browse these Entries by expanding a form and clicking on "Entries". Each entry is stored together with all the values for the different Fields in the Form.

Database tables

Here is a brief overview of the data tables used by Umbraco Forms.

Entries and Fields

UFRecords

A UFRecord in the database is the same as one Entry in the UI. Each posted form will generate one UFRecord. This table contains information like when the Entry was created, on which page and from what IP.

UFRecordFields

This table "connects" each Field in the Form with the Entry. If the form has 5 fields, there should be 5 rows in this table for each Entry/Record.

Database tables

All these tables are used to store data based on the data-type, they have a id and key-column and a column for the value (base on the data type).

UFRecordDataString

UFRecordDataLongString

UFRecordDataInteger

UFRecordDataBit

UFRecordDataDateTime

Security

UFUserSecurity

Stores security settings related to specific Backoffice Users

UFUserFormSecurity

Stores security settings related to specific Forms

Delete data with SQL-script

To be able to delete an Entry we need to remove all related data in the UFRecordDataXXX-tables, the UFRecordFields and the UFRecord it self.

Here is a SQL-statement to remove Entries from Umbraco Forms, set the @formKey to only remove entries for specific Form, or use an empty string as @formKey to remove all Entries.

-- Use this to delete entries for a single form
DECLARE @formKey nvarchar(MAX) = 'f8274271-239c-4564-9f5e-0629bb02ca01';

-- Use this to delete entries for all forms
--DECLARE @formKey nvarchar(MAX) = '';

DECLARE @formRecordIds TABLE
(
   recordId int
);

DECLARE @fieldKeys TABLE
(
   fieldKey uniqueidentifier
);


IF @formKey = '' 
	BEGIN
		INSERT INTO @formRecordIds SELECT [id] FROM [UFRecords] 
	END
ELSE 
	BEGIN
		INSERT INTO @formRecordIds SELECT [id] FROM [UFRecords] WHERE [Form] = @formKey
	END

-- Populate temp-table with a record-ids for the given form. Should match the number if the Umbraco Forms-dashboard

SELECT * FROM @formRecordIds

-- Populate the fieldKeys with all Field keys for any of the Records for the Form
INSERT INTO @fieldKeys SELECT [key] FROM [UFRecordFields] WHERE [Record] IN (SELECT recordId FROM @formRecordIds)
SELECT * FROM @fieldKeys



-- Delete all UFRecordDataXXX rows for any of the Fields in any of the Records
DELETE FROM UFRecordDataBit WHERE [key] IN (SELECT fieldKey FROM @fieldKeys)
DELETE FROM UFRecordDataDateTime WHERE [key] IN (SELECT fieldKey FROM @fieldKeys)
DELETE FROM UFRecordDataInteger WHERE [key] IN (SELECT fieldKey FROM @fieldKeys)
DELETE FROM UFRecordDataLongString WHERE [key] IN (SELECT fieldKey FROM @fieldKeys)
DELETE FROM UFRecordDataString WHERE [key] IN (SELECT fieldKey FROM @fieldKeys)

-- Delete the Fields
DELETE FROM UFRecordFields WHERE [key] IN (SELECT fieldKey FROM @fieldKeys)

-- Delete the Records
DELETE FROM UFRecords WHERE id IN (SELECT recordId FROM @formRecordIds)

ASP.NET Framework Server.MapPath, HostingEnvironment

Sun, 24 Oct 2021 11:06:39 Z

While working with ASP.NET Framework we sometimes need to get the physical path to a folder on the filesystem. The most common way to do this is using Server.MapPath("~/relative-folder"). I've researched best practices around this several times just to forget the details a couple of months later so in this post I'll outline my findings are share some of my own best practices.

So when building a web app there is mainly two "contexts" in which I need to get file system information, in my actual application code and in some of my unit tests. Most of the time I strive to mock out IO from my unit tests but in some scenarios, I also need to perform actual testing with the filesystem to be more confident that my tests are not giving me false positives.

Physical file paths in web applications

The "goto" standard back in the days was to always use HttpContext.Current.Server.MapPath() which would "translate" a relative path into a full file system path. BUT. This object is request-bound, meaning that it will only exist inside the context of a web request. If we run inside a background job with something like Hangfire or Quartz this object will not exist. That's why I always recommend using HostingEnvironment.MapPath(path) that will work in both request-context and in background jobs.

I also wanted to know if and how these might differ from one another so I created this table to see how Server.MapPath() behaves.

Code	Returns
HttpContext.Current.Server.MapPath("")	D:\Dev\TestApp
HttpContext.Current.Server.MapPath("/")	D:\Dev\TestApp\
HttpContext.Current.Server.MapPath("~/")	D:\Dev\TestApp\
HttpContext.Current.Server.MapPath("App_Plugins")	D:\Dev\TestApp\App_Plugins
HttpContext.Current.Server.MapPath("/App_Plugins")	D:\Dev\TestApp\App_Plugins
HttpContext.Current.Server.MapPath("~/App_Plugins")	D:\Dev\TestApp\App_Plugins
HttpContext.Current.Server.MapPath("App_Plugins/")	D:\Dev\TestApp\App_Plugins\
HttpContext.Current.Server.MapPath("/App_Plugins/")	D:\Dev\TestApp\App_Plugins\
HttpContext.Current.Server.MapPath("~/App_Plugins/")	D:\Dev\TestApp\App_Plugins\

Note that it does not matter if the relative path starts with "/", "~/", or just the folder name. Also, note that any trailing slash in the relative path will be reflected with a trailing slash in the file system path.

Doing the same thing with HostingEnvironment.MapPath() reveals some differences.

Code	Returns
HostingEnvironment.MapPath("")	Throws exception
HostingEnvironment.MapPath("/")	D:\Dev\TestApp\
HostingEnvironment.MapPath("~/")	D:\Dev\TestApp\
HostingEnvironment.MapPath("App_Plugins")	Throws exception
HostingEnvironment.MapPath("/App_Plugins")	D:\Dev\TestApp\App_Plugins
HostingEnvironment.MapPath("~/App_Plugins")	D:\Dev\TestApp\App_Plugins
HostingEnvironment.MapPath("App_Plugins/")	Throws exception
HostingEnvironment.MapPath("/App_Plugins/")	D:\Dev\TestApp\App_Plugins\
HostingEnvironment.MapPath("~/App_Plugins/")	D:\Dev\TestApp\App_Plugins\

Note here that the relative path must start with either "/" or "~/" otherwise, the method will throw.

Overall conclusions and recommendations

Always use HostingEnvironment.MapPath().
A folder path is indicated by the trailing slash, otherwise, it's a file path. Consider always using trailing slash for folders.
Always make sure that the relative path passed to MapPath() starts with a slash.
Be aware that the method will respect and include any trailing slash from the relative path into the physical path.
Avoid using things like AppDomain.CurrentDomain.BaseDirectory and build paths based on this as any virtual directories configured in IIS will not be respected with this approach.

Physical Paths in unit tests

This one is a little harder as we want our unit tests to be "self-contained" and not be dependent on any magic path on the developer's filesystem or a build server. Inside a unit test or any .NET app, you can always find the path to the executing program with AppDomain.CurrentDomain.BaseDirectory, in the case of a unit test this would return something like d:\Dev\TestApp\My.UnitTest\Bin\Debug. One might be tempted to traverse the path with ..\..\ to get to the project root but this only works if the folders created have this exact nomenclature. I would argue that there is a better way:

Create a folder called "MockFileSystem" inside your test project, this will act as the "root" of your application similar to what you would get from HostingEnvironment.MapPath("/"). Inside this folder, we can replicate the relevant files and store them inside our test project. It's important that we set the "Build action" for each item to "Content" and choose the "Copy if newer" option. This way the folder structure and files will be copied to the application´s root folder.

Have your application code depend on an abstraction of the MapPath()-method, in my case, this is an interface like this:

internal interface IFileSystemHelper
{
    string MapPath(string path);    
}

The implementation inside the web project would look like this:

internal sealed class FileSystemHelper : IFileSystemHelper
{
    public string MapPath(string path)
    {
        return HostingEnvironment.MapPath(path);        
    } 
}

And in my unit test project:

internal class MockFileSystemHelper : IFileSystemHelper
{
    public string MapPath(string path)
    {
        string baseDir = AppDomain.CurrentDomain.BaseDirectory + "MockFileSystem\\";

        path = path.TrimStart('~').Replace("/", "\\").TrimStart('\\');
        
        var full = Path.Combine(baseDir, path);

        return full;  
    }
}

To avoid the "issue" with some relative folders having trailing slashes and some not we could have our implementations strip any trailing slash from the returned path to be sure that we always get a full path without any trailing slash. Something like this:

public string MapPath(string path)
{
    return HostingEnvironment.MapPath(path).TrimEnd('\\');        
}

My own pitfalls with .NET runtime cache

Wed, 13 Oct 2021 11:46:06 Z

I was working on a ASP.NET-project the other day where we use a runtime cache (aka. application cache) that lives for the duration of the application lifetime. We use this to store some frequently used data and we update the cache when something changes.

The cache implementation is not state of the art and I figured I’ll share some learnings and pitfalls that I’ve fallen into over the years.

Mutable objects in the runtime cache

First of all: An mutable object, in contrast to an immutable object, is an object that can change it's state (aka properties on the object can change value without having to create a new object). Since an immutable object can't alter its state, we need to create a new instance of the object if we need to change any values. In .NET a standard class with get/set properties is mutable while DateTime, TimeSpan, and many others are immutable.

Years ago one of the biggest gotcha for me with using the MemoryCache in .NET is that it will actually store objects. Not serialized objects but real objects in memory and only pass the reference to any consumer.

This is of course great for performance, but it also means that one has to be very careful about how these objects are used. We could deep clone the object when fetching it from the cache to avoid many of the issues I’m going to point out here but in our case, we used the “vanilla memory cache” in .NET.

Since the objects are mutable, we can easily change the state, ie. change a property or add an item to a list – we just need to remember that the next time this object is accessed the new values will be there, and the old values are gone.

Updating values

Have a look at this code sample:

public class SomeService {

    public bool UpdateCustomer(CustomerViewModel vm)
    {
        // Getting the value from the CustomerService, which is wrapped in a 
        // caching-decorator that uses the .NET MemoryCache.
        var customer = _customerService.GetCustomer(vm.CustomerId);

        customer.Name = vm.Name;
        customer.City = vm.City;
        customer.MaxOrderAmount = vm.MaxOrderAmount;

        var saveResult = _customerService.Save(customer);

        if(saveResult.HasValidationErrors)
            return ValidationError(saveResult);

        return Success();

    }
}

As you can see, we’re applying the changes from the view model into the Customer model and then saving it with the CustomerService which will validate the Customer before saving it. Let’s say that there is a validation error, the service will set HasValidationErrors to true and we’ll return the issues to the view.

BUT! This code contains a nasty bug. Since the GetCustomer()-method returns an object from the cache, the changes we make to the object (setting the values from the view model) will be persisted in the cache no matter if the validation is successful or not. This is all very logical and makes sense but it’s a big “gotcha” in terms of how caching works.

Another thing that has happened to me over the years: I was reading an object from the cache that had related entities (think customers with a List<Order>). I wanted to pass a Customer together with only paid orders to another service so I modified the order-property on the Customer like so:

customer.Orders = customer.Orders.Where(x=>x.Paid == true).ToList();

This felt great and the service that I called could use the customer-object from the cache. The only problem is that the underlying collection of orders is modified and the next time I read the Customer from the cache only the paid orders will be in the collection.

Threading and runtime cache

Most of the time the in-memory runtime cache would be shared inside the application, since I’m mostly doing ASP.NET this would be all threads used by the webserver to process requests.

Here we need to keep in mind that while one thread might be reading the cache, getting a reference to an object to read it – another thread might be in the processing of updating values on the same object, it might even be in the middle of this processes and depending on implementation the object might be in an invalid state (one property has been updated but not the other) causing errors on the read-side since the values do not make sense.

Solutions?

Going forward I can see a couple of things that would make it harder to “do it wrong”.

Always use un-cached business objects when modifying state. (ie. the method above should not read from the cache). This way we can safely apply changes to mutable objects and validate like in the sample above.
Cache a “read-only”-representation of the underlying business object. This representation could be a CustomerReadOnly-class with private setters for all the properties. This way the consuming code can’t change the state by mistake.
Use C# 9 record types, they are immutable so it's impossible to change the state of the cached object. If changes are needed on "the read side" a new instance of the record would have to be created - which will not impact the cached object. This way, any "implicit" changes to the cache are impossible.

There is a lot more to this subject but I figured I’ll post this as a starting point.

Debugging Javascript and TypeScript with JetBrains Rider

Tue, 31 Aug 2021 07:21:08 Z

Ever since I've started using JetBrains Rider I've become a huge fan of the IDE, if you have ever used Resharper for Visual Studio - Rider is Resharper - but fast =D

Rider supports Javascript/TypeScript debugging with Chrome. Using this we can set breakpoints in our code and have the Rider show variables etc. when the client app executes. There are several ways to go this but we mostly develop on a local IIS instance which means that our dev-environments most of the time have a custom domain - ie enkelmedia.se.local or something like this.

Configure JS/TS build

Before we configure Rider we need to make sure that our Javascript code can be debugged. Most of the time we would use some tools to transpile, minify and process the source code into a Javascript bundle. For the debugger to work we must make sure to include the source maps in our build. When using Webpack this is configured like this:

module.exports = {
    ...
    devtool: 'inline-source-map',
    ...
}

One way to double-check that this works is to put a "console.log" in one of the typescript files and make sure that the console output in Chrome shows the .ts file as the source of the console.log-statement.

Configure Rider

We need to set up a custom "Debug Configuration" for the Javascript/Typescript debugging. Go to "Run | Edit Configurations" and add a new "Javascript Debug"-configuration, in the "URL" field paste the URL to the application we want to debug ie. "http://enkelmedia.se.local".

To use this configuration, in the upper right corner choose the configuration from the dropdown and click the debug-icon (the bug). This will start a fresh instance of Google Chrome with the debugger attached.

More information and documentation:

https://www.jetbrains.com/help/rider/Configuring_JavaScript_Debugger.html

10 things every Umbraco Developer should know

Fri, 11 Jun 2021 14:43:55 Z

Today I held my talk on the yearly Umbraco Conference CodeGarden, due to the pandemic this year’s conference was all digital which turned out to be really good. I would like to thank everyone involved in making this a great experience it’s almost as great as the IRL experience.

So my talk was on the subject “10 things every Umbraco-developer should know” and I’ll try to create a short summary here. If you want to go into details, go ahead and download the slides.

1. Properties

A “Document Type” in Umbraco has “Properties”, these uses “Data Types” and a “Data Type” is a “Property Editor” with optional configuration.
A “Property Editor” can be used on any number of “Data Types” and a “Data Type” can be used on any number of “Document Types”.

One can alter the behavior of the “Property Editor” using “Data Type”-configuration.

2. Property Value Converts

A Property Value Converter is a class that knows how to convert the stored value into something useful for the front end.
If we use the “Multi Node Tree Picker”, the data stored in the database would be like this:

umb://document/ee82cba3a0e740639ae13026a4f72a3d,umb://document/9c1c3a2c72b045e2a3c33c068164a018,umb://document/3cce2545e3ac44ecbf55a52cc5965db3

The “Property Value Converter” knows how to take this data and create a list of IPublishedContent-items from the cache to use on the front end.

When you build your own Property Editors, don’t forget to create a Property Value Converter.

Also, do try Callum Whyte’s package Super Value Converters.

3. Database vs Cache

When you “Save” content in Umbraco it’s is saved to the database, when you “Save and Publish” it’s stored in the database and also Published to the Cache.

You should make sure that the front end of your website only uses the Cache to present data.

Do: Use IPublishedContent, UmbracoHelper, and UmbracoContext.ContentCache

Avoid: Using IContent, ContentService, MediaService, and other services.

Custom services, repositories, and background threads. In you’re your custom code the best approach to fetch data from the cache is to inject the IUmbracoContextFactory into your service.

Example:

public class BlogService : IBlogService
    {
        private readonly IUmbracoContextFactory _contextFactory;
        private readonly IScopeProvider _scopeProvider;

        public BlogService(
            IUmbracoContextFactory contextFactory, 
            IScopeProvider scopeProvider)
        {
            _contextFactory = contextFactory;
            _scopeProvider = scopeProvider;
        }

        public List<BlogPost> GetPosts(string category)
        {
            using (var scope = _scopeProvider.CreateScope(autoComplete:true))
            {
                using (var ctx = _contextFactory.EnsureUmbracoContext())
                {
                    var blogContainer = ctx.UmbracoContext.ContentCache.GetById(1123);

                    var posts = blogContainer.Children.ToList();

                    return BlogPostMapper.Map(posts);
                }
            }
        }

    }

More details on why what is happening here can be found in this thread on our.Umbraco.com-forum.

4. Content Versions

All content in Umbraco is versioned. Every time you Save or Publish something in Umbraco a new version is created.

On the "Info"-Content App on a Content-node you can see old versions and Rollback to them if you need to.

You should avoid storing data that changes a lot (volatile data) as content in Umbraco. Ie. if you are running an import every 30 minutes, this creates 48 versions per day, in a year this is 17 520 versions.

Solution? Use the UnVersion-package that automatically cleans old versions.

5. Modes Builder

Provides strongly-typed models for the front end of your Umbraco website.

Before Models builder, we had to get a property like this: @Model.GetPropertyValue("myProperty"), but with Models Builder we can go @Model.MyProperty to get the value in a strongly typed way.

In V8, Models Builder is configured in web.config, and we tend to configure it like this:

<add key="Umbraco.ModelsBuilder.Enable" value="true" />
<add key="Umbraco.ModelsBuilder.ModelsMode" value="LiveAppData" />
<add key="Umbraco.ModelsBuilder.ModelsNamespace" value="MySite.Web.Models.Cms" />
<add key="Umbraco.ModelsBuilder.ModelsDirectory" value="~/../MySite.Web/Models/Cms" />
<add key="Umbraco.ModelsBuilder.AcceptUnsafeModelsDirectory" value="true" />

The model-classes generated by Models Builder is just a wrapper around "IPublishedContent", you can create a new instance of a typed model and pass the IPublishedContent:

IPublishedContent content = Umbraco.Content(4211);
var blogModel = new BlogPage(conten);
var title = blogModel.PageTitle;

And since Models Builder makes the Umbraco cache return actual instances of the model classes you could just cast the IPublishedContent:

IPublishedContent content = Umbraco.Content(4211);
var blogModel = content as BlogPage;
var title = blogModel.PageTitle;

When using Composition, Models Builder will create C#-interfaces for these, and you can check if an instance implements this interface (hence is using the Composition):

IPublishedContent content = Umbraco.Content(4211);
string heroImageUrl = null;
if (content is IHero hero)
{
    heroImageUrl = hero.HeroImage.Url;
}

6. Debugging

Use the Log Viewer in the Settings section to view the logs and entries created by the website.

Also, these files can be found on disc in /App_Data/Logs

Use a tool like Compact Log Viewer to watch the logs outside of the backoffice.

Also, you can write to the log from your custom code:

using Umbraco.Core.Logging;

public class MyThing : IMyThing
{
    private readonly ILogger _logger;
    
    public MyThing(ILogger logger)
    {
        _logger = logger;
    }
    
    public void DoSomething(string value)
    {
        _logger.Info<MyThing>($"My thing executed DoSomething()");

    }
}

You can also use measure the performance of certain blocks in your code using the IProfilingLogger:

using Umbraco.Core.Logging;

public class MyThing : IMyThing
{
    
    private readonly IProfilingLogger _profLog;

    public MyThing(IProfilingLogger profLog)
    {
        _profLog = profLog;
    }
    
    public void DoSomething(string value)
    {
        using (_profLog.TraceDuration<MyThing>("Starting work","Done with work"))
        {
            Thread.Sleep(250);
        }
    }
}

7. Lucene / Examine

Examine is the built-in "Search Engine" in Umbraco, it used Lucene.NET to index Content, Media, and Members.

It provides fast free text search and is great to perform filtering on large data sets, ie. a product or article filter.

Some take away's:

The Umbraco 8-cache (NuCache) is a lot faster than the V7-cache
Prefer NuCache if you're working with less than 500 content nodes and few filtering options
Use Examine/Lucene to filter larger data sets with many filtering options
Do test what's best for you

A more detailed presentation around this can be found here.

8. Inversion of Control / Dependency Injection

The concept of injecting dependencies into your classes is a good practice and it becomes more important with Umbraco 9 that runs in .NET 5 where DI is a first-class citizen.

LifeTimes in Umbraco 8 (LightInject)

Transient: A new instance every time
Singleton: Same instance for the application lifetime
Scope: New instance for every "Scope" in the DI-container. In Umbraco, this is for every web request.
Request: New instance for every request to the container. This is similar to Transient. Avoid this.

9. NPoco

The "Micro ORM" used by Umbraco Core, used to read, update and delete data in the database. You can think of this as a "Lightweight and fast Entity Framework". You are free to use EF in your own code if you want to but you can also use NPoco:

public class MovieRepository : IMovieRepository
{
    private readonly IScopeProvider _scopeProvider;

    public MovieRepository(IScopeProvider scopeProvider)
    {
        _scopeProvider = scopeProvider;
    }

    public bool Save(Movie movie)
    {
        return true;
    }

    public List<Movie> GetByYear(int year)
    {
        using (var scope = _scopeProvider.CreateScope(autoComplete:true))
        {
            var dtos = scope.Database.Fetch<MovieDto>(
                scope.SqlContext.Sql().SelectAll()
                    .From<MovieDto>()
                    .Where<MovieDto>(x=>x.Year == year));

            return MovieMapper.Map(dtos);
            
        }
    }
}

The Scope's created but IScopeProvider can be nested, but: Don't forget to "Complete" your scopes.

10. AngularJS hacks for the backoffice.

You can use AngularJS's $httpProvider.interceptors to intercept requests/responses to/from the Umbraco backoffice APIs.

This is useful if you would like to alter the response coming back from the API in any way. One example is to remove the default "Consent"-field that is included when creating a new form in Umbraco Forms.

angular.module('umbraco.services').config([
   '$httpProvider', function ($httpProvider) {
       $httpProvider.interceptors.push(['$q','$injector', function ($q, $injector) {
           return {
               
               'response': function(response) {

                   // Overrides the response from the API-endpoint that created the Forms, 
                   // The controller is hardcoded to always append the "data consent"-field as the last field in the collection
                   // So by running pop() on the collection.

                   // Does the returned content match the endpoint for GetScaffoldWithWorkflows?
                   if (response.config.url.indexOf('backoffice/UmbracoForms/Form/GetScaffoldWithWorkflows?template=') > -1) {
                       response.data.pages[0].fieldSets[0].containers[0].fields.pop();
                   }

                   return response;
               }
               
           };
       }]);

   }]);

You need to include this javascript in the backoffice using a package.manifest-file.

IIS - HTTP Error 500.19 with Umbraco and other sites

Wed, 31 Mar 2021 08:40:21 Z

When starting up a Umbraco website on a fresh install of IIS, I sometimes get this error:

HTTP Error 500.19

There is not much more information, the error that says: The requested page cannot be accessed because the related configuration data for the page is invalid.

One can open the "Event Viewer" that might reveal more information, but many times there is no additional information to be found here either.

The first thing I check is the permission settings for the folders, after this one could just try to remove elements from web.config to figure out what inside web.config that is considered "invalid". Since I work a lot with Umbraco, MOST of the time the problem is the <rewrite>-element. Without the right components installed on server these elements will be unknown to IIS and considered invalid.

What do to?

Here are some thing to check if you get the HTTP Error 500.19 when trying to run Umbraco on a Windows IIS-server.

Ensure Permissions

Make sure that the IIS-user for the application pool (usually IIS_IUSRS) have full read/write access to the folders for the web-app.

Ensure DOTNET runtime

To run a modern ASP.NET (aka Core) application we need the "Hosting Bundle" to be installed on the server, it can be downloaded from the .NET website click on "All .NET X.0 downloads" and then download and install the "Hosting Bundle".

Ensure URL ReWrite

If you have the <rewrite>-element with <rules> configured in web.config make sure that you have installed "URL Rewrite":

Download "URL Rewrite Module 2.1" from Microsofts website (scroll to the bottom of the page).
Run the installer
Restart IIS to be on the safe side.

Unit tests with input data as assembly resources

Tue, 19 Jan 2021 09:21:19 Z

When running unit tests over "complex" data ie. an html, XML, or json-file it's sometimes good to keep this data in its own file and not in the C# code like this:

The example above is from one of our utility projects for Umbraco where we're parsing the grid to remove any empty p-tags from the end of a Rich Text Editor. To really know that this works and also keeps working we've created unit tests for different kinds of grid input.

First off, we need to include the files in the project and then set there "Build Action" to "Embedded Resource", right-click on the file, and choose "Properties" to see this options pane:

After this we can read the content of the files like this:

var content = new AssemblyTestData<MyUnitTestClass>(".Files.").ReadString("test-data.json");

Here's the code for the AssemblyTestData-class:

// <summary>
/// Utility to read content of embedded assembly resources
/// </summary>
/// <typeparam name="T">The calling type, used to get the resource namespace</typeparam>
public class AssemblyTestData<T>
{
    private readonly string _additionalNameSpace;

    /// <summary>
    /// 
    /// </summary>
    /// <param name="additionalNameSpace">If the files to read is in another namespace than the calling class, add this here ie ".Files</param>
    public AssemblyTestData(string additionalNameSpace = "")
    {
        _additionalNameSpace = additionalNameSpace;
    }

    public string ReadString(string filename)
    {
        var bytes = ReadBytes(filename);
        
        return Encoding.UTF8.GetString(bytes)
            .Trim(new char[]{'\uFEFF','\u200B'}); // Removes boom-chars

    }

    public byte[] ReadBytes(string filename)
    {
        var type = typeof(T);
        var assembly = type.Assembly;
        var stream = assembly.GetManifestResourceStream(type.Namespace + _additionalNameSpace + filename);

        using (var memoryStream = new MemoryStream())
        {
            stream.CopyTo(memoryStream);
            return memoryStream.ToArray();
        }
    }
}

Happy testing!

Umbraco and MiniProfiler

Fri, 15 Jan 2021 16:23:56 Z

Umbraco CMS ships with the great MiniProfiler both with Umbraco 7 and 8.

I'm not going to repeat everything from the documentation but today when I wanted to see some profiling for a backoffice API-controller I'm working on I found that it's really easy to show the profiler logs by going to

https://mysite.com/mini-profiler-resources/results-index

Windows Terminal with git and right click menu

Mon, 21 Dec 2020 08:49:19 Z

I recently played around with Microsoft's new "Windows Terminal", a great new tool for working with different command-line tools in Windows.

I use the following setup:

First, download Windows Terminal from here https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701
Add context menu action so that we can right-click a folder and choose "Windows Terminal here". https://dev.to/brojenuel/windows-terminal-context-menu-how-to-setup-35oo
Setup the Cascadia Code-font to use git in a nice way: https://docs.microsoft.com/en-us/windows/terminal/tutorials/powerline-setup

My default setup for the Windows Terminal settings looks like this:

"defaults":
{
    
    // Put settings here that you want to apply to all profiles.
    "colorScheme": "One Half Dark", //"Tango Dark",
    "fontFace": "Cascadia Code PL",

    "useAcrylic" : true,
    "acrylicOpacity" : 0.9,

    "startingDirectory": "." //add this

},

Also if you want the git-bash as one of the options on the dropdown for shells, just add this to the "list"-property in the Windows Terminal settings:

{
    "guid" : "{14ad203f-52cc-4110-90d6-d96e0f41b64d}",
    "name" : "Git Bash",
    "historySize" : 9001,
    "commandline" : "C:/Program Files/Git/usr/bin/bash.exe --login",
    "icon" : "C:/Program Files/Git/mingw32/share/git/git-for-windows.ico",
    
    "useAcrylic" : true,
    "acrylicOpacity" : 0.9,
    
    "padding" : "0, 0, 0, 0",
    "snapOnInput" : true

}

Note: The path to git might be different, sometimes something like c:/program files (x86)/

Thinking loud about naming models, DTOs, web api models, view models and so on

Thu, 16 Jul 2020 11:16:47 Z

I've found myself thinking a lot about a good naming strategy or naming convention for website projects that works with data in several different formats. Before I start to outline my current ideas (might change over time) I would like to set the stage for the project.

Let's say we have a website project with the all of these "features":

A rich domain model with domain entities
A database to store state of the domain model including repositories
A MVC front end
A web api aimed for the front end website (not 3rd party integrations)
A public web api for 3rd party integration's

Now comes the challenge, all of these different touch points/end points into the system often needs to represent the same thing/entity. We've been taught that for one should not use the domain entity as view model in a MVC-view, we should have a dedicated type that acts as the view model, the problem is that each of these end points probably needs a dedicated type which presents us with a problem that I've had a really hard time to find a perfect solution for:

How should we name all these dedicated types/classes?

First of all, these special representations of the core rich domain model entities are all DTOs (data transfer objects) but since we probably need these DTOs to look different depending on the context we need to name them in a smart and understandable way. The goal would be that a developer should be able to understand what "type of DTO" the code is working with by looking at the type name.

So let's start with some ideas and let's say that the core domain model that we're working here is type called Car.

MVC-view model

This one is quite simple, a very common practice is to suffix the core entity with ViewModel.

Idea: CarViewModel.

Database mapping DTO

In most of my solutions I use a repository that will take in the domain model and store it's state, the repository also returns instances of domain entities. During this process we need to map the domain entity to a model that is suitable for the storage we're using. Let's say a database. So most of the time I would represent the database table as a DTO.

Idea: CarDto

Model for website frontend APIs

Here we're talking about features on the website that make async javascript requests to the backend, something like a filter, a search feature, auto suggest or what ever. These are "ApiModel" but they are used in a context where they've probably will end up as some kind of "view model" when they are rendered into the website. I'm quite sure that this kind of model is different from the model used in public APIs for 3rd parties, so I would like to use a naming convention for them that makes it clear that they are used only for the website.

Idea: CarFrontendModel

Model for public API for 3rd parties

Here we're talking about model types for a external public web api if we're implementing a API that is restful these models could be called a Resource or a ApiModel. I like the idea of calling the "Resource" since a restful api could/shuld have navigation-properties etc. So in this case the "CarResource" might have links to a BrandResource or a "DealerResource". I'm very hesitant about this one but one has to come up with something.

Idea: CarResource

I had two main purposes of writing this blog post, first one is to document and share my ideas and the second is to get input and/or feedback. If you feel that you have other thoughts around this, please share in the comments!

Note: I might (and almost hope) that I'll change my conclusions above based on more experience and feedback.

Remove Record from Umbraco Forms 8 Workflow

Wed, 03 Jun 2020 07:53:50 Z

When working with Umbraco Forms there are some scenarios when you want to extend the functionality to perform something custom. Every time a Form is submitted a new Record is created for this Form, this Record is stored in the database and also passed to all Workflows that are configured on the form.

In our case we wanted to implement a HoneyPot to avoid some of the SPAM that comes through the forms so in cases we wanted to be able to remove a record from a custom WorkflowType. I found some solutions for Umbraco 7 but non of these worked on Umbraco 8 so I got my hands dirty and started to implement this.

I did not find a way to remove the Record from within the Workflows Execute()-method since everything I tried caused exceptions. I managed to solve it by firing of a Task that runs some time after the Record has been created.

Here's the code that we used:

public class DeleteWorkflow : WorkflowType
{
    public DeleteWorkflow()
    {
        this.Id = new Guid("466BAB6D-ECF1-4BE8-B0E7-6C6ACC495565");
        this.Name = "Delete Record";
        this.Description = "Deletes the record from the Database";
        this.Icon = "icon-delete";
    }
    

    public override WorkflowExecutionStatus Execute(Record record, RecordEventArgs e)
    {
        Task.Run(() => DeleteRecordWithDelay(record.UniqueId.ToString(),record.Form.ToString()));

        return WorkflowExecutionStatus.Completed;
    }


    public override List<Exception> ValidateSettings()
    {
        return new List<Exception>();
    }

    
    public static async Task DeleteRecordWithDelay(string recordId,string formId)
    {
        await Task.Delay(5000);

        try
        {
        
            IRecordService recordService = DependencyResolver.Current.GetService<IRecordService>();
            IRecordStorage recordStorage = DependencyResolver.Current.GetService<IRecordStorage>();
            IFormService formService = DependencyResolver.Current.GetService<IFormService>();
        
            var form = formService.GetForm(Guid.Parse(formId));
            var record = recordStorage.GetRecordByUniqueId(Guid.Parse(recordId), form);
        

            recordService.Delete(record, form);
        }
        catch (Exception e)
        {

            var exception = e.Message;
            throw;
        }
    }
}

Using Less with Umbraco and System.Web.Optimizations

Sun, 22 Mar 2020 13:31:25 Z

When you want to combine and minify your JavaScript and CSS there’s a lot of options out there. Mainly you can either do this in your build process or perform this “on demand” from the server side of your website. When it comes to performance the first option, to actually deploy the processed assets, is probably the most efficient but I often prefer to take the cost of processing this on the server side using something like Microsoft.AspNet.Web.Optimization or ClientDependency Framwork (ships with Umbraco).

In this post I’ll explain the steps needed to use Microsofts Web.Optimization-framework and the 3rd party package System.Web.Optimization.Less to be able to process use .less-files on the server.

Note: The Less-package that I’m using needs at least .NET Framework 4.6.1 to run, so before going further, make sure that you’re project runs on at least .NET Framework 4.6.1.

First of, we need to install the two packages that we’re going to use:

Install-Package Microsoft.AspNet.Web.Optimization
and

Install-Package System.Web.Optimization.Less

Note: If you're on Umbraco 7 you need to make sure that you're using the right versions of the packages, I would recommend installtion them in this order:

* Install-Package Microsoft.AspNet.Web.Optimization -version 1.1.3
* Install-Package dotless -version 1.5.2
* Install-Package System.Web.Optimization.Less -version 1.3.4

This is beacure the "dotless" package made breaking changes in version 1.6+ but some NuGet package does not explicity state the dependency to be for dotless < 1.6.

After installing these packages we need to configure our bundle during startup. For a vanilla MVC-project this would be done in Global.asax but when we're running Umbraco we can avoid having to fiddle with Global.asax by creating our own ApplicationEventHandler (for V7) or UserComponent (for V8).

Before we configure our bundles we need to make sure that the path we're using for our bundles is ignored by Umbraco, otherwise we might get issues with 404-responses from the bundle. Make sure the root web.config contains a appSettings that looks something like this:

<add key="umbracoReservedPaths" value="~/umbraco,~/install/,~/bundles/"/>

Then we can start to configure our bundle, when running Umbraco 7 it would look something like this

public class UmbracoStartup : ApplicationEventHandler
{
    protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
    {
        this.RegisterBundles(BundleTable.Bundles);
    }

    public void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js") 
            .Include("~/Scripts/site.js")
        );

        bundles.Add(new LessBundle("~/bundles/css")
            .Include("~/Style/site.less")
        );
    }
}

Then in your views you'll render the bundle links like this:

@Styles.Render("~/bundles/css")

After this the bundle will be rendered on the front end of the website, please note that it behaves differently depending on the system.web -> compilation -> debug setting in the root web.config:

Debug = true (for development): Each file in the bundle is referenced with it's own <script>-tag
Debug = false (for production): Files and bundles (and minified if configured).

A good practice is to test both these settings in your development environment to make sure that everything works.

Umbraco 8 and custom CollectionBuilders

Tue, 10 Mar 2020 13:48:40 Z

A very nice feature in the latest version of Umbraco (8.0+) is that they’ve made it really easy to implement your own CollectionBuilders. This raises two obvious questions:

What is a CollectionBuilder?

A collection builder is used to create a collection of Types, the main purpose being a collection of types that you would like to keep in a certain order. Umbraco uses this to register stuff like ContentFinders, Components and lots of other things.
The syntax looks something like this:

// Append
composition.Components().Append<MyCustomComponent>()
// Insert After
composition.Components().InsertAfter<MyCustomComponent,AnotherComponent>()

By leverage this feature you can create your own collection of types and make sure that the concrete instances in the collection is sorted in the way you want.

How would I implement a custom CollectionBuilder?

We’re basically looking at 3 small pieces that we need to get this in place. Let’s say that we have a type called ITextProcessor with multiple different implementations that we need to store in our custom collection in a given order. We’ll start with the collection it self by creating a new class that inherits from BuilderCollectionBase, all we need to do is to pass the type we want to store in the collection as a type parameter and implement the default constructor:

public class TextProcessorsCollection : BuilderCollectionBase<ITextProcessor>
{
    public TextProcessorsCollection (IEnumerable< ITextProcessor > items) : base(items)
    {
    }
}

Next up is the “Collection Builder” it self, here we inherit from “OrderedCollectionBuilderBase” and pass 3 type parameters:
1. The builder type it self
2. The collection type
3. The type of the items in the collection

And also implement one single property, “This”. It should look something like:

public class TextProcessorsCollectionBuilder :
OrderedCollectionBuilderBase< TextProcessorsCollectionBuilder, TextProcessorsCollection,ITextProcessor>
{
    protected override TextProcessorsCollectionBuilder This => this;
}

The last thing we should do is to implement an extension method so the builder will be easy to use during composition, let’s create one like this:

public static class TextProcessorsCollectionExtensions
{
    public static TextProcessorsCollectionBuilder TextProcessors(this Composition composition)
=> composition.WithCollectionBuilder< TextProcessorsCollectionBuilder >();
}

After this we can work with our list during Composition using the extension method like so:

public class MySiteComposer : IUserComposer
{
    public void Compose(Composition composition)
    {
    composition.TextProcessors().Append<RemoveSpaceTextProcessor>();
    composition.TextProcessors().Append<AddLineBreaksTextProcessor>();
    }
}

When we want to use the list in our code, we can get it from the IOC-container, prefferebly using consrtructor injection

public class MyController : SurfaceController
{
    public void MyController(TextProcessorsCollection textProcessors)
    {
        // Save as local variable
    }
}

Version History Umbraco 7 and Umbraco 8

Thu, 31 Oct 2019 07:33:37 Z

Here's a summery of major features and improvements with each major/minor release of Umbraco CMS, you can see this as an overview of the great detailed release information that Umbraco HQ provides with each release.

Umbraco 7.0

Released: 2013-11-21

A major release that introduced the new AngularJS-based backoffice, new "property editors" for data types and a lot of improvements in the editor experience.

Release details on our

Umbraco 7.1

Released: 2014-04-03

This release was mainly a "polish"-release that fixed bugs and brought features that did not make it into 7.0.

Image Cropper in the core
Breadcrumbs and warnings (discard changed-dialog when leaving a view without saving)
Change document type
API: MemberService introduced.

Release details on our

Umbraco 7.2

Released: 2014-12-04

Grid property editor was added
Responsive preview mode (switch between desktop, mobile and tablet)

Release details on our

Umbraco 7.3

Released: 2015-09-29

Improved load balancing
Upgrade to MVC5 & WebApi2

Release details on our

Umbraco 7.4

Released: 2016-02-11

New Content Type (Document Type) editor
Models Builder

Release details on our

Umbraco 7.5

Released: 2014-08-17

Health Check dashboard introduced
301 redirect manager
Image Processor security improvements
Password recovery for backoffice
Package Installer UI updated and "target version" for packages.
Sortable property types in list views

Release details on our

Umbraco 7.6

Released: 2017-05-02

New editor for scripts and templates
Content/media/members-pickers (property editors) was improved
Color-changes to backoffice UI
List View Pickers
UDIs was introduced

Release details on our

Umbraco 7.7

Released: 2017-09-19

This release introduced the new "User Management" and also changed some of the details around how users and passwords are stored. This version is "milestone" when upgrading old sites, I've had to install this specific version to the things right.

New User Management, more focus on settings on User Groups
- Invite Users
- Multiple Start Nodes
- Big UI-improvements
Introduced "Content Templates"
New starterkit
Scheduled Health Checks
Includes Nested Content in the core
ISerachableTree-interface for custom search in the tree

Release details on our

Umbraco 7.8

Released: 2018-02-06

Backoffice Tours introduced (Step-by-step introductions/support)
The "Info"-tab replaced the "Generic Properties"-tab
Improvements to Load Balancing

Release details on our

Umbraco 7.9

Released: 2018-02-27

This released was called the "GDPR-release" and introduced some tooling around "consent" from visitors.

The ConsentService API was introduced
Logging of User actions in the backoffice was improved
Member properties can be marked as "Sensitive Data" and hidden from some backoffice User Groups.
Export Member data to a file

Release details on our

Umbraco 7.10

Released: 2018-03-27

This release does not contains a lots of features and was probably release to be able to ship the breaking change with TypedContent and Guids.

Improved performance for querying UmbracoHelper.TypedContent with Guids
Dropdown property editor was improved

Release details on our

Umbraco 7.11

Released: 2018-06-19

See where Composition Content Types are being used
Dictionary Tree modernized (aka moved from WebForms to AngularJS)
Multilingual tours
Cancel-events from ContentService-event handlers now shown to the user.

Release details on our

Umbraco 7.12

Released: 2018-08-14

Folders for Content Types (aka Document Types)
Nested Content filtering content types
Visual Color Picker for content type colors

Release details on our

Umbraco 7.13

Released: 2019-01-08

The "Community-release" with 172 improvements, bug fixes and so on.

SVG-support for media / media pickers
Better image search
Media item deletion detection (the "Trashed"-alert on media that has been deleted)
Media file type indicators (icons for doc,pdf etc)
Performance improvements, site-startup
UX: Color pickers improvements

Release details on our

Umbraco 7.14

Released: 2019-03-12

Multi Url Picker added to Core
Helth Check for TLS 1.2
UX-improvements to Image Cropper, SVG, Toggles and more

Release details on our

Umbraco 7.15

Released: 2019-07-09

The final Umbraco version 7 minor release. NOTE! This version was patched with 7.15.1 due to a bug in the media tree.

.NET Framework update to 4.5.2
New Preview engine
Updates to EntityService (breaking)
Pickers: "Ignore User Start Nodes"-setting
Bugfixes for CPU usage when not running the backoffice on the /umbraco-route

Release details on our

Umbraco 8.0

Released: 2019-02-26

A new major-version of Umbraco with lot's of updates and breaking changes. A cleaned up code base where all legacy code (aka WebForms) has been removed.

New backoffice UI
Introduced "Infinite Editing" - edit doctypes, media and content in a "modal" and not switch context.
Language Variants - Native support for 1:1-translations in the core
Removed all dynamics, UmbracoTemplatePage etc
Introduced "NuCache", no more XML (umbraco.config)
Introduced Composition and Components for startup and Dependency Injection

Release details on our

Umbraco 8.1

Released: 2019-07-09

Improved editor experiance
Nested Content - Copy & Paste
Easier access to MiniProfiler by a Settings-dashboard switch.
Ignore User Start Nodes
Accessibility improvements
Models Builder updates
Introduces IPublishedPropertyType, breaking change for PropertyValueConverters

Release details on our

Umbraco 8.2

Released: 2019-10-15

A total of 91 features and fixes in this release.

Rich Text Editor enhancements
- Performance / loading time improved
- Drag and drop images
- Copy/paste from Word improved
Improved cache performance and stability

Release details on our

Umbraco 8.3

Released: 2019-11-12

A small minor release with a major feature added.

Allowing to change the culture of a language (ie. dialects English UK to English US)
Disable renaming for built in User Groups

Release details on our

Umbraco 8.4

Released: 2019-12-10

A maintenance-release with dataType-tracking added, improved backoffice search and around 180 community contributions.

Fixes issue with outdates results from Content Service
Fixes redirects for moved content nodes
Allow to search by Content Guid

Release details on our

Umbraco 8.5

Released: 2020-01-14

The "Models Builder" in Core-release, note that there was some fast bug fix-releases after this was release.

Added a slime down version of Models Builder in the the Umbraco Core, used to be an external package.

Release details on our

Umbraco 8.6

Released: 2020-03-31

Contains a lot of accessibility fixes and also bug and stability fixes and also:

Custom validation messages for Content Types
Media Tracking (shows where media is used)

Release details on our
Umbraco HQ-blog about the release

Umbraco 8.7

Released: 2020-09-10

The "Block List Editor"-release contains ie:

The new Block List Editor property editor
Segments-support at API-level
Content Apps for Document Types
Complex validation in property editors

Release details on our

Umbraco HQ-blog about the release

Umbraco 8.8

Released: 2020-10-01

Mainly the "Image Cropper in Grid" and "List view for media"-release. Includes:

Cropping-improvements to image control in the grid
List view's for media
Improved support for Guid and Udi-references to content/media
Icons as SVG
JSON-editor for gris style/settings-configuration

Release details on our

Umbraco HQ-blog about the release

Umbraco 8.9

Released: 2020-10-26

The "OAuth"-release that expands extensibility points for 3rd party login providers ie. Open Id Connect.

Extensibility-points to login using Open Id Connect ie. Facebook or Azure Active Directory

Release details on our

Umbraco HQ-blog about the release

Umbraco 8.10

Released: 2020-12-28

A "maintenance"-release that includes many contributions from the "Hacktoberfest 2020".

Updates to Block List Editor
Popups when entering preview mode in new browser tab
Property editor "full width" editor
Checkbox-list-editor for grid settings
Faster content query and reduced memory consumption

Release details on our

Umbraco HQ-blog about the release

Umbraco 8.11

Released: 2021-01-28

A "maintenance"-release UX and accessibility

Unattended installs
"Remove all"-option for Multi Node Tree Picker

Release details on our

Umbraco HQ-blog about the release

T-SQL compare SQL Server vs SQL CE (Compact Edition)

Tue, 22 Oct 2019 07:08:32 Z

This blog post came out of my work with packages for Umbraco CMS, but it's totally applicable even if you're not working with Umbraco. When building packages for Umbraco that works with custom tables you have to keep in mind that CMS supports different databases. We need to make sure that our queries works on both the standard SQL Server and with SQLCE.

I've decided to try to create a list of queries and map out what does and what doesn't work depending on the database type.

Description	Query-example	SQL Serv.	SQLCE
Regular SELECT	SELECT * FROM umbracoNode	x	x
SELECT with Subquery in select-statement	SELECT id (SELECT COUNT(pk) from cmsDataType) as Test FROM umbracoNode	x
SELECT with Subquery in WHERE-statement	SELECT id, [text] FROM umbracoNode WHERE Id IN (SELECT nodeId from cmsDataType)	x	x
SELECT with Subquery (scalar¹) in WHERE	SELECT id, [text] FROM umbracoNode WHERE Id = (SELECT TOP 1 nodeId from cmsDataType)	x
SELECT with Inner Join	SELECT n.id, n.[text] FROM umbracoNode n INNER JOIN cmsDataType d ON d.nodeId = n.id	x	x
SELECT with STUFF-function	SELECT id,[text], STUFF([text],1,1, '') FROM umbracoNode	x	x
SELECT TOP	SELECT TOP 5 * FROM cmsContentType	x	x
SELECT with “FOR XML PATH”. Will format as a scalar XML-payload	SELECT TOP 10 id,[text] FROM umbracoNode ORDER By [text] FOR XML Path('node')	x
Row_Number() / Paging with SELECT with ROW_NUMBER()	SELECT id,[text], ROW_NUMBER() OVER (ORDER BY [text]) AS RowNumber FROM umbracoNode ORDER By [text]	x
Paging with SELECT WITH OFFSET AND FETCH ²	SELECT id,[text] FROM umbracoNode ORDER BY id OFFSET 0 ROWS FETCH NEXT 10 ROWS ONLY	x	x
SELECT DISTINCT-feature	SELECT DISTINCT ContentId from cmsContentVersion ORDER BY ContentId	x	x
SELECT COUNT with DISTINCT³	SELECT COUNT(DISTINCT thumbnail) FROM cmsContentType	x
SELECT with LIKE in Where	SELECT * FROM umbracoNode WHERE [text] LIKE '%st%'	x	x
SELECT with Subquery in FROM-statement.	SELECT count(contentId) FROM (SELECT DISTINCT contentId FROM cmsContentVersion) cmsContentVersion	x	x
SELECT with LEFT OUTER JOIN	SELECT n.id, n.[text], d.dbType, d.pk FROM umbracoNode as n LEFT OUTER JOIN cmsDataType as d ON n.id = d.nodeId	x	x
Parameter Alias declared as string	SELECT id as 'foo' FROM bar	x
Parameter Alias declared inline	SELECT id as foo FROM bar	X	X
SELECT with INNER JOIN Subquery in FROM	SELECT * FROM cmsTemplate as t INNER JOIN (SELECT templateId, count(id) as total FROM umbracoDocumentVersion WHERE published = 1 GROUP by templateId) as dv ON dv.templateId = t.nodeId	X	X
CROSS APPLY	SELECT id,userName,ugr.Roles FROM umbracoUser u CROSS APPLY (SELECT COUNT(ug.userId) as Roles FROM umbracoUser2UserGroup AS ug WHERE ug.userId = u.id) as ugr ORDER BY ugr.Roles DESC	X	X

I hope that this little table is useful and please, feel free to drop a comment if you have any feedback or suggestions on things I've missed.

Umbraco Sweden Festival 2018

Fri, 16 Nov 2018 10:47:00 Z

The yearly Umbraco festival in Sweden was hosted today in Gothenburg and I was one of the speakers. My subject was “The first Umbraco V8-site” and I tried to share some of my learnings from trying to implement a new site with the current “version” of Umbraco v8.

You can download the slides here

How to fix when ReSharper says "Cannot resolve partial view"

Mon, 05 Nov 2018 14:23:00 Z

This is a quite annoying problem that I sometimes hit with Resharper, some of the times the views are in the “correct” folders and sometimes when we’re using custom locations for the views.

Fortunately it can be fixed.

Use annotations to indicate where views are placed

Jetbrains ships a package of annotations that we can use to tell Resharper where our views are placed. Start by referencing the Nuget-package that contains these annotations:

Install-Package JetBrains.Annotations

Then in your solution, open the “Properties/AssemblyInfo.cs”-file and add these annotations to indicate for Resharper where you views are placed.

[assembly: AspMvcPartialViewLocationFormat(@"~\Views\Partials\{0}.cshtml")]
[assembly: AspMvcPartialViewLocationFormat(@"~\Views\MacroPartials\{0}.cshtml")]
[assembly: AspMvcViewLocationFormat(@"~\Views\{1}.cshtml")]

The example above works good with views in Umbraco CMS where some partials are placed in the "MacroPartials"-folder.

There’s three different placeholders that you can use to build the paths:

{0} - view name
{1} - controll name
{2} - area name

And there is also different annotations depending on what type of view we are looking for:

AspMvcAreaMasterLocationFormatAttribute
AspMvcAreaPartialViewLocationFormatAttribute
AspMvcAreaViewLocationFormatAttribute
AspMvcMasterLocationFormatAttribute
AspMvcPartialViewLocationFormatAttribute
AspMvcViewLocationFormatAttribute

Sometimes you beed to build and reload the projects for this to work.

Great Visual Studio extensions

Thu, 28 Jun 2018 12:15:00 Z

In this post I just wanted to share some really good extensions for Visual Studio 2017 that I use on a daily basis.

File Nesting

A simple little utility that makes it possible to nest files from the UI, great for ie. web.config files with different versions for release, stage and production.

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.FileNesting

https://github.com/madskristensen/FileNesting

Configuration Transform

This cool utility can test your configuration transform before commiting them, great to test your transforms very fast.

https://marketplace.visualstudio.com/items?itemName=GolanAvraham.ConfigurationTransform
https://github.com/golavr/ConfigurationTransform

One issue with the current version of configuration transform (3.2) is that it only support configuration files thats placed in the root of project, i've created a pull request that solves this: https://github.com/golavr/ConfigurationTransform/pull/6, so if you nned to work with config files outside of the root - just download and build the version with my fix and place the files in your VS-extentions folder:

For Visual Studio 2017 the path is:
%LocalAppData%\Microsoft\VisualStudio\{vs-version}\Extensions\

Markdown Editor

Provides a markdown editor inside Visual Studio, great when you want to edit your Github readme.md-files.

https://marketplace.visualstudio.com/items?itemName=MadsKristensen.MarkdownEditor

SQLite/SQL Server Compact Toolbox

This extension brings a lot of nice features and the one that I use the most is the ability to connect to a SQL Server Compact (SQLCE) or a .sdf database.

When I work with Umbraco CMS it's very nice to have this extention installed. I usally run Umbraco with SQL Server Express but the default option in the installer is SQLCE. So this extension to Visual Studio is very handing when building packages for Umbraco and to test out something.

Using this extension we can connect to, query and modify a SQLCE database inside of Visual Studio, after install we'll find a window under "View -> Windows" where we'll find all the goodness.

Download it here:

https://marketplace.visualstudio.com/items?itemName=ErikEJ.SQLServerCompactSQLiteToolbox

Mapping Generator

Nice little utility that can create automatic mappings for DTOs and Domain Models or View Models, I often use it to generate a starting point and then manually change the details for properties that need it.

Download it here: https://marketplace.visualstudio.com/items?itemName=54748ff9-45fc-43c2-8ec5-cf7912bc3b84.mappinggenerator

Why Umbraco training matters

Thu, 13 Oct 2016 12:11:00 Z

I’m not sure if everyone who reads my blog knows that I’m the trainer for the official Swedish Umbraco courses. It was after CodeGarden 2013 that I was asked to help out with the education of developers and designers here in Sweden and I’ve had a lot of fun and made a lot of new friends during these events!

Over the years I’ve had a lot of really smart people attending my courses – but I’ve never had any student regretting that they attended. It does not matter which skill-level you have before you come – there is always something new to learn and to try. A lot of people think of different courses as a way to get certified and yes – that’s really good and very important. At the same time I really want to point out the greatest value about the courses, that’s all the knowledge that you can take home and use in all new projects.

When I attended the trainings I’ve been working with Umbraco for about 4 years and still I decided to go to the Fundamentals training just to make sure that I haven’t missed anything important. It was some repetition but I got away after these to days with about 10 things did I did not know before – big features in the core that I’ve never used or small tips and tricks that made some tasks trivial compared to how I’ve solved them before.

This week the Norwegian developer Lars-Erik Aabech pointed out this with a nice tweet about something as simple as the “Alt Template”-feature of Umbraco.

@bleedo @markusjoha I was also surprised at fundamentals training (!) after seeing this one. Didn't use it in the past at all :(
— Marcin Zajkowski (@zajkowskimarcin) 12 oktober 2016

A lot of experienced Umbraco developers that have not attended the trainings have probably missed out on this and on stuff like “Recursive properties”. These to thing are just small examples of stuff from the Fundamentals-training that self-thought developers never get to know.

So why does the trainings matters?

Fastest way to get a compact “smorgasbord” of up-to-date knowledge about Umbraco
Don’t miss any details or fundamentals
Official certification – comforting for clients

If your in Sweden and thinks about attending a course, have e look here for the next training event!

24 days in Umbraco

Fri, 11 Dec 2015 08:35:00 Z

Today my blog post for 24 days in Umbraco was released. The topic is “The code that changes my life”.

This is a great Christmas tradition where the community posts one article per day up until Christmas! Head over to the site and read about some really interesting topics for example:

You’ll find all the articles here: http://24days.in/umbraco/2015/

uHangout about "The Dashboard"

Sun, 16 Aug 2015 11:36:00 Z

I finished of last week by participating in Warren Buckley's lovely uHangout. This time I showed my latest package “The Dashboard” which also won this years package competition on CodeGarden 15. The package is a really simple dashboard that can be used to give both editors and developers a better first experience when the log on to their Umbraco backoffice. This is how it looks:

Please Download The Dashboard and give it a spin! If you would like to contribute (or just leverage the source code) the project is hosted on GitHub: https://github.com/enkelmedia/TheDashboard

Our conversation also evolved into an overall discussion about the editor experience in Umbraco CMS and how you as a developer can improve it.

If you want to watch the show it on http://uhangout.co.uk/ or on YouTube: https://www.youtube.com/watch?v=fNoHxYSuBXo

I’ll try to post a summery of the tips and tricks and the packages that I talk about in the upcoming days.

Cheers! =D

Json syntax highlighting for Umbraco manifest files

Wed, 28 Jan 2015 20:36:00 Z

Since Visual Studio 2013 update 2 VS includes a nice Json editor that makes is easier to edit files containing json data. By default this editor is only used for .json-files and since the json-formated package.manifest-file used to create new plugins for Umbraco has the manifest-extention Visual Studio won’t add any syntax highlighting.

This is easy to fix.

1. Go to Tools / Options

2. I the left menu click on Text Editor and then File Extention.

3. Write “manifest” in the upper left text box, choose JSON Editor in the dropdown and click on Add.

4. Hi OK, open your manifest file and – ta da!

PS. If you like the screen recorded GIF (I do) check out this awesome project: https://screentogif.codeplex.com/

Speaking at Swetugg

Sun, 07 Dec 2014 12:00:00 Z

February 2-3 next year the Swedish .NET User Group (SWENUG) will host a two day .NET-conference in Stockholm, Sweden.

Topics varies around the .NET-space and I’ve got the honor to speak about Umbraco CMS. I’m planning to do a very short basic intro about Umbraco and then dive into how to extend the editor environment using AngularJS. My experience from showing Umbraco to new users is that the Angular-based property editors really impresses people. My hope is that this session will help to further grow the Umbraco community here in Sweden.

If you would like to join, tickets only costs 500 SEK, read more at swetugg.se

Great tip for url replacing with Umbraco

Fri, 01 Aug 2014 13:53:00 Z

As long as I can remember Umbraco has shipped with a set of presets for the url replacing feature. This is the feature that takes the node name and turns it into a valid url. These presets lives in the /config/umbracoSettings.config-file and used to look something like this.

<urlReplacing removeDoubleDashes="true">
   <char org=" ">-</char>
   <char org="""></char>
   <char org="."></char>
   <char org=";"></char>
   <char org="/"></char>
   <char org=":"></char>
   <char org="+">plus</char>
   <char org="*">star</char>
   <char org="&"></char>
   <char org="?"></char>
   <char org="æ">ae</char>
   <char org="ø">oe</char>
   <char org="å">aa</char>
</urlReplacing>

In later versions of Umbraco (I think since Umbraco 7) the urlReplacing element has been removed from the default umbracoSettings.config-file and the presets are hidden. At CodeGarden14 this year I learned very much from Stephans session about the core internals of Umbraco (Slides: http://www.zpqrtbnk.net/CoreInternalsForWebsiteDevelopment.pdf) one thing was the toAscii-property of the urlReplacing-element. Since there is hundreds of different chars that you might want to replace and it’s very likely that you’ll miss some – that why they have included this great little flag. So all the configuration above can be replaced with this simple line:

<requestHandler>
  ....
    <urlReplacing toAscii="true" />
</requestHandler>

CurrentUmbracoPage or RedirectToCurrentUmbracoPage?

Wed, 07 May 2014 23:08:00 Z

I had that question in mind when I was working with a new MVC-site using Umbraco 7 and wanted to share my conclusions. Well after some googling I found this great blogpost from the Umbraco core-developer Shannon Deminick. It’s related to Umbraco 5 (RIP) but the concept still applies to the MVC-implementation in Umbraco 7 (and 6), in one of the comments he explains the difference.

So. This is the thing.

Use return CurrentUmbracoPage()

When you just want to return the current page. Here you can use the ViewData and ViewBag objects to pass data from the controller to the view and that will work just fine. Generally, you want to return to the current page if you want to keep the POST-data that was sent to the controller.

Use return RedirectToCurrentUmbracoPage()

When you really want to redirect the user. Shannon writes: “If your POST is successful, you shouldn't just return a response, you should redirect to a page so you can avoid the awful issue of having a user press refresh and have it resubmit the POST”. To pass data back to the view you’ll need to use the TempData-object that will “survive” the redirect.

So if you’re creating a form and the model state IS valid, you should perform your actions and RedirectToCurrentUmbracoPage(), if the model is not valid you should just return the CurrentUmbracoPage(). That’s why many examples look like this:

if(!ModelState.IsValid)
   return CurrentUmbracoPage()
// do stuff here
return RedirectToCurrentUmbracoPage()

Another thing to notice about the routing is “Just FYI when you POST to a SurfaceController, you are just posting to your own controller which is outside of the Umbraco process, it is just a very normal MVC post. So when you do a return CurrentUmbracoPage call, that then passes execution back to Umbraco to go look up the page that was posted from and renders it. You could in theory just return your own View(model) which will be completely outside the Umbraco process, because it is just an MVC normal controller.”

Thanks, Shannon for making this clear! #h5yr

Stored Procedures with output parameters using PetaPoco

Sat, 03 May 2014 13:36:00 Z

I’m working on a web application where I’m using the great mirco orm PetaPoco for my data access. Is a really great and super fast ORM that works with SQL Server, SQLCE. MySQL and more.

I’m not gonna cover the basics of PetaPoco in this blog post so if you have not worked with it please read the introduction from TopTen Software.

Now. In this solution we where working with stored procedures (SP) in the SQL Server which is quite simple with PetaPoco, to execute a SP called OutputDemo with two parameters, just write

var sql = Sql.Builder.Append(";EXEC OutputDemo @0, @1, "Markus",29);

So that's easy. But what if we need to grab some output parametersfrom the sp as well? That took me some more work to figure out. I googled a lot on the subject and there was not really any good recourse so i figured i had to share my solution.

First, let’s look look at the stored procedure that I’ve created for this demo

CREATE PROCEDURE [dbo].[OutputDemo]
    @name varchar(50),
    @age int,
    @resName varchar(50) OUTPUT,
    @resAge int OUTPUT
AS
SET @resAge= @age + 10
SET    @resName = 'Name: ' + @name

A super simple sp that will set the values of the output parameters depending in the value in the input parameters for name and age. So the resAge-output parameter will have the value of the inputted age plus 10, and the resName-output parameter will just be prefixed with “Name:”.

Now. To use this and to get the values back from the query there is couple of thing we need to do. First we need to create variables that holds the returning values from the output parameters.

var opName = new SqlParameter("@resName", SqlDbType.VarChar);
opName .Direction = ParameterDirection.Output;
opName .Size = 50;

var opAge= new SqlParameter("@resAge", SqlDbType.Int);
opAge.Direction = ParameterDirection.Output;
opAge.Size = 20;

This is regular SqlParameters – I’ve just ignored the fact that this would “tie” me to SQL Server since my SP’s are created in SQL Server is just don’t care about this dependency. The important thing to notice is the Direction and the Size-properties that both are mandatory. Next wee need to create the query:

var s = Sql.Builder.Append(";EXEC OutputDemo @0, @1, @2 OUTPUT, @3 OUTPUT",
           "Markus",
           29, 
           opName ,
           opAge
          );

As you see here I’m adding the word “OUTPUT” after each variable for the output parameters – this tells the ADO.NET and PetaPoco that these variables should be populated with the return values of the output parameters.

So with this code executed the value of opName should be “Name: Markus” and opAge should be 39. Here’s the complete code:

var opName = new SqlParameter("@resName", SqlDbType.VarChar);
opName .Direction = ParameterDirection.Output;
opName .Size = 50;
var opAge= new SqlParameter("@resAge", SqlDbType.Int);
opAge.Direction = ParameterDirection.Output;
opAge.Size = 20;
var s = Sql.Builder.Append(";EXEC OutputDemo @0, @1, @2 OUTPUT, @3 OUTPUT",
  "Markus",
  29, 
  opName ,
  opAge
 );
new Database().Execute(s);

The world's greatest Azure demo

Sat, 03 May 2014 11:47:00 Z

Yesterday I was listening to my favorite podcast .NET-ROCKS and heard about Troy Hunts great Azure demo - not not just a great demo - it's The world's greatest Azure demo, just wanted to share it here as well:

Umbraco 7 Image Cropper

Sun, 27 Apr 2014 21:16:00 Z

Since version 7.1 of Umbraco was released the core now contains a great image cropper. Not only that. It also contains a great image processing library called ImageProcessor written by James South (@james_m_south).

The image cropper in Umbraco 7 is really a piece of art based on the CropUp-package from Umbraco-genius Niels Kühnel (@nielskuhnel). The big “news” with the cropper is something called a “focal point” that the editor can set. When this point is in place Umbraco is smart enough to figure out any crop based on this point. This means that you don’t have to force the editor to make 20 different crops, they can just set the focus point and the different crops will be generated. We’re going to explore this more in this post and I'll show you how to quickly set up the image cropper and render the cropped image on the front end of your website.

Here is how you do

1. Set up the data type in the developer-section of Umbraco 7. Right click data types and create a new data type. Let's call it "Image Cropper".

2. Just as with the cropper from earlier versions of Umbraco we now need to set up one or more crops. Let's just use a simple crop of 120x120 px.

3. Next, we need to add this data type to one of our document types. Let’s go and do so in the settings-section. I’m giving my new property the name “image” but you can choose what ever name that suites you’re solution.

4. Now let’s upload an image and set the focus point by dragging the blue dot to the part of the image that we want to focus on. Let’s don’t create any special settings for the 120x120 crop that we created – just hit “Save and publish”.

5. Let’s go to the settings-section and open the view/template for the document type that we’ve added the image cropper to. To render the crop in on the page we need to use a method called GetCropUrl() from the IPublishedContent-type in Umbraco. Let’s add this code the view and load the page in the browser.

<img src="@Model.Content.GetCropUrl("image", "normal")" />

The first parameter is the alias of the property and the second is the name of the crop, this should look something like this.

6. As you can see Umbraco 7 created a crop based on the focus point that we provided. To prove that this really works, let’s ignore the “normal” crop and set the width and height in the method call.

<img src="@Model.Content.GetCropUrl(propertyAlias:"image", width:300, height:100)" />

This will generate an image that’s 300x100 pixels, still with the face in focus

7. Now, let’s try to move the focal point and look at the resulting crop

8. But, if we don’t like the default crops that Umbraco generates we can of course change them to look exactly like we want. Update the view-code to use the “normal” crop again and open the node with the crop back to the content-section. Click on the little thumbnail under the big picture, in the dialog that appears. Drag the slider to zoom and drag in the picture to adjust the part that you want to keep in the crop – click the “cross” in the upper right corner to save the custom crop beforeyou click save and publish.

9. Going back to our view and refreshing the page will show our new crop

The GetCropUrl()-method has a lot of properties that’s optional like width, height, quality, useCropDimensions, cacheBusterValue, ratioMode, upScale – see the source code of Umbraco 7 for more info on what they all means.

Hope you enjoy the new image cropper in Umbraco 7, follow this blog for most posts about Umbraco and please also follow me on twitter: @enkelmedia.

Tip: Looking for a integrated newsletter solution for Umbraco? Check out Newsletter Studio - sends newsletter from directly from the Umbraco backoffice.

New dates for Umbraco training in Sweden

Mon, 13 Jan 2014 02:36:00 Z

It’s been a little more than a month since Umbraco 7 was released and it feels like a great timing that we announced new dates for Umbraco training in Stockholm, Sweden. Just like last time the course will be in Swedish but the course material (slides and workbook) is in English.

Umbraco: Use the rich text editor (TinyMCE) in a custom section

Wed, 04 Dec 2013 19:30:00 Z

One requirement of Enkel Medias Umbraco-package Newsletter Studio is to render and use the built in rich text editor from Umbraco (TinyMCE) in the custom Newsletter Studio-section.

TinyMCE in a custom Umbraco 7-section

Since the backoffice of Umbraco 7 is rebuilt using AngularJS all property editors are built using JavaScript and they also rely on the current AngularJS-scope to contain some information on how to render the control. So in order to render our rich text editor (rte) we need to provide this information.

There are some different ways to render the control, some are more “hacky” than others and I’m going to walk you through some options. Just to be clear –this is not a best practice guide for JavaScript so I’ve added the JavaScript controllers in script-elements inside the views. This is something that you should not do, they should live in their own .js-files – but for simplicity I ignore that in this blog post.

Option 1 –Copy the original view

The first option is to just copy the code from the original rte-view (from the Umbraco source code). It looks something like this:

<div ng-controller="Umbraco.PropertyEditors.RTEController" class="umb-editor umb-rte">
    <textarea ng-model="model.value" rows="10" id="{{model.alias}}_rte"></textarea>
</div>

This is super simple. But it won’t work. Since Umbraco loads information about all the tabs, content, property types, values and so on for a content page when it’s loaded the RTEController assumes that the current scope has all this information. So we need to simulate that with our own controller. Let’s change the view so it looks like this:

<div ng-controller="CustomSectionEditController">    
    <ng-form>
        <div ng-controller="Umbraco.PropertyEditors.RTEController" class="umb-editor umb-rte">
            <textarea ng-model="model.value" rows="10" id="{{model.alias}}_rte"></textarea>
        </div>            
        <pre>
            Value from the RTE {{model.value}}
        </pre>
    </ng-form>
</div>

And for this code we need a controller called “CustomSectionEditController”, let’s just add a simple version of this controller:

<script type="text/javascript">
    function CustomSectionEditController($scope) {

        $scope.model = {
            alias: 'myRichtexteditor',
            config: {
                editor: {
                    toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                    stylesheets: [],
                    dimensions: { height: 400, width: 250 }
                }

            }
        };
    }
</script>

With this code in place the rich text editor (rte) should be rendered and the HTML from the editor will be populated into the $scope.model.value-property.

While this works it’s not so very flexible and another problem is that it will be hard to “lazy load” properties, values and settings since the rendering of the rte-controller could start before all your data has been downloaded.

Option 2 – Use the umb-editor directive

In the views in Umbraco all the property editors are loaded dynamically the view for editing content only uses this simple tag:

<umb-editor model="myProperty"></umb-editor>

Umb-editor is a Umbraco-specific AngularJS directive that will look at the model attribute to find out which $scope-property to use for getting rendering information, in this case it’s $scope.myProperty – so let’s add that:

<script type="text/javascript">
    function CustomSectionEditController($scope) {
        $scope.myProperty= {
            label: 'bodyText',
            description: 'Load some stuff here',
            view: 'rte',
            config: {
                editor: {
                    toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                    stylesheets: [],
                    dimensions: { height: 400, width: 250 }
                }
            }
        };
    }
</script>

As you can see with this code the $scope.myProperty.view property is called “rte” which tells AngularJS to load the rte (rich text editor)-view as the current view for this umb-editor. If we were to set $scope.myProperty.view to ‘textbox’, a textbox would be loaded. Updating the view to look like this would get this code to run:

<div ng-controller="CustomSectionEditController">    
    <ng-form>
        <umb-editor model="myProperty"></umb-editor>      
        <pre>
            Value from the RTE {{myProperty.value}}
        </pre>
    </ng-form>
</div>

This is a little bit cleaner than the approach in option 1 but we still suffer from the problem that the directive could be processed before we have loaded all our external data. For example – we would probably like to set the $scope.myProperty.value to some value that's loaded from the backend –but with this approach the directive could be processed before that data is downloaded and we’ll be left with a ugly error message.

Option 3 – Use ng-repeat and an array to “lazy load”

As far as I have seen this is the best way to load data from the backend and then render the wysiwyg-editor. In my use case I want to have a specific data type configured and when the page loads I want to get the configuration (pre values) for that data type and put that data in $scope.myProperty.config. I also want to download some content from the backend and put that in $scope.myProperty.value.

So – How do we avoid the directive from being processed before the data is loaded? A loop. Let’s put this in our view

<umb-property 
    property="property"
    ng-repeat="property in properties">
    <umb-editor model="property"></umb-editor>
</umb-property>

And then put an array of properties on the scope:

$scope.properties = [{
                        label: 'bodyText',
                        description: '',
                        view: 'rte',
                        config: {
                            editor: {}, // empty for now
                            hideLabel: true
                        }, hideLabel: true
                    }];

This would look almost the same as option 2 but. Since the ng-repeat attribute is there the directives will be reprocessed each time the $scope.properties-property change and since $scope.properties is null until after the data is downloaded the umb-editor directives will note be loaded.

The full view could look something like this:

<div ng-controller="CustomSectionEditController">    
    <ng-form>
        <umb-property 
            property="property"
            ng-repeat="property in properties">
            <umb-editor model="property"></umb-editor>
        </umb-property>
        <pre>
            Value from the RTE {{properties[0].value}}
        </pre>
    </ng-form>
</div>

And the controller like this:

<script type="text/javascript">
    function CustomSectionEditController($scope) {
        $scope.property = {
            label: 'bodyText',
            description: 'Load some stuff here',
            view: 'rte',
            config: {
                editor: {
                    toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                    stylesheets: [],
                    dimensions: { height: 400, width: 250 }
                }
            }
        };
    }
</script>

Now the last step would be to make sure that the text-value for the editor is fetched from some backend service.

<script type="text/javascript">
    function CustomSectionEditController($scope, $http) {
        $http({ method: 'GET', url: '/url/to/our/cool/service' })
            .success(function (data) {
                $scope.property = {
                    label: 'bodyText',
                    description: 'Load some stuff here',
                    view: 'rte',
                    config: {
                        editor: {
                            toolbar: ["code", "undo", "redo", "cut", "styleselect", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                            stylesheets: [],
                            dimensions: { height: 400, width: 250 }
                        }
                    },
                    value: data
                };

            })
            .error(function () {
                $scope.error = "An Error has occured while loading!";
            });
    }
</script>

As you can see we added the $http-parameter to the controller and uses it to fetch the data that we need before assigning the values to the scope. This will prevent the umb-editor directive from starting to load before all our data is loaded.

This is how I’ve solved the this issue at the moment and there may be other ways as well, please feel free to post questions or comments here below.

Cheers!

Custom sections in Umbraco 7 – Part 2 the views

Fri, 22 Nov 2013 21:07:00 Z

In the last post we talked about how to add a new custom application (or section) and a new custom tree to your Umbraco 7 backoffice. Now I’ll show you how to add views so that your sections can do something meaningful.

You could use legacy views as well but since I was rewriting Newsletter Studio to work use AngularJS and work really nice with Umbraco 7 I took this approach.

The routing

Since we added the PluginController(“CustomSection“)-attribute to our tree-class, Umbraco will route the cliend side requests to a folder in the app_plugins-folder. The logic is something like: /app_plugins/{applicationName}/{treeAlias}/{action}/itemId so in our case we’re looking at the url /#/CustomSection/CustomSectionTree/edit/dashboard and Umbraco will look for /app_plugins/customsection/backoffice/CustomSectionTree/edit.html to show as the view – so let’s create that file.

The view

Add this content to our new edit.html-file:

<script>

    function CustomSectionEditController($scope, $routeParams) {
        $scope.content = { tabs: [{ id: 1, label: "Tab 1" }, { id: 2, label: "Tab 2" }] };

        $scope.EditMode = function() {
            return $routeParams.create == 'true';
        };
    }
</script>

<div ng-controller="CustomSectionEditController">

    <umb-panel>
    <umb-header tabs="content.tabs">
        <div class="umb-headline-editor-wrapper span12 ng-scope">
            <h1 class="ng-binding">My custom section {{id}}</h1>
               </div>
    </umb-header>

    <umb-tab-view>
        <umb-tab id="tab1" rel="svensson">

        <div class="umb-pane">
            This is tab content for tab 1<br/>
           <p ng-show="EditMode()">
                   <span class="label label-warning">In create mode, this label is only showed when the controller sees the create-querystring item.</span>
           </p>
        </div>
        </umb-tab>

        <umb-tab id="tab2" rel="kalle">

        <div class="umb-pane">

                    This is tab content for tab 2
         </div>
        </umb-tab>

    </umb-tab-view>
</umb-panel>

</div>

This code will give us a view that looks like this:

Even if we could have added regular HTML in the view, I choose to include some AngularJS-stuff and some stuff that Umbraco adds on to AngularJS. The umb-tab, umb-tab-view, umb-panel-elements are something called directives which is a core concept in AngularJS. These directives hide complex logic for generating the view that’s on the right and side of our backoffice. Directives are very powerfull and can be used to create reusable code and "widgets" in your application – let’s just ignore the details of this for now and focus on the code above.

In the script-tag I create a regular JavaScript function that will act as the controller for the view, this function take a $scope-variable as parameter which will act as the "glue" between the controller and the view. $scope is a funamental part of AngularJS and should be familiar to you if you have worked with Angular before. Since the Umbraco's custom directives looks at the $scope.content.tabs-property when creating the tabs we need to populate this property with some static data – in this case the “Tab 1” and “Tab 2”-objects.

The only “magic” that you’ll need to be aware of is that Umbraco will match the id of the tab with the id of the <umb-tab>-tag. So <umb-tab id="tab1"> will be showed when you click the tab with id 1 – and <umb-tab id="tab2"> will be showed when you click the tab with id 2. Let’s look closer at the $routeParams and the CreateAction that we added to the TreeController-class in the last post.

The menu items

The MenuItemCollection, that the TreeController we created in the last post, returns a collection that just contains a ActionNew-item. This action will look for the view /app_plugins/CustomSection/Umbraco/CustomSectionTree/create.html which will be displayed when the user clicks the “Create new” button.

I have use some code from the create content-dialog – lets add this to our create.html-view.

<div class="umb-dialog-body with-footer">
    <div class="umb-pane">
    <h5><localize key="create_createUnder">Create something under </localize> {{currentNode.name}}</h5>

    <ul class="umb-actions umb-actions-child">
        <li>            
            <a href="#/CustomSection/CustomSectionTree/edit/dashboard?create=true" ng-click="nav.hideNavigation()">
                <i class="large icon-car"></i> 
                <span class="menu-label">New custom item
                    <small>Click here to create this super custom item</small>
                </span>
            </a>
        </li> 
    </ul>
    </div>        
</div>
<div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
        <button class="btn" ng-click="nav.hideDialog()">
            <localize key="buttons_somethingElse">Do something else</localize>
        </button>
</div>

Creating custom sections in Umbraco 7 - Part 1

Fri, 22 Nov 2013 20:23:00 Z

Yesterday we finally got the the first release of Umbraco 7 which introduce a new look and feel for the backoffice. Not only that – the technicall differences from V6 is huge.

Since I'm writing the popular newsletter-package Newsletter Studio for Umbraco I had look really deep into the source of Umbraco 7 to get things right.

I now want to show you how to add a custom section with a custom tree to the Umbraco backoffice – some of the things is similar to how it used to work (in V4-6) and some things are new.

Creating the application

Every section in Umbraco is called an application, so sections and applications is basically the same thing.The first thing we’ll need to do is to create the application. In this examples I will not fiddle with the xml-files or the database – I’ll use class annotations to create my section.

The first thing I’ll need to do is to create a class that implements the IApplication-interface so that Umbraco will initialize this class on start up.

[Application("CustomSection", "CustomSection","icon-car", 15)]
public class CustomSectionApplication : IApplication {}

This is not something new for V7, The "Application"-attribute basically tells Umbraco to create a new application:
Name: CustomSection
Alias: CustomSection
Icon: icon-car (the css class for the icon that will be displayed in the left side bar of the backoffice)
Sort order: 15

The next time Umbraco runs it will add an XML-element to the /config/applications.config-file that will add our new section/application to the Umbraco backoffice.

Creating the tree

Before adding the tree, Umbraco will not care about your new application. An application without a tree is not worth anything =D Right?

This part contains some new concepts for V7. Let's start with creating a new class that inherits from Umbraco.Web.Trees.TreeController, make sure to suffix the class name with “Controller” ie. CustomSectionTreeController.

public class CustomSectionTreeController : TreeController
{
}

Now we need to give Umbraco some extra information about our tree. Let's add two attributes on the class, the Tree and the PluginController-attributes.

[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree", "My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
}

PluginController

This attribute tells Umbraco that this class is part of a plugin, and it also tells Umbraco the name of that plugin. This will make Umbraco look for views inside the /app_plugin/{NameOfApplication}/-folder and not in the folder of the core-views which is the default.

Tree

This attribute is “older” and has been around since somewhere around 4.7 I think. It tells Umbraco that this is a tree-class and Umbraco will add this to the /config/trees.config-file. In V7 this attribute is mandatory for a tree that inherits from the TreeController-class as some underlying logic is looking at the attribute values to determine the name of the tree.

The properties are:
Application: CustomSection (must match the name of the application we added before)
Alias: CustomSectionTree (the name/alias of the tree)
Title: The title of the tree (used as the name of the root node)
Icon: The icon (or class) used as the tree icon.

Alright. Almost there. Now we need to add some code to show items in the tree.

[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree","My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
    protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
    {
        var nodes = new TreeNodeCollection();
        var item = this.CreateTreeNode("dashboard", id, queryStrings, "My item", "icon-truck", true);
        nodes.Add(item);
        return nodes;
    }

    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
       var menu = new MenuItemCollection();
       menu.DefaultMenuAlias = ActionNew.Instance.Alias;
        menu.Items.Add<ActionNew>("Create");
        return menu;
    }
}

This will give us something like this:

This code has two methods that are the least we need to do to create a new section.

GetTreeNodes (TreeNodeCollection)

This returns a collection of tree items, in our case we just return one item but we could of curse add more items to the collection. We use the CreateTreeNode-method from the base class to create a new node called “My item” with the id “dashboard”. Umbraco will append the id of the node to the URL later on so that we can handle the routing from our AngularJS-controllers.

GetMenuForNode (MenuItemCollection)

This method handles the “right click alternatives”. The “DefaultMenuAlias” configures which action that should be fired when we click the “touch dots” .

There's a lot of actions that you can use and you can also build your own ones.

Displaying our new section

To display our new section we need to give the current user access to it. Go to the users-section and open the edit-view for the current logged on user. In the bottom, check the checkbox for [CustomSection] and hit save. Now you’ll probably need to refresh the page using F5 to show the new section in the left side bar.

Making the [CustomSection]-text look better

Since Umbraco can’t find any language translation for our section it will use the brackets and the application name. To make this nicer, open the /umbraco/config/lang/en.xml-field and look for the <area alias=”sections”>-element. Inside that element, just add:

<key alias="CustomSection">Super Custom Section</key>

You may need to touch the root web.config file to restart the application before the new translation gets visible.

This is my first blog post about custom sections and custom trees in Umbraco 7 – next time I’ll you show how you can create the views for the new tree items.

Umbraco 7 is finally out!

Thu, 21 Nov 2013 21:38:00 Z

After weeks of hard work from the guys in the core team Umbraco 7 was released today! The biggest news is the new look and feel of the backoffice.

If you have used Umbraco before you’ll probably find your way around as the over all concepts are the same. If you know how to build websites with previous versions of Umbraco you’ll feel comfortable with V7 as well. The new backoffice has been built with the editors in mind and I must say that we’re seeing a lot of improvements! I really love the why that the people behind the design is thinking.

I’ve looked at the beta and RC-versions of V7 and provided some feedback (ie. the drag and drop into the media dialog) and I really recommend you to download the latest version and play with it! Start building your new sites with it! But it’s important to don’t leave your frustrations in your mind – share them at issues.umbraco.org so that the core team can do something about it! It’s the least each and everyone can do to contribute to this great project!

Niels Hartvig posted a nice video of the new backoffice, have a look at it here: http://umbraco.com/follow-us/blog-archive/2013/11/21/umbraco-7.aspx

My first Umbraco-training is over

Sun, 17 Nov 2013 12:33:00 Z

Last week I hosted the first Umbraco Training Courses in Sweden. We now have more than 20 new certified Umbraco developers and some new companies have become Certified Partners.

Since it was my first course I can admit that I was a little bit nervous i the beginning of the week – I always get that feeling when stepping out of my “comfort zone” and doing something that I have never done before. So far I have only got good feedback from the attendees, some even called me “excellent” – thank you very much for that. =D

I’ve been asked if we are going to have a new round of training in Sweden. Of course! But we have not decided the exact dates yet. If you want to be noticed – sign up for our newsletter.

I also would like to share to share some photos from the course =D

Level 1 attendees working on one of the exercises.

The Level 2 workbook, razor-sheet sheet and the super fancy Umbraco USB that all attendees got a copy of.

Attendees at the level 2 course.

Closest in this picture we see attendees from Chalmers in Gothenburg and from the Örebro-based company Impera

Agencies gets free newsletters

Tue, 05 Nov 2013 20:50:00 Z

I you’re a long time reader of this blog you know that I’m working hard with my newsletter-package for Umbraco – Newsletter Studio.

Today I announced some news that I hope will make some of all the web agencies out there happy. As web agencies over the world will all get a free Newsletter Studio license for their own website.

So if you your company web site runs on Umbraco, don’t wait – request your free license today!

Back from the Dutch Umbraco Festival 2013

Wed, 25 Sep 2013 14:50:00 Z

I’m back in Sweden after a great weekend in the Netherlands. Last Friday was all about Umbraco as the local user group DUUG (Dutch Umbraco User Group) was throwing an Umbraco Festival.

There were a lot of great sessions to watch, for example Niels Hartvig showed the latest about the Umbraco Concord (or Umbraco as a service) project which looks really really good! Also Jeavon Leopold (@crumpled_jeavon) and Jeroen Breuer (@j_breuer) hosted a nice framework session on there Umbraco Framework project: https://github.com/jbreuer/Hybrid-Framework-Best-Practices

Me and some other package vendors spent a lot of time in the vendors booths showing our packages for the visitors.

Here I am with the uCommerce-guy Søren Spelling Lund (@publicvoid_dk)

Just before the keynote that was held by Niels Hartvig (@umbraco)

Some loaded Umbracians waiting for more sessions.

I also had the chance to host my own session about the Newsletter Studio-package.

A very big thank you to the DUUGs-people and Richard Soeteman for inviting me over! And thank you very much to everyone who attended my session!

If you are looking for Umbraco speakers for your local event, don’t hesitate to contact me, by e-mail, on twitter: @enkelmedia or on skype: enkelmedia

Umbraco på svenska

Thu, 29 Aug 2013 07:10:00 Z

English readers: Sorry - This is between me and the " swedes"=D

Det var ett tag sedan som jag skev ett inlägg på svenska men jag kände att det var dax. I början av förra veckan blev det officiellt att jag, från och med denna höst, kommer att leda de svenska Umbraco-utbildningarna.

Det känns riktigt stort och väldigt roligt!

När jag hörde om Umbraco första gången i slutet av 2007 så tyckte jag först att det var ett krångligt och "svårgreppat" system. Kanske för att man var tvungen att ha koll på XSLT vilket jag inte hade då. Jag tror att det som lockade mig med detta CMS var att det lät mig ha full kontroll över den genererade HTML-koden. Det här var i en tid då jag precis hade fått lära mig att vi utvecklare inte skulle skriva HTML, CSS och JavaScript - allt skulle göras med ASP.NET-kontroller, det skulle bara vara att dra och släppa. Vi som varit med sedan Klassisk ASP-tiden skulle glömma allt vi visste - vi skulle upp en abstraktionsnivå.

Jag behöll lite av min förkärlek till grunderna för webben vilket har visats sig vara ett bra drag. Idag skämtar många om den kod som de tidigare generationerna av ASP.NET WebForms genererade. Idag handlar mycket om att "gå tillbaka till kärnan" och verkligen bejaka http-protokollet och webbens grundstenar.

För mig är inte det är något nytt. Umbraco CMS har låtit mig göra detta ända sedan jag upptäckte det 2007. Idag kan man till och med välja mellan WebForms och MVC som grund i sin sajt och senare i höst kommer ett helt nytt backoffice (Bella aka. Umbraco 7) som är byggt i JavaScript med AngularJS. Umbraco ger mig möjlighet att skräddarsy mina projekt efter kundernas behov och de får ett system som de verkligen kan växa med.

Det händer en hel del spännande med Umbraco CMS och jag vill verkligen tipsa dig och dina kollegor om hösten kurser där du snabbt och enkelt kommer "up to speed" med både grunderna och nyheterna i Umbraco.

Läs gärna mer om dem och tveka inte att höra av dig om du har några frågor eller funderingar.

Locked out of SQL Server

Thu, 13 Jun 2013 15:17:14 Z

Today I had problems with logging in to my newly installed SQL Server instance. During the install i choose “Windows mode” but I did mange to mess up which user that has access to SQL Server. I tried to start up in Single user mode which did not work, but I found this blog post that had a great solution:

http://www.mssqltips.com/sqlservertip/2682/recover-access-to-a-sql-server-instance/

Basically these steps:

1. Install PSExec

2. Open the command line with “Run as administrator”

3. Run this command: PsExec -s -i "C:\Program Files (x86)\Microsoft SQL Server\110\Tools\Binn\ManagementStudio\Ssms.exe"

This will open SQL Server Management Studio as the NT AUTHORITY\SYSTEM-account which has all the privileges needed.

Git Source Control System

Mon, 03 Jun 2013 21:51:00 Z

About a year ago I started to get frustrated about not being a part of the "Git-buzz". Everybody talked about git and how fantastic it was so I realized that I had to take a look at it.

I'm no Git-guru, so don't expect a deep tutorial, this is more off a diary of my experiences with learning about the git source control system.

Central vs. Distributed

I came from Microsoft's TFS (Team Foundation Server) which I liked a lot, the integrated experience with Visual Studio is awesome! But it was a little bit to "heavy" for me and it was hard to use with other systems as some of my co-workers don't use VS, work on macs etc.

The difference between central systems (TFS and Subversion) and distributed (Git and Mercurial) is that with distributed systems you don't need a central server to store the repository. Each developer has its own local copy of the both the code and the whole repository including history.

This may sound strange but is actually very nice! One example is that it very easy to create a new repository - just a one line command in the bash and you are good to go.

Another thing to notice is that you never "commit" changes to a central server, you always commit to your local repository. If you later on need to transfer you changes to someone else or to a central storage (like Github or Bitbucket) you "push" your repository there.

This could be confusing when you first look at Git. There is no central server, there is just different places (called remotes) where the repository is stored and then you push and fetch changes between them. So in other words Github, Bitbucket or even your Dropbox can be a place to store the repository BUT you don't need to store it there - its totally fine with just having the local repository on your machine.

Git vs. Mercurial

When I first started to look at Git I also found Mercurial interesting. Both these source control systems are great but I found Mercurial simpler to get started with and easier to use. Mostly, I think, because of the fact that the tooling around Mercurial was better at that time.

I would say that in an average developers work week there is no major differences in what the systems can do. But because of the "Git-buzz" I ignored the fact that Mercurial seemed easier and got down to work with learning the basics of Git (Yes, I wanted to be one of the cool guys).

Getting started

After installing Git on the machine, create a folder where you would like to keep your source code and open the git bash (right click and choose "Git bash from here"). To create a repository, write:

git init

Your repository is now created, if this is the first time you are using Git you'll also need to setup your name and email. The Git configuration can be applied both on a "per repository" basis and on a global level (per user). To set the users name for the current repository, write:

git config user.name "Your Name Here"

To set up the email, write:

git config user.email "your@email.com"

The name and email is used to associated the code that you commit with your email so that we can know who added what to the repository. You will probably have more than one repository on your computer so it's a lot better to set up a global name and email.

git config --global user.name "Your Name Here"

git config --global user.email "Your Name Here"

Commit, add and stage

There is one concept in Git that I had a hard time to understand in the beginning - staging. Because when you add a file you will need to:

Add the file to the repository
Means that you tell Git to add this file to the repository and to keep track of all the changes. This is done using "git add (filename)" or if you want git to track all new files "git add -A".
Stage the file for commit
This is the tricky part. Even if the files is added to the repo, changes are not automatically "staged" (or add) for a commit. Let's say that you change file A and B, both are added to the repo but you would like to have one commit per file. Then you can first stage file A and commit, and then stage file B and commit. Think of the stage-area as a confirmation of which changes to save in a commit. You stage your files using git add.
Commit the changes
When you want to store some changes you do that as a commit. If you have staged the files you just need to write "git commit" and you'll have to provide a commit message.
An easier way is to write: git commit -m "Message goes here".
Sometimes you would like to exclude files (ie. dlls) from the repository and you can do that by adding a .gitignore file to the root of your repository. Git will now ignore these files and you will never be prompted to add them to the tracking.

This is how git status would look when file1.txt is staged but not file2.txt

What I learned that I use daily

What you will notice when reading about Git is that it's like a "swish army knife" that can do what every you would possibly want. But I have found myself using 11 commands on a daily basis.

git status

This command show a summary of all the changes that has not been commited. It will also show untracked files that has been added to the folders that the repository watches (and that are not ignored by the .gitignore-file).

git log

The log shows the commits that has been made to the repository. Just write:

git log

I prefer a cleaner way to view my commits and by adding some parameters we can get a great look and feel:

git log --oneline --graph --decorate --all

git commit

This is the command to save the changes into a commit. If you have not added any new files (just made changes) you can write:

git commit -am "My commit message"

The a tells git to stage all changed files and the m is a shortcut for a inline commit message.

git add

If you have added files to the repository you'll need to tell Git to keep track of them. You can do that using

git add -A

The -A tells git to add all files, I tend to always use this and create ignore-rules in my .gitignore-file to avoid files that I don't want to add to the repo.

git checkout

To understand the checkout command you'll need to know about branched. Branches are used to keep different version of you code base in a certain stage. A common pattern is to have a master-branch where you always have stable code that are good to release, a development-branch where you do your development and you then merge your changes from the development-branch into the master when you are ready to release. This way you can always go back to the master branch and create a hotfix-branch to solve a urgent problem and provide a patch-release.

To switch between branches you write:

git checkout NameOfBranch

If you would like to create a new branch from the branch that you're currently on, write:

git checkout -b NameOfNewBranch

git merge

When you want to pull in changes from another branch you do that using the merge-command. You'll need to checkout the branch that you want to merge to, and write:

git merge NameOfBranchToPullIn

git branch

If you just write git branch you'll get a list if all the branches in your repository. It's a good practice to remove branches that has been merged:

git branch -d NameOfBranchToDelete

It is the magic -d that tells git to remove the branch. If the branch has not been merge you'll get an error and you need to "force"-delete the branch with

git branch -D NameOfBranchToDelete

Note: the capital D means force delete.

git tag

All commits in Git gets a strange name which is a hash ex. mmqe7yf. The commit also has a message to give the commit some meaning. But how do you know which commit is the last one in version 1.0 of your code base? That's where tagging comes in to place. To add a tag write

git tag -a V1.0 -m "Version 1.0"

Just replace the name "V1.0" and the commit message with whatever that suites your project.

git clone

The clone command is used to create a new repository and pull it down from ie. Github or Bitbucket. Both these storage-providers has examples of how to clone the repos when you view the repos on these site but basically you say

git clone https://path.to.my/repository.git

One important thing to know is that Git will add something called a "remote". Think of the remote as a storage-place or a co-worker. When you later on push and pull changes you always push to a certain remote. Most of the time I only have one default remote (ie. Github or Bitbucket) and in git the standard name for that remote is origin. So when you clone a repo from ie. Github there will automatically be a remote called origin added to your repository.

git push

When you have committed some local changed and want to push them to you storage or to a co worker just use

git push

If you have included tags on a commit, write

git push --tags

To push tags as well. If you want to push a branch you'll write:

git push origin NameOfBranch

Where origin is the name of the remote that we want to push to.

git pull

The pull command does the opposite to push, it fetches changes from the server (there is actually a git fetch-command but pull is kind of shortcut that auto-merges any changes).

To pull changes from a remote just write

git pull

This will pull down changes from the origin-remotes master branch. If you want to specify which remote and branch to pull down you can write:

git pull RemoteName BranchName

git stash

The stash is a "temporary place to store changes". Let's say that you have made some changes that are not ready to be committed but you need to checkout something else. Then you can store the changes in a stash and apply them later (or remove them if you change your mind).

Adding all current changes to the stash:

git stash

The stash can contain a list of stored stashes, to apply the top level stash write:

git stash apply

If you want to see a list of all the stashed write:

git stash list

and if you want to remove the top level stash write:

git stash pop

More on this: http://git-scm.com/book/en/Git-Tools-Stashing

git rebase

To understand the concept of rebasing you'll need to know how branches works. A branch is created out of a commit. Let's say that the master branch has three commits: A, B and C. We create a new feature-branch from the C-commit and starts to work. When we are ready to merge back to the master branch we notice that someone has added commits D and E to the master branch. Our feature-branch is now based on a commit that is not the most current one on master so when we try to merge the feature-branch into master we may have to handle some merge conflicts. We could decide to merge, handle any conflicts and then commit the merge-changes OR we could choose to rebase the feature-branch.

We can tell git to move the "base commit" for the feature branch from commit C to commit E by checking out the feature branch and write

git rebase master

This will take to latest commit from master and use that as the "base commit" for our branch. This means that all the changes from commit D and E will already be in the feature branch and our merge will now probably be very smooth without conflicts.

More on rebasing: http://git-scm.com/book/en/Git-Branching-Rebasing

Git merge with squash

If you've been working in a feature branch and created several commits you might want to merge this into your master-branch but as one big commit. Let's say we have a feature-branch called feature1 with 3 commits that we want to merge into master as one commit.

Checkout feature1 and rebase this based on master
git checkout feature1
git rebase master

Note: If there are conflicts you might need to fix them and continue with
git rebase --continue
Checkout master and squash-merge:
git checkout master
git merge feature1 --squash
Commit to master
Your working copy will now have all changes from feature1 as Staged changed. We need to commit them on the master branch.
git commit -am "Added feature1"
Remove the feature-branch.
git branch -D feature1

Note: The capital D will force delete the branch.

Git alias

An alias is a "shortcut" to a longer command. Ie. you'll get very tired of writing

git log --oneline --graph --decorate --all

Every time that you would like a nice presentation of your commits. It would be a lot cleaner to add a alias.

git config alias.logall "log --oneline --graph --decorate --all"

This will add a new alias called "logall" which will do the same as "log --oneline --graph --decorate --all". That you can use like this:

git logall

Since we added this to the local gif-config it will only work in this repository. To make it global write:

git config --global alias.logall "log --oneline --graph --decorate --all"

If you want to peek around in the config files the local config for a repository is in the hidden .git-folder and called "config". The global config is found here: " C:\Users\Username\.gifconfig". You can open them in a text editor and change the content - it doesnt matter if you write command line commands to configure or write directly in the config files.

https://git.wiki.kernel.org/index.php/Aliases

Edits - Some other stuff that I did not blog about last time

Removing a file from the repo

If you have added a file and later on wants to remove it. Just write:

git rm --cached filename

To remove the file. Make sure to update gitignore to not re-add the file again.

Why Linq2Umbraco can be a trap

Thu, 02 May 2013 06:28:00 Z

Some time ago I took over a Umbraco e-commerce website built with a custom web shop implementation. No fancy stuff, just categories, products, a basket and a checkout. The site owner complained that Umbraco was slow and that the loading times (sometime 5-10 seconds for one page) where unacceptable. Since I have been working with Umbraco for years I know that the system is superfast if used in the right way – so I defended Umbraco.

Why was the website slow?

When I was looking for the source of the “slowness” I learned something about Linq2Umbraco that I have never thought of as a problem.

Linq2Umbraco what?

If you have never heard of Linq2Umbraco it’s a very handy piece of technology included in the Umbraco core. Aaron Powell wrote this and I think it was first included in Umbraco v4.5.0?

It’s basically a way to query the published and cached Umbraco data from your code using the Linq-syntax. A query could look like this:

var products = from p in MyUmbracoContext.Products
                       where p.Price > 100
                       select p;

This approach is a lot cleaner than using for example XPath to perform the same query and a lot more readable!

To use Linq2Umbraco you just right click the “Document Types”-folder in the settings-section and Export your document types as C#-classes.

Umbraco will now generate a code file with your document types as POCO-classes and create an UmbracoContext that will be used to query the data.

This is great! What is your problem?

With great power comes great responsibility, Linq2Umbraco is great but it’s not the solution to all our problems. As Aaron writes in his article on “Why no IQueryable in LINQ to Umbraco?” Linq2Umbraco will take all the content of the xml-cache and convert it to an in memory collection and from there parse that collection.

This means that if you have 20-40 nodes in your content section during development you site will be superfast. BUT. When the site is in production and the client adds all there 5000 content nodes we run into a problem.

The project that I was working with used Linq2Umbraco for all the interaction with the Umbraco cache. Even if they just needed one node from the cache they wrote something like:

var products = (from p in MyUmbracoContext.Products
                       where p.Id == 2555
                       select p).First();

Think about that query for a while. What will happen during execution?

Answer: Linq2Umbraco will grab the XML-cache and parse that in to a in memory collection of objects. In this case with over 5000 products only just this action takes around 2-3 seconds. Our code will now run the conditions (where p.Id = 2555) on that in memory collection and return the product with an id of 2555.

Since Linq2Umbraco creates this in memory collection its very expensive to run queries on sites with a lot of document types. I ended up creating another repository implemented with XPath to get just one node, and for more advanced queries (not something I did in this project) I would look at Examine.

So to wrap up. If you know that your site may grow over something like 100 nodes, do not use Linq2Umbraco if you are not 100% sure what your are doing.

Presentation at Umbraco DK Festival

Fri, 12 Apr 2013 17:34:00 Z

Today I’m in Aarhus, Denmark for the yearly Umbraco Festival. A great day that Kraftvaerk had put together. I had the chance to show Newsletter Studio and also to tell the world about the new site newsletterstudio.org where we'll be collecting documentation, support and also selling licenses.

No its beer time =D

Umbraco Packages – Install actions and user control

Sun, 17 Mar 2013 10:23:00 Z

When you create a package for Umbraco you can specify a user control that will be loaded during the installation. This user control will be shown to the users who installs your package into his/hers Umbraco installation.

You can also add something called “Package Actions”, these are basically small actions that are configured with XML. The package actions can do stuff like adding a new section, adding a tree, adding a dashboard, add xslt/rest extensions and much more. There is actually a community project that extends this even more with a lot of features – have a look at Package Action Contrib.

If you want to take it even further you can also create your own Package Actions that you can call from your package action XML. The implementation of a Package Action is quite simple and straight forward, see this example, the only thing you need is to implement the IPackageAction-interface and put the compiled dll in the bin-folder.

Now – what’s new about this?

Nothing really. But I came to think about one thing today. In which order is everything executed? How does it work? So I came up with this little picture.

1. Copy and create

In the first step all files are copied. It’s both the files that you picked on the “Package Files”-tab when creating your package and the files needed for css, templates, avascript, macros and so on.

2. Package Actions

Next Umbraco loads all the package actions. This is important to notice: it instantiate all the IPackgeAction-classes first and then executes them in the order they are present in the XML-configuration.

So if we our configuration looked like this:

<Action runat="install" undo="true" alias="Action1"></Action>
<Action runat="install" undo="true" alias="Action3"></Action>
<Action runat="install" undo="true" alias="Action2"></Action>

Umbraco would first create an instance of each action and then call the Execute-method on Action1, Action3 and Action2 – in that order.

3. User Control

When this is done Umbraco will show the user control that you configured – if you did not configure a user control a generic message will be shown.

Yeaaaahhh I’m a Umbraco Certified Developer!!

Fri, 25 Jan 2013 15:26:00 Z

After spending a week learning about Umbraco in great Copenhagen I’m finally at the goal.

Thanks Per @perploughanse and Sebastiaan @cultiv for a great course!

And by the way if you are planning to attend a course, don’t go to “Billy Booze”-bar the night before. Bad idea.

The new data layer in Umbraco 6

Thu, 24 Jan 2013 12:10:00 Z

I actually started working on this blog post when i was i Thailand over Christmas. I sat down at the beach cafe by our hotel and my view looked something like this:

Perfect condition for reading the new Umbraco 6 source code! =D

New data layer using PetaPoco

The new data layer in Umbraco 6 is using the superfast Mirco ORM PetaPoco which is aaaaalmost as fast as hand coding the SQL queries with the ADO.NET classes – any case it’s a lot faster then ie. EF or nHibernate.

I used PetePoco in one of my projects about a year ago and I’m very happy with how it works. The implementation in Umbraco is even better than the “standard” PetaPoco as it comes with some extra classes and helper that helps you make the SQL-queries even more database agnostic.

Demo 1.0

Just to show you how simple it is to use the new data layer to fetch data from custom tables I’ll show you the simplest example.

I this example we have a custom table in the Umbraco database called 'ext_Contacts' which has three columns: ContactId, Name and Phone. First we create a POCO class to act as our model.

public class Contact
{
  public Int32 ContactId { get; set; }
  public String Name{ get; set; }
  public String Phone{ get; set; }
}

This object has no idea of what context it’s used in, it doesn't know anything about Umbraco, PetaPOCO or any other infrastructure in the project. To use the Umbraco data layer to receive a collection of contacts from the database you just simply use the this code:

// Get the current database object
var db = ApplicationContext.Current.DatabaseContext.Database;
// Fetch a collection of contacts from the db.
var listOfContacs = db.Fetch<Contact>(new Sql().Select("*").From("ext_Contacts"));

This code looks like any other PetaPOCO implementation and you could download a stand alone version of PetaPOCO and use this in you own (non Umbraco) project in the same way. The Fetch-method is smart enough to grab the data from the db-table and map it to the Contact-object. If your properties don’t match the column name you will need to do some configuration to get this working.

The great thing with this code is that it will work no matter which database you are running on – you don’t have to care. I’m going to use this approach in the next version of Newsletter Studio for Umbraco to rewrite the data access layer to not use EF any more.

With all this said you should not use this method to fetch content, media, members or anything else from the Umbraco core – then you should use the new Services that Niels Hartvig explains in this blog post.

First day with Umbraco Training in Copenhagen

Tue, 22 Jan 2013 14:17:00 Z

Today I started the first day at the level 1 course for Umbraco CMS. Most off the stuff that we talked about was very basic but I did find out some new tips and tricks that I would like to share with you.

Creating custom templates for scripting files

When you create a new macro script you will get a list of pre defined templates that you can start from.

If you want to extend this list with your own custom templates it’s very easy. Just drop your template as a “.cshtml”-file inside of the folder “\umbraco\scripting\templates\cshtml\” and your set.

Same thing goes for XSLT-templates but they are stored in “\umbraco\xslt\templates\”. If you macro template uses the new schema put it in “\umbraco\xslt\templates\Schema2\”

Highlight the current menu item

When looping out menu items I used to run a check to see if the current page id is equal to the current item in the rendered collection. If so – I added some kind of class to the generated link to indicate that this is the currently selected menu item.

Today i discovered this little Razor-helper: @nodeItem.IsAnsestorOrSelf(Model, "current", "").

I’m not sure how long it’s been there but since I often start coding from old bootstrap-projects I’ve missed this little helpful feature. If you want to have a look at it, create a new macro script in the developers section and choose the “Navigation” template.

@{ 
    @*Get the root of the website *@
    var root = Model.AncestorOrSelf(1);
}
<ul>
    @foreach (var page in root.Children.Where("Visible"))
    { 
        <li class="@page.IsAncestorOrSelf(Model, "current", "")">
            <a href="@page.Url">@page.Name</a>
        </li>
    }
</ul>

The “Razor snippets”-article from our.umbraco.org contains a lot of great tips and tricks and also the Razor Cheat Sheet is good to have!

new headline

asdasdasd

Great reading about Umbraco

Sun, 20 Jan 2013 22:45:00 Z

Last week i discovered a great resource for information about Umbraco. It's a christmas calendar that contains 24 blog posts about Umbraco and how to use it. I would like to present some of my favorite posts here.

Focus on the editors

The editors are the people who will use the system the most. Thats why I love these posts about how to make Umbraco easier to use for our editors:

http://24days.in/umbraco/2012/remember-the-editors/

http://24days.in/umbraco/2012/superhero/

Developers goodies

Another great topic is speed. I see far to many pages that are slow because the developers don´t implemented a good cache-strategy - I love the quote "not running code is the fastes way to improve you applications speed".

http://24days.in/umbraco/2012/optimise-for-speed/

Matt Brailsford shows a very simple way to implement paging using Umbraco:

http://24days.in/umbraco/2012/ajax-paging-using-alttemplates/ simple paging

The new Image control in Umbraco version 4.11 is described here:

http://24days.in/umbraco/2012/introducing-the-umbraco-image-control/

All the posts can be found here: http://24days.in/umbraco/2012/one-more-thing/

Tomorrow I'm getting on a plane to the south of Sweden and on tuesday I will attend the Umbraco course in Copenhagen! =D I'll try to write some blog posts during the week - I'm working on a post about the new data layer in Umbraco 6 based on the great micro orm PetaPoco.

Great inspiration for a monday

Mon, 17 Dec 2012 14:06:00 Z

Today I found this great infographics from Islam Abudaoud on how to stay creative!

Debugging with Umbraco

Wed, 07 Nov 2012 06:57:00 Z

Today I wanted to take a moment and share some experience when it comes to debugging an Umbraco app. There is basicly three things I use the most

1. Process debugging with Visual Studio

2. The Umbraco Log

3. The magic query strings

1. Process debugging with Visual Studio

I usually have all my macros and custom user controls inside a Visual Studio project and use IIS as the web server. To debug, just go to the Tools menu and click "Attach to process". In the list choose "w3wp.exe" and Visual Studio will debug the app. You can set breakpoints, step over code and so on. If there is an exception in the code this will be shown in Visual Studio as well.

2. The Umbraco Log

The log table in the database is a goldmine when it comes to debugging! Almost all exceptions that are thrown will show in this table. If you are having problems with macros, a package or something that runs "inside" Umbraco looking in this table will probably help you.

There is also a great tool called "F.A.L.M. Housekeeping" that can help you to view this table without having to dig into the db.

The package can be found here: http://our.umbraco.org/projects/backoffice-extensions/falm-housekeeping

3. The magic query strings

If you are running your site in debug mode, you can add a “magic query string” to the url to show debug information inside the rendered page.

If you want to se all the macro containers just add ?umbDebug=true to the end of the url.
/yada.aspx?umbDebug=true

And if you would like to se the trace information for the page, add ?umbDebugShowTrace=true.
/yada.aspx?umbDebugShowTrace=true

One thing that is very important when putting the site into production is to disable the debug mode by setting the "umbracoDebugMode" to false in web.config.

Newsletters in Umbraco

Wed, 03 Oct 2012 04:40:00 Z

Some years ago I worked on a project and needed an easy way to send newsletters from Umbraco. I looked though all the packages at our.umbraco.org and my conclusion was simple: there are no good packages.

I had two options: Integrate with an external email service or build something. I saw this as an opportunity to actually contribute something and improve the experience for the end users of Umbraco. Because at the end of the day it's always the end users, our customers, that are supposed to use the system.

To make their life easier I wanted to create a newsletter section in the Umbraco backoffice where the user can create, send and track newsletters. That's want I did.

Newsletter Studio for Umbraco

After a lot of hard work I managed to release Newsletter Studio for Umbraco which is a extentions that let's your users send newsletters and track them from the same environment as they are used to work - the back office.

The feature list is quite long

Send newsletters to members or subscribers from the Umbraco back office
Unlimited number of subscribers and newsletters in full version
Easy to create content using the same rich text editor as Umbraco
Can include dynamic content from Umbraco content nodes
Nice analytics and charts on opens and clicks
Built in support for skins and templates to control appearance
Handles bounces and lets you edit bounced subscribers
Import subscribers from different file formats.
Ships with Razor-templates to integrate into the website front end
Supports multiple smtp-servers and throttling
Hooks to extend the newsletter rendering process
Provider based model for receiving subscribers (can use sources like web shops, etc)

Hook into Umbraco

One of the best features with the package is the ability to hook into external subscriber sources. You can use the umbraco site members or write a provider that talks to your custom data source, a web shop package, web service or what ever.

This can be used to for example send newsletters to all subscribers that did not place an order the last 3 months or people that have not logged in to your community site the last months.

But, Umbraco is a CMS - not a newsletter email service?

Some would say that you should not use Umbraco as a newsletter platform. I'll say it's just a matter of having the right infrastructure. There's a lot of benefits with having a integrated solution:

No need for the end user to learn another system
Use and integrate content from the site in the newsletter
Using the "RenderTask" you can personalize the newsletters for each receiver
No need to export/import lists of subscribers. Just use the buildt in or write a custom provider that talks with your storage - it will always be up to date.

When you install Newsletter Studio you'll have to configure an outgoing sever. At the moment we only support smtp-servers so that means that you can use your hosting providers email server, your own or use a smtp-relay service like SendGrid or MailGun. This will work very good for the most scenarios, it's been tested with around 100k emails and works like a charm.

The aim for the next release is to make it possible to integrate to external APIs, like MailChimp and Campaign monitor. The end users will not see the differens - they will still use the umbraco backoffice but the package will run on a very robust infrastructure.

Want to try it? Go to: http://our.umbraco.org/projects/backoffice-extensions/newsletter-studio

What do you think about the package? Feedback? Ideas? Just drop a comment!

It's official, my pull request was approved

Mon, 17 Sep 2012 14:28:00 Z

Today I was celebrating with champagne at my office (not really but it sounds good), I have finally contributed my first lines of code to the Umbraco Core! =D

I fixed a small issue with the MetaWeblog API which makes it possible to create content from programs like Windows live writer, Word, Blogger and so on.

Issue: http://issues.umbraco.org/issue/U4-840

Changeset: http://umbraco.codeplex.com/SourceControl/network/forks/enkelmedia/umbracoMetaApiUrl/changeset/9f87c0f1fb30

How did i do it?

I was surprised by that fact that it was quite easy to contribute and I would like to describe how I did.

1. I read though the articles about how to contribute found at our.umbraco.org/contribute

2. Created an account on codeplex.com

3. Installed TortoiseHg as my Mercurial client to work the Umbraco repository. (and read this small tutorial on how to use it)

4. Created my own fork of the Umbraco repository on Codeplex (may not be needed, read last part of this page: Fork is taking to…)

5. Cloned my new fork to my local computer

6. Performed my changed to the code and made a commit.

7. Pushed the commit to my fork on Codeplex and created a pull request to the official Umbraco project.

So if you find annoying this and bugs in Umbraco, at least report them! If you have the time an knowledge, clone the repository and fix them. I got some great feedback from Sebastiaan Janssena and really learned some new stuff on the way!

All the best!

Changes to MetaWeblog API - first contribution to the Umbraco core?

Tue, 11 Sep 2012 19:05:00 Z

Today I was playing with my our public website, enkelmedia.se, where I host this blog. It’s built with Umbraco, some custom document types and some event handlers that takes care of the sorting and stuff.

One of the features that I’ve been playing with is the MetaWeblog API which makes it possible to post content to Umbraco using almost any device. You can use Windows Live Writer (like I’m doing right now), an iPhone app or any other software that supports the MetaWeblog API.

Some stuff did not work

What I found was that the implementation in Umbraco sometimes lacks in it’s handling of exceptions. I.e. clicking yes in this dialog made my blog root node disappear and I hade to consult this post by Alan Donnelly to solve it. I removed the last entries in cmsContentVersion and republished the node using the direct url /umbraco/editContent.aspx?id=yada.

Even more annoying

Was the fact that the Umbraco implementation of MetaWeblog API returns your sites url whithout scheme or ports:

yadadomain.com/blog.aspx

Window Live Writer expects something like this:

http://www.yadadomain.com/blog.aspx

And the crazy party is that there is no way to change it in the Windows Live Writer UI, the textbox is disabled:

The only way is to open “regedit” and look for this key: HKEY_CURRENT_USER\Software\Microsoft\Windows Live\Writer\Weblogs\ where you can change the settings of Live Writer.

Contribution to the core?

We’ll to be honest, until now I haven’t really taking the time to clone the repository from CodePlex before, I’ve played around with the source and used is as a reference and for documentation – but never really change any thing.

But today I read though the instructions on how to contribute and actually performed my first pull request!

http://umbraco.codeplex.com/SourceControl/network/forks/enkelmedia/umbracoMetaApiUrl/contribution/3372

Umbraco och Client Dependency Framework

Sat, 01 Sep 2012 14:13:00 Z

Hej!

I fortsättningen kommer jag skriva en och annan bloggpost på engelska för att göra informationen tillgänglig för dem som inte haft förmånen att lära sig vårt fina språk =D
So this will be my first blog post in English, and I'm going to try to explain how to use the Client Dependency Framework with Umbraco CMS.

Client what?

First of all, the Client Dependency framework helps you to include, combine and compress javascript and CSS-files used on the website. It is not Umbraco-specific but this post will focus on how to use it in Umbraco.

Why?

There are a couple of good reason to use this framework.

Compressing and combining resource files reduces load time.
UserControls och Razor macros can insert dependent files in the head-tag without any fancy pluming.

This picture shows our.umbraco.org, they are using the Client Dependency Framework, but haven't activated it. Becuse of this the browser has to download around 20 different css and javascript files.

How?

Umbraco ships with the Client Dependency framework and there is not much that you need to set up. If you want to use the framework in a user control, just add a reference to it.

<%@ Register Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" TagPrefix="cd" %>

Or, as I perfer, just add the reference to the web.config file. Since the framework will be used in a lot o places, it's much cleaner to keep the reference in web.config

</pages>
   </controls>
      ...
      <add tagPrefix="cd" namespace="ClientDependency.Core.Controls" assembly="ClientDependency.Core" />
   </controls>
</pages>

When the reference is in place, we need to add a ClientDependencyLoader-control at the place where we want to include the CSS and JavaScript-files. Just add this line of code somewhere in the head-tag of you master-template.

<cd:ClientDependencyLoader runat="server" id="Loader" />

To include resources you just need to use these two lines.

<!-- Using web forms -->
<cd:CssInclude FilePath="~/css/style-120830.css" Priority="0" runat="server"  />
<cd:JsInclude FilePath="~/scripts/jquery-1.3.1.min.js" Priority="0" runat="server" />

<!-- Using razor -->
@Html.RequiresCss("ColorScheme.css", "Styles").RequiresJs("/Js/jquery-1.3.2.min.js");

You can add resources directly in the templates or in custom user controls or razor macros, it's even possible to add them in code using attributes.

// CSS
[ClientDependency(ClientDependencyType.Css, "~/css/style.css")] 

// JavaScript
[ClientDependency(ClientDependencyType.Javascript, "~/scripts/util.js")]

Priority

Can be used when you need one file to load before another, ie. if you are using jQuery it needs to load before any plug-ins. A lower priority means it will be render before higher values.

Compression and combination

It's important to notice that Client Dependency Framework will not combine or compress files unless the compilation debug is set to false.

<compilation defaultLanguage="c#" debug="false" batch="false" targetFramework="4.0">

Another thing that took me a while to get my head around was how to reset the cache:

Change the version number in the ClientDependency config (/conifg/ ClientDependency.config)
Remove the ClientDependency folder from App_Data

Gjorde en plugin - jQueryAjaxDialog

Thu, 30 Aug 2012 16:29:00 Z

Har precis lagt till en kundarea för de av våra kunder som köper hosting-tjänster. Där kan de själva lägga till och tabort e-postadresser och forwards. För att gränssnittet skulle bli väldigt lättarbetat så valde jag att arbeta mycket med ajax och jQuery. Så pass mycket att jag byggde en plugin.

Saken är den att jag upptäckte att jag ofta ville göra saker som hade det här flödet:

Visa en dialogruta med formulär ----> Skicka en formuläret med ajax ----> Visa svar från server

Exempel på saker som skulle göras:

Visa dialogruta för att lägga till ny adress
Visa diaglogruta för att ändra lösenord
Visa dialogruta för att bekräfta borttagning

Alla dessa följer samma mönster, så jag insåg att jag borde jag göra en jQuery plugin istället för att skriva samma infrastrukturkod flera gånger (DRY - Don't repeat yourself).

Resultatet har jag lagt upp på github: https://github.com/enkelmedia/jQueryAjaxDialog

En enkel och anpassningsbar plugin som visar dialogrutan och hanterar allt med postning av själva formuläret. Allt man behöver göra är att returnera ett JSON-objekt som innehåller egenskaperna "message" (string) och "success" (bool) så sköter min plugin resten.

Umbracos media picker

Wed, 22 Aug 2012 04:38:00 Z

Jag har precis börjat arbeta med en kund som har väldigt mycket bilder i sin media section, det är ganska få mappar med väldigt många filer i varje mapp. Bilderna används på olika artiklar i content trädet och väljs med umbracos inbyggda media picker.

Problemet med denna picker är att man endast kan välja bild, vilket gjorde att min kund tidigare var tvungen att först gå in i media-sektionen och ladda upp bilder för att sedan gå till artikeln och välja den nya bilden (och leta som en galning ibland alla filer).

Jag tittade på olika lösningar på problemet en av dem skulle vara att installera DAMP-paketet som är en riktigt bra media picker, men efter ett tips från @Brannmark insåg jag att lösningen kan vara betydligt enklare än så. Det går nämligen att sätta umbracos inbyggda media picker i "advanced mode".

Gör så här:

1. Gå till developer-sektionen och välj "Media Picker" i listan över Data Types.
2. Klicka i "Show preview" och "Show advanced dialog".

2.2 Om du vill att vissa ställen har den "enkla" media pickern kan du bara skapa en ny Data Type av typen Media Picker och då ha två media pickers i listan. Högerklicka bara på "Data Types"-mappen och klicka på add.

Det här blir resultatet

Kolla http headers

Tue, 07 Aug 2012 04:22:00 Z

Idag var jag på jakt efter ett bra verktyg för att snabt kolla http-headers, självklart hade Fiddler varit ett perfekt alternativ men datorn jag satt på hade det inte installerat och jag orkade inte krångla med it-folket.

Därför hittade jag det här simpla verktyget: http://tools.seobook.com/server-header-checker/

Hur smidigt som helst!

Lansering för PNP Rederi

Mon, 06 Aug 2012 16:48:00 Z

Det var i mitten av april som jag fick kontakt med Patrik och Peter på PNP Rederi i Linköping. De behövde hjälp att skapa ett bokningssystem och en fräch hemsida för deras nystartade rederi. Bokningssystemet behövde lanseras redan i början/mitten av maj då deras resor på Göta Kanal skulle dra igång.

Nu har vi också lanserat deras nya publika webbsida, resultatet blev följande sida som är byggd i Umbraco CMS.

Layout: Daniel Berglund
Projektledning/utveckling: Markus Johansson

Startsidan med puffar och aktuella kryssningar

Bokningssidan med responsivt gränssnitt som direkt summerar priser osv. Byggt med KnockoutJS

Karta till Berg med båtens färdväg utmarkerad

Bra UML-verktyg

Fri, 03 Aug 2012 06:41:00 Z

Jag har länge varit på jakt efter ett verktyg för att modellera system, skapa flödesdiagram, konceptuella modeller, användardiagram osv. Det har varit ett tufft jobb, jag är uppriktigt förvånad över hur dåliga och krångliga många av de program som jag har testar var - och ännu mer förvånad över vad som blev min slutsats. Ett av mina störta krav är att det ska producera snygga och stilrena diagram som man kan visa för kunden - tydligen inget enkelt krav att tillgodose.

Smartdraw

Många på Stackoverflow rekommenderade verktyget Smartdraw (http://www.smartdraw.com/). Jag har testat det en aning, det är ett väldigt brett program som kan användas till i stort sätt allt. Jag tycker dock att de missat några fundamentala saker som att själv kunna skapa och spara formateringar, om jag till exempel vill ha en tonad bakgrund till ljusblå så måste jag klicka ca 6 gånger per objekt för att åstadkomma detta, för att inte tala om när man associerar objekt och programmet helt plötsligt tappar kontrollen på dessa och vissa objekt bara försvinner från arbetsytan.
Min slutsats: För ostabilt och för krångligt att skapa egna stilmallar.

Microsoft Visio

Enligt vad jag har förstått så är detta projektledarens bästa vän, men jag tycker ändå att Visio är krångligt. Diagrammen blir fulare än med Smartdraw, det är nästan lika krångligt att styla dem men på plussidan kan man ändå sätta att associationerna funkar bättre och objekten försvinner inte helt plötsligt.
Min slutsats: Stabilare än Smartdraw, men fulare diagram

Gliffy (online)

När jag googlade efter bra desktopprogram så fick jag upp denna sida där man kan skapa sina diagram online. Jag tänkte först "inte en chans att det kan funka" men faktum är att Gliffy (http://www.gliffy.com) är den editor som jag gillar bäst. Ett enkelt klick för att ändra stilen på objekten, associationerna är enkla att koppla och allt ser supersnyggt ut. Om man ska via på nackdelar så har inte Gliffy lika många typer av diagram editorn är mest fokuserad på mjukvara och på webmockups - vilket passar mig perfekt. Jag kan också bjuda in mina kunder att arbeta med diagrammen direkt i webbläsaren vilket är lite sexigt. Ett konto kostar 5 dollar i månaden och just nu känns det helt klart värt det.

Min slutsats: Jag jobbar med web och mjukvara - denna editor är optimerad för detta. Tackar.

Summering av CodeGarden 2012

Sun, 17 Jun 2012 11:18:00 Z

Det var en intressant konferens som började väldigt oväntat med att vi fick veta att man kommer sluta arbeta med Umbraco version 5, istället är det fullt fokus på version 4. Den ska göras bättre, byggas smartare och göras ännu mer flexibel.

En applikation är byggd i flera lager, själva "kärnan" i Umbraco 5 var helt enkelt för komplicerad, medan kärnan i Umbraco 4 är betydligt lättare att arbeta med. Presentationslagret (dvs det som användaren ser) renderas i V4 med webforms, i V5 var det MVC som gällde. Många tror att MVC-satsningen dör i och med detta beslut, det tror inte jag. Det finns redan nu sätt att köra Umbraco 4 med MVC som presentationslager.

Om man ska sammanfatta konferensen så är jag extremt nöjd med att ha varit där. Trots det smått chockartade beskedet dag ett så var stämningen verkligen på topp resterande dagar. Det var extremt roligt att träffa människorna bakom alla dessa "avatars" som man ser i forumet.

Det var väldigt inriktat på kod och utveckling så den som endast använder Umbraco som redaktör skulle troligen varit ganska förvirrad, det skulle vara ännu roligare om både redaktörer och utvecklare var med på konferensen så att man kan hitta ännu bättre lösningar tillsammans.

Några tankar som jag tar med mig från denna konferens

Jag är inte korkad, Umbraco 5 var för svårt för de flesta.
CropUp-paketet som presenterades är klockrent. Cropping med en "tyngpunkt" som gör att viktiga delar av bilden inte skalas bort.
SignalR är extremt coolt
Umbraco-Bingo är något jag garanterat ska sno till mina framtida personalfester.
Jag måste lära mig git och github bättre
Umbraco-utvecklare gillar att dricka öl (vissa från Norrland dricker endast sprit)
Danskar räknar/säger siffor väldigt konstigt
Mitt paket Newsletter Studio ska kunna skicka mail via SMTP, APIer eller vad som helst. Det ska vara provider-baserat så att man kan implementera sin egen "utsändnings-taktik".

Direkt från CodeGarden 2012

Thu, 14 Jun 2012 12:14:00 Z

Idag är det dag två av den årliga Umbraco -konferansen CodeGarden här i Köpenhamn. Jag kom hit igår eftermiddag och missade den omtalade keynoten då Niels Hartvig berättade att core-teamet och framstående medlemmar i Umbracos "community" kommit fram till att man ska avbryta arbetet med Umbraco 5. Det innebär i korthet att man kommer släppa version 5.2 för att sedan avbryta utvecklingen och istället fokusera på att förbättra version 4.

Det råder blandade känslor om detta beslut, det var relativt oväntat men antagligen ett klokt beslut. Många utvecklare upplevde Umbraco 5 som väldigt komplext och svårarbetat, det var få som tog steget fullt ut och satsade på plattformen. Man säger att det "är enklare förbättra Umbraco 4 än att förenkla Umbraco 5".

Personligen har jag inte investerat onödigt mycket tid i nya plattformen, den tid jag lagt ned har ändå givit mig nya idéer och ny kunskap så jag är inte bitter. Däremot förstår jag frustrationen hos dem som lagt ned mycket tid på och arbetar med stora projekt på nya plattformen.

Jag höll min presentation om Newsletter Studio för Umbraco imorse, det gick fin fint! Jag tänkte bjuda på par bilder från gårdagen, först och främst core-teamets roadmap inför framtiden.

Ska vidare på nästa föreläsning men det kommer mera...

Session på CodeGarden 2012

Fri, 18 May 2012 04:03:00 Z

Jag är väldigt stolt (och nästan lite nervös) över det faktum att jag ska hålla i en kort session på årets stora Umbracoevent, Code Garden 2012, som hålls 13-15 juni i Köpenhamn.

Jag kommer att demonstrera Enkel Medias paket Newsletter Studio som en del i en "Lighting session" som hålls dag två. För dig som aldrig hört om Newsletter Studio så är detta en "plugin" till Umbraco som gör det möjligt för redaktörer att skicka nyhetsbrev direkt via samma gränssnitt som man utför övriga uppgifter som är relaterade till hemsidan.

Du som ska till Köpenhamn på Code Garden borde ta kontakt med medlemmarna i UUGS som kommer att träffas under konferensen.

Vad är nytt i Umbraco 4.7.2?

Tue, 15 May 2012 05:04:00 Z

Det korta svaret är att det inte är några nyheter i Umbraco 4.7.2, störst fokus har enligt teamet legat på att stabilisera existerande funktioner och optimera prestandan, några av de saker som förbättrats är:

Medlemshanteringen har ändrats så att den lutar sig mer åt .NETs egen MembershipProvider, detta är endast interna ändringar som inte påverkar själva APIn.
Ökad prestanda och stabilitet i motorn för förhandsvisning.
Ny inställning för att hålla användare inloggade i backoffice finns i umbracoSettings.config, /settings/security/keepUserLoggedIn. Denna är satt till true, om man vill ha automatisk utloggning, sätt den till false.
Förbättringar och optimeringar av Razor implementationen.
Upp till 80% bättre prestanda för den som använder SQLCE.

Så uppgraderar du

För att göra en uppgradering kopierar du helt enkelt in katalogerna /bin,/umbraco & /umbraco_client. Kom dock ihåg att vissa tredjepartspaket sparas i dessa mappar.

Umbraco 4.7.2 laddas enklast ned på CodePlex: http://umbraco.codeplex.com/releases/view/81011

Vill du slippa få upp meddelandet i backoffice?

Det finns såklart tillfällen när man väljer att inte uppgradera och då kan jag rekommendera en inställning som gör att "påminnelsen" i backoffice inte hoppar fram varje gång man loggar in.

Öppna web.config och gör följande inställning:

<add key="umbracoVersionCheckPeriod" value="0" />

Umbraco och umbracoDebugMode

Wed, 28 Mar 2012 05:36:00 Z

Har tidigare skrivit ett blogginlägg om saker att tänka på när man sätter ut sin Umbraco-sajt i produktionsmiljö. Tyvärr är det för få som läst den bloggposten =D Jag ser flera riktigt stora implementationer av Umbraco som ligger ute på nätet med stora säkerhetshål, vidöppna för hackers att frossa i.

Det här inlägget tänkte jag ägna åt att berätta om debugging. När man utvecklar sin hemsida i Umbraco så kan man använda sig av olika typ av debugfunktionalitet, dessa features är endast avseda att användas vid utveckling, i produktion (dvs. när hemsidan ligger live på internet) så ska debugfunktionerna inaktiveras av två skäl:

Säkerhet

Att ha debugfunktionerna aktiverade gör att en hacker kan använda "umbDebugShowTrace=true" för att visa sidans trace information (se bild nedan), den bjuder på en hel del information om sajten, denne hacker kan också använda "umbDebug=true" för att visa sidan struktur och vart alla makron är placerade.

Prestanda

I debugläget så läger ASP.NET energi på att skapa debuginformation, att stänga av debugfunktionerna i produktionsmiljö ökar din sajts prestanda.

Användandet av umbDebugShowTrace från http://www.richardsoeteman.net

Hur gör man då?

Det är väldigt enkelt att inaktivera debugging i ASP.NET och Umbraco, två enkla inställningar i web.config:

<appSettings>
    ....
    <add key="umbracoDebugMode" value="false" />
<appSettings>

och så den här:

<compilation defaultLanguage="c#" debug="false" batch="false" targetFramework="4.0">

Glöm inte det här nästa gång du lanserar en hemsida med Umbraco som grund!

XML-sitemap från Umbraco CMS

Mon, 26 Mar 2012 06:22:00 Z

Jag tänkte göra en liten serie med tips på bra paket till Umbraco! Idag sätter vi igång med paket för att generera en XML-sitemap. Denna sitemap är till största delen till för sökmotorerna och hjälper dem att hitta till innehåll på din hemsida..

För att visa sökmotorerna att du har en sitemap bör du lägga till följande rad i din robots.txt:

Sitemap: /sitemap.xml

Självklart måste du ändra domän och sökväg till den som innehåll just din sitemap. Ett annat sätt att lägga till sin sitemap är att använda Googles verktyg för webbansvariga. Där kan du också kontrollera så att din XML-sitemap är korrekt och inte innehåller några fel.

En sitemap är ett textdokument i XML-format, man kan enkelt skapa dem själv men ännu enklare är att göra det automatiskt. När det kommer till Umbraco så finns det ett bra gäng färdiga paket, jag tänkte tipsa om några av mina favoriter:

Cultiv seach engine sitemap
Grymt paket från Sebastiaan Janssen som genererar en smidig sitemap, här kan du också ställa in olika parametrar som searchEngineSitemapChangeFreq och searchEngineSitemapPriority.
Google Sitemap for Umbraco
Av danska Jesper Ordrup, ett superenkelt paket som genererar en sitemap.

Microformats

Fri, 23 Mar 2012 13:14:00 Z

Idag har jag arbetat en hel del med att uppdatera denna sida, enkelmedia.se. Bland annat har vi byt ut kommentarsfunktionen i Umbraco bloggen till att använda Disqus istället för Facebooks Social Plugins. Tanken är att det ska bli enklare att kommentera och interagera med sajten.

Samtidigt så gjorde vi också endel tillägg "under huven" och utökade vår användning av så kallade microformats. Dessa är små taggar o koden som gör att maskiner (ofta sökmotorer) kan förstå vad som är vad på en hemsida, att bara skriva ut adressen förklarar inte för en maskin att det faktiskt är en adress. Vi ändrade bland annat mikroformats på vår kontaktsida. Nu ser koden ut ungefär så här:

<div class="vcard">
   <p><span class="tel">08 - 53 33 27 26</span></strong></p>
   <h4>Adress</h4>
   <p class="fn org">Enkel Media Stockholm AB</p>   
   <div class="adr">
   <p class="street-address">Västgötagatan 22</p>
      <p>
         <span class="postal-code">118 27</span> 
         <span class="locality">Stockholm</span>
      </p>
  </div>
</div>

Där vi börjar med en div-tag som innehåller klassen "vcard" vilket talar som att här börjar ett hCard. vcard blir till hCard? Fråga mig inte vem som kom på den logiska kopplingen. Sedan använder vi olika klass-värden för att tala om olika saker för den maskin som vill lära vårt microformat.

tel - Telefonnummer
fn org - Talar om att det är en organisation och vad den heter. Om man vill ha personlig kontaktinfo skiv bara "fn".
adr - Inleder en adress
street-address - Gatuadress
postal-code - Postnummer
locality - Stad

Det finns en massa intressant läsning om microformats och hCards, men även en smidig tjänst där du kan skapa ditt eget hCard. När du lagt upp ditt hCard kan du validara det med hjälp av Geekhood.net.

Sökmotoroptimering mina tips och tricks

Mon, 19 Mar 2012 07:05:00 Z

Arbetet med sökmotoroptimering är tidskrävande och ibland kan det vara svårt att veta vad som funkar och vad som inte funkar. Jag skulle inte vilja kalla mig för expert på området (gillar inte att överdriva), men jag har i alla fall hyfsat koll.

När det gäller SEO så kan man grovt dela in det i optimering "on site" och optimering "off site" där den sistnämnda fått större och större betydelse med åren. Ingen vet exakt vilken del som är viktigast, troligen är de lika viktiga, off site är extra viktigt om de ord du vill förknippas med är extra utsatta för konkurrens.

On site

Denna optimering är den där du som sajtägare har störst kontroll. Det handlar om allt från att koda hemsidan rätt till att framför allt skapa relevant och attraktivt innehåll, detta är något jag som webbutvecklare arbetar med dagligen.

Off site

Att optimera off site handlar i stort om att skaffa inlänkar till hemsidan från andra sidor. Ju högre PageRank sajten som länkar har dessto mer värde ger länken i Google och andra sökmotorers ögon.

Bra verktyg och bloggar

Jag tänkte dela med mig av lite länkar som jag ofta använder.

Leta efter lämpliga sökord med Google Keyword Tool
Testa placering i Google med denna sajt: http://gserp.se/
Läs Nikke Lindqvist blogg om sökmotoroptimering.
Läs den här artikeln, 99 tips till att få inlänkar.
Surfa på sajten med sökmotorns ögon, använd Seo Browser.
Pinga din blogg för gratis inläkar, använd Twingly
Google Verktyg för webbansvariga är alltid smitidigt
Se vilka som länkar till dig med Open Site Explorer
Använd webbyrån Pineberrys grymma analysverktyg
Eller denna sida som ger mer exakt information om textinnehållet.

5 iPhone-appar som rockar

Thu, 08 Mar 2012 06:12:00 Z

Det här är blogginlägget som jag önskar att någon skrev till mig för några år sedan när jag skaffade en iPhone. Det finns en miljard olika appar, de flesta är rent skräp, men här tänkte jag dela med mig av några appar som jag använder dagligen.

1. iCatcher

För den som vill hålla sig uppdaterad om det senaste i utvecklingsvärlden så kan jag starkt rekommendera att lyssna på podcasts! Det är små radioprogram som man kan lyssna på när som helst man vill. Själv gör jag det ofta när jag ska promenera, eller om jag sitter i bilen! Mina favoriter är .NET rocks och Hanselminutes som båda är amerikanska shower med inriktining på webb/.NET.

iCatcher på Itunes

2. Week Calendar

Appen för den som gillar planering. Den har flera olika vyer för presenation av kalendern, vecka, månad, arbetsvecka osv osv. Min favorit är den ovan, den liknar orginalkalendern från iOS, men de små prickarna på varje datum indikerar hur många saker som är planerat denna dag - den lilla detaljen var lätt värd pengarna för att köpa appen.

Week Calendar på Itunes

3. MobileRSS

Att läsa bloggar är ett väldigt bra sätt att hålla sig uppdaterad, jag har själv har ett konto på Google Reader, som samlar alla mina favoritbloggar på ett ställe. Appen MobileRSS kan synca med Google Reader och ger ett riktigt snyggt sätt att läsa sina favoritbloggar på både iPhone och iPad. Rekommenderas starkt!

MobileRSS på Itunes

4. Evernote

Evernote är en onlinetjänst som kan samla alla dina anteckningar, foton och ljudinspelningar från tex möten, brainstorms osv. Perfekt sätt att spara ned anteckningar, ta ett kort på en skisstavla osv. Allt samlas på ett och samma ställe. Det finns också en desktop-version av tjänsten (både PC och Mac) som syncar anteckningarna, du kan också använda tjänsten i browsern - dvs Evernote is all over the place!

Evernote på Itunes

5. Dropbox

Lagringstjänsten Dropbox har verkligen blivit lika folklig som Melodifestivalen, här kan du enkelt lägga dina filer i "molnet" dvs. de sparas på nätet och du kan komma åt dem från både en browser, från sync-programmet och från dina mobila enheter. Det är också väldigt enkelt att dela filer med vänner och kollegor. Jag använder ofta Dropbox som ett snabbt sätt att föra över filer från telefonen till datorn om man inte har tillgång till sync-sladd.

Dropbox på Itunes

Smidiga VS-mallar för Umbraco 5

Tue, 28 Feb 2012 21:37:00 Z

Det var ett tag sedan som Umbraco teamet släppte Umbraco V5 i en RTM-version (Release To Manufacturing), dvs en variant som ska vara klar för att köras i produktionsmiljö.

Jag labbade lite med att bygga ut backoffice redan när V5 var i Beta och RC-stadiet och min upplevelse är att det är hyfsat krångligt samtidigt är vissa saker betydligt enklare. Tex att skapa egna sections eller "apps", egna träd och såvidare har faktiskt blivit enklare. Strukturen för alla extenstions är också tydligare, man pratar helt enkelt om Plugins. Det kan vara en plugin, eller flera plugins som bildar ett package.

Jag kommer självklart att dela med mig mer av mina upplevelser av att bygga ut backoffice men kan börja med lite bra länkar, Shannon Deminicks blogg är ett måste för den som vill roa sig med plugins:

http://shazwazza.com/post/Umbraco-Jupiter-Plugins-Part-1.aspx

http://shazwazza.com/post/Umbraco-Jupiter-Plugins-Part-2-Routing.aspx

http://shazwazza.com/post/Umbraco-Jupiter-Plugins-Part-3-Trees.aspx

http://shazwazza.com/post/Umbraco-Jupiter-Plugins-Part-4-Editors.aspx

http://shazwazza.com/post/Umbraco-Jupiter-Plugins-Part-5-Surface-Controllers.aspx

Idagarna släppte också Morten Christensen ett gäng bra project-templates till Visual Studio för den som vill labba med egna plugins. Öppna Extenstion manager och sök på Umbraco så kommer de upp.

Razor i Umbraco, Tips och tricks

Wed, 04 Jan 2012 18:18:00 Z

Som jag bloggat om tidigare så kommer Umbraco att släpp stödet för XSLT i version 5, det blir istället fullt fokus på Razor!

På sistone har jag bland annat roat mig med att kolla in Doug Robars presentation från CodeGarden 2011 där han pratar om tips och tricks för Umbraco. Jag har också kollat igenom Razor-avsnitten på Umbraco TV – mest för att se om man kunde upptäcka något nytt. Jag antecknande lite smått och gott som jag tänkte bjuda på i detta (och kanske fler) inlägg.

Snabbvägen till Documents Types

När du arbetar med ett razor macro och vill komma åt en eller flera child-elements som är av en viss Document Type så kan man använda följande syntax:

@foreach(var node in Model.DocTypeNames) { }

Det sades i någon presentation att man skulle lägga till ett “s” i slutet på namnet på den DocType man ville komma åt men det verkar som att det funkar även utan detta s, i alla fall i version 4.7.1. Låt oss säga att du har en “NewsItemFolder” under första noden i systemet och sedan i denna listar dokument av typen “NewItem”. Då skulle följade lista alla nyheter:

@foreach(var node in Model.NewsItem.First().Children) {
   @node.Name
}

Kapa och lägg till…

Det händer ofta att man bara vill visa delar en sträng, kanske för en sammanfattning eller teaserlista. Det finns inbyggt i @Library.Truncate(). För att kunna använda detta måste du köra V4.7.1, alternativt uppgradera din macromotor genom att kopiera in “umbraco.MacroEngines.dll” från V4.7.1 till din V4.7.0-installation. Så här använder du metoden:

@Library.Truncate("Här skriver vi en massa text som sedan ska kapas", 
10, true);

Det som skrivs ut blir “Här skriver vi en massa t…”. Första parametern är indatan, sedan längden och om man vill att metoden lägger till “…” på slutet.

Om det är sant så gör det osv

Att if-statments mitt i razorkoden ser ganska klumpigt ut så därför finns @Library.If() som används så här:

@Library.If(true=true, "Skrivs vid sant", 
"Skrivs vid falskt, denna är är inte obligatorisk.");

Jag vill göra en breadcrumb

Då ska du använda dig av metoden “Ancestors” som finns på alla DynamicNodes. Så här skriver du för att lista alla “parents” hela vägen upp till root-noden.

@foreach(var node in Model.Ancestors()) {
  @node.Name<br/>
}

Detta returnerar alltså alla parents i en fin lista så att man tex. kan göra en breadcrumb.

Gruppera mera

En feature som jag verkligen gillar är InGroupsOf(intAntalPerGrupp). Denna kan anropas på alla typer av samlingar och kommer då att returnera objekt av typen “umbraco.MacroEngines.Grouping” som håller alla objekt i samlingen grupperade i grupper enligt parametern. Tex:

@foreach (var groups in Model.Children.InGroupsOf(2))    
{
  foreach (var item in groups)      
  {              
     <a href="@item.Url">@item.Name</a><br />
  }
  // Bryter efter två rader med en hr, hade också kunnat
  // vara text en ny kolumn eller liknande.
  <hr />
}

Skulle skriva ut två childs, sedan en hr-tag, två childs, en tag osv osv.

Fuska lite

Peter Gregory har skapat ett litet projekt på our.umbraco.org där han sammanställer en liten fusklapp över Umbraco och Razor, Razor DynamicNode Cheat Sheet är klockrent, ladda hem idag!

Nu orkar jag inte skriva mer! Tjejen ligger på soffan och vill att vi ska se på “Family guy”. Det finns mer Razor-tips att bjuda på så håll till godo, prenumerera gärna på min RSS men hjälp av tex Outlook eller Google Reader.

Umbraco 5 släpps i Januari

Thu, 22 Dec 2011 23:45:00 Z

Idag togs ett nytt steg i arbetet med nya den versionen av Umbraco, Umbraco V5. Man släppte en första så kallad RC (Release Candidate) vilket innebär att man är väldigt nära det slutgiltiga resultatet. Samtidigt skrev man också att man hoppas på att den nya versionen kommer att bli klar för släpp i slutet av januari 2012!

I denna Umbraco V5 RC1 har man bland annat implementerat members-delen, man har jobbat med DictionaryItems för att få till språkstödet, gjort förbättringar på DocumentTypes och även arbetat med DynamicModel för att göra det ännu enklare att skriva grymma macros. Jag tänker labba lagom mycket med detta under julen, eftersom jag drar hem till Motala och käkar mammas julmat så får jag nog återkomma i mellandagarna med en eventuell kommentar ;)

Du som är nyfiken kan redan nu ladda ned RCn från CodePlex, och läsa mer i HQs blogginlägg på Umbraco.org.

Samtidigt funderar jag. Kan alla MVC? Kommer version 5 alltid att bli det självklara valet? Vad tror du?

God Jul!!

Samtrans valde Umbraco CMS

Fri, 18 Nov 2011 05:21:00 Z

Vår senaste kund Samtrans gav oss förtroendet att implementera Umbraco CMS i den design som levererats av Vektorgrafik Stockholm.

Företaget sysslar med persontransporter för personer med speciella behov och hemsidan är en uppfräschning av deras tidigare hemsida. Läs gärna med om projketet bland våra referenser.

Dax att lägga XSLT på hyllan

Wed, 16 Nov 2011 17:04:00 Z

Böcker som gjort sitt...

För några dagar sedan skrev Niels Hartvig, grundaren av Umbraco, ett blogginlägg där han berättade att man nu kommer att släppa stödet för så kallade XSLT-makron i Umbraco.

XSLT är en teknik som används för att formatera och och omformatera XML-dokument. Eftersom hela Umbraco-sajten, i dagsläget, sparas som ett XML dokument i webbserverns cache så har XSLT varit en extremt snabb teknik för att lista och filtrera innehåll.

I Umbraco 5, som bygger på ASP.NET MVC och är en komplett ombyggnad av grunden till Umbraco, kommer man att släppa stödet för XSLT och istället satsa enbart på Razor-makron.

Jag tycker att det är bra! Som nybörjare på Umbraco minns jag att det största "hindret" för mig var just XSLT. XSLT är extremt snabbt men på samma sätt som det är snabbt är det krångligt och kräver relativt djup förstålse om XML, XPath osv. När Umbraco 5 nu istället baseras på Razor kommer den som arbetat med ASP.NET MVC att känna igen sig eftersom att Razor är den teknik som används för att programmera vyer i gränsnittet för MVC-sajter.

Så det är bara att lägga mina gamla XSLT-böcker på hyllan....

Umbraco User Group i Sverige

Tue, 08 Nov 2011 17:24:00 Z

Jag vill tipsa om den svenska användargruppen för Umbraco, UUGS (Umbraco User Group Sweden). Den startades för några månader sedan och kommer att hålla möten och seminarium med Umbraco som tema.

För att gå med, besök hemsidan uugs.se och glöm inte att joina facebook-gruppen!

Vi ses och hörs! :D

Bygga ut Umbraco Backoffice - del 1

Thu, 03 Nov 2011 06:29:00 Z

Jag tänkte gå igenom grunderna i hur man bygger ut Umbracos Backoffice/backend. Eftersom det redan finns ett bra gäng bloggposter om hur man lägger till sin egen "section" så tänkte jag fokusera på lite andra delar just nu.

Skapa egen section / application i Umbraco

Det krävs lite småfix i databasen för att skapa sin egen section, det är inte särskilt avancerat och du kan läsa utförligt hur man gör i dessa poster:

http://www.robertgray.net.au/2011/5/10/creating-a-custom-content-tree-in-umbraco.aspx

http://www.sewen.se/blogg/2010/2/26/skapa-en-custom-section-i-umbraco-(steg-1).aspx

Göra egna Webforms till Umbraco backoffice

När du ska skapa dina egna .aspx-filer för redigeringsytan så är det en bra idé att använda Umbracos egna kontroller för backoffice. De finns i umbraco.uicontrols.controls. För att använda dessa på sida måste du lägga till följande rad i början av ditt aspx-dokument.

<%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols" 
Assembly="controls" %>

När detta är fixat så kan du enkelt använda Umbracos orginal-kontroller och få din custom section att hålla samma konsekventa utseende som resten av backoffice.

Jag tänkte gå igenom några av de mesta grundläggande kontrollerna

TabView

Om du vill använda tabbar skall du ha en TabView kontroll på sidan. Varje sida behöver bara EN TabView. Du skapar sedan valfritt antal tabs i din code behinde.

I din aspx-fil:

<umb:TabView ID="MyTabView" runat="server" Width="552px" Height="392px"/>

För att lägga till tabbar används förljande kod i code behinde:

protected override void OnInit(EventArgs e)
{
   base.OnInit(e);
   
    // Lägg till ny tab på MyTabView
    var myTab = MyTabView.NewTabPage("Details");
    myTab.Controls.Add(myPane);
    // Ett tab till
     var myTab2 = MyTabView.NewTabPage("New tab");
     myTab2.Control.Add(anotherPane);
}

Pane / PropertyPane

Det blå strecket markerar "umb:Pane" och de röda boxarna är PropertyPanels. Detta samarbete mellan Pane och PropertyPane ser man ofta i Umbracos backoffice. Koden ser ut ungefär så här:

<umb:Pane ID="myPane" runat="server" Text="Settings">
  <umb:PropertyPanel ID="PropertyPanel1" runat="server" 
    Text="Database datatype">
	<!-- DropDown goes here -->
  </umb:PropertyPanel>
  <umb:PropertyPanel id="PropertyPanel2" runat="server" 
    Text="Add prevalue">
	<!-- Textbox goes here -->
  </umb:PropertyPanel>
</umb:Pane>

MenuImageButton och MenuIcon

Det finns två olika typer av knappar som kan adderas till en TabView. Visuellt syns ingen skillnad, det är knapparnas funktion som skiljer sig.

MenuImageButton - Används om du vill att knappen ska fira av ett click-event och en postback.
MenuIcon - Används om knappen istället ska anropa en javascript-funktion.

MenuImageButton:

btnImage = dataTab.Menu.NewImageButton();
btnImage.ID = id;
btnImage.Click += new ImageClickEventHandler(SaveButton_Click);
btnImage.AlternateText = "Save";
btnImage.ImageUrl = GlobalSettings.Path + "/images/editor/save.gif";

MenuIcon:

btnImageIcon = dataTab.Menu.NewIcon();
btnImageIcon.ID = "btnImageIcon";
btnImageIcon.OnClickCommand = "alert('Run javascript')";
btnImageIcon.ImageURL = GlobalSettings.Path + "/images/editor/save.gif";
btnImageIcon.AltText = "Show alert";

CodeArea

I Umbracos backoffice används ibland en inbyggd kodeditor. Den kan även du använda i dina egna projekt genom att infoga en CodeArea.

Så här kan koden se ut:

<umb:CodeArea ID="editor" ClientSaveMethod="doSubmit" CodeBase="Python" 
AutoResize="true" OffSetX="47" OffSetY="55" runat="server" />

ClientSaveMethod är inte obligatorisk och används för att hantera om användaren trycker "Ctrl+S" i editorn. Egenskapen CodeBase krävs inte heller. När du arbetar med denna CodeArea i code behinde använd egenskapen "Text" för att sätta/hämta innehållet.

Tömma Umbracos papperskorg

Tue, 25 Oct 2011 04:40:00 Z

Jag läste precis några av mina favoritbloggar om Umbraco och såg att några tipsade om hur man enkelt tömmer papperskorgen.

http://www.blogfodder.co.uk/2011/5/26/mass-delete-over-1k-nodes-from-recycle-bin-in-47

http://anthonydotnet.blogspot.com/2011/07/umbraco-empty-recycle-bin-hangs.html

Jag rekommenderar paketet "F.A.L.M Housekeeping" som dels kan radera papperskorgen men även loggar, rollbacks och mycket annat. http://our.umbraco.org/projects/backoffice-extensions/falm-housekeeping

Livsfarligt utan StringBuilder

Thu, 06 Oct 2011 14:47:00 Z

Det är egentligen helt självklart och hör till grunderna inom .NET men jag måste verkligen dela med mig av den här historien för att göra det övertydligt. Det handlar om att sätta ihop (concat) strängar. Det finns ett väldigt enkelt sätt att göra detta som ser ut ungefär så här:

strVariable += "mer saker i strängen"

Detta sätt att sätta ihop strängar har jag använt en hel del genom åren. Jag har ofta läst om att StringBuilder-klassen är snabbare och bättre eftersom att den endast håller ett objekt i minnet, den skall alltså användas när det handlar om större objekt tex om concaten sker i en loop. En kod liknande den nedan fanns i ett projekt jag fick ta över.

foreach(var yada in yadaYada)
{
  strVariable += "mer saker i strängen"
}

Funktionen som ibland hanterade tiotusentals rader var extremt seg. Kan det vara Entity Framework (som också var inblandat) som spökar? Svaret var klart och tydligt nej. Det beror på att vi inte använder StringBuilder. Loopen ovan med 15 000 rader tog cirka 25 sekunder för vår testmaskin att processa. Gissa tiden för samma loop fast med StringBuilder?

foreach(var yada in yadaYada)
{
  stringBuilder.Append("mer saker i strängen");
}

Den tog 0,21 sekunder. Det är helt sjukt vilken enorm skillnad. Enligt vad jag förstår så kommer kompilatorn att döda den gamla och skapa en ny sträng i minnet varje gång loopen körs i första exemplet, i andra, med StringBuildern används samma objekt. Värt att veta alltså:

StringBuilder.Append 00:00.0210012 sekunder
Html+html 00:26.9005386 sekunder

Intellisense på kontroller i umbraco.uicontrols

Mon, 26 Sep 2011 06:24:00 Z

När man utvecklar egna sections till Umbracos backoffice så är det lämpligt att återanvända standardkontrollerna i Umbraco. Dessa finns i umbraco.uicontrols och används genom att lägga till följande rad i början av din aspx-fil.

<%@ Register TagPrefix="umb" Namespace="umbraco.uicontrols" 
Assembly="controls" %>

När jag gjorde detta i ett nytt projekt för att tag sedan märkte jag att Visual Studio vägrade att ge mig Intellisense på kontrollerna vilket var sjukt irriterande. Efter lite googlade så hittade jag denna tråd som presenterade den enkla lösningen:

Lägg till en referens till ClientDependency.Core.dll i ditt projekt och saken är biff.

Screencasts om Umbraco CMS

Thu, 15 Sep 2011 18:06:00 Z

Vår utvecklare Markus Johansson har gjort en kort introduktion till Umbraco CMS du som skall redigera sajten ser hur enkelt det är att arbeta med detta underbara publiceringsverktyg och du som ska utveckla får upptäcka enkelheten och skalbarheten.

För dig som ska uppdatera hemsidan

För dig som är utvecklare

Kopiera databas från SQL Server 2008 till 2005

Fri, 26 Aug 2011 14:58:00 Z

I vår utvecklingsmiljö använder vi SQL Server 2008 och för ett tag sedan utvecklade vi en Umbraco-lösning med denna databas som grund. När detta skulle implementeras till kundens produktionsmiljö visade det sig att de körde SQL Server 2005. Det innebär att man inte kan kopiera mdf-filen eller skapa en backup och återställa den på servern som man annars hade kunnat göra.

Lösningen som vi kom fram till blev att scripta hela databasen så här:

1. Öppna SQL Server Managament Studio.
2. Högerklicka på den databas du vill exportera och välj "Generate Scripts"

3. I steget options glöm INTE att klicka i följande:
- Script Bindings = True
- Script for sever version = SQL Server 2005
- Script logins = True
- Script Data = True

4. Klart

EDIT:
I senare versioner av Management Studio har man ändrat valet ovan så att det ser ut så här:

Umbraco i produktionsmiljö

Fri, 26 Aug 2011 05:42:00 Z

När utvecklingen av en Umbraco-sajt är klar och hemsidan skall göras publik finns det en del saker att tänka på. Det är många moment och småsaker som kan vara lätt ass missa. Därför tänkte jag dela med mig av min nuvarande checklista.

ConnectionString - Glöm inte att ändra kopplingen till den databas som skall användas i produktionsmiljön.
Stäng av UmbracoDebug genom att sätta "umbracoDebugMode" to false i web.config.
Slipp "Uppgraderingsmeddelanden" i backend genom att sätta umbracoDisableVersionCheck till false eller umbracoVersionCheckPeriod till 0 även detta i web.config.
Sätt "CustomErrors" till RemoteOnly för att inte exponera eventuella fel till användare/hackers.
Sätt debug till false i kompileringssektionen.
Dubbelkolla att mapprättigheterna är korrekta i produktionsmiljön - Länk till artikel på umbraco.org.
Aktivera "Health Monitoring" i web.config. Då får du tex. mail om ett fel uppstår på servern. Lär mer om health monitoring.
Städa i din Umbraco-installation. Tabort gammla logposter, mediafiler och annat som tar onödig plats. Använd pluginen FALM Housekeeping av Adriano Fabri.
Ge din kund en kram.

Sortera efter datum i XSLT

Wed, 24 Aug 2011 05:35:00 Z

Jag jobbade med ett RSS-macro som skulle lista blogg inläggen från bland annat denna blogg. Mallen kräver att man kan sortera posterna efter datum i fallande ordning. Eftersom xsl-sort har ett element som heter data-type så forskade jag i om man kunde sätta danna till date - vilket inte gick. De enda värden som är gilltiga är text, number och qname.

Därför blev min lösning att konvertera datumet till siffror och sedan sortera efter nummer.

<xsl:apply-templates 
 select="$currentPage/descendant::SimpleBlogPost [@isDoc]">
   <xsl:sort 
   select="umbraco.library:FormatDateTime(postDate ,'yyyyMMddhhmmss')" 
   data-type="number" order="descending" />
</xsl:apply-templates>

Bra inspiration

Tue, 23 Aug 2011 10:32:00 Z

Jag tycker verkligen om tips-bloggen "WebAppers" som tipsar om coola gratis scripts, tips och tekniker för att göra din sajt snyggare och mer användarvänlig. Ett måste bland bokmärkena.

Länk: http://www.webappers.com

Nya sidan lanserad

Wed, 29 Jun 2011 16:05:00 Z

Nu är vår nya hemsida lanserad. Eftersom vi är stora förespråkare av Umbraco CMS så valde vi att bygga även vår egna sida med detta system som grund. Såhär ser det ut just nu när jag skriver detta blogginlägg.

För just vår hemsida har det inte krävts några enorma utbyggnader av Umbracos grund men vi har använt följande moduler:

Google Maps Datatype av Darren Fergus
Simple blog - Som är ett framtida blogg-paket som vi ska lansera för Umbraco
Syntax Highlighter 1.0 som vi själva utvecklat.

Vi har också använt oss av den nya funktionaliteten med Razor-macron som är riktigt användbar och effektiv att arbeta med!

Rest/Base i Umbraco

Wed, 23 Feb 2011 15:22:00 Z

En intressant och användbar del av Umbraco är "Base", där används REST för att på ett enkelt sätt göra det möjligt att kommunicera med Umbraco, dels från Umbracosajten, men även från externa sytstem.

Mer info om Rest (Representational State Transfer) finns bland annat här: http://sv.wikipedia.org/wiki/Representational_State_Transfer

Det är sjukt enkelt att få REST att fungera i Umbraco.

Skapa en klass med statiska methoder som skall exponeras.
Lägg assemblyt i Umbracos bin-katalog
Konfigurera Umbraco-Base i filen "restExtensions.config"
Ös på

Exempel och mer info finns här: http://umbraco.org/documentation/books/introduction-to-base/simple-base-samples

@SortOrder beter sig konstigt

Wed, 03 Nov 2010 14:26:00 Z

Jag har vid ett antal tillfällen förbryllats över hur XSLT rendering från Umbraco, trots att sen nod-lista är korrekt sorterad i backend, inte visar noderna i den ordning som den "borde".

Jag har hela tiden använt mig av denna kod för att sortera mina noder i en XSLT-loop:

<xsl:sort select="@sortOrder" order="ascending" />

Detta fram tills att jag läst en bloggpost som sa att man borde skicka med datatypen.

<xsl:sort select="@sortOrder" order="ascending" data-type="number" />

Utan egenskapen för "data-type" så hanteras numren som strängar (läs: sorteras enligt dessa principer) men när man sätter datatypen till "number" så kommer sorteringen att bli korrekt.

Fel vid uppgradering till .NET 3.5

Tue, 28 Sep 2010 14:13:00 Z

Har precis hjälpt en kund som fick problem när deras webbhotell valde att uppgradera sina gamla windows 2003-servrar med ASP.NET 2.0 till Windows 2008 och ASP.NET 3.5.

Det var flera fel som uppstod...

Inget ASP.NET Ajax Installerat

Det första felmeddelandet som visades var följande:

Assembly Load Trace: The following information can be helpful to determine why the assembly 'System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089' could not be loaded.

Detta fel uppstår när Umbraco försöker att komma åt ASP.NET Ajax. Webbhotellet hade glömt, eller stuntat i att återinstallera detta på servern vilket gjorde att dessa assemblies behövde adderas till bin-katalogen. Att kopiera in följande filer löste problemet:

System.Web.Extensions.Design.dll

System.Web.Extensions.dll

Uppdatera Web.Config för att passa .NET Framework 3.5

Den nya servern körde .NET framwork 3.5 istället för 2.0 vilket gjorde att kunden ville köra Umbraco-instanserna i denna version. Detta kräver relativt stora ändringar i web.config. Läs mer om denna uppgraderingen här:
http://umbraco.org/26156

Lösenord fungerade inte i Umbraco Backend

På en av sajterna dök ett sista problem upp. Användarnas lösenord i backend fungerade inte korrekt efter uppgraderingen. De flesta umbracoinstanserna som kördes var 4.0.2.1 - den version där hashade lösenord infördes som standard. Den instans som krånglade körde version 4.0.0 så lösningen var enkel:

Lösenorden i databasen var inte hashade, men i den nya web.config-filen förutsattes att lösenorden var hashade. Följande ändring gjordes:

<membership defaultProvider="UmbracoMembershipProvider" userIsOnlineTimeWindow="15">
             <providers>
                 <clear />
 
                <add name="UmbracoMembershipProvider" type="umbraco.providers.members.UmbracoMembershipProvider" enablePasswordRetrieval="false" enablePasswordReset="false" requiresQuestionAndAnswer="false" defaultMemberTypeAlias="Another Type" passwordFormat="Hashed" />
                 <add name="AspNetSqlMemberShipProvider" type="System.Web.Security.SqlMembershipProvider" connectionStringName="LocalSqlServer" />
                 <add name="UsersMembershipProvider" type="umbraco.providers.UsersMembershipProvider" enablePasswordRetrieval="false" enablePasswordReset="false" requiresQuestionAndAnswer="false" passwordFormat="Hashed" />
               </providers>
         </membership>

Blev till:

<membership defaultProvider="UmbracoMembershipProvider" userIsOnlineTimeWindow="15">
             <providers>
                 <clear />
                 <add name="UmbracoMembershipProvider" type="umbraco.providers.members.UmbracoMembershipProvider" enablePasswordRetrieval="false" enablePasswordReset="false" requiresQuestionAndAnswer="false" defaultMemberTypeAlias="Another Type" />
                 <add name="UsersMembershipProvider" type="umbraco.providers.UsersMembershipProvider" enablePasswordRetrieval="false" enablePasswordReset="false" requiresQuestionAndAnswer="false" />
             </providers>
         </membership>

Dvs - passwordFormat="Hashed" raderades så att umbraco inte skulle försöka hasha lösenord när de ska matchas vid inloggning.

Trädvyen i backend sludade fungera

Mon, 30 Aug 2010 14:18:00 Z

Har precis jobbat mycket med en Umbraco-lösning där jag också använder delar av AjaxControlToolkit (ACT). Detta kit skeppades för första gången av Microsoft omkring fyra-fem år sedan i sin första version, version 1.0.

Det är denna version som finns inkluderad i Umbraco 4.0.5 som jag använder i denna lösning.

Helt plötsligt, mitt under arbetet med mina UserControls och XSLT-macron upptäckte jag att backendsystemet slutat fungera. Trädvyerna expanderades inte på någon av "tabbarna", inte under content, inte media, ja ingenstans.

Jag rullade tillbaka en backup som var några månader gammal och upptäckte efter lite letande att jag refererat till en nyare version av ATC i ett av mina projekt - dessa projekt har post-build events som skriver över BIN-filerna i Umbraco-lösningen.

Dvs - Den nyare versionen (4.0) av ACT hamnade i bin-mappen på min skarpa lösning. Detta ställer alltså till problem med Umbracos backend. Jag rullade tillbaka ACT till version 1.0 vilket löste problemet.

Parametrar i Macron

Thu, 24 Jun 2010 14:19:00 Z

Både XSLT macron och UserControls kan ha parametrar. Dessa kan skrivas i direkt i ko

<umbraco:macro alias="RenderProperties" paramvalue="Parameter direkt i kod" runat="server"/>

Eller så kan värdet hämtas ifrån andra delar av systemet. Tex ifrån den aktuella noden:

<umbraco:macro alias="RenderProperties" paramvalue ="[$pageTitle]" runat="server"/>

Det finns fyra andra källor för parameter-värden i Umbraco:

Page value: [#propertyAlias]
Page properties value: [$propertyAlias]
Cookie value: [%cookieValueKey]
Request collection (tex QueryString): [@requestValueKey]

Flera värden, ibland kan man vilja ha flera värden och ta den första som faktiskt inte är noll då funkar detta:

<umbraco:macro paramvalue ="[#propertyAlias],[#propertyAlias2],my static string" />

Debugga Visual Studio med Firefox

Thu, 25 Feb 2010 15:22:00 Z

Något som stört mig ett tag är att Firefox tenderar att vara sjukt långsamt när man debuggar Visual Studio-projekt via den inbygga webservern i VS.

En snabb googling gav mig denna tråd på grymma Stack Overflow: http://stackoverflow.com/questions/24959/debugging-asp-net-with-firefox-and-visual-studio-net-very-slow-compared-to-ie

Slutsatsen är helt enkelt att man måste inaktivera ipv6 i Firefox, enklaste sättet att göra det är följande:

Skriv about:config i Firefox adressbar, klicka ja på säkerhetsmeddelandet.
Skriv disableIPv6 i filterboxen högst upp och tryck enter. Inställningen "network.dns.disableIPv6" visas.
Dubbelklicka på "false" så att värdet ändras till true.

När dessa enkla steg är fixade går det tokfort att debugga med Firefox, vilket är supernice eftersom man då kan använda sig av bland annat Firebug.

Membership och Roles

Tue, 16 Feb 2010 15:23:00 Z

Jobbar på en lösning som ska dela användare mellan en vanlig ASP.NET WebApplication och en Umbraco-Instans. Till detta skall även användarinfo kunna uppdateras med Batchar som hämtar XML-data och uppdaterar bla adressuppgifter och betalstatus.

Jag tittade närmare på två lämpliga lösningar och jag tänkte gå igenom dem här:

1. Användare i Umbraco

Spara användarna i Umbraco och jobba med dem via Umbracos API. Det visade sig att det var krångligt att få igång APIt utanför Umbraco-instansen och att allt arbete med användare och dess egenskaper i Umbraco är databasintensivt.

Ett möjligt alternativ vore att skriva direkt till Umbraco-databasen via webbappen, men alternativet känns inte aktuellt då Umbracos datastruktur är komlex och bör behandlas via dess API.

2. Användare i ASP.NET-applikationen

Skapa en skräddarsydd databas där användare sparas och sedan låta båda lösningarna hämta sina användare/roller från denna plats. Det innebär att jag måste skriva en ny MembershipProvider och RoleProvider till Umbraco, även att användarhanteringen i Umbracos backend inte fungerar fullt ut.

Lösningen

Trots arbetet med nya providers och det faktum att backend inte fungerar till 100% så valde jag lösning 2. Att ha full kontroll över användarens data och slippa avancerade databasstrukturer vid batchjobben var mer värdefullt än de få funktioner som inte fungerar i backend pga Custom Providers.

Tomma divar försvinner

Sat, 02 Jan 2010 15:23:00 Z

Upptäckte ett intressant problem med att använda divar i XSLT. Följande kod används ofta för att "cleara" divar när man kör dem flytande.

<div class="clear"></div>

I försökte använda den i ett macro, den låg "wrappad" i en annan div - såhär:

<div>
 
   <div class="clear"></div>
 
</div>

När denna proccessades av XSLT transormatorn i Umbraco så blev det renderades inte den sista stängningen av div-taggen. Jag löste det genom att köra följande kod:

  <div>

      <div class="clear">&nsbp;</div>

  </div>

Begränsa listade poster XSLT

Sun, 06 Sep 2009 19:20:00 Z

Ibland vill man tex att Umbraco ska visa de 10 senaste posterna i en nod eller kanske de 10 senaste av en speciell document type.

Så här kan man använda XSLT för att begränsa antalet poster som lämnas från en for-each-loop.

<xsl:for-each select="$currentPage/node">

<xsl:sort select="@sortOrder" order="descending"/>

    <!-- xsl-if kollar att positionen är under 11 dvs, högst 10. 
    Om så inte är fallet skrivs inget ut. -->

   <xsl:if test="position() < 11">

       <xsl:value-of select="@nodeName"/><br/>
   </xsl:if>
</xsl:for-each>

Såhär fungerar det:

<xsl:sort> Används för att sortera resultatet. Select-parametern anger efter vilket värde det skall sorteras och order-parametern anger om det skall vara fallande eller stigande ordning (ascending, descending).

XSLT-funktionen Position() returnerar nummet på den post som just nu bearbetars i loopen. Med hjälp av <xsl:if> anger vi att endast de fem första posterna ska visas, dvs poster som har ett värde under 10.

Tecknen < och > betyder samma sak som < och >, dessa tecken är skyddade i XSLT och måste därför ersättas med > och &lt&, dvs greater than och lower than.

Ny node överst i nodlistan

Tue, 30 Jun 2009 14:27:00 Z

Jag har byggt ett system till en kund som arbetar med ljud och ljus. Kunden uppdaterar själv sidan med Umbraco 4.0.2. Sidan är uppbyggd med moduler med text, bild, bildspel, video osv. Dessa sorteras sedan och visas i den ordning som listan är sorterad.

En frustrerade sak som jag upptäckte var att Umbraco automatiskt lägger till en ny nod längst ned i nodlistan. Ofta vill man ju att nya inlägg/noder ska hamna högst upp. Att sortera i omvänd ordning blir ologiskt - noderna bör ju visas på samma sätt i nodlistan som på själva sidan. Problemet med att Umbraco lägger nya noder längst ned gör att man efter varje nytt inlägg måste sorta för att få de nya inlägget/noden högst upp.

För att komma runt detta och få mina nya noder att hamna högst upp skapade jag en metod som prenumererar på händelsen "umbraco.BusinessLogic.Actions.ActionNew()" som aktiveras när en ny nod har skapats. Läs mer om händelser i på umbraco.org.

Följande kod gör att en ny nod automatiskt hamnar högst upp i nodlistan istället för tvärtom:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using umbraco;
using umbraco.interfaces;
 
using umbraco.BusinessLogic.Actions;
using umbraco.BusinessLogic.console;
using umbraco.cms.businesslogic.web;
 
namespace em.umb.sortnewnode
{
   
    public class DefaultValueHandler : umbraco.BusinessLogic.Actions.IActionHandler
    {
        string umbraco.BusinessLogic.Actions.IActionHandler.HandlerName()
        {
            return "em.umb.sortnewnode";
        }
 
        umbraco.interfaces.IAction[] umbraco.BusinessLogic.Actions.IActionHandler.ReturnActions()
        {
            return new umbraco.interfaces.IAction[] { new umbraco.BusinessLogic.Actions.ActionNew() };
        }
 
       
        Boolean umbraco.BusinessLogic.Actions.IActionHandler.Execute(umbraco.cms.businesslogic.web.Document documentObject, umbraco.interfaces.IAction action)
        {
           
 
            // Getting the fist node.
 
            Document.GetChildrenForTree(documentObject.Id);
 
 
 
           // Creating a generic list of Documents
            List<Document> docs = new List<Document>();
 
 
 
            foreach(IconI d in documentObject.Parent.Children) {
                docs.Add(new Document(d.UniqueId));
            }
 

            // Sorting the list by sortOrder using Linq.
 
            var res = (from d in docs
                       orderby d.sortOrder ascending
                       select d);
 
 
 
           // Picking the first node
 
            Document firstDoc = res.First();
 
 
 
           // Setting sortOrder on the new node, by taking the first nod minus 5.
 
            documentObject.sortOrder = firstDoc.sortOrder - 5;
 
 
 
            return true;
 
        }
    }
 
}

Självklart är jag medveten om att man kanske vill kunna ställa in detta på katalognivå eller kanske confa det i web-config - har dock inte behövt denna funktionalitet. Lovar att återkomma med eventuella uppdateringar.

Strippa HTML-taggar via XSLT och C-Sharp

Fri, 06 Mar 2009 18:26:00 Z

När innehåll från en html-editor skall visas i listor eller i andra flöden kan det vara smidigt att "stippta" eller radera/filtrera bort HTML-taggar.

Alltså detta:

<h1>Hello World</h1>
<p>I´m here</p>

Blir till:

Hello World
I´m here

Hur gör man då? Faktum är att lösningen är väldigt enkel. Jag skapade en egen c-sharp funktion som kör ett regex och sedan beräknar längden på inlägget för att veta om det skall kortas ned eller inte:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
 version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
 xmlns:msxsl="urn:schemas-microsoft-com:xslt"
 xmlns:umbraco.library="urn:umbraco.library"
 xmlns:em="urn:em"
 exclude-result-prefixes="msxml umbraco.library">


<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

<!-- ******* SCRIPTS STARTS HERE *********** -->

<msxsl:script language="CSharp" implements-prefix="em">
<![CDATA[

// Removes all HTML-taggs from parameter-string

public string generatePreview(string strHTML) {
 
 // Setting default string-length
 int intDefaultLength = 200;

// Removing HTML-tags using regex
 strHTML= Regex.Replace(strHTML, "<[^>]*>", String.Empty);

 
 if(strHTML.Length > intDefaultLength) {
  return strHTML.Substring(0,intDefaultLength) + "...";
 }
 else {
  return strHTML;
 }
}

]]>
</msxsl:script>

 <!-- ******* SCRIPTS ENDSHERE *********** -->

 

<xsl:template match="/">

<!-- The fun starts here -->

<p><xsl:value-of 
 select="em:generatePreview($currentPage/data [@alias = 'HTMLContent'])" 
 disable-output-escaping="yes"/></p>

 

</xsl:template>

</xsl:stylesheet>

Självklart kan man, om man vill skapa och kompilera sin egen extension till XSLT, då kan man ha med denna funktionalitet i sin extention. Detta är att föredra om man ska använda funktionen på många olika XSLT-mallar.

Stilmallar/CSS i Umbracos editor

Mon, 23 Feb 2009 15:41:00 Z

När man lägger till en ny stillmall (CSS) i Umbraco viasas den inte automatiskt när du redigerar innehåll i WYSIWYG-editorn TinyMCE.

För att stillmallen ska "slå igenom" och synas i editorn måste man kryssa för stillmallen i developer-delen.

Gå till Developer
Öppna upp "Data Types" och klicka på "Richtext editor".
Kryssa i de stilmallar du vill ska synas i editorn under "Related stylesheets".
Spara och nu är det bara att köra.
TIPS: Skapa en speciallstillmall om du tex vill ha en annan bakgrund i editorn än på själva sidan. Denna stilmall använder endast i editorn, inte i själva HTML-koden.

Classer i TinyMCE editorns dropdown

Mon, 23 Feb 2009 15:39:00 Z

Umbracos inbyggda texteditor "Richtext editor" som baseras på TinyMCE 3 har en dropdown som heter "Choose style".

Standardinställningen i TinyMCE är att alla klasser i de stillmallar som är bundna till editorn ska visas i dropdownen. Eftersom det oftast finns massa klasser i dessa stilmallar som man inte vill ska synas i listan har Umbraco en annan lösning.

Så här fixar du en ny klass i listan "Choose style"

Klicka dig till "Settings" och expandera "Stylesheets". Välj en av de stillmallar som visas i Umbracos Richtext editor.
Högerklicka och välj "Create" för att skapa en ny under-klass.
Döp den nya stilen till önskat namn, i rutan "styles" kan du sedan skriva CSS-markup.
Denna markup syns inte automatiskt i editor, du måste också lägga till denna markup i din stillmall. I detta fell i mallen screen.

Arbeta med Umbraco i Visual Studio 2008

Fri, 06 Feb 2009 20:16:00 Z

Ett tips för dig som utvecklar umbraco-lösningar är såklart att använda Visual Studio.

Umbraco har ju möjligheta att redigera XSLT, CSS, JavaScript och även HTML-mallar i sitt admingränsnitt.

Däremot missar man ju debugging och mycket annat som kommer tillsammans med Visual Studio.
Om du vill utveckla och debugga med Visual Studio 2008, gör såhär:

1. Skapa en ny Umbraco-installation

Ställ in databas-koppling, rättigheter osv. Filerna kan tex hamna i c:\inetpub\wwwroot\umbraco

2. Skapa ett nytt "Website Application Project"

Detta projekt ska skapas i en annan mapp än din umbraco installation.

Lägg till de mappar för de filer du vill kunna arbeta med. Jag har följande:

    * /css
    * /scripts
    * /xslt
    * /masterpages
    * /usercontrols

3. Lägg till ett "Post Build Event"
Detta körs efter att projektet har kompilerats. Syftet är att vi ska kopiera filerna från vår Web Application till vår Umbraco installation.

Klicka på "Soulution>Properties>Build Events" och lägg till följande kod under "Post Build Events" - alltså det som sker när projektet är kompilerat.

XCOPY "$(ProjectDir)bin\$(ProjectName)*.*" "C:\Inetpub\soundforce - umbraco4\bin\" /y /S
XCOPY "$(ProjectDir)usercontrols\*.ascx" "C:\Inetpub\soundforce - umbraco4\usercontrols\" /y /S
XCOPY "$(ProjectDir)xslt\*.xslt" "C:\Inetpub\umbraco4\xslt\" /y /S
XCOPY "$(ProjectDir)css\*.css" "C:\Inetpub\umbraco4\css\" /y /S
XCOPY "$(ProjectDir)scripts\*.js" "C:\Inetpub\umbraco4\scripts\" /y /S
XCOPY "$(ProjectDir)\*.pbd" "C:\Inetpub\umbraco4\" /y /S

Parametern /y gör att filer skrivs över, och /S att även underkataloger inkluderas.

4. För att debuga

    * Öppna siten i din webbläsrae
    * I Visual Studio väljer du Debug > Attach to Process och väljer w3wp.exe från listan. (På IIS on XP/2000 heter proccesen asp_net.exe).
    * Var noga med att *.pbd-filerna kopieras till umbraco-installationen.
    * Debugga för fulla muggar!