Strategy, Software Development & Architecture: 2009

Wednesday, August 26, 2009

Master Pages (part 1)

The design we were after was not a look and feel of out the box sharepoint so we needed to build a page that was different.

Step one:
Go to the MSDN site and grab their minimal master page, it makes life a little easier as you cover most of the bases sharepoint requires.

Step two:
Open sharepoint designer and edit this page.

OK that's the simple version.

Reason for step one - this is so don't miss any of the important controls needed to run sharepoint. Menus, being able to access "site actions" etc.

The first task is to add your own style to the master page, but NOT using <link> command as sharepoint designer not always likes this but use:
<sharepoint:cssregistration name="">" runat="server"/>&

As this seems to work better in designer!

Now my next task was to override all the horrible core.css styles - there are many ms- (ms-titlearea, etc.) styles to make life easier I replaced the ms- with XX- where XX is any meaningful name i.e. Site name.
Now I can add each of these XX's into my stylesheet and those controls keeping will look how I want and not how MS thought should look.

Now I have a master page with all the standard sharepoint stuff but with my theme/colours applied.

For my site I decided I only wanted the top bar in this master page. So after my top menu I cut most of the code out of <body> and just left a place holder that took up the full width of page area.

Now I created a "new from master page" and then this allowed me to alter the content place holder to custom content and saving this page as a master gave me a nested master page.

The outer master allows me to control the top menu and overall branding of site.
The inner master(s) allows me to control left navigation menus and main content area; and use own CSS stylesheet

Now do a "new from master" using the inner master add some webpart zones to this ASPX file and I now have a site template page I can create pages from.

I also created a second inner master to have a second look for some pages, just comes in handy when I don't want the left menu to appear.

itemstyle.xsl or using own testing style

So you want to make your webpart display in own style, well once you point your webpart to own file you need to create that file.

<xsl:template name="Testing" match="Row[@Style='Testing']" mode="itemstyle">
  <xsl:variable name="SafeLinkUrl">
      <xsl:call-template name="OuterTemplate.GetSafeLink">
       <xsl:with-param name="UrlColumnName" select="'LinkUrl'" />
      </xsl:call-template>
    </xsl:variable>
  <xsl:variable name="SafeImageUrl"><xsl:call-template name="OuterTemplate.GetSafeStaticUrl"><xsl:with-param name="UrlColumnName" select="'ImageUrl'" /></xsl:call-template></xsl:variable>
  <xsl:variable name="DisplayTitle"><xsl:call-template name="OuterTemplate.GetTitle"><xsl:with-param name="Title" select="@Title" /><xsl:with-param name="UrlColumnName" select="'LinkUrl'" /></xsl:call-template></xsl:variable>
  <xsl:variable name="LinkTarget"><xsl:if test="@OpenInNewWindow = 'True'">_blank</xsl:if></xsl:variable>
  <div id="linkitem" class="item">
   <xsl:if test="string-length($SafeImageUrl) != 0">
    <div class="image-area-left">
     <a href="{$SafeLinkUrl}" target="{$LinkTarget}">
      <img class="image" src="{$SafeImageUrl}" alt="{@ImageUrlAltText}" />
     </a>
    </div>
   </xsl:if>
   <div class="link-item">
    <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate" />
    <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="{@LinkToolTip}">
     <xsl:value-of select="$DisplayTitle" />
    </a>
    <div class="description">
     <xsl:value-of select="@Description" />
     <xsl:for-each select="@*">
     P:<xsl:value-of select="name()" />(<xsl:value-of select="."/>)
    </xsl:for-each>
    </div>
   </div>
  </div>
</xsl:template>

This I save in the same place as ItemStyle.xsl and call Internet.xsl, it has a default style (from itemstyle.xsl) so when switch to using it won't break the webpart. Then it has a testing style that allows me to see if the "CommonFields" I added are working and show correct value.
From the testing I can then create a new style to display those fields how I want.

Within my next posts I'll explain more on XSL; I have found this to be great once I understood what it can do...

Using own xsl style sheet

For this month I have been working on SharePoint, building an internet site, having built an intranet site at the start of the year now starting this I had forgotten a lot of what learnt so this time I'm going to blog it here (until I move to own site).

Well I added a Content Editor Web Part (or CEWP or should that be Webpart) to my page and modify it to pull the correct datasource all simple and through the webpage.

Now I need to customise it... Two things need to do firstly get it to display my custom fields and secondly use my own style sheet. The second is to avoid changing the default itemstyle.xsl.

I created a xsl and added a testing template to it (in another post)

Now export the CEWP; you can now open this file with Notepad.

Look for the property called "ItemXslLink" and modify it to point to own style sheet:
" <property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/Internet.xsl</property>"

Then look for "CommonViewFields" and add your custom fields:
" <property name="CommonViewFields" type="string">ShareholderDetails, Text;URL, URL</property>"

Now save it, delete the one on your Web Part Page and import this modified version.

Now your webpart will display the extra fields need and use own styles.

More sharepoint posts to follow

Wednesday, January 28, 2009

SharePoint CSS Viewer

Just add the following to a editor web part thingy:

<script language="JavaScript">
function elementInfo()
{
//Output CSS Class Hierarchy
var currElement = window.event.srcElement;
var classTree = "";
var n = 50;

//Show first n characters of tagName in TAG cell
if(currElement.tagName != null)
{
ststag.innerText = "<" + currElement.tagName + ">";
if(ststag.innerText.length > n)
ststag.innerText = ststag.innerText.substring(1,n) + "...";
}
else
ststag.innerText = "";

//Show first n characters of id in ID cell
if(currElement.id != null)
{
stsid.innerText = currElement.id;
if(stsid.innerText.length > n)
stsid.innerText = stsid.innerText.substring(0,n) + "...";
}
else
stsid.innerText = "";

//Show first n characters of name in NAME cell
if(currElement.name != null)
{
stsname.innerText = currElement.name;
if(stsname.innerText.length > n)
stsname.innerText =
stsname.innerText.substring(0,n) + "...";
}
else
stsname.innerText = "";

//Show entire class parentage in the CLASS cell
if(currElement != null)
{
do
{
if(currElement.className != null &&
currElement.className != "")
{
if(classTree != "")
classTree = currElement.className + "\n" + classTree;
else
classTree = currElement.className;
}
currElement = currElement.parentElement;
} while (currElement != null);
stsclass.innerText = classTree;
}
else
{
stsclass.innerText = "";
}
}

//Run code on all mouse over events
window.document.body.onmouseover = elementInfo;
</script>

<table border="1" height="220" width="100%">
<tbody><tr>
<td valign="top">
TEST
</td>
<td valign="top" width="100%">
<table>
<tbody><tr>
<td>TAG:</td>
<td id="ststag" width="100%">
</td>
</tr>
<tr>
<td>ID:</td>
<td id="stsid">
</td>
</tr>
<tr>
<td>NAME:</td>
<td id="stsname">
</td>
</tr>
<tr>
<td valign="top">CLASS:</td>
<td id="stsclass">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>

Strategy, Software Development & Architecture