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"];

[janaka1984]

Hi dave,

i need to remove documents, tag and categories from  left side of  aikau document library. please give me hint to do that?

Regards

Janaka

[ddraper]

Take a look at this blog post (https://community.alfresco.com/community/ecm/blog/2016/04/12/aikau-1063-support-for-versioned-librar... ) it describes how to import the Aikau Document Library model. At the end of the post you'll find a list of the functions that you can call. Rather than calling "getDocLib" you can call individual functions to just create the parts of the Document Library that you want to use... so for example you may want to just call "getDocLibList"

[janaka1984]

After manage fragments of the Document Library  by using given function, how can i modify content of that function

e.g getDocLibList() - add or remove column on content

do i need to override function or is there any other way to do that?

[ddraper]

Those functions just return Aikau model fragments and can be manipulated as you wish. You can override the views provided by calling the function with a "views" attribute in the options argument that is passed. By default the Aikau Document Library has 5 views (AlfSimpleView, AlfDetailedView, AlfTableView, AlfGalleryView and AlfFilmStripView)

Your best option would be to construct a view with the properties that you wish to display. You can construct the view within the JS controller or you can create a custom widget that extends AlfListView (look at the source code of the views listed above for examples of how to do this).

Then you could call the function like this:

getDocLibList({
  siteId: null,
  containerId: null,
  rootNode: "alfresco://company/home",
  views: [
    {
      name: "janaka/custom/View",
    }
  ]
}
‍‍‍‍‍‍‍‍‍‍

This would replace the default views with your own custom view. Or you can construct a view as described in the tutorial from this chapter onwards (and there are lots of other examples in various blogs and demo videos of building views).

[ddraper]

‌ This thread would have been better as a separate question rather than a comment thread on this post as it's totally unrelated to the subject of the blog post. I'm happy for you to tag me in questions to get my attention.