Blog posts by Ollie Philpott

A property viewer plugin for multilingual sites

Thu, 18 Apr 2019 11:34:31 GMT

A challenge I have found when working on large multilingual Episerver builds is that there are often times where you want to review the value of a property across all languages - for example when debugging an issue on the site or comparing how a togglable feature is configured for different languages.

Doing this using the Epi CMS UI can be a slightly laborious task – load the page in the CMS, select a language, navigate to correct tab, find the property, rinse and repeat for each language. This approach works fine when reviewing a few languages but becomes unworkable when managing as many as 35 languages, as we do for some clients at Zone.

To provide a speedier approach, I created a custom admin plugin that allows you to compare the values of a property across on languages on a single screen.

It works by navigating to a page using the content tree, and then selecting the property you want to view:

Configuration

The plugin is built using the Episerver GuiPlugin attribute with an Authorize attribute to ensure that it is only accessible to admins

[GuiPlugIn(
    DisplayName = "Property Viewer",
    Area = PlugInArea.AdminMenu,
    Url = "~/plugins/propertyviewer")]
[Authorize(Roles = "Administrators,WebAdmins")]
public class PropertyViewerController : Controller

and a custom route to allow MVC actions to be called in the standard way.

[InitializableModule]
public class CustomRouteInitialization : IInitializableModule
{
    public void Initialize(InitializationEngine context)
    {
        RouteTable.Routes.MapRoute(
            null,
            "plugins/propertyviewer/{action}",
            new { controller = "PropertyViewer", action = "Index" });
    }

    public void Uninitialize(InitializationEngine context)
    {
    }
}

Displaying a content tree

Although Episerver has a Web Forms component available (PageTree) to render the site content tree, there is no out-of-the-box solution for displaying the tree in an MVC plugin. I used jsTree, a third-party jQuery plugin, to render the content which was quick to setup and easy to configure.

To display the tree, I provide a url for an AJAX endpoint of the plugin which will return the first two levels of content, and is called again when subsequent children in the tree are expanded.

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
…
<div id="jstree" class="epi-paddingVertical-small episerver-pagetree-selfcontained"></div>
<script>
    $(function() {
        $("#jstree").jstree({
            "core": {
                "data": {
                    'url': "/plugins/propertyviewer/getcontenttree/",
                    "dataType": "json",
                    "data": function(node) {
                        // jstree requests # for root of tree
                        return { "id": node.id === "#" ? "1" : node.id };
                    }
                }
            },
            "root": "1"
        });
    });
</script>

The GetContentTree endpoint in the plugin takes a page id as a parameter and returns details about the page and its children, using IContentLoader to fetch content from Episerver. jsTree expects a JSON object with a node’s id, name and an array of children with the same information.

Setting the children property to true indicates that the node has children and means that it will be closed initially. When it is expanded, another request is sent to the endpoint to fetch the next levels of the tree.

public JsonResult GetContentTree(int id = 1)
{
    var page = _contentLoader.Get<PageData>(new ContentReference(id));

    return Json(new
    {
        id,
        text = page.Name,
        children = _contentLoader.GetChildren<PageData>(page.ContentLink)?.Select(s => new
        {
            text = s.Name,
            id = s.ContentLink.ToReferenceWithoutVersion().ID,
            children = _contentLoader.GetChildren<PageData>(s.ContentLink)?.Any()
        })
    }, JsonRequestBehavior.AllowGet);
}

Displaying page properties

To display a dropdown list of page properties, I bind to the select_node event (triggered when a node in the tree is selected) and call the GetProperties endpoint. The selected node id is passed as a parameter, and the returned html for the dropdown list is rendered below the content tree. The selected node id is also stored in a hidden input for use with other js events.

$("#jstree").on("select_node.jstree",
    function (e, data) {
        $("#PageId").val(data.node.id);
        $.ajax("/plugins/propertyviewer/getproperties/?pageId=" + data.node.id).done(
            function (data) {
                $("#blockPropertyList").html("");
                $("#results").html("");
                $("#propertyList").html(data);
        });
});

The GetProperties action of the controller fetches the list of standard page properties for the specified ID, and returns a partial view containing the dropdown list of properties.

public PartialViewResult GetProperties(int pageId)
{
    var page = _contentLoader.Get<PageData>(new ContentReference(pageId));
    var model = new PropertyListModel
    {
        PageProperties = page.Property
                            .Where(x => x.IsPropertyData)
                            .Select(x => x.Name)
                            .OrderBy(x => x)
    };

    return PartialView(PropertyListView, model);
}

Displaying property values

Once a page has been selected and a property chosen, we need to display a table containing the values of the property for each language.

The plugin can handle properties in two ways:

in the case of most properties, it simply displays the string representation for the property
for local blocks (i.e. a fixed block added as a property), it provides an additional dropdown to choose the block property to view

When a property is selected from the dropdown, we call the GetPropertyValues endpoint with the page id and property name, and either display the values for the property, or display the block property list.

$("#propertyList").on("change", "select", function () {
    $.ajax("/plugins/propertyviewer/getpropertyvalues/?pageId="
        + $("#PageId").val() + "&propertyname=" + this.value).done(
        function (data) {
            if (data.indexOf("BlockPropertyName") > -1) {
                $("#blockPropertyList").html(data);
                $("#results").html("");
            } else {
                $("#blockPropertyList").html("");
                $("#results").html(data);
            }
    });
});

The GetPropertyValues action checks whether the specified property is a block type using propertyData.Type and returns the list of block properties if it is block. For other property types, the property values are returned.

public PartialViewResult GetPropertyValues(PropertyReference reference)
{
    if (IsBlock(reference))
    {
        var blockModel = BuildBlockPropertyListModel(reference);
        return PartialView(BlockPropertyListView, blockModel);
    }

    var model = BuildPropertyValuesModel(reference);

    return PartialView(PropertyValuesView, model);
}

To fetch the values of a property for each language, we need to use IContentRepository.GetLanguageBranches to get the language-specific instances of the page, and then fetch the value of the property for each instance.

private PropertyValuesModel BuildPropertyValuesModel(PropertyReference reference)
{
    var languageVersions = _contentRepository.GetLanguageBranches<PageData>(new ContentReference(reference.PageId));
    var propertyValues = languageVersions.Select(x => new PropertyValueModel
    {
        Language = x.Language.Name,
        Value = x.GetPropertyValue(reference.PropertyName)
    });

    return new PropertyValuesModel
    {
        PropertyValues = propertyValues
    };
}

In the situation where the property is a local block, we return a partial view containing a dropdown of the block properties, constructed in a similar way to the page property dropdown.

private BlockPropertyListModel BuildBlockPropertyListModel(PropertyReference reference)
{
    var page = _contentLoader.Get<PageData>(new ContentReference(reference.PageId));
    var property = page.Property.Get(reference.PropertyName);

    return new BlockPropertyListModel
    {
        BlockProperties = ((BlockData) property.Value).Property
            .Where(x => x.IsPropertyData)
            .Select(x => x.Name)
            .OrderBy(x => x)
    };
}

Finally, we bind to the change event of the block property dropdown and call a GetBlockPropertyValues endpoint that builds a table of the block property values in the same way as the page property values, but fetching the value from the property on the block.

var propertyValues = languageVersions.Select(x => new PropertyValueModel
{
    Language = x.Language.Name,
    Value = x.Property
            .GetPropertyValue<BlockData>(propertyName)
            .GetPropertyValue(blockPropertyName)
});

The results are rendered in a simple HTML table using the default Epi table styling with a special case to display a tick for true Boolean properties.

@model AlloyTemplates.Plugins.PropertyViewer.Models.PropertyValuesModel

<table class="epi-default">
    <colgroup>
        <col style="width:10%">
        <col style="width:90%">
    </colgroup>
    <thead>
        <tr>
            <th>Language</th>
            <th>Value</th>
        </tr>
    </thead>
    @foreach (var item in Model.PropertyValues)
    {
        <tr>
            <td>
                @item.Language
            </td>
            <td>
                @RenderValue(item.Value)
            </td>
        </tr>
    }
</table>

@helper RenderValue(string propertyValue)
{
    if (propertyValue == "True")
    {
        <img src="/App_Themes/Default/Images/Tools/png/Check.png" alt="True" align="center" />
    }
    else
    {
        @propertyValue
    }
}

Improvements

This version of the plugin works well for simple properties – text, numbers, Booleans and any property that provides a comprehensive ToString method. It is also useful for Content References where it will show the content ID, and values stored as JSON where it will display the JSON object. It doesn’t currently work for complex property types or Content Areas since it uses the string representation of the property.

Future improvements I would like to make are:

display a thumbnail for images
allow the user to select a block in a content area and a property from that block
handle blocks nested to more than 1 level
create as an add-on so it can be easily shared and added to projects

However, in its current form it is still an extremely useful tool to have available as a first port of call for quickly auditing a property on a large multilingual site.

Common errors when developing an Episerver site

Tue, 19 Feb 2019 11:59:05 GMT

At Zone, we spend a lot of time developing and maintaining large-scale Episerver builds with a team split across the UK, Romania and India. With a large codebase and lots of developers working at the same time, there are some errors we encounter occasionally that can take time a lot of time to identify, but are quick to fix when you know the solution.

Changes to content types are not reflected in the CMS

Problem

If you are using a code-first approach to create and modify pages and blocks, and you notice that changes are not being reflected when you view the content in the CMS, you may have a problem with assembly versions.

You can confirm that you are experiencing this issue by navigating to the Content Type tab in the Admin section of the Episerver CMS. If you select a content type from the left-hand menu, you will see a yellow warning message like this:

Changes in the model for this page type were ignored because its version (1.0.0.0) is lower than version in the database(2.0.0.0)

This can occur after restoring a backup of the CMS database from an environment where semantic versioning (eg GitVersion) is being used, to an environment not using any versioning – such as a local development environment.

Episerver stores the current version of an assembly in the database when syncing changes to the model. If the site is loaded with a version of the assembly lower than the one stored in the database, it will not update the model to avoid overwriting the most recent update with older changes.

Solution

You can fix this by running a short SQL script in the database to reset the version of the assemblies to correct version.

UPDATE [dbo].[tblContentType]
SET [ModelType] = REPLACE(ModelType, ', Version=2.0.0.0,', ', Version=1.0.0.0,')
WHERE ModelType like '%, Version=2.0.0.0,%'

You should replace 2.0.0.0 with the version that is incorrectly set in the database, and 1.0.0.0 with the version in the assembly info.

Website pages are loading slower than usual in a development environment

Problem

When loading a website that uses Episerver Find, pages suddenly take a lot longer to load. When checking the Episerver logs, you may find errors like this:

EPiServer.Find.ServiceException: The remote server returned an error: (401) Unauthorized.

We have experienced this when developing locally - where we may be using an Episerver Find demo licence. Since the demo licence only lasts for 30 days, you will see this error when the licence expires if you are calling Find during page load. It is a bit more obvious if your website crashes and you see a Yellow Screen of Death (YSOD), but if you are handling errors in a more graceful way, it may be harder to identify the cause.

Solution

Generate a new demo licence at https://find.episerver.com/ and update the search index in your Web.config.

YSOD for all pages

Problem

Loading the site or CMS shows the .NET YSOD with an error message like the following:

ERROR EPiServer.Framework.Initialization.InitializationEngine: Initialize action failed for 'Initialize on class EPiServer.Initialization.Internal.ModelSyncInitialization, EPiServer, Version=11.10.1.0, Culture=neutral, PublicKeyToken=8fe83dea738b45b7'

The DELETE statement conflicted with the REFERENCE constraint "FK_tblContent_tblContentType". The conflict occurred in database "myCmsDatabase", table "dbo.tblContent", column 'fkContentTypeID'.

This error, or similar sounding errors, can occur for a number of reasons. Lots of causes and solutions are discussed in the Episerver forums: https://world.episerver.com/Search?searchQuery=statement+conflicted&from=151704

The error is triggered from SQL Server when a command to delete a row of data conflicts with a constraint on one of the columns in the database table.

In this case, it seems to occur during the model sync as Episerver initialises after a page or block type has been deleted from code. I have not been able to identify the exact conditions that lead to this error in Episerver but I have seen it happen several times after deleting a page type and deploying the code to another environment.

If you check the tblContent table in the Episerver database, you may find you have orphaned rows that are flagged as Deleted but are not present in the Recycle Bin of the CMS.

Solution

Empty the Recycle Bin in the CMS
Run a SQL query to check if there are still any rows remaining in the database that are set as Deleted:
```
SELECT * 
FROM [tblContent]
WHERE Deleted = 1
```
If there are rows returned by the query after emptying the recycle bin, delete the rows from the table:
```
DELETE 
FROM [tblContent]
WHERE Deleted = 1
```

The site should now load as normal.

Front-end assets redirect to the login page

Problem

We have experienced this error when a developer is setting up a new machine or a new project. The issue happens when loading the website – front assets such as CSS or JavaScript fail to load and if you attempt to load the assets directly you are taken to the Episerver login page.

Logging into the CMS will allow the assets to be loaded, but this issue is caused by misconfigured Windows security permissions for assets folders for IUSR or IIS_IUSRS.

Solution

Right-click on the root folder of the website, select Properties and the Security tab.

Ensure that IUSR and IIS_IUSRS have at least read access to the root folder and subfolders (IIS_IUSRS requires write access to the blobs folder).

The assets should load correctly once these permissions are configured.