Integrating Alfresco inside a MediaWiki

Alfresco is this huge and complicated Enterprise Content Management System, and MediaWiki is a great engine for a internal Wiki. Together, you can create a really awesome infrastructure.
I won’t go in further detail why and how I chose them, and how I customized them further – that might come in a later post.

Today, I’m going to show you straight-forward how to “marry” them.

First of all, we start with a MediaWiki that looks like this:

Clean MediaWiki

This is a regular MediaWiki with a skin called Erudite  that is a great base for a “flat” UI once you take care of the Typography and modify some headers. (Yes, this is Doxygen. I’m working on something really cool right now, and will post it if it works :-))

You also need to install the include extension for your MediaWiki.

Install Alfresco

Installing Alfresco is straight forward on a Windows server, and almost as easy on a Linux server. Use the installers for both of them. I didn’t (because I already had a Tomcat running that I didn’t want to stop..) and it took me an hour or two – simply read Alfresco.log and Share.log and google the error messages. It’s not that hard.

Use version 4.2e, which you can download here: http://www.alfresco.com/products/community .
This is important, because right now, rendering and the css change a lot.. and older versions have some issues (4.2c, for example has problems with CIFS and Microsoft Office – I use that functionality and am glad the problem got resolved).

The only really important thing is that you might have another webserver running – and change the ports – I didn’t use the standard 8080, but went for 1245…

Get Alfresco and Share running.

You need to be able to log into your server with

http://server:1245/alfresco
and
http://server:1245/share

If you are doing custom-install on another port,  you might have to reconfigure the share ports in share-config-custom.xml: Just uncomment the text under this line and replace 8080 with your port of choice:

<!-- example port config used to access remote Alfresco server (default is 8080) -->

Hide Header, Footer, Login Screen:

To hide to header in Alfresco Share 4.2e, you edit base.css (whcih you find in ->\tomcat\webapps\share\css)

/* Share pages */
#share-header
{
visibility: hidden;
height: 0px;
}

To hide the footer in Alfresco, change footer.css (..\tomcat\webapps\share\components\footer)


/* Footer Component */
.footer
{
visibility:hidden;

I also played with the login screen, (login.css) and removed the logo and Copyright notice.
(-> ..\tomcat\webapps\share\components\guest)


.login .copy
{
color: #FFFFFF;
font-size: 80%;
margin-top: -8px;
}

and inside presentation.css (which is found in your theme folder, aka ..\tomcat\webapps\share\themes\lightTheme)

.theme-company-logo
{
height: 0px;
width: 428px;
background: transparent url(images/logo.png) no-repeat;
}

You can also change the company logo with these instructions: http://forums.alfresco.com/forum/developer-discussions/alfresco-share-development/remove-welcome-dashlet-widget-alfresco-share

Allow Iframes

As a final step, you need to allow iframes to be accessed (which is a security risk. Please take care, inform yourself and act accordingly!).

To do so, turn to share-config-custom.xml (Read the details here: http://blogs.alfresco.com/wp/ewinlof/2013/03/12/introducing-the-securityheaderspolicy-in-alfresco-share/) or just remove the comments from this part)


<!-- Turn off header that stops Share from being displayed in iframes on pages from other domains -->
<!--
<config evaluator="string-compare" condition="SecurityHeadersPolicy">
<headers>
<header>
<name>X-Frame-Options</name>
<enabled>false</enabled>
</header>
</headers>
</config>
-->

Restart Alfresco.

Create a share site, because that is what you are going to provide to your users.

Integrate into your MediaWiki

Now you can use the iframe extension in MediaWiki to integrate your document library.

<include iframe src="http://server:1245/share/page/site/database/documentlibrary" width="1200px" height="1000px" frameborder="0" scrolling="no" />

There’s some cosmetic thing that might help you – if you want to remove the navigation / edit /.. bar:

Open http://server/mediawiki/index.php?title=MediaWiki:Common.css

body.page-Document_Database div#nav-meta { display: none !important; }

Done!

MediaWiki and Alfresco

(I also included a dashboard to my Main window in MediaWiki, and search into another page: http://server:1245/share/page/site/database/search).

Advertisements

One comment

  1. This is MediaWiki?
    Wow. Gorgeous. Well done.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: