Note that these steps really provide a way to evaluate the IntelliGantt Web Part as easily as possible without having to install on a server farm. Basically, we will upload the Silverlight control (a XAP file), create a new SharePoint web page and add a Silverlight Web Part (referencing our IntelliGantt Web Part).
That's the summary, below are the steps in great detail:
1. Put the IntelliGantt.xap file you downloaded from TeamDirection in its own directory.
- Step1.png (59.17 KiB) Viewed 369 times
2. You will upload the IntelliGantt.xap file to a Shared Documents library on the SharePoint site
- step2.png (95.51 KiB) Viewed 369 times
3. Browse to the location you saved it and select IntelliGantt.xap.
- step3.png (101.17 KiB) Viewed 369 times
4. If you've already stored this file, then overwriting it will effectively update the control for everyone.
- step4.png (86.09 KiB) Viewed 369 times
5. Right-click on the file and choose 'Copy Shortcut'. You will use this later.
- step5.png (35.37 KiB) Viewed 369 times
6. Now you will create a web page to contain the IntelliGantt control.
- step6.png (100.03 KiB) Viewed 369 times
7. Web Part Page is the one to use.
- step7.png (103.91 KiB) Viewed 369 times
8. We think IntelliGantt is a great name for the page. Also, by choosing 'Full Page' as the Layout Template you will be able to maximize the size of the IntelliGantt Web Part.
- step8.png (111.73 KiB) Viewed 369 times
9. And there is your container web page. Now to add the silverlight control. Click the 'Add a Web Part' text.
- step9.png (77.1 KiB) Viewed 369 times
10. The standard 'Add Web Parts' diaglog pops up. The one to choose is the 'Content Editor Web Part'.
- step10.png (101.36 KiB) Viewed 369 times
11. As you guessed, you're not done yet. Now you need to place the IntelliGantt Silverlight control into this web part. Click on the 'open the tool pane' link.
- step11.png (80.22 KiB) Viewed 369 times
12. You want to edit the actual HTML source, so click on 'Source Editor'.
- step12.png (90.06 KiB) Viewed 369 times
13. And now for the tricky step, appropriately enough at number 13. SharePoint 2010 does this for you, but SharePoint 2007 needs you to provide the details. Here we are inserting HTML to place the Silverlight control on the page and seed it with enough information to start correctly. The two most important elements are:
<param name="Source"... />
and
<param name="initParams" ... />
- step13.png (96.15 KiB) Viewed 369 times
For the Source param, the value you need is the location of the IntelliGantt.xap file you uploaded. You can paste the shortcut you copied in step 5, paste it here and remove the http://server information so that only a path is shown (as in the example above and below).
for the initParams, this value is the site url IntelliGantt will use to communicate with the SharePoint server. You'll notice that it can't be http://server/ with a colon and slashes-- it does need to be escaped as shown above and below. The other tricky part of this is you can paste the url from step 5 here as well, but you have to remove the Shared Documents/IntelliGantt.xap portion of the url (this is the SharePoint site url).
Here is the text of the html to insert for you to copy and paste as well:
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="/Shared Documents/IntelliGantt.xap" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="initParams" value="MS.SP.url=http%3A%2F%2Fwss.teamdirection.com%2F" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
</div>
14. And voila, you see... nothing. Ah yes, one more thing to do.
- step14.png (78.85 KiB) Viewed 369 times
15. Click on the dropdown toggle button on the upper right of the web part and choose 'Modify Shared Web Part'.
- step15.png (84.83 KiB) Viewed 369 times
16. You need to specify the height of the IntelliGantt control. Within the appearance group, put in 400 pixels or so (you can refine it any time).
- step16.png (87.36 KiB) Viewed 369 times
17. Now the IntelliGantt control is sited and filling the real estated you provided. All that's left is to exit edit mode.
- step17.png (94.97 KiB) Viewed 369 times
18. You're done. And there is the IntelliGantt Silverlight control working within SharePoing 2007.
- step18.png (96.5 KiB) Viewed 369 times
