Customizing the Aikau Document Library to Create Markdown Content

[ddraper]

I recently saw a really interesting blog post from Parashift on creating custom editors for Share. It was interesting because they were showing how to use the showdown.js markdown library as a previewer and that is exactly the same markdown library that Aikau uses for its Markdown widget.

I thought it might be an interesting exercise to compare the effort required to create the same editor in Aikau - this isn't to take anything away from what Parashift have shown which is a perfectly valid customization for Share - I just wanted to see what it would be like to do it using Aikau.

Full disclose: I had to create a new widget and make some modifications to Aikau to support this blog post, but these changes are all now available in the 1.0.89 release of Aikau

I'm going to show this as a customization of the Aikau Document Library (rather than the YUI2 version) and this means that the editor will be displayed inline rather than on a separate page. I've discussed the Aikau Document Library in previous blog posts here and here​ so I would recommend reading through those to understand how you can customize Share to make use of the Aikau Document Library.

The main thing we want to do is to define a new AlfCreateContentMenuItem that can be used to show a dialog for creating markdown content. The doclib.lib.js import file that you'll use to build the model for the Document Library contains the useful helper function generateCreateContentMenuItem. We can call this with configuration for the menu item like this:

var createMarkdownMenuItem = generateCreateContentMenuItem({
   menuItemLabel: "Create Markdown", 
   dialogTitle: "Create Markdown", 
   iconClass: "alf-textdoc-icon", 
   modelType: "cm:content", 
   mimeType: "text/markown",
   dialogWidth: "900px",
   contentWidgetName: "alfresco/forms/controls/MarkdownWithPreviewEditor", 
   contentWidgetConfig: { 
      width: 300, 
      height: 250
   }
});

The main thing to note here is that we're setting the contentWidgetName to the new MarkdownWithPreviewEditor widget and setting a mimeType to "text/markdown".

We now need to ensure that the menu item is included in the Document Library model, this can be easily achieved in the configuration passed to the getDocLib function that is called to build the main model:

var docLib = getDocLib({
   siteId: page.url.templateArgs.site, 
   containerId: "documentLibrary",
   additionalCreateContentItems: [createMarkdownMenuItem]
});

...and that's it !!

When you access the page you'll see the following:

Video Link : 1046

The full source of the JavaScript controller for the WebScript is here (the descriptor, template and properties files are the same as in the other blogs posts)...

<import resource="classpath:/alfresco/site-webscripts/org/alfresco/share/imports/share-header.lib.js">
<import resource="classpath:/alfresco/site-webscripts/org/alfresco/share/imports/share-footer.lib.js">
<import resource="classpath:alfresco/site-webscripts/org/alfresco/aikau/{aikauVersion}/libs/doclib/doclib.lib.js">
// Get the services and widgets for the header...
var services = getHeaderServices();
var widgets = getHeaderModel(msg.get("aikau.doclib.title"));
// Build a list of services for both the header AND the Document Library...
services = services.concat(getDocumentLibraryServices());
// Create the markdown creation menu item...
var createMarkdownMenuItem = generateCreateContentMenuItem({
   menuItemLabel: "Create Markdown", 
   dialogTitle: "Create Markdown", 
   iconClass: "alf-textdoc-icon", 
   modelType: "cm:content", 
   mimeType: "text/markown",
   dialogWidth: "900px",
   contentWidgetName: "alfresco/forms/controls/MarkdownWithPreviewEditor", 
   contentWidgetConfig: { 
      width: 300, 
      height: 250
   }
});
// Create the Document Library model...
var docLib = getDocLib({
   siteId: page.url.templateArgs.site, 
   containerId: "documentLibrary",
   additionalCreateContentItems: [createMarkdownMenuItem]
});
// Add the Document Library model to the header widgets...
widgets.push(docLib);
// The footer wraps everything...
model.jsonModel = getFooterModel(services, widgets);
// Always include user membership data for any group membership based evaluations...
model.jsonModel.groupMemberships = user.properties["alfUserGroups"];