Monday, January 05, 2015

Installing IntelliGantt on SharePoint 2013 Servers

Time to ring in the new year with the next generation project management software for SharePoint. We have re-crafted IntelliGantt for SharePoint with the following features:
  • Runs in any modern web browser to HTML5 standards
  • Runs on desktops, laptops, tablets, phablets and mobile
  • Runs on IE, Chrome, Firefox and Safari
  • Runs on SharePoint 2013 online or inhouse
  • Is built with pure Javascript that your own developers can enhance
  • Anyone can install it
I could keep going but would rather encourage you to see for yourself as that last point is extremely important to us. Because IntelliGantt only runs within the client's web browser, there is nothing to really 'install' on the SharePoint server itself. Rather, its dragging and dropping files into a Site Assets collection and off you go-- literally as easy as adding a 'Page View' web part then dragging and dropping. Accordingly, we made the pricing as easy and as flexible-- purchase a traditional 'forever' license or as little as 1 month. But enough about all this, let's see how to get IntelliGantt onto SharePoint.

First, you will want to get the zip file containing everything you will need. Basically this zip file contains a 'mini site' of the IntelliGantt application-- a folder for CSS stylesheets, a folder for IMaGes, a folder for JavaScript, a configuration file (for advanced features) and the actual web page (IntelliGantt_Inhouse.aspx). As of this writing the build number is, but you can always get the latest with this link. Or, if you just want to stick with build, then download that specific bundle with this link.

You can use an existing site or create a new one like we do in this example. Here we will use the 'Project Site' template but it can be any site with any template; IntelliGantt just needs a task list.

In the Site Contents, find the Site Assets library. Here is where we will be adding the necessary IntelliGantt files.

Within the Site Assets library, we will create an IntelliGantt folder that contains the following four folders: css, img, fonts and js.

Within the IntelliGantt/css folder we will also create an 'images' folder. This contains the jquery-ui images necessary for dialogs and calendars to render correctly. We package the 'redmond' theme by default. If you have your own jquery-ui theme you can certainly use it instead.

Open up the IntelliGantt zip file and you'll find the same file structure. Drag and drop the contents from the zip file into the SharePoint Site Assets. The IntelliGantt functionality is within tdicore.js. We use jquery, jquery-ui and timepicker add on as well because they are awesome. You could reference these files off a content delivery network but 1) we guarantee IntelliGantt will worth with the jquery versions included in our package and 2) our upcoming 'print' feature will need all files to be loaded from the SharePoint server.

Now that the IntelliGantt pieces are in place it's time to place them on the page. Edit the page you'd like to place IntelliGantt within. You will add a web part to the page. Specifically, a 'Page Viewer' web part found within 'Media and Content'.

A Page Viewer works by providing a link to the page to view. In this case the page is from the SiteAssets library within the IntelliGantt folder and it's named 'IntelliGantt.aspx'. So we set the link to ../SiteAssets/IntelliGantt/IntelliGantt.aspx. In case you are wondering 'will this work if I reference IntelliGantt from a Site Assets library in another site?', the answer is yes! This is a more advanced configuration, but yes, the IntelliGantt files you dragged and dropped can be placed in a Site Assets library that every other site within SharePoint can reference.

For whatever reason, SharePoint still has an issue providing a nice default height for the Page Viewer web part so we recommend setting it manually.

Voila, we have IntelliGantt for SharePoint running on SharePoint 2013. This particular examples shows IntelliGantt running on SharePoint Online, however the exact same steps will work for inhouse installations as well. What you see the first time IntelliGantt runs are all the tasks from all the task lists from you SharePoint site found and displayed in a hierarchy in one 'page' automatically. There are obviously a ton of features to go through now, but those will be described in successive posts.

1 comment:

Smith said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Online Training from India . or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Online Training