Integrating A Legacy Web Application In Sharepoint
May 14th, 2006
In many companies the intranet site is not just a home page with announcements. It houses Web applications used by many different departments. If you are anything like most organizations you probably have some legacy web applications sitting around, or ad-hoc web tools that either pre-dated your Sharepoint deployment or weren’t well suited to be developed using Sharepoint technologies. This article will demonstrate some simple techniques for incorporating those homeless web apps into your Sharepoint Intranet.
Legacy Web Application
The following is a picture of a simple Web application to maintain the employees table in Northwind:
In this particular case, it is an ASP.NET application. However, any Web site can be included, regardless of the technology behind it.
Including External pages in a SharePoint Site
SharePoint allows the inclusion of external sites in a Web Part called the Page Viewer Web Part. The Page Viewer Web Part stores a URL. When the page is rendered, the server accesses the Web page at the URL and includes the response inside the Web Part. (For the more technical readers, the requested page is displayed in an IFRAME tag.)
In my example, the external Web page is the “home” page of the Web application. I do not want the application on the SharePoint home page, so I will create a new Web Part Page specifically for this Web application. Web Part Pages must be created inside a Document Library.
Before continuing, I want to discuss the permissions that can be set on a Document Library. Permissions can be applied to the entire library. Per-page permissions are not possible in SharePoint. Since my example application allows access to an employee table, I need to consider different ways to authenticate and authorized users of the application. Since I am running an ASP.NET application, I can use the built-in authentication and authorization features (configured in Web.config).
Returning to my example, perform the following to create a new Web Part Page:
- In the top navigation bar of the site, click Create
- Scroll to the bottom and click on the link for Web Part Page
- Complete the form as desired
The new page will be displayed in Design Mode. Notice that the name of the page is shown in a Web Part across the top of the page. (This can be changed later by updating the settings of the Web Part Page Title Bar.)
To include our external application, add a Page Viewer Web Part to the page. In the Tool Pane of the Page Viewer Web Part, enter the link to the home page of the external application. You will notice that the default settings of the Web Part will likely not display the entire page. Change the Web Part’s width and height settings under the Appearance section as necessary. I also chose to display no border or title, which gives the page a seamless look.
Since the external application is displayed inside an IFRAME tag, it will work the same as before. The SharePoint header will not change when visitors click on links inside the application. If, for some reason, you wish to completely leave the SharePoint framework, add the target attribute to the anchor and set the value to _top.
Formatting the External Pages
As you can see above, the wrapped application looks dramatically different than the rest of the intranet site. Since Microsoft uses Cascading Style Sheets throughout the SharePoint site, it is relatively simple to adapt your page to the SharePoint style. To quickly change the look of the external pages, perform the following:
- Copy the CSS file from the SharePoint “styles” directory to your site directory. By default, the styles directory is at C:Program FilesCommon FilesMicrosoft SharedWeb server extensions60TEMPLATELAYOUTS1033styles. (Your location may differ if you have installed a language other than US English.) The name of the CSS file is OWS.CSS
- Set a reference in your page to the CSS file. This is done using the
tag within the element. - Assign the class attribute to the tags in your page. Microsoft has published a CSS Guide for SharePoint at http://www.sharepointcustomization.com/resources/tipstricks/wss_cssguide.htm
In my ASP.NET application, I set the following styles of the DataGrid control:
<tt> </tt>The resulting page:
Obviously, this process should be repeated for each page in the external application. To replicate the look of SharePoint’s built-in entry forms, I recommend using the classes ms-sectionheader, ms-formdescription, ms-formbody, ms-formlabel, ms-alerttext. Again, refer to the CSS Guide above for additional class names.
One additional item — the title of the new page will be Web Part Page. In most cases, you should change the
Entry Filed under: Sharepoint, Sharepoint Portal Server
Leave a Comment
You must be logged in to post a comment.
Trackback this post | Subscribe to the comments via RSS Feed