- 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
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 1.0.0.141, but you can always get the latest with this link. Or, if you just want to stick with build 1.0.0.141, 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.
No comments:
Post a Comment