How to display custom previewer in Alfresco Share FilmStrip view

Custom previewer in Alfresco Share FilmStrip view

In my current organsiation, we built and used lot of previewers to have a nicer look for the following file formats.
Microsoft Project Files

• CSS
• JS
• Java
• SAS (SAS dataset).
• XML

All are working fine in document details page, but the user changes the default (details view) view to FilmStrip view and the custom previewers are not working and it was throwing error , "Document can't be previewed, and click here to download".

I was looking the custom previewer codes and all looks good because, it is working fine in document details page.
Later I realised there are some reference in the share-documentlibrary-config.xml for the default previewer css and js files and I should my custom js and css files for my the custom previewer. 

Here is the code snippet(share-documentlibrary-config.xml)
<config evaluator="string-compare" condition="DocumentLibraryViews">

<view-renderers>

.............

<view-renderer id="filmstrip" iconClass="filmstrip" label="button.view.filmstrip" index="40" widget="Alfresco.DocumentListFilmstripViewRenderer">

<dependencies>

<js src="components/documentlibrary/documentlist-view-detailed.js" />
<js src="components/documentlibrary/documentlist-view-gallery.js" />
<js src="components/documentlibrary/documentlist-view-filmstrip.js" />
<js src="yui/carousel/carousel.js" />
<js src="components/preview/web-preview.js" />
.........
...........

</dependencies>

</view-renderer>

</view-renderers>

</config>

All the dependencies should be added in the share-custom-config.xml for the view-renderer.
If you want to add your custom js/ css as a depencdy for the filmstrip view, then you should add here as below.

<config evaluator="string-compare" condition="DocumentLibraryViews">

<view-renderers>

.............

<view-renderer id="filmstrip" iconClass="filmstrip" label="button.view.filmstrip" index="40" widget="Alfresco.DocumentListFilmstripViewRenderer">

<dependencies>

.........
...........
<!-- Added the custom dependencies here for project preview -->
<js src="components/preview/project-preview.js" />
<css src="components/preview/project-preview.css" />

</dependencies>

</view-renderer>

</view-renderers>

</config>

Hope this helps someone.