Blog posts by KennyG

Sending Email with Attachments with Optimizely Forms in 2025

Mon, 11 Aug 2025 18:22:37 GMT

Most articles on adding attachments to Optimizely Forms emails are from around 2019 and don’t cover the most recent versions. This post walks through my 2025 implementation and the lessons learned. Your mileage may vary.

The Problem

Optimizely Forms’ built-in SendEmailAfterSubmissionActor sends clean, simple emails after a form is submitted. When you use the File Upload Form Element Block, the actor includes links in the email to where files are stored in the CMS.

That’s fine for internal users with CMS access. But if your recipients are external — customers, partners, vendors — those links won’t work for them.
What I needed was:

Direct access to the MimeMessage object.
Ability to attach uploaded files directly to the outgoing email.

Why Subclassing Won’t Work

Optimizely’s SendEmailAfterSubmissionActor only allows limited subclassing.
Many of the key operations are private, not protected, and MimeMessage is never handed back for customization.

That means no way to simply “hook in” and add attachments — which is why I opted to:

Decompile the original actor.
Copy the logic wholesale.
Insert my changes where needed.

The Approach

The original actor:

Sends plain text or HTML emails (TextPart only).
Has no concept of multipart MIME or file attachments.

The modified actor:

Builds a Multipart("mixed") message.
Adds the original body as a TextPart.
Calls a new helper method AddFileAttachments(multipart), to append uploaded files.
Resolves uploaded files from CMS blobs, determines their content type, and attaches them to the outgoing email.

Attachments Support

Attachment handling includes:

Detecting file upload fields from the form submission (FriendlyNameInfo and field naming patterns like file, upload, attachment).
Resolving blob references via IBlobFactory and IUrlResolver.
Determining content type based on file extension.
Embedding attachments as MimePart instances with base64 encoding.

Dependency Additions

To make this work, I added:

IFormRepository – retrieve form field metadata.
IBlobFactory & IUrlResolver – fetch binary data for uploaded files.
A DetermineContentType helper – ensures attachments have correct MIME types.

Body Construction Changes

Original
Used:

message.Body = new TextPart(subtype) { Text = this.RewriteUrls(content) };

Modified
Wraps the body in a Multipart("mixed") so it can contain both the body and attachments:

Key New Methods

Attachment Processing

protected virtual void AddFileAttachments(Multipart multipart)
{
    var friendlyNameInfos = _formRepository.Service.GetFriendlyNameInfos(this.FormIdentity);

    foreach (var submissionDataItem in this.SubmissionData.Data)
    {
        var friendlyNameInfo = friendlyNameInfos
            .FirstOrDefault(f => string.Equals(f.ElementId, submissionDataItem.Key, StringComparison.OrdinalIgnoreCase));

        if (friendlyNameInfo != null && IsFileUploadField(friendlyNameInfo, submissionDataItem.Value))
        {
            var fileUploads = submissionDataItem.Value.ToString().Split("|");

            foreach (var fileUpload in fileUploads)
            {
                AttachFileFromBlob(multipart, fileUpload, friendlyNameInfo.FriendlyName);
            }
        }
    }
}

Note: If the form allows multiple uploads, they come through as a single string separated by |.

File Attachment Helper

protected virtual void AttachFileFromBlob(Multipart multipart, string blobIdentifier, string friendlyName)
{
    Blob blob = null;
    IContent contentData = _urlResolver.Service.Route(new UrlBuilder(blobIdentifier));

    if (contentData is MediaData media)
    {
        blob = _blobFactory.Service.GetBlob(media.BinaryData.ID);
    }

    if (blob != null)
    {
        var memoryStream = new MemoryStream();
        blob.OpenRead().CopyTo(memoryStream);
        memoryStream.Position = 0;

        var fileName = blobIdentifier.Split(new[] { "#@" }, StringSplitOptions.None).Last();
        var contentType = DetermineContentType(blob, fileName);

        multipart.Add(new MimePart(contentType)
        {
            Content = new MimeContent(memoryStream, ContentEncoding.Default),
            ContentDisposition = new ContentDisposition(ContentDisposition.Attachment),
            ContentTransferEncoding = ContentEncoding.Base64,
            FileName = fileName
        });
    }
}

The original filename is appended to the identifier after #@ — this extracts it for the email attachment.

Determine Content Type Helper

    protected virtual string DetermineContentType(Blob blob, string fileName)
    {
        // Try to get content type from blob
        // This might be available in blob metadata depending on your implementation

        // Fall back to determining from file extension
        string extension = Path.GetExtension(fileName)?.ToLowerInvariant();

        return extension switch
        {
            ".pdf" => "application/pdf",
            ".doc" => "application/msword",
            ".docx" => "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
            ".xls" => "application/vnd.ms-excel",
            ".xlsx" => "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            ".jpg" or ".jpeg" => "image/jpeg",
            ".png" => "image/png",
            ".gif" => "image/gif",
            ".txt" => "text/plain",
            ".csv" => "text/csv",
            ".zip" => "application/zip",
            ".xml" => "application/xml",
            ".json" => "application/json",
            _ => "application/octet-stream"
        };
    }

SendMessage() Changes

Original:

MimeMessage message = new MimeMessage();
            
message.Subject = str1;
string subtype = this._sendMessageInHTMLFormat ? "html" : "plain";
message.Body = (MimeEntity) new TextPart(subtype, new object[1]
{
    (object) this.RewriteUrls(content)
});

Modified:

MimeMessage message = new MimeMessage();
message.Subject = str1;

// Create multipart message to support attachments
var multipart = new Multipart("mixed");

string subtype = this._sendMessageInHTMLFormat ? "html" : "plain";
multipart.Add(new TextPart(subtype, new object[1]
{
       (object) this.RewriteUrls(content)
}));

// Add file attachments
this.AddFileAttachments(multipart);

message.Body = multipart;

Wiring It Up

To replace the out-of-the-box actor, you’ll likely need to do it in your Dependency Injection setup.
In my case, I didn’t replace it globally — we already had a subclassed actor for applying different HTML templates, so I had that subclass inherit from the new replacement instead of the original.

Takeaways

Original actor: Simple, reliable, zero attachment support.
Modified actor: Same foundation, plus multipart MIME and attachment handling.

If you need to extend built-in actors in Optimizely Forms beyond what the public API offers, sometimes you’ll have to work at the code level.

Caution: After any update to the Forms package, check if SendEmailAfterSubmissionActor has changed — you may need to re-sync your version or take advantage of new core features.

Have any thoughts or opinions? Let me know in the comments!

Follow-Up: Fixing JSON Casing in Optimizely CMS Export Data

Mon, 02 Jun 2025 13:17:32 GMT

*Note: This issue seems to be resolved with EPiServer.CMS Version 12.33.1.

A Targeted Action Filter to Enforce CamelCase

In my previous blog post, I discussed an issue we were having with JSON formatting in Optimizely CMS exports after updating NuGet packages. Specifically, the /EPiServer/EPiServer.Cms.UI.Admin/ExportData/GetExportStatus endpoint returned PascalCase JSON property names, breaking other parts of our site where the frontend expected camelCase.

That led to UI failures—most notably, a never-ending loading spinner. To address this without affecting global JSON settings, I implemented an action filter that ensures camelCase formatting for this specific route. Here’s how it works.

Recap: Why JSON Formatting Matters

Many JavaScript frameworks (like React and Angular) expect JSON property names in camelCase. When a response unexpectedly comes in PascalCase, bindings can break, leading to missing data or even complete UI failures.

Instead of globally modifying JSON settings—which might have unintended consequences across the CMS—the best approach is a targeted fix that applies only to the problematic endpoint.

The Solution: CamelCase JSON for Export Status

This ASP.NET Core action filter ensures JSON responses from /EPiServer/EPiServer.Cms.UI.Admin/ExportData/GetExportStatus are always camelCase:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.AspNetCore.Mvc.Formatters;
using System.Text.Json;
using System.Linq;
using System.Text.Json.Serialization.Metadata;

namespace Website.API.Filters
{
    /// <summary>
    /// Action filter to enforce camelCase JSON for /EPiServer/EPiServer.Cms.UI.Admin/ExportData/GetExportStatus responses.
    /// </summary>
    public class CamelCaseJsonForExportStatusFilter : IActionFilter
    {
        public void OnActionExecuting(ActionExecutingContext context)
        {
            // No action needed before execution
        }

        public void OnActionExecuted(ActionExecutedContext context)
        {
            // Only apply to the specific route
            var path = context.HttpContext.Request.Path.Value;
            if (!string.Equals(path, "/EPiServer/EPiServer.Cms.UI.Admin/ExportData/GetExportStatus",
                    StringComparison.OrdinalIgnoreCase))
                return;

            if (context.Result is ObjectResult objectResult)
            {
                // Find the SystemTextJsonOutputFormatter and update its options
                var jsonFormatter = objectResult.Formatters
                    .OfType<SystemTextJsonOutputFormatter>()
                    .FirstOrDefault();

                if (jsonFormatter != null)
                {
                    // Update the naming policy to camelCase
                    jsonFormatter.SerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase;
                }
                else
                {
                    objectResult.Formatters.Add(new SystemTextJsonOutputFormatter(
                        new JsonSerializerOptions
                        {
                            PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
                            WriteIndented = false,
                            TypeInfoResolver = new DefaultJsonTypeInfoResolver()
                        }
                    ));
                }
            }
        }
    }
}

How to Plug It In

Add the following to Startup.cs to register the filter globally (since it self-filters by route):

The filter only runs logic when the request is for /ExportData/GetExportStatus, so it’s safe to register app-wide.

How It Works

Intercepting the Response

The filter implements IActionFilter, modifying responses after an action executes.
OnActionExecuting remains empty since no changes are needed before execution.
OnActionExecuted checks if the request path matches the export status endpoint.

Applying JSON Formatting

If the response is an ObjectResult, it searches for an existing SystemTextJsonOutputFormatter.
If found, it updates its SerializerOptions.PropertyNamingPolicy to JsonNamingPolicy.CamelCase.
If no formatter exists, it adds a new one with the correct settings.

Why This Approach?

Scoped Fix – Only affects /ExportData/GetExportStatus, leaving other JSON responses untouched.
Minimal Overhead – Modifies existing formatters when possible, optimizing performance.
Future-Proofing – Ensures a formatter exists even if Optimizely CMS updates its behavior later.

Conclusion

This targeted action filter prevents unexpected JSON formatting issues in Optimizely CMS. By enforcing camelCase only for the export status response, it eliminates UI failures while avoiding unnecessary changes to global settings.

Let me know if you have alternative approaches or thoughts—drop them in the comments.

Fixing a Sneaky JSON Casing Bug when Exporting in Optimizely CMS

Tue, 27 May 2025 00:46:15 GMT

*Note: This issue seems to be resolved with EPiServer.CMS Version 12.33.1.

We recently encountered a pretty frustrating issue while working with Optimizely CMS: after attempting to upgrade to the latest NuGet packages, data exports would just hang—no error, no download, just… spinning forever.

We contacted support, and they had us rule out a timeout problem by tweaking timeout settings in appsettings.json. No luck.
Eventually, after providing Optimizely Support access to a lower environment, they discovered something weird in the export polling response: the JSON was being returned in PascalCase instead of camelCase. Here’s what the problematic JSON looked like:

{
  "FileId": "tmpOMsqJV.tmp",
  "IsDone": true,
  "IsAborting": false,
  "IsTest": false,
  "ErrorMessages": [],
  "WarningMessages": [],
  "InfoMessages": ["Export completed without errors or warnings"],
  "PageCount": 44,
  ...
}

The client-side JavaScript was expecting camelCase (isDone, not IsDone), so even though the export finished, the UI didn’t recognize it. The result? An endless spinner.
After some digging, we found this in our Startup.cs:

services.AddControllers(
    options => options.SuppressImplicitRequiredAttributeForNonNullableReferenceTypes = true)
    .AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);

Setting PropertyNamingPolicy to null meant the JSON output kept the C# property casing (PascalCase). Changing that to use JsonNamingPolicy.CamelCase solved the problem:

services.AddControllers(
    options => options.SuppressImplicitRequiredAttributeForNonNullableReferenceTypes = true)
    .AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = JsonNamingPolicy.CamelCase);

Once that was in place, the export started working correctly. Of course, we're planning more testing to make sure this doesn't cause side effects elsewhere, but if you run into mysterious export issues after a NuGet update or configuration change—double-check your JSON naming settings. It might just save you hours of Googling.

Integrating IndexNow with Optimizely Publishing

Wed, 23 Oct 2024 20:01:14 GMT

Overview of IndexNow

IndexNow is a standard for search engines that allows you to submit a URL (along with your API key) to inform the search engines that the page should be indexed. We wanted to automate this by hooking into the PublishedContent event.

The payload follows this format:

Request
POST /IndexNow HTTP/1.1
Content-Type: application/json; charset=utf-8
Host: api.indexnow.org
{
  "host": "www.example.org",
  "key": "e50c2cc6036f4922945f1c62fab66f9e",
  "keyLocation": "https://www.example.org/e50c2cc6036f4922945f1c62fab66f9e.txt",
  "urlList": [
      "https://www.example.org/url1",
      "https://www.example.org/folder/url2",
      "https://www.example.org/url3"
      ]
}

Implementation

First, we needed a way to host the API key which normally is stored in a plain text (txt) file hosted at the root of the website. I did not want to open up the website to serve up any text files that might happen to be part of the site so I created a new pagetype.

Txtpage

Txtpage.cs is a simple CMS pagetype with a single field for the content of the text file.

[Access(Roles = "Administrators, WebAdmins, CmsAdmins")]
[ContentType(DisplayName = "TxtPage", GUID = "XXXXXXXX-XXX-XXXX-XXXX-XXXXXXXXXXX", Description = "")]
public class TxtPage : PageData
{
        [Display(
            Name = "Content",
            Description = "Txt Content",
            GroupName = PropertyGroups.PageContent,
            Order = 1)]
        public virtual String? Content { get; set; }
}

The cshtml is about as simple as it ever gets, using Html.Raw() to output the content.

@{
    Layout = null;
}
@model Century.Website.Features.Pages.TxtPage.TxtPage

@Html.Raw(Model.Content)

Updating the Name In Url field with the key and .txt extension allows this to mimic the path of an actual text file.

The content displays as so:

API Key

The API Key is stored in appsettings.json. I also added an environment-specific value for enabling/disabling the feature. (You probably don't want lower environment broadcasting themselves to search engines.)

These are pulled from the JSON by the Dependency-injected Configuration class.

var bingKey = _configuration.GetValue<string>("BingAPIKey");

var indexNowEnabled = _configuration.GetValue<bool>("BingIndexNowEnable");

Initialization Module to attach PublishedContent content event

We make a few checks to ensure that the page being published is something we want to submit to search engines. After checking that the feature is enabled for the current environment we check the interface. Here we make sure that it is NOT a page type excluded from the sitemap (the IExcludeFromSitemap interface comes from the Geta 404Handler package) and ISEOAnalytic is our interface for pagetypes that have a SEO tab with noindex and nofollow settings. If noindex is active we do not want this page submitted.

private void PublishedContent(object sender, ContentEventArgs e)
{
    try
    {
        var indexNowEnabled = _configuration.GetValue<bool>("BingIndexNowEnable");

        if (indexNowEnabled)
        {
            if (e.Content is ISEOAnalytic baseSeo)
            {
                //is set to noindex or is excluded by interface
                var markedNoIndex = e.Content is IExcludeFromSitemap || (baseSeo != null && baseSeo.NoIndex);

                if (!markedNoIndex)
                {
                    _ = SubmitToUrl(e.ContentLink.GetExternalUrl());
                }
            }
        }
    }
    catch (Exception ex)
    {
        Logger.Error($"ERROR in BINGIndexNow: {ex?.Message}, InnerException: {ex?.InnerException}");
    }
}

If it passes all checks we call the SubmitToUrl method passing in the external URL.

We have an IndexNowJson.cs POCO class for submitting as the payload.

public class IndexNowJson
{
    public string host { get; set; }
    public string key { get; set; }
    public string keyLocation { get; set; }
    public string[] urlList { get; set; }
}

This is where the txt page created earlier and the apikey come together. (Obviously the key in appsettings and in the txtpage should be the same.)

var indexNowData = new IndexNowJson
{
    host = $"www.yourdomain.com",
    key = bingKey,
    keyLocation = $"www.yourdomain.com/{bingKey}.txt",
    urlList = new[] { url }
};

We take in the URL, create the payload, and POST it to the IndexNow endpoint.

//fire and forget
private async Task SubmitToUrl(string url)
{
    var bingKey = _configuration.GetValue<string>("BingAPIKey");

    var indexNowData = new IndexNowJson
    {
        host = $"www.yourdomain.com",
        key = bingKey,
        keyLocation = $"www.yourdomain.com/{bingKey}.txt",
        urlList = new []{ url }
    };

    var jsonClass = JsonConvert.SerializeObject(indexNowData);

    var request = new HttpRequestMessage(HttpMethod.Post, "https://api.indexnow.org/IndexNow");
    request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
    request.Content = new StringContent(jsonClass, Encoding.UTF8);
    request.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");


    var postResponse = await _httpClient.SendAsync(request);

    Logger.Log(Level.Information, $"Status Code: {postResponse.StatusCode} Reason Phrase: {postResponse.ReasonPhrase}");
}

This is a fire-and-forget situation as we don't want the site to do anything differently if there is a problem submitting to IndexNow.

Conclusion

It is a pretty straightforward process to submit to the IndexNow endpoint. I did find Bing's documentation to be inconsistent but was able to work through it. Thoughts, comments, concerns? Let me know below.

Azure Function App for PDF Creation With Syncfusion .Net PDF Framework

Thu, 08 Aug 2024 16:21:38 GMT

We have a couple of use cases that require internal and external users to print content in PDF format. We've offloaded this functionality from the DXP Web App to an Azure Function App running in a Docker container. We make use of the Syncfusion .Net PDF Framework (note: subscription required). Our first use case allows you to provide a URL to the endpoint for printing. The second use case involves POSTing an array of XHTML content to the endpoint.

Create the Azure Function App

In Visual Studio create a new project and choose Azure Functions.

Give the project a name

I'm taking the defaults here:

.Net 8 Isolated for the version
Http trigger for the function because we will be using GET and POST
Enable container support because we will be utilizing Docker
Function for the Authorization level so that it will require a Function Key. (When hosted in Azure at this authorization level it will require a Function Key to access the endpoint.)

Click Create.

This gives us the basic scaffolding.

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.Functions.Worker;
using Microsoft.Extensions.Logging;

namespace TestPdfEndpoint
{
    public class Function1
    {
        private readonly ILogger<Function1> _logger;

        public Function1(ILogger<Function1> logger)
        {
            _logger = logger;
        }

        [Function("Function1")]
        public IActionResult Run([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequest req)
        {
            _logger.LogInformation("C# HTTP trigger function processed a request.");
            return new OkObjectResult("Welcome to Azure Functions!");
        }
    }
}

Add the ConvertUrlToPdf Function

Rename Function1 to ConvertUrlToPdf.

    public class ConvertUrlToPdf
    {
        private readonly ILogger<ConvertUrlToPdf> _logger;

        public ConvertUrlToPdf(ILogger<ConvertUrlToPdf> logger)
        {
            _logger = logger;
        }

        [Function("ConvertUrlToPdf")]
        public IActionResult Run([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequest req)
        {
            _logger.LogInformation("C# HTTP trigger function processed a request.");
            return new OkObjectResult("Welcome to Azure Functions!");
        }
    }

Change IActionResult to an async task and add a FunctionContext parameter.

public async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequest req, FunctionContext functionContext)

Add the Syncfusion.HtmlToPdfConverter.Net.Linux nuget package. Our Function App will be hosted on Linux. This package will do the heavy lifting of converting the URL to a PDF file. The nuget includes the Blink headless Chrome browser.

We will pass a URL to the function as a querystring parameter so check the request for a "URL" parameter. Return an EmptyResult if not found.

string urlString = req.Query["url"];

 //return if no url
 if (string.IsNullOrEmpty(urlString))
{
     return new EmptyResult();
 }

Get the path to the Blink binaries. This will be needed later in a settings object:

var directory = Directory.GetCurrentDirectory();
var blinkBinariesPath = Path.Combine(directory, "runtimes/linux/native");

Initialize the HTML to PDF Converter:

//Initialize the HTML to PDF converter with the Blink rendering engine.
var htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)
 {
       ConverterSettings = null,
       ReuseBrowserProcess = false
};

Create a settings object and set the values. These command line argument settings come from the Syncfusion documentation.

var settings = new BlinkConverterSettings();

 //Set command line arguments to run without sandbox.
settings.CommandLineArguments.Add("--no-sandbox");
settings.CommandLineArguments.Add("--disable-setuid-sandbox");

settings.BlinkPath = blinkBinariesPath;

Assign the settings object.

//Assign WebKit settings to the HTML converter 
htmlConverter.ConverterSettings = settings;

Pass the URL to the converter. Save to an output stream.

var newDocument = htmlConverter.Convert(urlString);

var ms = new MemoryStream();

newDocument.Save(ms);
newDocument.Close();

ms.Position = 0;

Return a FileStreamResult from the MemoryStream. Giving it a content type and a file name.

return new FileStreamResult(ms, "application/pdf")
{
      FileDownloadName = "Test.pdf"
};

At this point, your function should look like this:

    public class ConvertUrlToPdf
    {
        private readonly ILogger<ConvertUrlToPdf> _logger;

        public ConvertUrlToPdf(ILogger<ConvertUrlToPdf> logger)
        {
            _logger = logger;
        }

        [Function("ConvertUrlToPdf")]
        public async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequest req, FunctionContext functionContext)
        {
            string urlString = req.Query["url"];

            //return if no url
            if (string.IsNullOrEmpty(urlString))
            {
                return new EmptyResult();
            }

            var directory = Directory.GetCurrentDirectory();

            var blinkBinariesPath = Path.Combine(directory, "runtimes/linux/native");

            //Initialize the HTML to PDF converter with the Blink rendering engine.
            var htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)
            {
                ConverterSettings = null,
                ReuseBrowserProcess = false
            };

            var settings = new BlinkConverterSettings();

            //Set command line arguments to run without sandbox.
            settings.CommandLineArguments.Add("--no-sandbox");
            settings.CommandLineArguments.Add("--disable-setuid-sandbox");

            settings.BlinkPath = blinkBinariesPath;

            //Assign WebKit settings to the HTML converter 
            htmlConverter.ConverterSettings = settings;

            var newDocument = htmlConverter.Convert(urlString);

            var ms = new MemoryStream();

            newDocument.Save(ms);
            newDocument.Close();

            ms.Position = 0;

            return new FileStreamResult(ms, "application/pdf")
            {
                FileDownloadName = "Test.pdf"
            };

        }
    }

You can add additional querystring parameters to control all aspects of the PDF output such as orientation, height, width, output file name, etc.

string orientation = req.Query["orientation"];
string widthString = req.Query["width"];
string heightString = req.Query["height"];
string fileName = req.Query["filename"]; 

int.TryParse(widthString, out int width);
int.TryParse(heightString, out var height);

if (width == 0)
{
      width = 817;
}

if (!string.IsNullOrEmpty(orientation) && orientation.ToLower().Equals("landscape"))
       settings.Orientation = PdfPageOrientation.Landscape;

settings.BlinkPath = blinkBinariesPath;
settings.Margin.All = 0;
settings.ViewPortSize = new Size(width, height);

Updating the Dockerfile

There are some underlying requirements that Syncfusion needs in place so you'll need to add the following to your Dockerfile (refer to Syncfusion documentation):

RUN apt-get update && \
apt-get install -yq --no-install-recommends \ 
libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \ 
libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \ 
libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \ 
libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \ 
libnss3 libgbm1

So my complete Dockerfile looks as follows:

#See https://aka.ms/customizecontainer to learn how to customize your debug container and how Visual Studio uses this Dockerfile to build your images for faster debugging.

FROM mcr.microsoft.com/azure-functions/dotnet-isolated:4-dotnet-isolated8.0 AS base
RUN apt-get update && \
apt-get install -yq --no-install-recommends \ 
libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \ 
libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \ 
libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 \ 
libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 \ 
libnss3 libgbm1
WORKDIR /home/site/wwwroot
EXPOSE 8080

FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build
ARG BUILD_CONFIGURATION=Release
WORKDIR /src
COPY ["TestPdfEndpoint.csproj", "."]
RUN dotnet restore "./TestPdfEndpoint.csproj"
COPY . .
WORKDIR "/src/."
RUN dotnet build "./TestPdfEndpoint.csproj" -c $BUILD_CONFIGURATION -o /app/build

FROM build AS publish
ARG BUILD_CONFIGURATION=Release
RUN dotnet publish "./TestPdfEndpoint.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /home/site/wwwroot
COPY --from=publish /app/publish .
ENV AzureWebJobsScriptRoot=/home/site/wwwroot \
    AzureFunctionsJobHost__Logging__Console__IsEnabled=true

Testing the PrintUrlToPdf Endpoint

Spin up the container using Docker Desktop. You can use your browser or Postman to test the PDF generation. Append the URL of the site you want to print to the querystring.

Add the ConvertToPdf Function

The second function is mostly a copy/paste of the first with some tweaks.

For this function, we'll look for an array of Xhtmlstrings that are POSTed.

req.Form.TryGetValue("html", out var strings);

Then we'll create a stream for each one.

var streams = new Stream[strings.Count];

for (var i = 0; i < strings.Count; i++)
{
        streams[i] = GetMemoryStream(strings[i], htmlConverter);
}

GetMemoryStream looks like the following:

private static MemoryStream GetMemoryStream(string url, HtmlToPdfConverter htmlConverter)
{
    try
    {
        PdfDocument newDocument = htmlConverter.Convert(url, string.Empty);

        var ms = new MemoryStream();

        newDocument.Save(ms);
        newDocument.Close();

        ms.Position = 0;

        return ms;
    }
    catch (Exception e)
    {
        Console.WriteLine(e);
        throw;
    }
}

Create a new PdfDocument that will hold the merged content.

var mergedDocument = new PdfDocument
{
    EnableMemoryOptimization = true
};

Add the streams into the PdfDocument.

PdfDocumentBase.Merge(mergedDocument, streams);

//Save the document into stream.
var stream = new MemoryStream();
mergedDocument.Save(stream);

//Close the document.
mergedDocument.Close(true);

//Disposes the streams.
foreach (var memStream in streams)
{
    await memStream.DisposeAsync();
}

stream.Position = 0;

Finally, return the FileStreamResult.

return new FileStreamResult(stream, "application/pdf")
{
    FileDownloadName = "TestMergedPdf.pdf"
};

The final version of ConvertToPdf is as follows:

    public class ConvertToPdf
    {
        private readonly ILogger<ConvertToPdf> _logger;

        public ConvertToPdf(ILogger<ConvertToPdf> logger)
        {
            _logger = logger;
        }

        [Function("ConvertToPdf")]
        public async Task<IActionResult> Run([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequest req)
        {
            req.Form.TryGetValue("html", out var strings);
            
            var directory = Directory.GetCurrentDirectory();

            var blinkBinariesPath = Path.Combine(directory, "runtimes/linux/native");

            //Initialize the HTML to PDF converter with the Blink rendering engine.
            var htmlConverter = new HtmlToPdfConverter(HtmlRenderingEngine.Blink)
            {
                ConverterSettings = null,
                ReuseBrowserProcess = false
            };

            var settings = new BlinkConverterSettings();

            //Set command line arguments to run without sandbox.
            settings.CommandLineArguments.Add("--no-sandbox");
            settings.CommandLineArguments.Add("--disable-setuid-sandbox");

            settings.BlinkPath = blinkBinariesPath;

            //Assign WebKit settings to the HTML converter 
            htmlConverter.ConverterSettings = settings;

            var streams = new Stream[strings.Count];

            for (var i = 0; i < strings.Count; i++)
            {
                streams[i] = GetMemoryStream(strings[i], htmlConverter);
            }


            var mergedDocument = new PdfDocument
            {
                EnableMemoryOptimization = true
            };

            try
            {
                PdfDocumentBase.Merge(mergedDocument, streams);

                //Save the document into stream.
                var stream = new MemoryStream();
                mergedDocument.Save(stream);

                //Close the document.
                mergedDocument.Close(true);

                //Disposes the streams.
                foreach (var memStream in streams)
                {
                    await memStream.DisposeAsync();
                }

                stream.Position = 0;

                return new FileStreamResult(stream, "application/pdf")
                {
                    FileDownloadName = "TestMergedPdf.pdf"
                };
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                throw;
            }
        }
        private static MemoryStream GetMemoryStream(string url, HtmlToPdfConverter htmlConverter)
        {
            try
            {
                PdfDocument newDocument = htmlConverter.Convert(url, string.Empty);

                var ms = new MemoryStream();

                newDocument.Save(ms);
                newDocument.Close();

                ms.Position = 0;

                return ms;
            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                throw;
            }
        }
    }

Testing the ConvertToPdf Endpoint

Spin up the container using Docker Desktop. Use Postman to test. POST to the endpoint, providing multiple "HTML" Key-Value pairs. One per page of the PDF

Tying it Back to your Optimizely Web App

Now that you have the endpoints, you can provide links to print specific URLs or POST content.

Notes

For production use, you will need to purchase a license and provide it to the app:

Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("XXX...");

Setting up the Function in Azure is outside of the scope of this article but I might cover it in a future post.

Rolling Restart Revolution!

Thu, 01 Aug 2024 17:35:11 GMT

I'm not sure if anyone has written about this yet or not. If so, I'm sorry. But we discovered something this morning where the heavens opened up and the angels sang Hallelujah! A new setting in the PAAS self-service portal where you can kick off a "rolling restart".

I'm not sure about your team but this is something we've been wishing for for a long while. Every once in a while we will push something and it doesn't work quite right until the sites have all been restarted. This will save us from having to open a support ticket and allow us to take care of it ourselves. Thank you Optimizely!

Programmatically Exempt A PageType From Content Approval

Sun, 13 Aug 2023 16:23:28 GMT

We've got a use case that I think is a little advanced for what you get with Content Approval out of the box. We're a home builder and our commerce catalog is structured as Brand > State > City > Community > Lots (homes) and Plans.

While we want to require content approval at the community level (which numbers in the hundreds) we might not want to require approval at the lot and plan level (which numbers in the thousands). So if you set up Content Approval at the State level it is going to inherit all of the way down. We want to break it at certain points programmatically.

I've tested this out in a fresh Alloy site. Enable Content Approval at the About Us node and it will apply to the entire branch.

Let's exempt the NewsPage page type from Content Approval.

You can see that it gets its definition from the parent node.

We create an Initialization Module so we can hook into the the SavingContent event.

        public void Initialize(InitializationEngine context)
        {
            _contentEvents = context.Locate.Advanced.GetInstance<IContentEvents>();
            _approvalDefinitionRepository = context.Locate.Advanced.GetInstance<IApprovalDefinitionRepository>();
            _contentRepository = context.Locate.Advanced.GetInstance<IContentRepository>();

            _contentEvents.SavingContent += ContentEvents_SavingContent_DisableContentApproval;
        }

        private async void ContentEvents_SavingContent_DisableContentApproval(object sender, ContentEventArgs e)
        {
            if (e.Content is NewsPage)
            {
                // Gets the latest version of a definition by resolving a ContentReference.  
                var definitionResolveResult = await _approvalDefinitionRepository.ResolveAsync(e.ContentLink);

                // The Resolve-method returns a result with a definition and a flag specifying if the definition was found on an ancestor
                var definition = definitionResolveResult.Definition as ContentApprovalDefinition;
                var isInherited = definitionResolveResult.IsInherited;

                if (definition != null && definition.IsEnabled)
                {
                    CreateOrUpdateDefinition(definition, e.ContentLink, false, isInherited);
                }
            }
        }

For any pagetype that is a NewsPage we use the ContentReference to get the definition (ApprovalDefinitionResolveResult) that applies to that specific node. ApprovalDefinitionResolveResult is an object that contains the Definition (ApprovalDefinition) and an IsInherited flag (bool) that signifies whether the definition comes from this node or is inherited from an ancestor.

    public class ApprovalDefinitionResolveResult
    {
        //
        // Summary:
        //     The resolved approval definition or null is no is found
        public ApprovalDefinition Definition { get; set; }

        //
        // Summary:
        //     Specifies if the definition was inherited from a content ancestor
        public bool IsInherited { get; set; }
    }

We cast this definition as a ContentApprovalDefinition. We check to make sure the definition isn't null and that it is enabled (active). Then we pass it to a CreateOrUpdateDefinition method. When using this method if a definition does not exist it creates one, otherwise it updates it.

        private void CreateOrUpdateDefinition(ContentApprovalDefinition definition, ContentReference contentLink, bool isEnabled, bool isInherited)
        {
            if (definition == null)
            {
                CreateContentDefinition(contentLink, isEnabled);
                return;
            }

            //first pass definition down to any children to break inheritance
            var children = _contentRepository.GetChildren<PageData>(contentLink);

            if (children != null && children.Any())
            {

                foreach (var child in children)
                {
                    var definitionResolveResult = _approvalDefinitionRepository.ResolveAsync(child.ContentLink).Result;

                    if (definitionResolveResult.IsInherited)
                    {
                        UpdateDefinition(definitionResolveResult.Definition as ContentApprovalDefinition, child.ContentLink, definitionResolveResult.Definition.IsEnabled);
                    }
                }
            }

            //update page 
            UpdateDefinition(definition, contentLink, isEnabled);

        }

We check to see if the current node has any children, if so (and they are of a non-exempt page type) we need to pass the definition down to each one to break the inheritance. We loop through the children and update the definition for each one. Now that each child is now the root of its own approval branch we can update the node itself and turn off inheritance for that node by using the UpdateDefinition method.

        private void UpdateDefinition(ContentApprovalDefinition definition, ContentReference contentLink, bool isEnabled)
        {
            var newDefinition = definition.CreateWritableClone() as ContentApprovalDefinition;
            newDefinition.IsEnabled = isEnabled;
            newDefinition.ContentLink = contentLink;

            _approvalDefinitionRepository.SaveAsync(newDefinition).ConfigureAwait(false);
        }

We clone the definition that has been passed in (this definition comes from the ancestor), set it as enabled, give it the current node link, and save it. The method for creating a definition is very similar.

        private void CreateContentDefinition(ContentReference contentLink, bool isEnabled)
        {
            var newDefinition = new ContentApprovalDefinition
            {
                ContentLink = contentLink,
                IsEnabled = isEnabled
            };

            _approvalDefinitionRepository.SaveAsync(newDefinition).ConfigureAwait(false);
        }

Now you may be saying to yourself, none of this comes into effect until the page is saved. That's what is nice about this approach, you don't have to loop through the entire tree to apply it. It kicks in for any node of the exempt type when an editor starts editing and applies during the first AutoSave.

Here is the entire Init Module:

using EPiServer.Approvals.ContentApprovals;
using EPiServer.Approvals;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using EPiServer.Web;
using Opti_Alloy.Models.Pages;

namespace Opti_Alloy.Business.Initialization
{
    [ModuleDependency(typeof(InitializationModule))]
    public class ExemptPageTypesInitialization : IInitializableModule
    {
        private IContentEvents _contentEvents;
        private IApprovalDefinitionRepository _approvalDefinitionRepository;
        private IContentRepository _contentRepository;

        public void Initialize(InitializationEngine context)
        {
            _contentEvents = context.Locate.Advanced.GetInstance<IContentEvents>();
            _approvalDefinitionRepository = context.Locate.Advanced.GetInstance<IApprovalDefinitionRepository>();
            _contentRepository = context.Locate.Advanced.GetInstance<IContentRepository>();

            _contentEvents.SavingContent += ContentEvents_SavingContent_DisableContentApproval;
        }

        private async void ContentEvents_SavingContent_DisableContentApproval(object sender, ContentEventArgs e)
        {
            if (e.Content is NewsPage)
            {
                // Gets the latest version of a definition by resolving a ContentReference.  
                var definitionResolveResult = await _approvalDefinitionRepository.ResolveAsync(e.ContentLink);

                // The Resolve-method returns a result with a definition and a flag specifying if the definition was found on an ancestor
                var definition = definitionResolveResult.Definition as ContentApprovalDefinition;
                var isInherited = definitionResolveResult.IsInherited;

                if (definition != null && definition.IsEnabled)
                {
                    CreateOrUpdateDefinition(definition, e.ContentLink, false, isInherited);
                }
            }
        }

        private void CreateOrUpdateDefinition(ContentApprovalDefinition definition, ContentReference contentLink, bool isEnabled, bool isInherited)
        {
            if (definition == null)
            {
                CreateContentDefinition(contentLink, isEnabled);
                return;
            }

            //first pass definition down to any children to break inheritance
            var children = _contentRepository.GetChildren<PageData>(contentLink);

            if (children != null && children.Any())
            {

                foreach (var child in children)
                {
                    var definitionResolveResult = _approvalDefinitionRepository.ResolveAsync(child.ContentLink).Result;

                    if (definitionResolveResult.IsInherited)
                    {
                        UpdateDefinition(definitionResolveResult.Definition as ContentApprovalDefinition, child.ContentLink, definitionResolveResult.Definition.IsEnabled);
                    }
                }
            }

            //update page 
            UpdateDefinition(definition, contentLink, isEnabled);

        }

        private void UpdateDefinition(ContentApprovalDefinition definition, ContentReference contentLink, bool isEnabled)
        {
            var newDefinition = definition.CreateWritableClone() as ContentApprovalDefinition;
            newDefinition.IsEnabled = isEnabled;
            newDefinition.ContentLink = contentLink;

            _approvalDefinitionRepository.SaveAsync(newDefinition).ConfigureAwait(false);
        }

        private void CreateContentDefinition(ContentReference contentLink, bool isEnabled)
        {
            var newDefinition = new ContentApprovalDefinition
            {
                ContentLink = contentLink,
                IsEnabled = isEnabled
            };

            _approvalDefinitionRepository.SaveAsync(newDefinition).ConfigureAwait(false);
        }

        public void Uninitialize(InitializationEngine context)
        {
            _contentEvents.SavingContent -= ContentEvents_SavingContent_DisableContentApproval;
        }
    }
}

Going back to our Alloy example, if we edit something on the Events page (NewsPage) we can see that it is ready for direct publish, because the definitions were updated as soon as it Autosaved.

Checking the Content Approval settings, we see that the process is disabled at this node.

And then checking that node's children, we see that each of them is now the root of a new approval sequence copied from the ancestor.

There may be other approaches but I like that this one only kicks in when needed and can be done at any point in the branch. My initial attempt only worked for the end nodes (leaves) but this approach is much more flexible since it copies the definitions down to the children before updating the current node.

Let me know what you think in the comments!

New to the PAAS Portal - Environment Information (Outbound IPs)

Fri, 03 Mar 2023 00:17:25 GMT

So logging into the DXP PAAS portal this morning, I was treated to a surprise. (Maybe someone has already seen this and blogged about it but I haven't seen that.)

If you are like us you probably have some integrations where you have to whitelist your web app (firewalls, FTP servers, etc.). Traditionally it has required a support ticket to find all the outbound IPs that your site might use but now Opti has given us the power to see for ourselves. It's still a pain when the IP pool changes but at least we have a self service way to see that now.

Thank you Optimizely for continuing to improve the PAAS portal!

Debugging Using The Output Panel? Filter Out That Noise!

Mon, 31 Oct 2022 17:56:33 GMT

This is a quick tip!

If you are making use of the Output window in Visual Studio but can't deal with all the Application Insight "noise", try this!

Say you want to monitor something during a huge import or similar situation so you output some values at a breakpoint but let the program continue running:

But you can't see your custom messages for all the Application Insights output:

I found a handy setting that just affects Visual Studio (not your Azure App Insights instance).

Add TelemetryDebugWriter.IsTracingDisabled to your Startup.cs class and set it to true:

This clears out a lot of the noise so you can find your own output messages!

Got other good VS debugging tips? Let me know in the comments.

References:

Need to do some troubleshooting? Go go gadget!

Mon, 27 Sep 2021 21:36:49 GMT

We all know Version 12 of Optimizely is on the way with all its .Net Core goodness, but some of us will be maintaining the current version for a while. That being the case, it helps to have access to troubleshooting data.

Here are a few dashboard gadgets I use to make sure that things have gotten properly transformed in the web.configs or that my user has the proper group memberships.

Web.Config Viewer

This one is super simple. Just grab the web.config and output it to screen. Good for making sure that the proper Web.xxx.config entries were applied.

WebConfigViewerComponentController.cs

using EPiServer.Security;
using EPiServer.Shell.ViewComposition;
using System.Linq;
using System.Web.Mvc;

namespace Website.Features.Components
{
    [IFrameComponent(Url = "webconfigviewercomponent",
    Categories = "dashboard",
    Title = "Web Config Viewer", MinHeight = 400)]
    [Authorize(Roles = "Administrators, WebAdmins, CmsAdmins")]
    public class WebConfigViewerComponentController : Controller
    {
        public ActionResult Index()
        {
            string file = "~/web.config";
            string[] str = null;
            if (System.IO.File.Exists(Server.MapPath(file)))
            {
                str = System.IO.File.ReadAllLines(Server.MapPath(file));
            }

            return View("~/Features/Components/WebConfigViewerComponent.cshtml", str.ToList());
        }
    }
}

WebConfigViewerComponentController.cshtml

@using Century.Website.Data
@using EPiServer
@using EPiServer.Framework.Web.Resources
@using EPiServer.ServiceLocation
@using System.Security.Claims

@model List<string>

@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="en-us">
<head>
    <title>Web Config</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
        @if (Model != null && Model.Any())
        {
            if (Model.Any() && Model != null)
            {
                <pre>
                    @foreach (var line in Model)
                    {
                        @($"{line}\n") 
                    }
                </pre>
            }
        }
</body>
</html>

App Settings Viewer

Since there is configuration set on the Web App itself in DXP/Azure it sometimes helps to see what is going on. Especially in PREP and PROD where you don't have portal access.

AppSettingsComponentController.cs

using EPiServer.Security;
using EPiServer.Shell.ViewComposition;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web.Mvc;

namespace Website.Features.Components
{
    [IFrameComponent(Url = "appsettingscomponent",
    Categories = "dashboard",
    Title = "App Settings", MinHeight = 400)]
    [Authorize(Roles = "Administrators, WebAdmins, CmsAdmins")]
    public class AppSettingsComponentController : Controller
    {
        public ActionResult Index()
        {
            var settings = new Dictionary<string, string>();
               
            foreach (var key in ConfigurationManager.AppSettings.AllKeys.ToList())
            {
                settings.Add(key, ConfigurationManager.AppSettings[key]);
            }
            return View("~/Features/Components/AppSettingsComponent.cshtml", settings);
        }
    }
}

AppSettingsComponent.cshtml

This one assumes you have some entry that states what environment you are in. In our case it is "env"

@using Century.Website.Data
@using EPiServer
@using EPiServer.Framework.Web.Resources
@using EPiServer.ServiceLocation
@using System.Security.Claims

@model Dictionary<string, string>

@{
    Layout = null;
    var env = !string.IsNullOrEmpty(Model["env"]) ? Model["env"] : string.Empty ;
}

<!DOCTYPE html>

<html lang="en-us">
<head>
    <title>Security Groups and Roles</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <!-- Shell -->
    @Html.Raw(ClientResources.RenderResources("ShellCore"))
    <!-- LightTheme -->
    @Html.Raw(ClientResources.RenderResources("ShellCoreLightTheme"))

    <link href="/EPiServer/CMS/App_Themes/Default/Styles/system.css" type="text/css" rel="stylesheet">
    <link href="/EPiServer/CMS/App_Themes/Default/Styles/ToolButton.css" type="text/css" rel="stylesheet">

</head>
<body>
    @Html.Raw(Html.ShellInitializationScript())

    <div class="epi-contentContainer epi-padding">

        <script src="/Util/javascript/episerverscriptmanager.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/system.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/dialog.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/system.aspx" type="text/javascript"></script>

        <input type="hidden" id="doExport" name="doExport" value="False">
        <div class="epi-formArea">

        </div>


        @if (Model != null && Model.Any())
        {

            <div class="epi-contentArea epi-clear">
                <div>
                    @if (Model.Any() && Model != null)
                    {
                        <table class="epi-default epi-default-legacy"
                               cellspacing="0"
                               id="FullRegion_MainRegion_ReportView"
                               style="border-style: None; width: 100%; border-collapse: collapse;">
                            <tr>
                                <th scope="col" colspan="2">@env App Settings</th>
                            </tr>
                            @foreach (var setting in Model)
                            {
                                <tr>
                                    <td>@setting.Key</td>
                                    <td>@setting.Value</td>
                                </tr>
                            }
                        </table>
                    }
                </div>
            </div>

        }
        else
        {
            <div class="epi-floatLeft epi-marginVertical-small">No Information Found</div>
        }
    </div>
</body>
</html>

Connection Strings Component

View which connection strings are set in DXP.

ConnectionStringsComponentController.cs

using EPiServer.Shell.ViewComposition;
using System.Collections.Generic;
using System.Configuration;
using System.Linq;
using System.Web.Mvc;

namespace Website.Features.Components
{
    [IFrameComponent(Url = "connectionstringscomponent",
    Categories = "dashboard",
    Title = "Connection Strings", MinHeight = 400)]
    [Authorize(Roles = "Administrators, WebAdmins, CmsAdmins")]
    public class ConnectionStringsComponentController : Controller
    {
        public ActionResult Index()
        {
            var settings = new Dictionary<string, string>();
            var conStrings = ConfigurationManager.ConnectionStrings;


            foreach (var conn in ConfigurationManager.ConnectionStrings.Cast<ConnectionStringSettings>())
            {
                settings.Add(conn.Name, conn.ConnectionString);
            }
            return View("~/Features/Components/ConnectionStringsComponent.cshtml", settings);
        }
    }
}

ConnectionStringsComponent.cshtml

@using Century.Website.Data
@using EPiServer
@using EPiServer.Framework.Web.Resources
@using EPiServer.ServiceLocation
@using System.Security.Claims

@model Dictionary<string, string>

@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="en-us">
<head>
    <title>Security Groups and Roles</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <!-- Shell -->
    @Html.Raw(ClientResources.RenderResources("ShellCore"))
    <!-- LightTheme -->
    @Html.Raw(ClientResources.RenderResources("ShellCoreLightTheme"))

    <link href="/EPiServer/CMS/App_Themes/Default/Styles/system.css" type="text/css" rel="stylesheet">
    <link href="/EPiServer/CMS/App_Themes/Default/Styles/ToolButton.css" type="text/css" rel="stylesheet">

</head>
<body>
    @Html.Raw(Html.ShellInitializationScript())

    <div class="epi-contentContainer epi-padding">

        <script src="/Util/javascript/episerverscriptmanager.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/system.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/dialog.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/system.aspx" type="text/javascript"></script>

        <input type="hidden" id="doExport" name="doExport" value="False">
        <div class="epi-formArea">

        </div>


        @if (Model != null && Model.Any())
        {

            <div class="epi-contentArea epi-clear">
                <div>
                    @if (Model.Any() && Model != null)
                    {
                        <table class="epi-default epi-default-legacy"
                               cellspacing="0"
                               id="FullRegion_MainRegion_ReportView"
                               style="border-style: None; width: 100%; border-collapse: collapse;">
                            <tr>
                                <th scope="col" colspan="2">Connection Strings</th>
                            </tr>
                            @foreach (var setting in Model)
                            {
                                <tr>
                                    <td>@setting.Key</td>
                                    <td>@setting.Value</td>
                                </tr>
                            }
                        </table>
                    }
                </div>
            </div>

        }
        else
        {
            <div class="epi-floatLeft epi-marginVertical-small">No Information Found</div>
        }
    </div>
</body>
</html>

Security Groups Component

We use Azure Active Directory for Single Sign On. This component shows which groups and roles are being passed in for the logged in user. In this example we are looking for groups that start with "SecGrp-Episerver"

SecurityGroupsComponentController.cs

using EPiServer.Security;
using EPiServer.Shell.ViewComposition;
using System.Linq;
using System.Security.Claims;
using System.Web.Mvc;

namespace Website.Features.Components
{
    [IFrameComponent(Url = "securitygroupscomponent",
        Categories = "dashboard",
        Title = "Security Groups and Roles", MinHeight = 400)]
    public class SecurityGroupsComponentController : Controller
    {
        public ActionResult Index()
        {
            var claims = ClaimsPrincipal.Current.Identities.First().Claims.ToList();

            return View("~/Features/Components/SecurityGroupComponent.cshtml", claims); 
        }
    }
}

SecurityGroupComponent.cshtml

@using Century.Website.Data
@using EPiServer
@using EPiServer.Framework.Web.Resources
@using EPiServer.ServiceLocation
@using System.Security.Claims

@model List<Claim>

@{
    Layout = null;

    var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
}

<!DOCTYPE html>

<html lang="en-us">
<head>
    <title>Security Groups and Roles</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <!-- Shell -->
    @Html.Raw(ClientResources.RenderResources("ShellCore"))
    <!-- LightTheme -->
    @Html.Raw(ClientResources.RenderResources("ShellCoreLightTheme"))

    <link href="/EPiServer/CMS/App_Themes/Default/Styles/system.css" type="text/css" rel="stylesheet">
    <link href="/EPiServer/CMS/App_Themes/Default/Styles/ToolButton.css" type="text/css" rel="stylesheet">

</head>
<body>
    @Html.Raw(Html.ShellInitializationScript())

    <div class="epi-contentContainer epi-padding">

        <script src="/Util/javascript/episerverscriptmanager.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/system.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/dialog.js" type="text/javascript"></script>
        <script src="/EPiServer/CMS/javascript/system.aspx" type="text/javascript"></script>

        <input type="hidden" id="doExport" name="doExport" value="False">
        <div class="epi-formArea">

        </div>


        @if (Model != null && Model.Any())
        {

            var roleClaims = Model.Where(x => x.Type.Contains("role") && !x.Value.StartsWith("SecGrp-Episerver"));
            var groupClaims = Model.Where(x => x.Type.Contains("role") && x.Value.StartsWith("SecGrp-Episerver"));

            <div class="epi-contentArea epi-clear">
                <div>
                    @if (roleClaims.Any() && roleClaims != null)
                    {
                        <table class="epi-default epi-default-legacy"
                               cellspacing="0"
                               id="FullRegion_MainRegion_ReportView"
                               style="border-style: None; width: 100%; border-collapse: collapse;">
                            <tr>
                                <th scope="col">Roles</th>
                            </tr>
                            @foreach (var claim in roleClaims)
                            {
                                <tr>
                                    <td>@claim.Value</td>
                                </tr>
                            }
                        </table>
                    }
                    <br /><br />
                    @if (groupClaims.Any() && groupClaims != null)
                    {
                        <table class="epi-default epi-default-legacy"
                               cellspacing="0"
                               id="FullRegion_MainRegion_ReportView"
                               style="border-style: None; width: 100%; border-collapse: collapse;">
                            <tr>
                                <th scope="col">Groups</th>
                            </tr>
                            @foreach (var claim in groupClaims)
                            {
                                <tr>
                                    <td>@claim.Value</td>
                                </tr>
                            }
                        </table>
                    }
                    <br /><br />
                    @if (Model.Any() && Model != null)
                    {
                        <table class="epi-default epi-default-legacy"
                               cellspacing="0"
                               id="FullRegion_MainRegion_ReportView"
                               style="border-style: None; width: 100%; border-collapse: collapse;">
                            <tr>
                                <th scope="col" colspan="2">Troubleshooting Info</th>
                            </tr>
                            @foreach (var claim in Model)
                            {
                                <tr>
                                    <td>@claim.Type</td>
                                    <td>@claim.Value</td>
                                </tr>
                            }
                        </table>
                    }
                </div>
            </div>

        }
        else
        {
            <div class="epi-floatLeft epi-marginVertical-small">No Information Found</div>
        }
    </div>
</body>
</html>

I'm not sure how these will transfer to the new version but I'm sure something similar will be an option.

I hope you found some of these useful and maybe it has given you some ideas for your own. Do you do anything similar? If so let me know in the comments.

Self-adjusting the SiteDefinition after automated Copydown

Mon, 18 Jan 2021 16:43:19 GMT

Needing to keep the data in your DXP environments in sync? Automate it!

We have a PowerShell script that runs in our Azure DevOps instance that will copy the database and BLOBs down from PROD to the lower environments using the Deployment API. This can be run on a regular schedule.

$key = "$(ClientKey)"
$secret = "$(ClientSecret)"
$projectid = "$(ProjectId)"

if (-not (Get-Module -Name EpiCloud -ListAvailable)) {
    Install-Module EpiCloud -Scope CurrentUser -Force
}
Connect-EpiCloud -ClientKey $key -ClientSecret $secret  -ProjectId $projectid
Start-EpiDeployment -SourceEnvironment Production -TargetEnvironment Preproduction -IncludeBlob -IncludeDb -ShowProgress
Write-Host "Content Sync Finished"

The problem was that we needed to go in and correct the site definition for the current environment once this had completed.

Luckily the SiteDefinitionRepository gives us what we need.

First thing we store a setting for each environment in the proper web.config. These can be set using web.config transforms.

<add key="env" value="INTE" xdt:Transform="SetAttributes" xdt:Locator="Match(key)" />

Then just to keep things tidy we store the environment URLs in a Constants file.

    public class EnvironmentUrls
    {
        public const string DEV = "http://localhost:xxx/";
        public const string INTE = "https://integ.xxx.com/";
        public const string PREP = "https://prep.xxx.com/";
        public const string PROD = "https://www.xxx.com/";
    }

Next, we add an initialization module that checks the environment app setting to determine which environment the code is running in and self-adjust.

We get the current environment from the web.config.

string environment = System.Web.Configuration.WebConfigurationManager.AppSettings["env"];

We use the SiteDefinitionRepository to find what is currently set.

            var siteDefinitionRepository = ServiceLocator.Current.GetInstance<ISiteDefinitionRepository>();
            var currentDefinition = SiteDefinition.Current;
            string currentSiteUrl = currentDefinition.SiteUrl.ToString();

If they don't match we create a writeable clone of the definition, loop through the Hosts setting the correct Url as Primary, reset all others to Undefined, and Save.

(Site URLs for each environment are already present in the Manage Websites section in PROD so they are available here after the DB copydown.)

            if (!environmentUrl.Equals(currentSiteUrl))
            {
                var newDefinition = currentDefinition.CreateWritableClone();
                newDefinition.SiteUrl = new Uri(environmentUrl);
                foreach (var host in newDefinition.Hosts)
                {
                    if (host.Url != null && environmentUrl.Equals(host.Url.ToString()))
                    {
                        host.Type = HostDefinitionType.Primary;
                    }
                    else if (host.Url != null && host.Type == HostDefinitionType.Primary)
                    {
                        host.Type = HostDefinitionType.Undefined;
                    }
                }
                siteDefinitionRepository.Save(newDefinition);
            }

Here is the complete code.

using System;
using System.Linq;
using Website.Constants;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using EPiServer.Web;
namespace Website.Business.Initialization
{
    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class CopyDownInitialization : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            string environment = System.Web.Configuration.WebConfigurationManager.AppSettings["env"];
            switch (environment)
            {
                case "DEV":
                    ConfirmSiteConfig(EnvironmentUrls.DEV);
                    break;
                case "INTE":
                    ConfirmSiteConfig(EnvironmentUrls.INTE);
                    break;
                case "PREP":
                    ConfirmSiteConfig(EnvironmentUrls.PREP);
                    break;
                default:
                    break;
            }
        }
        private void ConfirmSiteConfig(string environmentUrl)
        {
            var siteDefinitionRepository = ServiceLocator.Current.GetInstance<ISiteDefinitionRepository>();
            var currentDefinition = SiteDefinition.Current;
            string currentSiteUrl = currentDefinition.SiteUrl.ToString();
            if (!environmentUrl.Equals(currentSiteUrl))
            {
                var newDefinition = currentDefinition.CreateWritableClone();
                newDefinition.SiteUrl = new Uri(environmentUrl);
                foreach (var host in newDefinition.Hosts)
                {
                    if (host.Url != null && environmentUrl.Equals(host.Url.ToString()))
                    {
                        host.Type = HostDefinitionType.Primary;
                    }
                    else if (host.Url != null && host.Type == HostDefinitionType.Primary)
                    {
                        host.Type = HostDefinitionType.Undefined;
                    }
                }
                siteDefinitionRepository.Save(newDefinition);
            }
        }
        public void Uninitialize(InitializationEngine context)
        {
        }
    }
}

Next, I would love to find a way to automate flushing the Cloudflare cache after the copydown!

Using Custom Views for Editable Documentation

Thu, 01 Oct 2020 17:20:52 GMT

We’ve got some very structured hierarchical data that makes up a good portion of our site content.

Think Corporate > State > Metro > City > Community etc.

However, it can be very confusing for our site editors to know when a value should be set on the item itself, on its parent, grandparent, or worse still a related item. Sometimes you need to provide a little more info that what fits into the Description.

This calls for some clear documentation. And the best documentation is nearby without you needing to leave the system to find it.

I’ve based this on the awesome Custom View samples provided by Glen Lalas (Github repo, blog article).

I started with a basic text page and container folder.

Documentation Page

using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace Features.Pages.DocumentationPage
{
    [ContentType(DisplayName = "Documentation Page", GUID = "xxxxxxxxxxxxxxxxxxxxxxxx", Description = "In Place Documentation Page")]
    public class DocumentationPage : PageData
    {

        [CultureSpecific]
        [Display(
            Name = "Main body",
            Description = "The main body will be shown in the main content area of the page, using the XHTML-editor you can insert for example text, images and tables.",
            GroupName = SystemTabNames.Content,
            Order = 10)]
        public virtual XhtmlString MainBody { get; set; }

    }
}

Documentation Folder

using Century.Website.Constants;
using Century.Website.Features.Pages.DocumentationPage;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace Website.Data
{
    [ContentType(
        DisplayName = "Documentation Container", 
        GUID = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
        Description = "Container for Documentation Pages",
        GroupName = PageGroups.DataPages)]
    [AvailableContentTypes(Include = new[] {
        typeof(DocumentationContainer), typeof(DocumentationPage)
    })]
    public class DocumentationContainer : PageData
    {
    }
}

These are limited to a dark corner of the site via AllowedTypes on a parent node/page.

[AvailableContentTypes(Include = new[] {
    typeof(DocumentationContainer)
})]

These are the basic pages to hold the documentation. Now we need to associate/map them to page types. (One editable page to many instances of the page type.) I stored these mappings on the homepage as a PropertyList.

Mappings PropertyList

[CultureSpecific]
[Display(
    Name = "Documentation Page Mappings",
    Description = "Map PageType to Documentation Page",
    GroupName = SystemTabNames.Settings)]
[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<DocumentationPageMapping>))]
public virtual IList<DocumentationPageMapping> DocumentationPageMappings { get; set; }

using System.ComponentModel.DataAnnotations;
using Website.Constants;
using Website.Features.Pages.DocumentationPage;
using EPiServer.Core;
using EPiServer.DataAnnotations;
using EPiServer.PlugIn;

namespace Features.CustomViews
{
    public class DocumentationPageMapping
    {
        [Display(Name = "Type Of Page")]
        [UIHint(CmsUIHints.DocumentationTypes)]
        public string PageTypeName { get; set; }
        [Display(Name = "Documentation Page")]
        [AllowedTypes(typeof(DocumentationPage))]
        public ContentReference pageReference { get; set; }

    }

    [PropertyDefinitionTypePlugIn]
    public class DocumentationMappings : PropertyList<DocumentationPageMapping>
    {
    }
}

Just to make life easier on everybody we're using a SelectionFactory to drive the PageType names for the mapping.

using EPiServer.Shell.ObjectEditing;
using System.Collections.Generic;

namespace Website.Business.SelectionFactory
{
    public class DocumentationTypeSelectionFactory : ISelectionFactory
    {
        public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
        {
            var selections = new List<SelectItem>();
            selections.Add(new SelectItem { Text = "Community", Value = "CommunityData" });
            selections.Add(new SelectItem { Text = "Metro", Value = "MetroData" });
            selections.Add(new SelectItem { Text = "Lot", Value = "LotData" });
            selections.Add(new SelectItem { Text = "Plan", Value = "PlanData" });
            return selections; 
        }
    }
}

Now we need to display these pages in the Custom View tab. We register the route:

protected override void RegisterRoutes(RouteCollection routes)
{
    base.RegisterRoutes(routes);

    routes.MapRoute("AboutThisPageType", "AboutThisPageType", new { controller = "AboutThisPageType", action = "Index" });
}

We setup the page controller to get the documentation page mapped to the current pagetype.

AboutThisPageType Controller

using Website.Features.Pages.DocumentationPage;
using Website.Features.Pages.HomePage;
using EPiServer;
using EPiServer.Core;
using EPiServer.ServiceLocation;
using System.Linq;
using System.Web.Mvc;

namespace Website.Features.CustomViews
{
    public class AboutThisPageTypeController : Controller
    {
        public ActionResult Index()
        {
            var contentRepo = ServiceLocator.Current.GetInstance<IContentRepository>();
            // Since we're in an iFrame, need to do some manipulation to get the actual PageData object...
            var epiId = System.Web.HttpContext.Current.Request.QueryString["id"];
            var currentPage = contentRepo.Get<PageData>(new ContentReference(epiId));
            var homePage = contentRepo.Get<HomePage>(ContentReference.StartPage);
            var mapping = homePage.DocumentationPageMappings?.Where(x => x.PageTypeName == currentPage.PageTypeName)?.FirstOrDefault();
            var docPage = mapping != null ? contentRepo.Get<DocumentationPage>(mapping?.pageReference) : null ;
            
            return View("~/Features/CustomViews/AboutThisPageType.cshtml", docPage);
        }
    }
}

AboutThisPageType.cshtml

@using EPiServer.Core
@using EPiServer.Web.Mvc.Html
@using Website.Data;
@using Website.Features.Pages.DocumentationPage

@model DocumentationPage

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/dist/main.css">
    <title>Documentation</title>
</head>
<body>

    <main role="main" class="container">
        <br/>
        <br />
        @if (Model != null)
        {
            @Html.PropertyFor(x => x.MainBody, new { HasItemContainer = false }) 
        }
        else
        {
            <p>Documentation has not been provided for this item.</p>
        }

    </main>
</body>
</html>

We provide a simple message if a documentation page hasn't been mapped.

We also need to tell Epi to add some view configurations to add the custom view for each of the page types we are working with.

using Website.Data;
using EPiServer.ServiceLocation;
using EPiServer.Shell;

namespace Website.Features.CustomViews
{

    [ServiceConfiguration(typeof(EPiServer.Shell.ViewConfiguration))]
    public class AboutCommunityPagesViewConfig : ViewConfiguration<CommunityData>
    {
        public AboutCommunityPagesViewConfig()
        {
            Key = "aboutThisPage";
            Name = "Community Documentation";
            Description = "Info about Community pages";
            ControllerType = "epi-cms/widget/IFrameController";
            ViewType = "/AboutThisPageType/";
            IconClass = "aboutThisPageType";
        }
    }

    [ServiceConfiguration(typeof(EPiServer.Shell.ViewConfiguration))]
    public class AboutMetroPagesViewConfig : ViewConfiguration<MetroData>
    {
        public AboutMetroPagesViewConfig()
        {
            Key = "aboutThisPage";
            Name = "Metro Documentation";
            Description = "Info about Metro pages";
            ControllerType = "epi-cms/widget/IFrameController";
            ViewType = "/AboutThisPageType/";
            IconClass = "aboutThisPageType";
        }
    }

    [ServiceConfiguration(typeof(EPiServer.Shell.ViewConfiguration))]
    public class AboutLotPagesViewConfig : ViewConfiguration<LotData>
    {
        public AboutLotPagesViewConfig()
        {
            Key = "aboutThisPage";
            Name = "Lot Documentation";
            Description = "Info about Lot pages";
            ControllerType = "epi-cms/widget/IFrameController";
            ViewType = "/AboutThisPageType/";
            IconClass = "aboutThisPageType";
        }
    }

    [ServiceConfiguration(typeof(EPiServer.Shell.ViewConfiguration))]
    public class AboutPlanPagesViewConfig : ViewConfiguration<PlanData>
    {
        public AboutPlanPagesViewConfig()
        {
            Key = "aboutThisPage";
            Name = "Plan Documentation";
            Description = "Info about Plan pages";
            ControllerType = "epi-cms/widget/IFrameController";
            ViewType = "/AboutThisPageType/";
            IconClass = "aboutThisPageType";
        }
    }

}

These all share the same icon and view type. We add the icon image and a little bit of css under ClientResources

.Sleek .aboutThisPageType {
    background: url('images/icons8-about-24.png') no-repeat;
    height: 24px;
    width: 24px;
}

The css file is pulled in via the module.config file

<?xml version="1.0" encoding="utf-8"?>
<module>
	<clientResources>
		<add name="epi-cms.widgets.base" path="/ClientResources/epi-cms.css" resourceType="Style" />
	</clientResources>
</module>

If I've glossed over anything with the Custom View setup take a look at the Adage blog post that was my inspiration: https://adagetechnologies.com/enhancing-edit-mode-custom-views-episerver/

So there you have it. It might seem like a little bit of smoke and mirros because this is just another page in the site that you are providing but it puts it pretty much in context of where the editors are working and maintenance is self-contained.

Behold the Shadow Form!

Mon, 31 Aug 2020 15:42:23 GMT

Ok, maybe that’s a little dramatic.

Let me start off by saying that I’m sure that there is a better way to handle this (feel free to let me know in the comments) and this never moved past proof-of-concept, but this approach did seem to work.

We had a situation where some forms were created as standard blocks (not using Episerver Forms) due to some interdependencies and very custom logic.

It was decided that we needed to store the submissions in the CMS. I knew that was Out Of The Box with Epi Forms. If only we were using that. Thus was born the Shadow Form!

The basic idea is to create an Epi Form that matches the content of the custom form but it won't be customer facing, it will live in the shadows. On submit you will map the values from the custom form into the Epi shadow form and then save so that you get all the benefits of the CMS (view, sort, export, etc.).

First step is to create an Epi Form with a text(box) field for every item in the custom form. It doesn't matter what input fields are used on the front end, the values just need to pass through and will be stored as strings. Also, don’t worry about all the form configuration options as this form isn’t customer facing. Save and publish.

This is where things start to get just a little hacky. Add the new form temporarily to the same page as the custom form and view it. Inspect the HTML to get the form GUID, page ID and the element names. These will be used in your code.

Once you’ve got all the info, remove the form from the page (but don’t delete it!), this will serve as the container for the submissions. Save and publish.

The magic happens by tapping into the POST event of the custom form.

private void StoreFormSubmission(FormSubmissionInputModel model)
{
    var ddsSubmission = new DdsPermanentStorage();

    var formIdentity = new FormIdentity(Guid.Parse("3481166b-5750-4d6a-887c-5ae9764ae543"), "no");

    var submission = new Submission();

    submission.Id = string.Empty;
    submission.Data = new Dictionary<string, object>();

    //form elements...
    submission.Data.Add("__field_32827", model.FirstName);
    submission.Data.Add("__field_32828", model.LastName);
    submission.Data.Add("__field_32829", model.PostalCode);
    submission.Data.Add("__field_32830", model.StreetAddress);
    submission.Data.Add("__field_32831", model.HomePhoneNumber);
    submission.Data.Add("__field_32832", model.Email);

    //generic data fields
    submission.Data.Add("SYSTEMCOLUMN_SubmitTime", DateTime.Now.ToString());
    submission.Data.Add("SYSTEMCOLUMN_FinalizedSubmission", true);
    //language code
    submission.Data.Add("SYSTEMCOLUMN_Language", "en");
    //the id of the form's container page
    submission.Data.Add("SYSTEMCOLUMN_HostedPage", "1637");

    var subId = ddsSubmission.SaveToStorage(formIdentity, submission);
}

Here is what is happening:

ddsSubmission gives you access to the data store.

formIdentity is a reference to the Episerver form.

submission is a new Submission object where all the custom form fields are mapped to the Epi fields.

Pass the form reference and the submission object into ddsSubmission to save to storage.

Upon submission of the original custom form, the data is processed as if it came from the Episerver Form.

If you need to do further processing subId is the GUID of your submission and the submission can be retrieved like this:

var result = ddsSubmission.LoadSubmissionFromStorage(formIdentity, new[] { subId.ToString() });

What do you think? Does the end justify the means? Let me know.

Episerver Forms – Making Dropdown Lists Multilingual

Fri, 31 May 2019 21:33:13 GMT

I recently ran into an issue with Episerver Forms and multi-language. Specifically, the Selection (Dropdown) Block that is part of the Basic Elements. Things like the label and the placeholder text can be translated but the actual <options> only pull from the base language of the block. This is a deeper dive into my forum discussion.

The problem

Say you've got a new form and have added a dropdownlist (Selection Block).

If you switch to another language and edit that version of the block you aren't able to translate the items (<options>).

So either language will only show the base language options.

Now the reasoning for this may be that you need the form's submitted value to always be the same regardless of the visitor's language.

A Solution

I decided to create a custom Culture Specific Selection block. This would allow me to use the regular Out-Of-The-Box Selection Element blocks for most cases and my custom one when I needed it.

I inherited from SelectionElementBlock and overrode the Items:

using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.Forms.EditView.Models.Internal;
using EPiServer.Forms.Implementation.Elements;
using System.Collections.Generic;

namespace SelectionBlockExample.Models.Blocks
{
    [ContentType(
        DisplayName = "Culture Specific SelectionBlock", 
        GUID = "xxxxx",
        Description = "Use when you need the options in another language",
        GroupName = "Custom Elements")]
    public class CultureSpecificSelectionBlock : SelectionElementBlock
    {
        [CultureSpecific]
        public override IEnumerable<OptionItem> Items { get; set; }
    }
}

I also needed to provide the view.

<%--
    ====================================
    Version: 4.15.1. Modified: 20180726
    ====================================
--%>

<%@ import namespace="System.Web.Mvc" %>
<%@ Import Namespace="EPiServer.Shell.Web.Mvc.Html" %>
<%@ import namespace="EPiServer.Forms.Helpers.Internal" %>
<%@ import namespace="EPiServer.Forms.Implementation.Elements" %>
<%@ import namespace="SelectionBlockExample.Models.Blocks" %>
<%@ control language="C#" inherits="ViewUserControl<CultureSpecificSelectionBlock>
    " %>

    <%
    var formElement = Model.FormElement;
    var labelText = Model.Label;
    var placeholderText = Model.PlaceHolder;
    var defaultOptionItemText = !string.IsNullOrWhiteSpace(placeholderText) ? placeholderText : 
        Html.Translate(string.Format("/episerver/forms/viewmode/selection/{0}", Model.AllowMultiSelect ? "selectoptions" : "selectanoption"));
    var defaultOptionSelected = !Model.AllowMultiSelect && !Model.Items.Any(x => x.Checked.HasValue && x.Checked.Value) ? "selected=\"selected\"" : "";
    var items = Model.GetItems();
    var defaultValue = Model.GetDefaultValue();
    %>

    <% using(Html.BeginElement(Model, new { @class="FormSelection" + Model.GetValidationCssClasses(), data_f_type="selection" })) { %>
    <label for="<%: formElement.Guid %>" class="Form__Element__Caption"><%: labelText %></label>
    <select name="<%: formElement.ElementName %>" id="<%: formElement.Guid %>" <%: Model.AllowMultiSelect ? "multiple" : "" %>  <%= Model.AttributesString %> data-f-datainput>
        <option disabled="disabled" <%= defaultOptionSelected %> value=""><%: defaultOptionItemText %></option>
        <%
        foreach (var item in items)
        {
            var defaultSelectedString = Model.GetDefaultSelectedString(item, defaultValue);
            var selectedString = string.IsNullOrEmpty(defaultSelectedString) ? string.Empty : "selected";
        %>
        <option value="<%: item.Value %>" <%= selectedString %> <%= defaultSelectedString %> data-f-datainput><%: item.Caption %></option>
        <% } %>
    </select>
    <%= Html.ValidationMessageFor(Model) %>
    <% } %>

If you are new to custom FormElement blocks you need to add your view under Shared/Elementblocks.

You can copy and tweak the existing Selection block by getting the view from the EPiServer.Forms.zip file located in the modules folder.

I just had to update the view to use my new class.

Once you're ready the new Form Element should show up in the Custom Elements group.

Now use this instead of the original.

Like I alluded to earlier, you may want the Choice to be in the selected language and the Value to always be in the base language so your submissions are consistent.

Alternative

Another alternative suggested by Paul Gruffydd was to use a initialization module to force all SelectionElementBlocks to be localizable but I like being able to give the editor the choice which element to use.

Have your own or better solution? Let me know!

Gotcha’s with reusing Episerver Forms ElementBlocks

Mon, 01 Apr 2019 18:31:28 GMT

First a quick refresher, then the gotchas

Copy/Move Form Elements

So, you may or may not be aware that you can reuse form elements. Say you’ve got a long list of locations that you want to use on more than one form.

You can copy/move an element from one form to another:

With the first form open, switch from the Forms tab to the Blocks tab.

Scroll down and select the “For this form” folder.

This contains all the Form Element Blocks. From the context menu, choose copy/cut

Go to the other form, switch to the Blocks tab, and select the “For this form” folder.

Here on the folder’s context menu, choose Paste.

You can now drag the copied element to the second form.

Share a single element between several forms

So, instead of making copies that will all need to be updated moving forward, say you wanted a shared element that you can use on multiple forms. Instead of pasting into the other form’s “For this form” folder paste them into a shared location. Something like a “Shared Form Elements” folder.

From this folder you can drag the shared element onto multiple forms. Update the shared element and it affects all linked forms.

Now the Gotcha’s!

If you have the Salesforce connector installed and have the Form Element mapped to a Salesforce table, you lose access to the Extra Field Mappings tab. Here is an example of the original element:

And here it is after you've moved it to a shared folder:

I think this is because the element must look to its parent form for table mappings and this connection breaks when you move the element out of the “For this form” folder.

A similar situation is the Dependencies tab:

No error message, just a blank screen:

Any other gotcha's you've run across, or ways to get around the issue? Let me know in the comments.

PropertyList Changes Not Detected, Adding vs Updating

Fri, 25 Jan 2019 20:11:52 GMT

So here is a little nuance, that took me some time to figure out. I was programmatically updating a PropertyList but it never seemed to actually update.

Let’s take the following propertylist as an example:

namespace PropertyListDemo.Models
{
    public class Character
    {
        [Display(Name = "Hero Name")]
        public string Name { get; set; }
        [Display(Name = "Team Affiliation")]
        public string Affiliation { get; set; }
        [Display(Name = "Secret Identity Name")]
        public string SecretIdentity { get; set; }
    }

    [PropertyDefinitionTypePlugIn]
    public class CharacterListProperty : PropertyListBase<Character>
    {
    }

    public class PropertyListBase<T> : PropertyList<T>
    {
        public PropertyListBase()
        {
            _objectSerializer = this._objectSerializerFactory.Service.GetSerializer("application/json");
        }
        private Injected<ObjectSerializerFactory> _objectSerializerFactory;

        private IObjectSerializer _objectSerializer;
        protected override T ParseItem(string value)
        {
            return _objectSerializer.Deserialize<T>(value);
        }

        public override PropertyData ParseToObject(string value)
        {
            ParseToSelf(value);
            return this;
        }
    }

    [EditorDescriptorRegistration(TargetType = typeof(IList<Character>))]
    public class CharacterCollectionEditorDescriptor : CollectionEditorDescriptor<Character>
    {
    }
}

Adding to the propertylist worked as expected:

            var standardPage = currentPage.CreateWritableClone() as StandardPage;

            if (standardPage?.Heroes != null && standardPage.Heroes.Any())
            {

                standardPage.Heroes.Add(new Character()
                {
                    Name = "Hulk",
                    Affiliation = "Avengers",
                    SecretIdentity = "Bruce Banner"
                });


                contentRepository.Save(standardPage, SaveAction.Publish, AccessLevel.NoAccess);
            }

However, if instead of adding I was trying to update the propertylist:

            var standardPage = currentPage.CreateWritableClone() as StandardPage;

            if (standardPage?.Heroes != null && standardPage.Heroes.Any())
            {
                var match = standardPage.Heroes.FirstOrDefault(x => x.Name == "Superman");
                if (match != null)
                {
                    match.Name = "Iron Man";
                    match.Affiliation = "Avengers";
                    match.SecretIdentity = "Tony Stark";
                }


                contentRepository.Save(standardPage, SaveAction.Publish, AccessLevel.NoAccess);
            }

It would act like it had saved but the data wouldn’t be any different.

After a lot of time Googling and debugging, I determined that there is a Boolean “IsModified” flag from the ContentData abstract class.

standardPage.Property["Heroes"].IsModified = true;

This needs to be true when saving the page. When adding to the propertylist it is true, but when updating it is false, so it has to be manually set. So, an update followed by an add would work but update by itself doesn’t work.

So, it’s a good idea to go ahead and set the flag yourself before saving the page.

            var standardPage = currentPage.CreateWritableClone() as StandardPage;

            if (standardPage?.Heroes != null && standardPage.Heroes.Any())
            {
                var match = standardPage.Heroes.FirstOrDefault(x => x.Name == "Superman");
                if (match != null)
                {
                    match.Name = "Iron Man";
                    match.Affiliation = "Avengers";
                    match.SecretIdentity = "Tony Stark";
                }

                standardPage.Property["Heroes"].IsModified = true;

                contentRepository.Save(standardPage, SaveAction.Publish, AccessLevel.NoAccess);
            }

Unexplained 302 redirect that adds trailing slash? Check your file/folder structure

Thu, 24 Jan 2019 23:50:35 GMT

Just a quick note for anyone experiencing something similar.

We have a client who had a concern that /resources always redirected to /resources/. After a lot of wasted time checking the web.config for rewrite rules, writing rewrite rules that didn't work, disabling the 404handler, and testing init modules (routingOptions.UseTrailingSlash) Episerver's engineering team pointed us to the actual problem.

The site actually had a folder named Resources that contains the XML language files. After renaming the folder and updating the EPiServerFramework.config with the new path the URL worked without the redirect.

So long story short, if you are having a problem with an alias check to make sure that you don't have a folder with the same name.

Staying under the document limit when using the Find developer index

Wed, 20 Dec 2017 21:02:30 GMT

When working on a site migration with a LOT of content we often find ourselves running up against the 10,000 document limitation on a developer index.

I learned this trick from a coworker. You can use an Initialization Module to get some fine-grained control over what is getting added to the index.

using System;
using System.Diagnostics;
using System.Linq;
using AlloyInitModuleTest.Models.Media;
using AlloyInitModuleTest.Models.Pages;
using EPiServer.Core;
using EPiServer.Find.ClientConventions;
using EPiServer.Find.Cms;
using EPiServer.Find.Cms.Conventions;
using EPiServer.Find.Cms.Module;
using EPiServer.Find.Framework;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;


    [InitializableModule]
    [ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
    public class SearchConventionInitializationModule : IInitializableModule
    {
        public void Initialize(InitializationEngine context)
        {
            //Add initialization logic, this method is called once after CMS has been initialized
            this.SetTypesToIndex(ContentIndexer.Instance.Conventions);
    }

    [Conditional("DEBUG")]
    private void SetTypesToIndex(IContentIndexerConventions conventions)
    {
        // start from a clean slate
        conventions.ForInstancesOf<ContentData>().ShouldIndex(x => false);

        //one by one turn on or off as you develop the site, remember to reindex 
        conventions.ForInstancesOf<ImageFile>().ShouldIndex(x => false);
        conventions.ForInstancesOf<GenericMedia>().ShouldIndex(x => false);
        conventions.ForInstancesOf<LandingPage>().ShouldIndex(x => true);
    }

    public void Uninitialize(InitializationEngine context)
        {
            //Add uninitialization logic
        }
    }

[Conditional("DEBUG")] allows us to limit this to debug builds and index everything in production.

Comparing draft content to published content

Mon, 18 Dec 2017 16:28:42 GMT

We had a situation arise the other day where we needed to compare some values in a draft page against the currently published version. Based on some fields changing we knew we needed to reindex a list of related pages.

This all takes place in the IContentEvents PublishingContent event handler which has been wired up in an InitializationModule.

The trick here is to cast e.Content to get the current draft and to use e.ContentLink.ToReferenceWithoutVersion to get the published version so that you can compare.

Here is a code sample that checks for a change to the Name and logs it.

using System;
using System.Linq;
using EPiServer;
using EPiServer.Core;
using EPiServer.Framework;
using EPiServer.Framework.Initialization;
using EPiServer.ServiceLocation;
using EPiServer.Logging;


[InitializableModule]
[ModuleDependency(typeof(EPiServer.Web.InitializationModule))]
public class PageDataUpdatedInitialization : IInitializableModule
{
    private static readonly ILogger Logger = LogManager.GetLogger();
    private Injected contentLoader;


    public void Initialize(InitializationEngine context)
    {
        var events = context.Locate.ContentEvents();
        events.PublishingContent += this.PublishingContent;
    }

    private void PublishingContent(object sender, ContentEventArgs e)
    {
        var newPageData = e.Content as PageData;
        if (newPageData == null)
            return;

        var oldPageData = contentLoader.Service?.Get(e.ContentLink.ToReferenceWithoutVersion());
        if (oldPageData == null)
            return;

        // check to see whether any updates were made to the specific value
        if (!ValueChanged(oldPageData, newPageData))
            return;

        // if so, do something
        Logger.Debug("Value has changed from {0} to {1}", oldPageData.Name, newPageData.Name);
    }

    private static bool ValueChanged(PageData oldPageData, PageData newPageData)
    {
        var oldName = oldPageData.Name;
        var newName = newPageData.Name;

        if (newName != oldName)
        {
            return true;
        }

        return false;
    }

    public void Uninitialize(InitializationEngine context)
    {
        //Add uninitialization logic
    }
}

Make Episerver Forms a Little More Bootstrap Friendly

Wed, 19 Oct 2016 00:28:12 GMT

You may have noticed that the way the Episerver Forms package renders form elements that it isn’t really bootstrap friendly. Well there is a way to fix that.

Dig down into \modules\_protected\EPiServer.Forms\EPiServer.Forms.zip\Views\ElementBlocks\ and copy those ascx files into \Views\Shared\ElementBlocks.

Then you can tweak each template.

A couple of examples:

On TextboxElementBlock.ascx add “form-group” to the class attribute on the outer DIV and add “form-control” to the class attribute for the input tag.
On SubmitButtonElementBlock.ascx add “btn” to the class attribute.

Your form should now pickup bootstrap’s form styles.