Pulling through specific web page content

Recently I’ve been working on developing dashboard application for a team portal site in SharePoint 2010. As any familiar with dashboard design and development knows, you often find yourself pulling in various nuggets of information that are dotted around the web. There are certain circumstances where pulling through a view of a particular web page is desired, and this is precisely why the Page Viewer Web Part was created. However, with the majority of out of the box content your options can quickly become limited when more intricate customisation is necessary.

I’ve read through numerous forum threads inquiring about disabling scrolling, setting a view offset and other fine control points that cannot be realised via web page editing interface.

For the project I was working on I wanted to focus in a basic summary section of the page and nothing else. When using the default Page Viewer Web Part (Fig 1) I was able to see the desired section, but being unable to set a view offset or control scrolling settings screen real-estate was being wasted, which is in precious demand in dashboard design.image_2_018D564B[1]

Fig. 1: Page Viewer Web Part

By inserting a content editor web part, however, with some custom HTML and CSS (Fig 3) a much neater display can be provided (Fig 2). NB: All values shown in red can and should be modified to your situation.

image_4_018D564B

Fig. 2: Advanced Page Viewer Web Part

<div style="width: 450px; height: 285px; overflow: hidden">
<iframe src="http://mywebsite" scrolling="no"
style="margin-top: -160px; width: 1000px; height: 1000px; margin-left: -10px">
</iframe>
</div>

Fig. 3: Frame properties

Here the width and the height of the div are used to set the scope of the viewable area. The overflow is hidden so that the content is clipped and will not be visible. On iframe itself the content is pulled through and its margins are altered such that the desired section of the screen appears within the viewable scope of the div tag. The width and height of the iframe are set such that all content is displayed within the frame – i.e. no scrolling is necessary.

image_6_6C9BD3D7

Fig. 4: CSS effects

Finally, I added an invisible div tag over the iframe to redirect users to the shown page when clicked upon. (Fig 5)

<a href=" http://mywebsite">
<div style="cursor: hand; position: absolute; top: 0; left: 0; width: 450px; height: 285px;
background-color: white; z-index: 2; opacity: 0.4; filter: alpha(opacity = 0)"
>
</div>
</a>

Fig. 5: Link div tag

This is by no means a perfect solution, for example; if the content moves on the original page the values will need to be modified to shift or change the viewable area. However, this remains a neat little solution for presenting static content.

Written by Mark Newman and Martin Grayson