eGandalf
Oct 11, 2016
  4021
(2 votes)

Rendering a ContentFolder as a Block to List Assets

Update: I'm an idiot. Fixed it up.

For content-heavy clients, we get the occasional request for listing file assets on the site for download. From what I can tell, there are a couple of options that require a bit of author effort, but I really wanted to provide something that is more suited to the best authoring experience offered by Episerver - drag and drop within Content Areas.

Knowing I can drag and drop most content types into a ContentArea and expect something to happen, I decided to give it a try using one of the asset panel ContentFolders. So I hover my mouse over a folder, casually hold down the mouse button, and drag the folder into an open area of the page. The field highlights! The folder drops in! It works!

Almost.

According to Episerver's documentation, "a content folder is used to structure content and has no visual appearance on the site." Meaning that the ContentFolder type has no Controller and no View.

Great. I can fix that. Code below.

Here's the part where I was an idiot. I was using the wrong parameter name in my Index method and therefore thought that the system was always returning null. Key lesson: make sure you're aligning with convention. So I deleted where I was explaining my workaround that I didn't need and am just including the final code below. This isn't production, but feel free to point out my other mistakes.

Controller:

using EPiServer.Core;
using EPiServer.Web.Mvc;
using System;
using System.Linq;
using System.Web.Mvc;
using System.Web.Routing;
using EPiServer;
using EPiServer.ServiceLocation;
using Alloy.Models.ViewModels;
using Alloy.Models.Media;
using Alloy.Business;

namespace Alloy.Controllers
{
    public class ContentFolderController : PartialContentController
    {
        private IContentRepository contentRepository => ServiceLocator.Current.GetInstance();
        // GET: ContentFolder
        public override ActionResult Index(ContentFolder currentContent)
        {
            if(currentContent != null)
            {
                var model = new ContentFolderViewModel();
                model.Name = currentContent.Name;

                var documents = contentRepository.GetChildren(currentContent.ContentLink);

                model.Documents = documents.Select(d => new DocumentViewModel() {
                    Name = d.Name,
                    Description = d.Description,
                    Url = d.GetUrl(),
                    FileSize = d.BinaryData.GetSize(),
                    EveryoneHasAccess = d.IsAvailableToEveryone()
                });

                return PartialView(model);
            }
            return PartialView();
        }
    }
}

View:

@model Alloy.Models.ViewModels.ContentFolderViewModel

<h3>@Model.Name</h3>
<ul>
@foreach (var doc in Model.Documents)
{
    <li>
        <a href="@doc.Url">@doc.Name</a>
        @if (!string.IsNullOrWhiteSpace(doc.Description))
        { <div>@Html.Raw(doc.Description)</div> }
        <div style="font-style: italic; color: #777">File size: @doc.FileSize</div>
    </li>
}
</ul>

ViewModels:

using System.Collections.Generic;

namespace Alloy.Models.ViewModels
{
    public class ContentFolderViewModel
    {
        public string Name { get; set; }
        public IEnumerable<DocumentViewModel> Documents { get; set; }
    }
}
namespace Alloy.Models.ViewModels
{
    public class DocumentViewModel
    {
        public string Name { get; set; }
        public string FileSize { get; set; }
        public string Url { get; set; }
        public string Description { get; set; }
        public bool EveryoneHasAccess { get; set; }
    }
}

Extensions:

using EPiServer.Core;
using EPiServer.Security;
using EPiServer.ServiceLocation;
using EPiServer.Web.Routing;
using System;
using System.Security.Principal;

namespace Alloy.Business
{
    public static class MediaExtensions
    {
        private static UrlResolver urlResolver => ServiceLocator.Current.GetInstance<UrlResolver>();
        private static PermissionService permissionService => ServiceLocator.Current.GetInstance<PermissionService>();

        public static string GetSize(this EPiServer.Framework.Blobs.Blob blob)
        {
            using (var blobReader = blob.OpenRead())
            {
                var l = blobReader.Length;
                if(l < 1000)
                {
                    return $"{l} bytes";
                }
                if(l < 1000000)
                {
                    return $"{l / 1024} KB";
                }
                return $"{l / 1056478} MB";
            }
        }

        public static Boolean IsAvailableToEveryone<T>(this T content) where T : IContent
        {
            return content.RoleHasAccess(new[] { "Everyone" }, AccessLevel.Read);
        }

        public static Boolean RoleHasAccess<T>(this T content, string[] roles, AccessLevel accessLevel) where T : IContent
        {
            var securedContent = content as ISecurable;
            var descriptor = securedContent.GetSecurityDescriptor();
            var identity = new GenericIdentity("doesn't matter");
            var principal = new GenericPrincipal(identity, roles);
            return descriptor.HasAccess(principal, accessLevel);
        }

        public static string GetUrl<T>(this T content) where T : IContent
        {
            return urlResolver.GetUrl(content.ContentLink);
        }
    }
}
Oct 11, 2016

Comments

Per Magne Skuseth
Per Magne Skuseth Oct 11, 2016 06:52 PM

Hi! The reason "folder" is always null is because of the parameter name.
For Episerver controllers, the model binder will check and see if the name of the parameter is currentPage/currentBlock/currentContent. If it is, it will get the current content from the routeData.
So, changing the name from "folder" to "currentContent" will get you get current ContentFolder.

eGandalf
eGandalf Oct 11, 2016 08:05 PM

Thanks - I'm an idiot. While it should be obvious to anyone with more Epi experience, I'm leaving the code for more novice searchers (like myself).

Oct 12, 2016 12:39 PM

Maybe worth adding a Log.Info in Episerver if a controller is missing a matching parameter to aid in finding that error? I think most developers have dont that at least once.

At least I have.. :)

It can take a few hours to find if you have never seen it before...

valdis
valdis Oct 12, 2016 01:30 PM

Adding my 2 cents :)

I would move Length calculation at the moment when media is saved, not when it's rendered.

And rendering the description property in the template could be also wrapped into some generic `ifnotempty` helper method.

Aaaaand :) If extension is defined for IContent, should it be located in MediaExtensions class? ;)

Cheers!

eGandalf
eGandalf Oct 12, 2016 03:02 PM

Hey Valdis,

I completely agree with every point!

This is just a PoC I put together for a project, nowhere near production code, so I'm willing to live with some shortcuts in favor of that. I'm changing the extension a bit to add some validation (see comments in other post). When I'm satisfied with it, I'll update this as well.

Please login to comment.
Latest blogs
Opti ID overview

Opti ID allows you to log in once and switch between Optimizely products using Okta, Entra ID, or a local account. You can also manage all your use...

K Khan | Jul 26, 2024

Getting Started with Optimizely SaaS using Next.js Starter App - Extend a component - Part 3

This is the final part of our Optimizely SaaS CMS proof-of-concept (POC) blog series. In this post, we'll dive into extending a component within th...

Raghavendra Murthy | Jul 23, 2024 | Syndicated blog

Optimizely Graph – Faceting with Geta Categories

Overview As Optimizely Graph (and Content Cloud SaaS) makes its global debut, it is known that there are going to be some bugs and quirks. One of t...

Eric Markson | Jul 22, 2024 | Syndicated blog

Integration Bynder (DAM) with Optimizely

Bynder is a comprehensive digital asset management (DAM) platform that enables businesses to efficiently manage, store, organize, and share their...

Sanjay Kumar | Jul 22, 2024

Frontend Hosting for SaaS CMS Solutions

Introduction Now that CMS SaaS Core has gone into general availability, it is a good time to start discussing where to host the head. SaaS Core is...

Minesh Shah (Netcel) | Jul 20, 2024

Optimizely London Dev Meetup 11th July 2024

On 11th July 2024 in London Niteco and Netcel along with Optimizely ran the London Developer meetup. There was an great agenda of talks that we put...

Scott Reed | Jul 19, 2024