Umbraco, webbutveckling och webbdesign

jan

2021

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

Skrivet 2021-01-15 17:23 av Markus Johansson
Laddar kommentarer...

dec

2020

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)/

Skrivet 2020-12-21 09:49 av Markus Johansson
Laddar kommentarer...

jul

2020

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.

Skrivet 2020-07-16 13:16 av Markus Johansson
Laddar kommentarer...

jun

2020

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;
        }
    }
}

Skrivet 2020-06-03 09:53 av Markus Johansson
Laddar kommentarer...

mar

2020

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.

Skrivet 2020-03-22 14:31 av Markus Johansson
Laddar kommentarer...

mar

2020

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
    }
}

Skrivet 2020-03-10 14:48 av Markus Johansson
Laddar kommentarer...

okt

2019

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.

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

MVC-view model

Database mapping DTO

Model for website frontend APIs

Model for public API for 3rd parties

What is a CollectionBuilder?

How would I implement a custom CollectionBuilder?

Umbraco 7.0

Umbraco 7.1

Umbraco 7.2

Umbraco 7.3

Umbraco 7.4

Umbraco 7.5

Umbraco 7.6

Umbraco 7.7

Umbraco 7.8

Umbraco 7.9

Umbraco 7.10

Umbraco 7.11

Umbraco 7.12

Umbraco 7.13

Umbraco 7.14

Umbraco 7.15

Umbraco 8.0

Umbraco 8.1

Umbraco 8.2

Umbraco 8.3

Umbraco 8.4

Umbraco 8.5

Umbraco 8.6

Umbraco 8.7

Umbraco 8.8

Umbraco 8.9

Umbraco 8.10

Umbraco 8.11

Use annotations to indicate where views are placed