André Santos, Author at Blog IT

Straight A’s in WebPagetest with Umbraco

André Santos — Tue, 27 Nov 2018 21:40:06 +0000

Before launching a new website, there’s a checklist I go through, to make sure that everything is ready. One of the items in my checklist is to test the website against WebPagetest.

WebPagetest is a tool that was originally developed by AOL for use internally and was open-sourced in 2008 under a BSD license. The online version at www.webpagetest.org is run for the benefit of the performance community with several companies and individuals providing the testing infrastructure around the globe.

This tool tests any website against 6 major performance affecting factors, and provides a myriad of graphs and logs that make abundantly clear what might be slowing down your site.

In this post I’ll provide ways to make your site get straight A’s in WebPagetest.

Setup

To start this off, let’s setup our environment. We’ll just need the following:

Visual Studio 2017
Microsoft Azure account

In Visual Studio, let’s create a new empty ASP.NET Web Application project. Then, we’ll need the latest and greatest Umbraco NuGet package (I used version 7.12.4). Once it finishes installing, just launch the website and install Umbraco with all defaults. This will bootstrap Umbraco with the Starter Website, which we’ll use as our “guinea pig” for WebPagetest.

Next: publish it! We can use the publish wizard to automatically create our new WebApp and SQL Database in Azure. Before installing Umbraco in Azure, we’ll need to change the Web.config so that the install wizard is run again (I use Filezilla to change it in Azure):

Clear the Umbraco version number:

Clear the Umbraco connection string:

With these changes in place, we’re good to go. This time, we’ll not use the defaults in the Umbraco install wizard, since we’ll want to use the SQL Database we’ve just created in Azure.

First test

For our tests, we’ll use the people page of the Starter Website. This is the score I got with a standard (S0) database and a basic WebApp:

Since this is a very small site, only used for demonstration purposes, half of the metrics are already cleared! However, this is not usually the case for bigger websites. For this reason, I’ll still present some solutions to improve the grade for these metrics.

First Byte Time

These test measures the time it takes for the first byte to reach the client’s browser after the initial http request.

There are two main factors that influence this result:

Server power
The webpage complexity (integrations with external services, complex logic involved, etc)

How to get an A

The easiest way to mitigate this problem is by caching. You can see how to do output caching in Umbraco by reading this old post of mine: https://blogit.create.pt////andresantos/2016/06/30/umbraco-and-donut-output-cache/.

Keep-alive Enabled

Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request.

How to get an A

This setting is active by default in IIS, so, it’s also active by default in Azure WebApps, so it’s easy to get an A!

Compress Transfer

Gzip compresses your webpages, style sheets and javascripts, before sending them over to the browser. This drastically reduces transfer time since the files are much smaller.

How to get an A

Just add this setting to your Web.config file:

Compress Images

Image compression is minimizing the size in bytes of a graphics file without degrading the quality of the image to an unacceptable level.

How to get an A

In Umbraco, to get an A in this grade, you need to do two things:

Crop every image and use srcsets where you can
Use the PostProcessor plugin for Image Processor

Cropping an image is easy in Umbraco:

In order to use the PostProcessor plugin, you just need to install it via nuget: https://www.nuget.org/packages/ImageProcessor.Web.PostProcessor/1.3.1.25.

Cache Static Content

Static content is content that changes rarely. For this reason it can be cached in the user’s browser to avoid downloading the same file over and over again.

How to get an A

Just set the time it takes for the content to expire in the user’s browser and add extra mime types if you want:

Effective use of CDN

A content delivery network (CDN) refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos.

How to get an A

In Umbraco, you can achieve this last grade by doing two things:

Use an Azure Blob Storage for media storage by installing this nuget package: https://github.com/JimBobSquarePants/UmbracoFileSystemProviders.Azure.
Create an Azure CDN for serving these blobs through a content delivery network.

After creating an Azure CDN service and waiting about an hour for it to be available, the following presents my configuration for the media assets to be provided by it:

Conclusion

So, if you followed these tips correctly, you’ll be able to run WebPagetest and get the same result as I did:

You can find the complete report here: https://www.webpagetest.org/result/181127_2A_bea6941dcd20d38ab54c29409fca9363/.

The post Straight A’s in WebPagetest with Umbraco appeared first on Blog IT.

Redirecting 2 domains from http to https and non-www to www

André Santos — Tue, 30 Oct 2018 12:25:59 +0000

Recently I had to configure some redirections in a website that contains two different domains.

Both use https and I want the main site, which uses the primary domain, to only be accessible through it’s www version. For the second site, since it’s a sub-domain, I only want it to only be available in https.

Let’s say the domain is mydomain.com and the subdomain is mysub.mydomain.com. The only URLs I want to be available are:

https://www.mydomain.com
https://mysub.mydomain.com

Typically I would make the non-www to www redirection through the DNS provider, but for this website it was not possible.

The following is the configuration I used in my Web.config:

Hope this helps!

The post Redirecting 2 domains from http to https and non-www to www appeared first on Blog IT.

KendoUI Grid, OData, WebAPI and Entity Framework

André Santos — Wed, 05 Jul 2017 10:42:53 +0000

In the latest project I was involved with, there was a need to present database tables data directly in the Umbraco’s backoffice, where all CRUD operations must be supported. This tables could be something like 1000 to 1 million rows and both the website and database would be hosted in Azure, in a WebApp and SQL Database respectively. Users should be able to create complex filters and order the data as they wish as well as update the data individually and in batch.

From the get-go there were some challenges we needed to overcome in order to create an usable system, that was user-friendly, fast, reliable, and where no conflitcts would come up when data was being updated from multiple users.

The solution was a new Umbraco Package we called Search Manager (since the database tables ultimately feed an Azure Search index) that uses Telerik’s Kendo UI Grid, WebAPI and Entity Framework. The following presents the process it took to reach the end result.

Step 1

We created a simple Umbraco Package that implemented a Kendo UI Grid which got its data from a WebAPI method that returned all rows from a table using Petapoco.

This allowed us to have the complete table data in memory using a Kendo UI Grid. It worked great but had major problems:

A table with around 40k rows was actually a 40 MBs json download in order to populate the grid
Users could be working with outdated data, since it was loaded in memory and changes could have been made to the source

Step 2

We started using the server paging feature of the Kendo Grid. This dropped the download size greatly, but we still had problems:

Even though we are working with only a subset of results client-side, we were still getting the complete table data server-side, using petapoco.

We needed an easy way to translate the client-side queries, such as filters, paging, order, etc to SQL queries.

Step 3

We changed the type of queries being generated by the Grid to OData. Using the OData WebAPI nuget package we are able to map the odata query to a C# object and then directly apply the query to any IQueryable data.

Petapoco does not provide any IQueryable data support, so we changed our ORM to Entity Framework, which does, and voilá!

Finally

With everything in place, we are able to have a filtered subset of results in a Grid, that gets exactly what it needs to display from a dynamically generated SQL query.

It is fast because we only get exactly what we need:

An OData query generated by the Kendo UI Grid looks like this:

http://localhost:14231/umbraco/backoffice/SearchManager/PricesApi/Read?%24inlinecount=allpages&%24top=20&%24skip=40&%24orderby=ProviderName+desc&%24filter=(NatureProcCode+eq+%27exames%27+and+AvgAmtClaimed+gt+10)

Which is translated to the follwing SQL query:

exec sp_executesql N'SELECT 
    [Project1].[Approved] AS [Approved], 
    [Project1].[DiffWeightedRate] AS [DiffWeightedRate], 
    [Project1].[SubmitPrvId] AS [SubmitPrvId], 
    [Project1].[PracticeSeq] AS [PracticeSeq], 
    [Project1].[NatureProcCode] AS [NatureProcCode], 
    [Project1].[GroupProcCode] AS [GroupProcCode], 
    [Project1].[Network] AS [Network], 
    [Project1].[AmtClaimedWeighted] AS [AmtClaimedWeighted], 
    [Project1].[ManualPrice] AS [ManualPrice], 
    [Project1].[IsImported] AS [IsImported], 
    [Project1].[DiffCalculatedRate] AS [DiffCalculatedRate], 
    [Project1].[AmtContract] AS [AmtContract], 
    [Project1].[AvgAmtClaimed] AS [AvgAmtClaimed], 
    [Project1].[ProviderName] AS [ProviderName], 
    [Project1].[ClinicName] AS [ClinicName]
    FROM ( SELECT 
        [Extent1].[Approved] AS [Approved], 
        [Extent1].[DiffWeightedRate] AS [DiffWeightedRate], 
        [Extent1].[SubmitPrvId] AS [SubmitPrvId], 
        [Extent1].[PracticeSeq] AS [PracticeSeq], 
        [Extent1].[NatureProcCode] AS [NatureProcCode], 
        [Extent1].[GroupProcCode] AS [GroupProcCode], 
        [Extent1].[Network] AS [Network], 
        [Extent1].[AmtClaimedWeighted] AS [AmtClaimedWeighted], 
        [Extent1].[ManualPrice] AS [ManualPrice], 
        [Extent1].[IsImported] AS [IsImported], 
        [Extent1].[DiffCalculatedRate] AS [DiffCalculatedRate], 
        [Extent1].[AmtContract] AS [AmtContract], 
        [Extent1].[AvgAmtClaimed] AS [AvgAmtClaimed], 
        [Extent1].[ProviderName] AS [ProviderName], 
        [Extent1].[ClinicName] AS [ClinicName]
        FROM (SELECT 
    [PriceGrid].[Approved] AS [Approved], 
    [PriceGrid].[DiffWeightedRate] AS [DiffWeightedRate], 
    [PriceGrid].[SubmitPrvId] AS [SubmitPrvId], 
    [PriceGrid].[PracticeSeq] AS [PracticeSeq], 
    [PriceGrid].[NatureProcCode] AS [NatureProcCode], 
    [PriceGrid].[GroupProcCode] AS [GroupProcCode], 
    [PriceGrid].[Network] AS [Network], 
    [PriceGrid].[AmtClaimedWeighted] AS [AmtClaimedWeighted], 
    [PriceGrid].[ManualPrice] AS [ManualPrice], 
    [PriceGrid].[IsImported] AS [IsImported], 
    [PriceGrid].[DiffCalculatedRate] AS [DiffCalculatedRate], 
    [PriceGrid].[AmtContract] AS [AmtContract], 
    [PriceGrid].[AvgAmtClaimed] AS [AvgAmtClaimed], 
    [PriceGrid].[ProviderName] AS [ProviderName], 
    [PriceGrid].[ClinicName] AS [ClinicName]
    FROM [dbo].[PriceGrid] AS [PriceGrid]) AS [Extent1]
        WHERE ([Extent1].[NatureProcCode] = @p__linq__0) AND ([Extent1].[AvgAmtClaimed] > @p__linq__1)
    )  AS [Project1]
    ORDER BY [Project1].[ProviderName] DESC, [Project1].[AmtClaimedWeighted] ASC, [Project1].[AmtContract] ASC, [Project1].[Approved] ASC, [Project1].[AvgAmtClaimed] ASC, [Project1].[ClinicName] ASC, [Project1].[DiffCalculatedRate] ASC, [Project1].[DiffWeightedRate] ASC, [Project1].[GroupProcCode] ASC, [Project1].[IsImported] ASC, [Project1].[ManualPrice] ASC, [Project1].[NatureProcCode] ASC, [Project1].[Network] ASC, [Project1].[PracticeSeq] ASC, [Project1].[SubmitPrvId] ASC
    OFFSET @p__linq__2 ROWS FETCH NEXT @p__linq__3 ROWS ONLY  option (Recompile)',N'@p__linq__0 varchar(8000),@p__linq__1 decimal(2,0),@p__linq__2 int,@p__linq__3 int',@p__linq__0='exames',@p__linq__1=10,@p__linq__2=40,@p__linq__3=20

It’s user-friendly and reliable because users can filter the data as if they were using an excel file on steroids
It avoids conflicts because we only get a subset of the results each time and each change is commited in a single transaction

Code samples:

grid = $("#grid").kendoGrid({
                dataSource: new kendo.data.DataSource({
                    transport: transport,
                    schema: schema,
                    serverFiltering: true,
                    serverPaging: true,
                    serverSorting: true,
                    type: "odata",
                    pageSize: 20
                }),
                dataBound: onDataBound,
                pageable: true,
                filterable: true,
                sortable: true,
                scrollable: false,
                navigatable: true,
                resizable: true,
                batch: true,
                columnMenu: true,
                editable: true,
                toolbar: [
					{ template: 'Guardar Alterações' },
					{ name: "cancel", text: "Cancelar" },
                ],
                columns: [...]
            });

[HttpGet]
        public IHttpActionResult Read(ODataQueryOptions opts)
        {
            Mapper.CreateMap();

            using (var context = new EntitiesContext())
            {
                using (var qh = new HintScope(context, QueryHintType.Recompile))
                {
                    List results = opts
                        .ApplyTo(context.PriceGrids)
                        .Cast()
                        .ToList();

                    List boEntities = results.Select(x => Mapper.Map(x)).ToList();

                    PriceResponse response = new PriceResponse()
                    {
                        Entities = boEntities,
                        Total = Request.ODataProperties().TotalCount.HasValue ? Request.ODataProperties().TotalCount.Value : 0
                    };

                    return Ok(response);
                }
            }
        }

The post KendoUI Grid, OData, WebAPI and Entity Framework appeared first on Blog IT.

First ever Lisbon Umbraco Meetup!

André Santos — Mon, 21 Nov 2016 10:26:33 +0000

The first ever Umbraco Meetup in Portugal is going to be held this Thursday at Create IT offices in Lisbon. The event filled up fast which leads me to believe that Umbraco is getting recognized as one of the best CMS’s to work with.

We’ll try to record some of it, and share it on youtube!

Lisbon Umbraco Meetup

Lisbon, PT
105 Members

The Lisbon Umbraco Meetup is a networking group for anyone interested in Umbraco. We’re planning on having at least one formal presentation followed by some lively debates or …

Check out this Meetup Group →

The post First ever Lisbon Umbraco Meetup! appeared first on Blog IT.

Umbraco and Donut Output Cache

André Santos — Thu, 30 Jun 2016 14:22:01 +0000

Donut Output Caching is a type of output caching where certain parts of a web page are not cached. It’s a simple way of boosting your site performance!

ASP.NET doesn’t provide a native way of donut output caching, so we must resort to a great NuGet package called MVCDonutCaching. You can read all about it here: http://www.devtrends.co.uk/blog/donut-output-caching-in-asp.net-mvc-3.

Since Umbraco is built on top of ASP.NET MVC, we can easily use this package on our websites. There are, however, some caveats, because Umbraco doesn’t use the native MVC routing.

For Umbraco, every page that uses the same document type is processed through the same route, therefore, if we have 100 news articles that use the NewsItem document type, from the moment we open one news article page, every other news item page will display the same information, despite having a different URL!

The way to bypass this issue is the following:

Create a Global.cs file that includes the logic to cache a page based on their url and not the document type

namespace CreateIT.Web
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Umbraco.Web;

    public class Global : UmbracoApplication
    {
        public override string GetVaryByCustomString(HttpContext context, string custom)
        {
            if (custom.ToLower() == "url")
            {
                return "url=" + context.Request.Url.AbsoluteUri;
            }

            return base.GetVaryByCustomString(context, custom);
        }
    }
}

Then, instruct Umbraco to use this class when launching the UmbracoApplication by changing the Global.asax file:

<%@ Application Codebehind="Global.cs" Inherits="CreateIT.Web.Global" Language="C#" %>

Finally, setup an Output Cache profile in your Web.config:

<system.web>
    (...)
    <caching>
      <outputCacheSettings>
        <outputCacheProfiles>
          <add enabled="true" name="CreateIT.Actions" duration="900" location="Server" varyByCustom="url" varyByParam="*" />
        </outputCacheProfiles>
      </outputCacheSettings>
    </caching>
</system.web>

And decorate the chosen controllers (that you used to hijack the Umbraco routes) with the Donut Output Cache attribute:

[DonutOutputCache(CacheProfile = "CreateIT.Actions")]
public class HomepageController : Umbraco.Web.Mvc.RenderMvcController
{

If you wish to exclude a certain part of your page from the cache, just create a Surface Controller action that returns a partial view and use the extension method provided by MVCDonutCaching for @Html.Action().

The post Umbraco and Donut Output Cache appeared first on Blog IT.

Umbraco profiler

André Santos — Wed, 08 Jun 2016 11:16:45 +0000

Quick tip:

If you need to find which part of your Umbraco application is slowing the site down, follow these steps:

Set the debug property of the compilation section of your Web.config to true: debug=”true” batch=”false” targetFramework=”4.5″>
- If you’re using an older version of Umbraco, you also probably need to set the umbracoDebugMode app setting to true in the same config file:
Add the query string ?umbdebug=true to your Umbraco page URL
Thats it!

umbraco profiler

It uses Mini Profiler, so you can add your own profile stops, but out-of-the-box it already analyses the time it takes to render each view.

Happy profiling!

The post Umbraco profiler appeared first on Blog IT.

Remote resource handling in a MVC website project

André Santos — Fri, 15 Apr 2016 18:01:43 +0000

I don’t have very fond memories of using .Net resource files (.resx) to handle the translation of static web page elements such as form labels.

The Visual Studio resx editor was slow and using it to change resources that were more than a single line of text was a pain. I still have nightmares where I’m trying to edit complete email templates on a single field of a resx file…

The biggest problem with resource files, however, is that they are included in the project. This creates a problem for both the developers and the content managers, since the content managers are not able to change resources themselves, and the developers need to be changing resources files when they could be doing something productive.

The following will show a way to handle resource items in a MVC website project, where the resources can be stored wherever they are more easily handled by content managers: a SharePoint list, a database table, an excel file, or something completely different.

The process is really simple:

Select every resource item key needed to render the current page
Fetch the resources associated with the keys provided at the end of the current action
Populate a ViewModel property with the resource items
Use the resource items in their respective places in the markup

1 – Compile a list of resource keys

Typically in a website, there are certain areas of the layout that are common across all pages, the header and the footer being the most prominent candidates. There are, however, other areas that can be reused across a smaller subset of pages such as a common banner in the FAQ pages. Taking this into account, we split the resource keys by groups, where each group (a list of strings) contains every resource key needed for that area and load them on each action, like so:

model.ContentResourceKeys = new List<string>();
model.ContentResourceKeys.AddRange(ResourceHelper.SOCIALNETWORK_RESOURCE_KEYS);
model.ContentResourceKeys.AddRange(ResourceHelper.HOTEL_BANNER_RESOURCE_KEYS);
model.ContentResourceKeys.AddRange(ResourceHelper.DOCUMENTS_RESOURCE_KEYS);
model.ContentResourceKeys.AddRange(ResourceHelper.GENERAL_FOOTER_BANNERS_RESOURCE_KEYS);
model.ContentResourceKeys.AddRange(ResourceHelper.LANDING_PAGE_SEARCH_AREA_RESOURCE_KEYS);
model.ContentResourceKeys.AddRange(ResourceHelper.LANDING_PAGE_MODULES_RESOURCE_KEYS);

The ContentResourceKeys property is defined in a MasterModel that is extended by every View Model used across the site, as can be seen here: http://blogit.create.pt/andresantos/2014/11/07/pre-set-common-viewmodel-preperties-before-action-result/. That post also describes the Action Filter that is executed after every action on the site and it’s the place where we append the footer and header resources to the ContentResourceKeys list:

List<string> resourceKeys = new List<string>();
resourceKeys.AddRange(ResourceHelper.HEADER_RESOURCE_KEYS.ToList());
resourceKeys.AddRange(ResourceHelper.LOGIN_RESOURCE_KEYS.ToList());
resourceKeys.AddRange(ResourceHelper.FOOTER_RESOURCE_KEYS.ToList());
resourceKeys.AddRange(ResourceHelper.LOADING_RESOURCE_KEYS.ToList());
resourceKeys.AddRange(ResourceHelper.HEADER_COOKIES_RESOURCE_KEYS.ToList());

if (model.ContentResourceKeys != null && model.ContentResourceKeys.Count > 0)
{
    resourceKeys.AddRange(model.ContentResourceKeys);
}

2 – Fetch the resources

After compiling the resource keys needed, we go on and fetch the associated resource items. The project where this was implemented used a WebAPI to serve all the page content and the resource items were no exception. So, we send a POST request to the resource WebAPI method and fetch the needed resources, for the user language, from the available backoffice (we used a SharePoint list).

model.Resources.AddRange(ResourceFacade.ListResources(model.CurrentLanguageCode, resourceKeys));

3 – Add them to the View Model

The Resources property available in the View Model where we added the result of the call to the resources WebAPI method is a string Dictionary. Since C# Dictionaries don’t provide an AddRange method, we create an extension method that enables us to append resources to a dictionary that’s not empty. Moreover, with this extension method we are able to scrap duplicate keys:

public static class IDictionaryExtensions
{
    public static void AddRange<T, S>(this IDictionary<T, S> source, IDictionary<T, S> collection)
    {
        if (collection == null)
        {
            throw new ArgumentNullException("Collection is null");
        }

        foreach (var item in collection)
        {
            if (!source.ContainsKey(item.Key))
            {
                source.Add(item.Key, item.Value);
            }
        }
    }
}

4 – Use the resources in the views

Since every View Model extends the MasterModel, we are able to use the same property everywhere:

<footer id="footer">
  <div class="container">
    <div class="newsletter">
      <h2>@Model.Resources["Footer.Newsletter.Title"]</h2>

This way, we are able to manage the resource keys in a SharePoint list, or any other backoffice solution.

The post Remote resource handling in a MVC website project appeared first on Blog IT.

Automatic generation of Umbraco packages with Grunt

André Santos — Mon, 07 Mar 2016 16:03:50 +0000

Manually creating Umbraco packages can be tiresome.

If you’re continuously building upon the same package, doing it manually is wasting time that can be more useful developing new features.

This problem presented itself to me when improving Approve It. In order to create the Umbraco package I need several things:

The main assembly
The new dashboard section html file
The App_Plugins folder which contains every angular controller and views, javascript frameworks and custom css
The Package Actions Contrib assembly and its respective actions that enable me to bundle some translations in the package

I decided to go with Grunt and the Grunt Umbraco Package task. A grunt file is a script that typically automates the process of executing some tasks. These scripts can be executed on top of NPM, a package manager for javscript that provides a command line tool to run its packages. To streamline even more the package creation, I installed a Visual Studio extension called NPM Scripts Task Runner, that detects the grunt file and provides a simples UI to handle its tasks.

Step 1 – Install NPM

With NPM installed we are able to execute a Grunt file.

Step 2 – Install NPM Scripts Task Runner

The Visual Studio extension:

NPM Scripts Task Runner Visual Studio extension

Step 3 – Create a Grunt file

And place it in your project:

module.exports = function (grunt) {

    // Setup
    var pkg = grunt.file.readJSON('package.json');
    var projectRoot = 'C:/path/to/project/ApproveIt/';
    var packageNamespace = "Create.Plugin";

    // Grunt Configuration
    grunt.initConfig({
        pkg: pkg,
        clean: {
            files: [
                'bld/App_Plugins',
                'bld/bin',
                'bld/Umbraco'
            ]
        },
        copy: {
            release: {
                files: [
                    {
                        expand: true,
                        cwd: projectRoot + 'bin/',
                        src: [
                            packageNamespace + '.' + pkg.name + '.dll',
                            'PackageActionsContrib.dll'
                        ],
                        dest: 'bld/bin/'
                    },
                    {
                        expand: true,
                        cwd: projectRoot + 'App_Plugins/',
                        src: ['**'],
                        dest: 'bld/App_Plugins/'
                    },
                    {
                        expand: true,
                        cwd: projectRoot + 'Dashboard/Views/dashboard/approveIt/',
                        src: ['approveItdashboardintro.html'],
                        dest: "bld/Umbraco/Views/dashboard/approveIt/"
                    }
                ]
            }
        },
        umbracoPackage: {
            release: {
                src: 'bld/',
                dest: 'bin/umbraco',
                options: {
                    name: pkg.name,
                    version: pkg.version,
                    url: pkg.url,
                    license: pkg.license.name,
                    licenseUrl: pkg.license.url,
                    author: pkg.author.name,
                    authorUrl: pkg.author.url,
                    readme: pkg.readme,
                    outputName: pkg.name + '.v' + pkg.version + '.zip',
                    manifest: 'package.xml'
                }
            }
        }
    });

    // Loading of Grunt Tasks
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-umbraco-package');
};

This file has three sections, which I’ll explain in a different order:

Setup
Grunt configuration
Loading of grunt tasks

Loading of Grunt Tasks

Most actions we need a grunt file to execute are simplified by the use of existing Grunt tasks. In my case, I only need 3:

grunt-contrib-clean: deletes files and folders
grunt-contrib-copy: copies files and folders
grunt-umbraco-package: generates an umbraco package

Grunt File Setup

Here I define a set of variables and load an external configuration file that contains project properties I use later on:

{
  "author": {
    "name": "André Santos",
    "url": "http://www.create.pt"
  },
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-umbraco-package": "1.0.0"
  },
  "license": {
    "name": "MIT",
    "url": "http://opensource.org/licenses/MIT"
  },
  "name": "ApproveIt",
  "readme": "Umbraco Plugin that creates a section that shows all the content that is waiting approval for publishing.",
  "url": "https://our.umbraco.org/projects/backoffice-extensions/approve-it/",
  "version": "1.0.1"
}

Grunt Configuration

This section is where everything comes together. The package.json configuration file is loaded and the three aforementioned grunt tasks are implemented:

Clean

In here, the directories used as the source for the umbraco package creation, are configured so that when we can empty them at will

Copy

This task copies every file needed by the plugin to a centralized location, creating a snapshot of our plugin. We copy full directories and hand picked files as needed.

Umbraco Package

Finally, this task picks up every file we have copied and creates the final Umbraco package. It uses the configuration properties set in package.json and uses a custom package.xml file so that I can include my custom post umbraco package install actions (using Package Actions Contrib):



  
    
      <%= name %>
      <%= version %>
      <%= license %>
      <%= url %>
      
        3
        0
        0
      
    
    
      <%= author %>
      <%= authorUrl %>
    
    ]]>
  
  
  
  
  
  
  
  
  
  
    
      
        
          approveIt
        
        
          
            views/dashboard/approveIt/approveItdashboardintro.html
          
        
      
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
  	<% files.forEach(function(file) { %>
  	
      <%= file.guid %>
      <%= file.dir %>
      <%= file.name %>
    
	<% }); %>

This file uses the Grunt templating engine so that, not only can I include the Package Action Contrib custom actions, but also some custom variables, such as:

The mandatory list of files that is automatically updated when a new file is added to the project output
The package.json variables

That’s it! We can now create new versions of Approve It without having to go into the Umbraco backoffice and doing it manually every time we need a new package version.

You can find the complete source code in my GitHub: https://github.com/ViGiLnT/ApproveIt. You can download the Approve It package here: https://our.umbraco.org/projects/backoffice-extensions/approve-it/.

The post Automatic generation of Umbraco packages with Grunt appeared first on Blog IT.

Building an Umbraco 7 backoffice extension – Part III

André Santos — Mon, 30 Nov 2015 15:02:06 +0000

The previous post (Part II) showed how to populate the content tree of a custom Umbraco backoffice section. This one presents a way for content managers to quickly handle each post pending approval, which means we’re going to create our own AngularJS controller and view.

AngularJS is a MVC javascript framework mainly mantained by Google which primary goal is to aid in the development of single-page applications. It’s use on the Umbraco backoffice was the most notable change when Umbraco 7 was first released.

When the content manager selects one node pending approval we want him to be able to take three quick actions:

get some information about that node;
quickly access it in the content section;
quickly publish it.

New Angular controllers and views must be placed in a specific Umbraco directory, following a specific directory structure:

the main directory must reside at ~\App_Plugins\ApproveIt – the plugin name
the views and controllers must reside at App_Plugins\ApproveIt\backoffice\approvalTree\ – the tree controller name

First things first:

Create a package manifest so that Umbraco knows there are new javascript files available, and place it in the root of App_Plugins\ApproveIt directory.


{
	javascript: [
		'~/App_Plugins/ApproveIt/backoffice/approvalTree/edit.controller.js',
		'~/App_Plugins/ApproveIt/approval.resource.js'
	]
}

Then we must create the javascript files referenced by the manifest and the respective angular view.


angular.module("umbraco.resources")
	.factory("approvalResource", function ($http) {
	    return {
	        getById: function (id) {
	            return $http.get("backoffice/ApproveIt/ApprovalApi/GetById?id=" + id);
	        },
	        publish: function (id) {
	            return $http.post("backoffice/ApproveIt/ApprovalApi/PostPublish?id=" + id);
	        }
	    };
	});

This javascript file provides a new Angular Service that can then be used by Angular controllers. This service is no more than a facade for the ApprovalApiController created on Part II. The methods it connects to are created further on.


angular.module("umbraco").controller("Approval.ApprovalEditController",
	function ($scope, $routeParams, approvalResource, notificationsService, navigationService) {

	    $scope.loaded = false;

	    if ($routeParams.id == -1) {
	        $scope.node = {};
	        $scope.loaded = true;
	    }
	    else {
	        approvalResource.getById($routeParams.id).then(function (response) {
	            $scope.node = response.data;
	            $scope.loaded = true;
	        });
	    }

	    $scope.publish = function (node) {
	        approvalResource.publish(node.Id).then(function (response) {
	            $scope.node = response.data;
	            $scope.contentForm.$dirty = false;
	            navigationService.syncTree({ tree: 'approvalTree', path: [-1, -1], forceReload: true });
	            notificationsService.success("Success", node.Name + " has been published");
	        });
	    };

	});

This Angular controller is called when the Approve It section is being used:

If no node is selected (for instance, when we access this section for the first time) we do nothing;
If a node is selected ($routeParams.id != -1) we request the node details through our approval.resource service facade
Finally, the quick publish method is also implemented here. This methods calls the ApprovalResource service which then invokes the publish method of the ApprovalApiController.

The node view presents the waiting approval page name and two buttons: one to quickly navigate to it’s details and another to publish it.

Finally, we need to update the ApprovalApiController.cs to include two new methods:


public IContent GetById(int id)
{
    IContent content = ApplicationContext.Services.ContentService.GetById(id);
    return content;
}

public IContent PostPublish(int id)
{
    IContent node = ApplicationContext.Services.ContentService.GetById(id);
    ApplicationContext.Services.ContentService.Publish(node);

    return node;
}

GetById: returns the node details to the angular view
PostPublish: publishes the node being viewed

By following these steps we are able to create a complete new Umbraco backoffice section that provides us with a way to manage every site content waiting approval for publishing:

If you want to see how this plugin as been evolving, you can check its source code in github: https://github.com/ViGiLnT/ApproveIt. You can also download the plugin ready to be installed at Umbraco’s extensions repository: https://our.umbraco.org/projects/backoffice-extensions/approve-it/. Other Umbraco 7 tutorials and information can be found here: http://umbraco.github.io/Belle.

The post Building an Umbraco 7 backoffice extension – Part III appeared first on Blog IT.

Building an Umbraco 7 backoffice extension – Part II

André Santos — Mon, 23 Nov 2015 10:00:56 +0000

The previous post (Building an Umbraco 7 backoffice extension – Part I), demonstrated how easy it is to create a new section in Umbraco’s backoffice. This post will show how we can populate this new section with meaningful content coming directly from the backoffice.

To begin with, we must reference a few more assemblies (also available at the Umbraco’s installation bin directory):

umbraco.dll
cms.dll
Umbraco.Core.dll
System.Web.Http
System.Net.Http.Formatting

Then we can populate our section with a tree containing content awaiting approval. To accomplish this we must extend an Umbraco class named TreeController and decorate it with information about our Approve It plugin:


[Tree("approveIt", "approvalTree", "Content for Approval")]
[PluginController("ApproveIt")]
public class ApprovalTreeController : TreeController
{
   protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
   {
       var ctrl = new ApprovalApiController();
       var nodes = new TreeNodeCollection();

       IUser user = UmbracoContext.Security.CurrentUser;

       //check if we're rendering the root node's children
       if (id == Constants.System.Root.ToInvariantString())
       {
           foreach (IContent content in ctrl.GetAll(user))
           {
                var node = CreateTreeNode(
                    content.Id.ToString(),
                    "-1",
                    queryStrings,
                    content.Name,
                    "icon-document",
                    false);

               nodes.Add(node);
            }
       }

        return nodes;
    }

    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
        var menu = new MenuItemCollection();

        if (id == Constants.System.Root.ToInvariantString())
        {
            // root actions
            menu.Items.Add(
                ApplicationContext.Services.TextService.Localize(ActionRefresh.Instance.Alias));
        }

        return menu;
    }
}

To create a tree we must implement two methods:

GetTreeNodes: in here we call the GetAll method of the ApprovalApiController that we’ll create in the following. This GetAll method returns a list of content waiting approval and we just iterate through it all and create tree nodes;
GetMenuForNode: presents a dropdown menu when we right click the root node to refresh the list.

Next we create our custom WebAPI and name it ApprovalApiController. For it to be available in our site, we need only extend the UmbracoAuthorizedJsonController.


[PluginController("ApproveIt")]
public class ApprovalApiController : UmbracoAuthorizedJsonController
{
    public IList UnpublishedContent { get; set; }

    public IEnumerable GetAll(IUser user)
    {
        UnpublishedContent = new List();

        IList root = ApplicationContext.Services.ContentService.GetRootContent().ToList();

        foreach (IContent content in root)
        {
            GetNode(content);
        }

        return UnpublishedContent;
    }

    private void GetNode(IContent node)
    {
        if (!node.Published)
        {
            UnpublishedContent.Add(node);
        }

        foreach (IContent child in ApplicationContext.Services.ContentService.GetChildren(node.Id))
        {
            GetNode(child);
        }
    }
}

The GetAll method, iterates through all the nodes in the content section and finds the ones that are not published, that is, that are waiting approval.

With these two classes we are able to populate our section with a tree containing the content nodes that are waiting approval:

The next post in the series will show how to create the Angular view and controller that will enable content managers to actually manage the content waiting approval.

The Approve It extension can be found here: https://our.umbraco.org/projects/backoffice-extensions/approve-it/. The complete source code can be found here: https://github.com/ViGiLnT/ApproveIt.

The post Building an Umbraco 7 backoffice extension – Part II appeared first on Blog IT.