Blog posts by eGandalf2016-10-11T15:44:11.0000000Zhttps://world.optimizely.com/blogs/egandalf/Optimizely WorldRendering a ContentFolder as a Block to List Assets<p>Update: I'm an idiot. Fixed it up.</p>
<p>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.</p>
<p>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!</p>
<p>Almost.</p>
<p>According to Episerver's documentation, "a<span> content folder is used to structure content and has no visual appearance on the site." </span>Meaning that the ContentFolder type has no Controller and no View.</p>
<p>Great. I can fix that. Code below.</p>
<p><em>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.</em></p>
<p>Controller:</p>
<pre>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();
}
}
}
</pre>
<p>View:</p>
<pre>@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>
</pre>
<p>ViewModels:</p>
<pre>using System.Collections.Generic;
namespace Alloy.Models.ViewModels
{
public class ContentFolderViewModel
{
public string Name { get; set; }
public IEnumerable<DocumentViewModel> Documents { get; set; }
}
}
</pre>
<pre>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; }
}
}
</pre>
<p>Extensions:</p>
<pre>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);
}
}
}
</pre>2016-10-11T15:44:11.0000000ZBlog postQuick & Dirty Check for Role Permissions on IContent<p>For some reason, this was not an easy one to find, since most articles focus only on the current user and not using the Episerver APIs for lookups against other users or roles. Though I find it a bit strange, a customer needs to display a list of documents and indicate which among those documents are publicly accessible versus private (members-only). </p>
<p>Thanks to David Knipe, my Twitter-based weathervane, I came up with a relatively quick and simple set of static methds for doing just that. Providing them here for posterity, allowing you to check a given role for a given permission via a quick extension whenever and wherever you need it.</p>
<pre>public static Boolean IsAvailableToEveryone(this T content) where T : IContent
{
return content.RoleHasAccess(new[] { "Everyone" }, AccessLevel.Read);
}
public static Boolean RoleHasAccess(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);
}
</pre>2016-10-11T15:08:19.0000000ZBlog postAdding ACheck Plugin to Episerver TinyMCE<p><span>Every now and then, I get a minor challenge from the sales team. They need to demo something and they don’t have the availability to create or test it out. So they check if I’m willing to do it and, well, it gives me the chance to try something new in Episerver that I’ve not done before. Great! I’m in!</span></p>
<p><span>On this occasion, I was tasked with the simple addition of the Accessibility Checker plugin for TinyMCE. Seriously, if you know what you’re doing, this should take only about a quarter of an hour, if that. Since I had never explored this side of things, it took me about two hours to figure it out (and over-come one of those blasted things that, like any developer, was bloody simple and I overlooked the shit out of it).</span></p>
<p><span>First off, the resources you’ll want to check out:</span></p>
<ul>
<li><span><a href="/link/f69063db609f45078d9de73be99b9a4c.aspx#addplugin"><span>The official Episerver documentation for adding a TinyMCE plugin</span></a></span></li>
<li><span><a href="http://www.atutor.ca/achecker/download.php"><span>The download page for the specific TinyMCE plugin I’m adding</span></a></span></li>
<li><span>The <a href="https://github.com/episerver/Commerce-Demo-Kit"><span>Commerce Demo Kit</span></a> project on Episerver’s Github, which <a href="https://github.com/episerver/Commerce-Demo-Kit/blob/master/src/web/EditorDescriptors/TinyMcePlugins/AllowExtendedAttributes.cs"><span>has a class you can use as an example</span></a>. Even though this one is non-visual and the one I’m adding has a button, I found it useful.</span></li>
<li><span><a href="http://archive.tinymce.com/wiki.php/TinyMCE3x:Accessibility"><span>The TinyMCE documentation where I found the AChecker plugin</span></a></span></li>
</ul>
<p><span>First, add the folder structure for the plugin. According to the Episerver documentation (linked above), you have a couple of options. </span></p>
<p><span>The first, and more secure option, is to use a Virtual Directory and map a path for ~Utils/Editor/tinymce/plugins to it (or just map ~/Util and add the rest of the folder structure to that root folder). The only real advantage I see here is that it helps keep the editor files out of the web root. But that’s not something I am worried about for a proof-of-concept.</span></p>
<p><span>In my case, I wanted it to be something I could easily zip up and distribute to the sales team. So I opted for simply creating that same folder structure as part of my project.</span></p>
<p><span>Download the “achecker” plugin (via the link above), uncompress it, and add it to the plugins folder you just created.</span></p>
<p><span>Next, I created the class, which is just an empty class with an attribute used to inform Episerver of the additional plugin and its configuration options. Definitely check out the documentation above for the complete set of options. Mine uses the TinyMCEPluginButton attribute because it’s a visual plugin (it has a button).</span></p>
<pre>using EPiServer.Editor.TinyMCE;
namespace OxxCommerceStarterKit.Web.EditorDescriptors.TinyMcePlugins
{
[TinyMCEPluginButton(
PlugInName = "acheck",
ButtonName = "acheck",
GroupName = "misc",
LanguagePath = "admin/tinymce/plugins/acheck",
IconUrl = "Editor/tinymce/plugins/acheck/img/acheck.gif",
Description = "Accessibility Checker",
DisplayName = "Accessibility Check")]
public class ACheck
{
}
}
</pre>
<p><span>The properties are as follows:</span></p>
<ul>
<li><span>PlugInName & ButtonName - These both need to be the same as the name of the plugin being added. If you inspect the *_src.js file of the plugin, you’ll find the plugin being added with a name. There’s also code in the file for adding a named button. I assume these can be different, but it’s likely convention for them to be the same, if this plugin is any example.</span></li>
<li><span>GroupName - Puts the button into one of the groups in the admin view of Episerver. These really are standard TinyMCE button groups. It doesn’t affect where the button is placed in the toolbar (you get to configure that), but rather where you find the button in order to add it to your custom tools.</span></li>
<li><span>LanguagePath - If you know Episerver, you know this one. I only configured the English language.</span></li>
<li><span>I assume Description and DisplayName to be self-explanatory.</span></li>
</ul>
<p><span>Really, the approach taken should work for any plugin. However, there might be compatibility issues or conflicts with the plugins Episerver has created. Still, it’s pretty cool to know that it’s a simple matter of a plugin, a class, and (optionally) a language file to add some new functionality to Episerver.</span></p>
<p><span>Relevant source files and basic instructions <a href="https://github.com/egandalf/Accessibility-Checker-for-Episerver-TinyMCE"><span>can be found on Github</span></a>.</span></p>
<p><span>Happy coding.</span></p>2016-08-05T19:20:30.3200000ZBlog postAn Ektron-to-Episerver Starter Kit<p>Over the last several months, I’ve been working with Allan Thraen and others to find and research ways to make the transition from Ektron CMS to Episerver Digital Experience Cloud as smooth as possible.</p>
<p>As was discussed last week at Ascend in Las Vegas, there is no push-button solution. Too much between the systems lacks a one-to-one mapping and Ektron’s platform allowed too much leeway in avoiding best practices for any fully-automated utility to be practical to develop and maintain.</p>
<p>Instead, I focused my energies on a handful of helpful paths.</p>
<p>For this post, I’d like to introduce you to a bit of code worked up between Allan and myself. If you want to skip the explanation, links to both sets of code are at the bottom of the article.</p>
<p>The first bit of code is Allan’s addition of a REST API to Episerver. This code extends the ServiceAPI, which is used to provide authentication and authorization protection, to add some content endpoints to your Digital Experience Cloud instance. For complete details, I suggest you <a href="https://github.com/AThraen/ServiceAPIExtensions">follow through to his Github repo and readme</a>.</p>
<p>In the <a href="https://github.com/egandalf/ContentTransferStarterKit">second repository</a>, I’ve coded up a few class libraries and console applications. Full details, including limitations, are in the ReadMe, but the general idea is to first move an Ektron Menu structure into Epi to be used as the basis for the content tree. Then, selectively move Ektron content from a Folder in the source CMS into a selected location within the newly generated content tree in the CMS.</p>
<p>Note that these are not officially supported projects, though Allan and I want to provide as much community support as we can. Feel free to file issues through Github and reach out to us if you would like to help contribute or create your own forks of either project (though we may want to incorporate anything cool you build :).</p>
<p>Github Repos:</p>
<ol>
<li><span><a href="https://github.com/AThraen/ServiceAPIExtensions"><span>Allan Thraen’s Service API Extensions</span></a></span> </li>
<li><span><span><a href="https://github.com/egandalf/ContentTransferStarterKit">James Stout’s Ektron Integration & Console Apps</a></span></span></li>
</ol>2015-11-18T22:46:01.0000000ZBlog postTune In Tomorrow for a New #EPiDev Fanmail Episode!<p>The best part of hosting EPiDev shows is the questions we get from viewers - either live via Twitter during the event, using the #EPiDev hashtag, or in between shows via email. For this show, I reached out to several Ektron customers who are either getting started in EPiServer, or very interested. At the very least, each of the contributors has had EPiServer running locally to dabble a bit.</p>
<p>When you're just getting started, questions are sure to come up. Sometimes these questions are comparative between EPiServer and your legacy platform. At other times, it's just a matter of clearing the weeds a bit and not getting too lost or frustrated. Either way, we want to provide as many answers as we can.</p>
<p>So for this episode, we have nearly 20 questions from our audience and we will do our best to provide quick-fire answers. Some questions, I'm sure, will lead into full-fledged episodes of their own.</p>
<p>Joining me are EPiServer's Allan Thraen and the ever-amazing Kristoffer Sjöberg.</p>
<p>If you have questions or want us to cover a topic, please email me at: james.stout@episerver.com</p>
<p><a href="https://plus.google.com/events/ciqcr5t2153amiantkbd1t3m9n4">Tune in tomorrow at 10 AM EDT (14:00 GMT) to watch this episode that's entirely focused on you, our viewers</a>.</p>2015-06-02T17:33:30.6670000ZBlog postBuilding a Carousel using Global Razor Templates in EPiServer MVC<p>I’m currently working on my first EPiServer project - one that I hope will serve as a well-commented reference and starter app. Going through this process somewhat slowly and retyping all of the code that I’m borrowing from other places is really helping me with some deep-learning of the platform.</p>
<p>In this process, I’m really starting to appreciate the extensibility of the platform and the combined power of EPiServer and MVC. While I still feel like I have more questions than answers when it comes to specifics of the technology, I also am getting a firm grasp of EPiServer development and am appreciating how it is simultaneously awesome for developers and for business users alike.</p>
<p>An Ektron and EPiServer comparison blog may be forthcoming, but for the moment I wanted to share a really cool little trick that I read about on Pride Parrot, <a href="http://prideparrot.com/blog/archive/2012/9/simplifying_html_generation_using_razor_templates">Simplifying html generation in code using Razor templates</a>.</p>
<p>The HTML template I’m using </p>
<p>Carousel slides would be created by dragging and dropping ArticlePage items into the ContentArea. Displaying those items using a carousel rendering was obvious for an individual item, but in order to display them as a carousel, I needed to treat them as a list of similar objects and the traditional PagePartial rendering didn’t seem to fit the bill.</p>
<p>A traditional @helper template approach would do the job, provided I could correctly parse the information inside the ContentArea and pass it over, but I really didn’t like the idea of having what is essentially a PagePartial rendering residing as a template within my StartPage Index rendering.</p>
<p>The article referenced above provides a simple way to take the template I created for my list of articles and move it into a place where it can be used and called globally from my other views. If you’re interested in also calling the template from code, see the above article, though I have not (yet) taken it that far in my own project.</p>
<p>The process is exceedingly simple. </p>
<p>First, if you don’t already have an App_Code folder in your project, then add one by going to Visual Studio, open the Solution panel and right-click on the EPiServer project. Then choose Add > Add ASP.NET Folder > App_Code. </p>
<p>Within the App_Code folder, I created a new view named Templates.cshtml. I pasted my helper into this view, like so:</p>
<pre class="language-html"><code>@helper CarouselTemplate(List<BlogSample.Helpers.CarouselItem> carouselItems)
{
<div class="col-md-12">
<div class="content-article">
<div id="home-slider" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
@for (int i = 0; i < carouselItems.Count(); i++)
{
<li data-target="#home-slider" data-slide-to="@i" class="@(i == 0 ? "active" : string.Empty)"></li>
}
</ol>
<div class="carousel-inner">
@for (int i = 0; i < carouselItems.Count(); i++)
{
<div class="item @(i == 0 ? "active" : string.Empty)">
<img src="@carouselItems[i].ImageUrl" alt="@carouselItems[i].TitleText" />
<div class="carousel-caption">
<h3><small><span class="caption-meta-date">@carouselItems[i].PublicationDate.ToString("MM/dd")</span> <span>@carouselItems[i].PublicationDate.Year</span></small> @carouselItems[i].TitleText</h3>
<p>@carouselItems[i].Tagline</p>
</div>
</div>
}
</div>
<a class="left carousel-control" href="#home-slider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#home-slider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
}</code></pre>
<p>After that, calling the global template just works. The View name becomes a namespace of sorts, so the format for calling the template in my case is Templates.CarouselTemplate, and I use it just as I would any other razor template, except that it’s globally accessible.</p>
<p>In my case, however, simply using it as a template wasn’t enough to get the results I want. Primarily, my carousel will be made up of ArticlePage items. I have no intention of doing otherwise, but that doesn’t mean I don’t want that flexibility in the future. So what I’ll do instead is create my own Html Helper that will take the items within the ContentArea - whatever they are - and process them to be used as carousel slides. Here’s my logic for providing a drag and drop area versus the carousel helper:</p>
<pre class="language-html"><code>@if (EPiServer.Editor.PageEditing.PageIsInEditMode)
{
@Html.PropertyFor(m => m.CurrentPage.FeaturedContentArea, new { CssClass = "row", tag = BlogSample.Global.ContentAreaTags.Carousel })
}
else
{
@Html.Carousel(Model.CurrentPage.FeaturedContentArea != null ? Model.CurrentPage.FeaturedContentArea.Items : new List<ContentAreaItem>(), Templates.CarouselTemplate)
}</code></pre>
<p>I do this because I want the author to retain the drag and drop UI plus be able to view the slides individually for reordering. The else condition will provide a non-editable view for the site visitor to see a fully-functional carousel.</p>
<p>In order to build the HTML helper, I first need all of my “carousel enabled” items to have the same properties. So I created an inheritable class that would contain those content properties and present them in a Carousel tab via the Properties view.</p>
<pre class="language-csharp"><code>using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.SpecializedProperties;
namespace BlogSample.Models.Pages
{
[ContentType(DisplayName = "CarouselPageData", GUID = "684c86d7-6a66-44f3-82d5-9b3a6277ab90", Description = "")]
[AvailableContentTypes(
Availability = Availability.None,
ExcludeOn = new[] { typeof(StartPage), typeof(BlogPage), typeof(ArticlePage) })]
public class CarouselPageData : PageBase
{
[Display(Name = "Short Title",
Description = "Used in places where the actual title might be too long. For example, the home page carousel.",
GroupName = Global.GroupNames.Carousel,
Order = 100)]
public virtual string ShortTitle { get; set; }
[Display(Name = "Featured Image",
Description = "Will appear in places like the Homepage Carousel.",
GroupName = Global.GroupNames.Carousel,
Order = 200)]
public virtual ContentReference FeaturedImage { get; set; }
}
}</code></pre>
<p>All I need do to make sure my Article page is available for this Carousel is to have it inherit from my CarouselPageData class and make sure that it has a PagePartial rendering configuration with the same tag as my ContentArea Property.</p>
<p>Inside ArticlePage.cs:</p>
<pre class="language-csharp"><code>public class ArticlePage : CarouselPageData</code></pre>
<p>Inside TemplateCoordinator.cs:</p>
<pre class="language-csharp"><code>viewTemplateModelRegistrator.Add(typeof(ArticlePage), new TemplateModel
{
Name = "ArticleAsCarouselSlide",
DisplayName = "Article as Carousel Slide",
Default = false,
Tags = new[] { Global.ContentAreaTags.Carousel },
AvailableWithoutTag = false,
Path = PartialPath("ArticlePageCarouselSlide")
});</code></pre>
<p>I now have the right properties, a rendering for when I drag and drop, and the global template I need for rendering the visitor view. What’s lacking is the Html.Carousel helper itself, which is used in the view above as well as a common ViewModel for the display within that template.</p>
<p>The ViewModel is rather simple, in the way of most ViewModels. The only extra logic in this one is a bit to get the publication date as I want the author to be able to set a publication date on this content manually (helpful for imported content - unless there’s another solution there I’ve not yet discovered). If a manual date has been set, then I want to use it, otherwise fallback to the content item’s initial publish date. Obviously, this is still a work in progress and there will be no hard-coded text in the final product.</p>
<pre class="language-csharp"><code>using BlogSample.Business.Extensions;
using BlogSample.Models.Pages;
using EPiServer.Core;
using EPiServer.Web.Routing;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace BlogSample.Helpers
{
public class CarouselItem
{
public PageData Page { get; set; }
public string PageUrl { get; set; }
public string TitleText { get; set; }
public string ImageUrl { get; set; }
public string Tagline { get; set; }
public DateTime PublicationDate { get; set; }
public CarouselItem(CarouselPageData carouselContent)
{
this.Page = carouselContent;
this.PageUrl = UrlResolver.Current.GetUrl(carouselContent.ContentLink);
this.TitleText = carouselContent.ShortTitle;
this.ImageUrl = carouselContent.FeaturedImage.ImageUrl();
this.Tagline = "Can't stop me now!";
this.PublicationDate = GetPublicationDate(carouselContent);
}
private DateTime GetPublicationDate(CarouselPageData carouselContent)
{
if (carouselContent is ArticlePage)
{
var articleContent = carouselContent as ArticlePage;
if (DateTime.Compare(articleContent.PublicationDate, DateTime.MinValue) != 0)
{
return articleContent.PublicationDate;
}
}
return carouselContent.StartPublish;
}
}
}</code></pre>
<p>I borrowed what I could from several places to create my Carousel helper, but mostly from the Alloy HtmlHelpers class used for menu items.</p>
<pre class="language-csharp"><code>public static IHtmlString Carousel(
this HtmlHelper helper,
IList<ContentAreaItem> itemList,
Func<List<CarouselItem>, HelperResult> itemTemplate = null)
{
itemTemplate = itemTemplate ?? GetDefaultCarouselItemTemplate(helper);
var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
var contentAreaContentLinks = itemList.Select(c => c.ContentLink).ToList();
var contentList = new List<CarouselItem>();
CarouselPageData cdata;
foreach (var item in itemList)
{
cdata = null;
contentLoader.TryGet<CarouselPageData>(item.ContentLink, out cdata);
if (cdata != null)
{
contentList.Add(new CarouselItem(cdata));
}
}
var buffer = new StringBuilder();
var writer = new StringWriter(buffer);
itemTemplate(contentList).WriteTo(writer);
return new MvcHtmlString(buffer.ToString());
}
private static Func<IList<CarouselItem>, HelperResult> GetDefaultCarouselItemTemplate(HtmlHelper helper)
{
return x => new HelperResult(writer => writer.Write(helper.PageLink(x.First().Page)));
}</code></pre>
<p>All together, I get an editor view with drag and drop placement, but I also get a fully functional Carousel rendering that is available globally so I can call it from multiple templates, should I need to do so. In addition, all any content item needs is to inherit my CarouselPageData class in order to be used as a slide.</p>
<p>This is still very early in development of this project and any or all of the code above is subject to change as the project proceeds and I continue to learn about development in EPiServer and MVC. The entire project is being <a href="https://github.com/egandalf/EPiServer-Blog-Sample-Site">published to GitHub as well</a>, so you can see what I’m up to and check in periodically on my progress.</p>
<p>Happy coding!</p>2015-04-06T18:09:07.1800000ZBlog post