Sitecore PXM and ODG project (part 5 – PXM InDesign custom task)

1. Introduction
2. Non-editable fields
3. Architecture
4. Customising ODG email
5. PXM InDesign custom task

For the final post on this project I will run through how we can add some custom functionality to InDesign, as we have previously created a custom (non-editable) snippet which can be used in InDesign, however there is no way to create one except through Sitecore.

The plan is to create a custom PXM task that can be executed in InDesign, so that when a Page item is selected (in the project panel) and we execute our task, a Non-editable Snippet item will be created under that Page.

There are only a couple of posts that I've seen on how to create a custom task, however it's more than enough to go off for our scenario which is not terribly complex.  Those posts cover how to create a custom task, so follow along and set up your custom task.  As is mentioned in the posts, our task is passed a dictionary of various values from InDesign; in our case the only relevant one is the ID of the item selected in the project panel, which is ci_projectPanel.  Once we know that we can get the relevant item, check that it is a Page, and create a new item beneath it.  Simple :)

I've also created  a gist for the full class, in a more legible format.  This code is untested but should work as described.

public string ExecuteTask(Dictionary<string, object> dictionary)
{
  Item page = Sitecore.Context.Database.GetItem(new ID(dictionary["ci_projectPanel"].ToString()));
  if (page.TemplateID != new ID("{6BFA47BA-F73C-48DB-9170-C0CC94179EC7}"))
  {
    return "Please select a page under which to add the non-editable snippet";
  }

  page.Add("Non-Editable", new TemplateID(new ID("{C0FD5401-A2A5-4205-831D-DF06120B389E}")));
  return $"Created custom snippet under page {page.Name}.";
}

Sitecore PXM and ODG project (part 3 - architecture)

1. Introduction
2. Non-editable fields
3. Architecture
4. Customising ODG email
5. PXM InDesign custom task

There are a LOT of components to set up when you're using PXM, ODG, and exporting your documents to PDF.  Adding even more complexity is the fact that this solution should really be running on a content delivery server accessible by the clients (or potentially multiple servers, in Azure IaaS/PaaS) whereas ODG natively runs in the Sitecore admin interface which would be on a content authoring server. Here's a list of things you'll need for the full setup:

• InDesign
• InDesign connector (to match InDesign version)
• PXM
• ODG (release notes say it's only compatible with Sitecore 8.0 initial release, but that seems to be just referring to the SPEAK interface, you can still create items)
• InDesign Server (don't forget to activate your trial if you're using one)
• InDesign Server engine (to match InDesign server version)
• Dashboard service
• Processing Service
• Export (PXMPublishing) folder (still only available on the SDN site)
• Your custom fonts

PXM + ODG architecture in authoring / delivery setup

Note: Unfortunately this setup can run multiple delivery servers (IaaS/PaaS), but will only really support one authoring server (IaaS) since there isn't really any way to balance the connections from delivery to the Dashboard/Processing/InDesign server side of things.  InDesign Server comes in a single or multi-instance licence, and if you need to scale then the multi-instance option on one high-spec'd authoring server would probably be best.

Firstly it's important to set up and ensure that Sitecore on content authoring is working correctly with PXM, ODG, and InDesign Server.  This functionality is "out of the box", but requires a lot of configuration which you can follow on the PXM youtube video series.  There has been an updated release of some of the PXM connectors to support CC 2015 so ensure you're using the correct software version and connector version for your OS.  The video series refers to the folder holding the exports / config / logs as PXMPublishing so that's what I will refer to it as here.

Once those pieces of software are setup, you should be able to:

1. Import an InDesign document (through InDesign using the connector)
2. Upload any media into the media library and replace the references in the PXM project so that they point to the media library rather than your hard drive (open the project through someone else's InDesign connector to verify)
3. Create a document in ODG, replace various content / media, and preview it
4. Export your document to PDF and preview the output PDF in the PXMPublishing/PublishFolder folder

There are various logs that can help you if you can't successfully complete all 4 steps:

1. Sitecore logs
2. PXM log (in with the rest of the Sitecore logs)
3. Dashboard Server log (PXMPublishing/Logs/DashboardServer)
4. Processing Server log (PXMPublishing/Logs/InDesignProcessingService)
5. InDesign Server log (<InDesign Server directory>/Logs)

Once the content authoring server is running correctly, there are a few things that need to be setup so that everything works with the delivery server:

• Ensure your PXMPublishing folder is accessible from both the authoring and delivery servers (through a file share or Azure File Storage works)
• If you have a large amount of media (or very large media files) that you don't want to upload, ensure they're also in a shared location accessible from both servers (covered later in the blog)
• Ensure the dashboard service port (by default 8070) on the CA server is open to the CD server (via both Azure and Windows firewall)
• Ensure the InDesign server port (by default 8081) on the CA server is open to the CD server (via both Azure and Windows firewall)
• Ensure the dashboard server in the web.config on the CD server is pointing to the URL / port of the dashboard server running on the CA server
• Unfortunately a wrapper design controller will need to be created for the CD server to call the existing functionality. This wraps Sitecore.Odg.Controllers.DesignController.
• If you're going to be allowing users to grab the output PDFs from the server, ensure the virtual folder is mapped in IIS on the CD server

Once that's done you should be able to call the GetCustomPreviewImage and ExportToPdf controller methods to get the preview image of your document, and export it to PDF, and view it via URL. For example:

$.ajax({
  dataType: 'json',
  url: '/api/sitecore/CustomDesign/GetCustomPreviewImage?&itemId=' + currentPageId + '&lang=en&forceNew=true&useHighRes=false&saveInPage=true',
  cache: false,
  success: function (response) {
    if (response.mediaUrl != null && response.mediaUrl != "") {
      updatePageThumbnail(response.thumbnailUrl);
      loadImageToCanvas(response.mediaUrl);
    }
  }
});

and

$.ajax('/api/sitecore/CustomDesign/ExportToPdf', {
    type: 'POST',
    data: {itemId: odgDocumentId, processingJobId: processingJobId, lang: language},
    success: function (result) {
        alert('Successfully sent for conversion to PDF')
    },
    error: function (result) {
        alert('Error saving.  Please try again or contact us if the issue reoccurs.');
    }
});

In the next blog we'll look into other customisations we can make to the process and pipelines to improve the user experience.