SHAREPOINT 2007 – MY FIRST LESSION – CREATING A WEBSITE

WITH YOUR OWN LAYOUT/DESIGN AND INCORPORATE CMS.

PREPARED BY: HUSSAIN ATTIYA

DATE: 24/4/2009

Things that I have discovered and I think it is important.

Virtual directory of the website is “c:\Program Files\Common Files\Microsoft

Shared\web server extensions\12\”

Images folder “c:\Program Files\Common Files\Microsoft Shared\web server

extensions\12\TEMPLATE\IMAGES\”

Controls folder “c:\Program Files\Common Files\Microsoft Shared\web server

extensions\12\TEMPLATE\CONTROLTEMPLATES\”

Opening SharePoint website in visual studio 2005

When I tried to open it. It gave me the following error:

So, First of all you need to install the “Visual Studio Extension for windows

SharePoint service”. When I tried to install it. It gave me the following error:

I downloaded the “Windows SharePoint Service 3.0”. Which I could not install

because my OS is Vista. I got this error:

For that, you need to install fist Helper.

Here are the steps:

The file is “setup.exe” (Setup Helper file).

Once the install has completed you will find the

SetupLauncher.exe in the install location you selected. If you

didn’t change the default option you will see it under the

directory.\Program Files\WssOnVista\Setup

After completing the above steps it’s time for the interesting part. Locate

SetupLauncher.exe and start it. You will once again see an UAC prompt,

select Continue.

After the Setup Launcher run, select the WSS installation file

Sharepoint.exe, or the MOSS installation file, and click OK. First, the

package will be extracted.

After the files have been extracted the WSS setup program will be started.

The current version only supports the advanced installation option so

select that one.

Select Web Front End when asked about Server Type. The database will be created later.

Sit back and relax while SharePoint is being installed, you are running Vista remember ;)

Hopefully you will see the following screen at the end of the installation. If you would get an error

during the installation step try to run a Repair.

Leave the checkbox checked and click Close to run the Configuration Wizard

Reference site:

http://community.bamboosolutions.com/blogs/bambooteamblog/archive/2008/05/21/

how-to-install-windows-sharepoint-services-3-0-sp1-on-vista-x64-x86.aspx

All this did not solve my problem. Here is the last thing that I found in the net:

Conclusion 1

“

You can only open a SharePoint website using SharePoint Designer (like FrontPage 2003

did for SharePoint 2003 websites).

But if you can to access to some ASPX pages, you can use network favorites folder, but

you may crash some pages (lost web parts for instance).

”

Starting website design:

I am using here one of our website that we developed. www.fiberhome-me.com. In

order to do cms website, you have to choose “publishing website template” when you

create a website.

DEVELOPING THE HOME PAGE TEMPLATE

I have designed a master page called “fh_default.master”. I have also; design another

master page for sub pages “fh_sub.master”

The website contains three navigation menus: TOP, Left Side and Footer.

The top menu, we can utilize SharePoint top menu. To create a menu hierarchy you

need to create different sites for each menu group.

<SharePoint:AspMenu ID="GlobalNav" Runat="server"

DataSourceID="SiteMapDataSource1"

Orientation="Horizontal" StaticDisplayLevels="1"

MaximumDynamicDisplayLevels="1"

StaticSubMenuIndent="0"

DynamicHorizontalOffset="0"

StaticEnableDefaultPopOutImage="false" ItemWrap="false"

SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"

StaticMenuItemStyle-CssClass="TopMenu_off" StaticHoverStyle-

CssClass="TopMenu_on">

<LevelMenuItemStyles>

<asp:MenuItemStyle CssClass="TopMenu_off" />

<asp:MenuItemStyle CssClass="TopSubMenu" />

<asp:MenuItemStyle CssClass="TopSubMenu" />

</LevelMenuItemStyles>

</SharePoint:AspMenu>

<PublishingNavigation:PortalSiteMapDataSource

ID="siteMapDataSource1" Runat="server"

SiteMapProvider="CombinedNavSiteMapProvider"

EnableViewState="true"

StartFromCurrentNode="true" StartingNodeOffset="0"

ShowStartingNode="false"

TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading"/>

So, I am going to create site to define the top menu.

After I create the top menu. It will look like that:

To re-order it. Go to Fiber Home > Site Settings > Modify Navigation

Don’t forget to change the sites menus master page. To do so,

Go to Fiber Home > home Links > Site Settings > Site Master Page Settings

And select the “fh_sub.master page”

Creating the Home Page Main Links.

To do so:

I will create new site called “homeLinks”

Of course the link will appear in the top menu. But you can hide it.

Here is the tree menu control and the datasource:

<asp:TreeView ID="TreeView1" runat="server"

Width="100%" ShowExpandCollapse="false" MaxDataBindDepth="4"

DataSourceID="SiteMapDS_home">

<NodeStyle Width="100%"

ImageUrl="~/_layouts/images/fh_images/btns/arrow_bullet.png"

CssClass="MainMenuLevel0" />

<LevelStyles>

<asp:TreeNodeStyle

ImageUrl="~/_layouts/images/fh_images/btns/gray_bullet.png" Font-

Underline="False" />

</LevelStyles>

</asp:TreeView>

<PublishingNavigation:PortalSiteMapDataSource ID="SiteMapDS_home"

Runat="server"

SiteMapProvider="PagesOnly" EnableViewState="true"

ShowStartingNode="false"

TreatStartingNodeAsCurrent="true" TrimNonCurrentTypes="Heading"

StartingNodeOffset="0" StartingNodeUrl="/homeLinks"/>

Note: StartingNodeUrl="/homeLinks" in the PublishingNavigation

control.

I need to add inline c# code in my master page to for example display date in a label and

control the length of the menu items.

Conclusion 2

Doesn’t do anything amazing but does show you can use the SharePoint object model in your inline code. If you saved the master page now and opened the site in your browser you’d get an error about not being able to

run code blocks. There’s an extra line you need to put into your web.config file first to allow this inline c# to execute.

<PageParserPaths>

<PageParserPath VirtualPath="/_catalogs/masterpage/*" CompilationMode="Always" AllowServerSideScript="true" IncludeSubFolders="true" /> </PageParserPaths>

I have control the length of the items in the tree view control in the sub page.

<script runat="server">

protected string Summarize(string Text, int Length)

{

string retval = Text;

try

{

if (!string.IsNullOrEmpty(Text))

{

const string HTML_TAG_PATTERN = "<.*?>";

retval = Regex.Replace(retval, HTML_TAG_PATTERN,

string.Empty);

if (retval.Length > Length)

retval = retval.Substring(0, Length) + "...";

}

}

catch (Exception ex)

{

}

return retval;

}

protected void tv_submenu_TreeNodeDataBound(object sender,

TreeNodeEventArgs e)

{

e.Node.Text = Summarize(e.Node.Text, 25);

}

</script>

DEVELOPING MY OWN NEWS DETAILS PAGE

LAYOUT

Getting a copy of the page layout 1. Better is to go to the site collection you're starting with

2. Select "Site Actions" -> "Site Settings" -> "Modify All Site Settings"

3. Under "Galleries", select "Master pages and page layouts"

4. Find the page layout from the list and open its context menu, select "Send to" ->

"Download a Copy"

5. Save the file to the solution location. We won't be using Visual Studio because it’s not

necessary for this evolution.

6. Once the file is saved, reopen the context menu for the page layout file and select

"View Properties".

7. Click on the Preview Image and when it appears, right click and save the image to the

same location as the aspx file.

After downloading I have done the following changes: open the file

“news_Details.aspx” to see the changes.

UPLOADING THE NEW PAGE LAYOUT BACK SO THAT YOU CAN SEE

If you only copy the page into the “_catalogs\masterpage” using SharePoint

designer 2007. It will just appear as a page without description:

What I would like to do is, to display explain also the template of what exactly.

And to do so:

go to site setting Master Page Gallery

Select edit properties of the “news_Details.aspx” page on context menu.

NOTE: ALL THE STEPS THAT I HAVE EXPLAINED FOR DEVELOPING NEWS PAGE IS ONE

SOLUTION. I HAVE ANOTHER BETTER SOLUTION. IN FACT THIS IS NOT THE RIGHT

APPROACH FOR MY SCENARIO. THIS WILL BE HELPFUL FOR CREATING A GENERAL PAGE

LAYOUT WHICH IT CAN NOT BE QUERIED (I AM NOT SURE. MAY STILL I DID NOT FIGURE

IT OUT.)

My scenario is to create news page template where users can add news. And then when

the user clicks on the news links it will display a list of all created news pages. To achieve

this you have to follow this direction:

Create new Content Type in SharePoint.

Then in SPD2007 you need to point to the website you have created the content

type and create new page under it. Put all your controls and fields and customize

it.

Then use query web part to query the pages based on the content type you

created.

I am going to explain in deep now.

CREATING THE CONTENT TYPE

I going to create a content type under the following site

http://mail:81/news/Pages/default.aspx

Go to Site settings.Site content types.

Click on “content type” under Galleries.

Then click Create at the top.

After clicking 'OK' the new content type has been created.

Next open SPD and select File.Open Site. You should be presented with a

site folder structure. (You may be prompted to authenticate against the

WSS server)

Next (In SPD) go to FileNew SharePoint Content. Then select

'Sharepoint Publishing'

Make sure you select the content type group you created.

Create your page:

I have created new two columns in my content type. From here.

(Still in SPD) Drag and Drop a 'EditModePanel' Server control into

the 'PlaceHolderMain' on your page - This enabled the "hiding" of

page fields from being viewed when the page has been published.

These hidden fields are only accessible during editing of if we are

referencing them via XSLT (more later).

Into the 'EditModePanel', Drag and drop the 'Rollup Image' page

field control and the 'ByLine' content field control. You can also

add the 'Scheduling Start Date' page field as well. But it isn't

required at this stage.

Save the page and you might have to check it in an approve it.

Go to 'Site Actions'..'Create Page'. Give your page a title and a

URL. Make sure you select the page layout you created earlier.

Click 'Create'.

That’s it….

NOW I NEED TO CREATE A PAGE WHERE I WILL SHOW ALL THE NEWS PAGES IN A

SUMMARY PAGE LIST.

To achieve that:

Clicking the news menu item in my website (this is a website).

Change the template of this page to a webpart page.

By going site action edit page:

Then go to Page Page Setting and Schedule:

In the page layout select web part blank page.

Add a Content Query Web part (CQWP) to a web part zone on the home page.

The query web part is available in the advanced section.

The image above you can see that the query is listing the entire website page. I

need to filter it so that it loads only the news pages. (Pages that are created

under my own content type which is “News Group”). To do so:

o Go back to the web part page and select 'Modify Shared Web part' on the

CQWP. Expand the 'Query' option and ensure that the query is showing

items from the 'Pages Library' and is showing both items from the

'Content Type Group' and showing items of the created content type. In

this case I am using the “News Details Page” content type group and the

“News Group” content type.

I DON’T LIKE THIS STYLE. I WANT MY OWN STYLE. HOW CAN I

CHANGE IT TO MY STYLE?

OK. LET ME EXPLAIN HERE:

Modify the file 'ItemStyle.xsl' in SPD2007 - For the opened site go to, 'Style

Library', 'XSL Style Sheets'. Then checkout 'ItemStyle.xsl'. Note that by changing

this file you are breaking the styles as dictated by the site definition. Thus

making it customized. By changing this file we can add our own XSL template

styles:

I have put the following style: just above the last </xsl:stylesheet> tag.

(Important)

<xsl:template name="ShowRollUp" match="Row[@Style='ShowRollUp']"

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="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>

<xsl:variable name="SafeImageHtml">

<xsl:call-template

name="OuterTemplate.GetColumnDataForUnescapedOutput">

<xsl:with-param name="Name"

select="'PublishingRollupImage'" />

<xsl:with-param name="MustBeOfType" select="'Image'"

/>

</xsl:call-template>

</xsl:variable>

<div id="linkitem" >

<xsl:if test="string-length($SafeImageHtml) != 0">

<div class="image-area-left" align="left">

<xsl:value-of disable-output-escaping="yes"

select="$SafeImageHtml" />

</div>

</xsl:if>

</div>

<xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>

<div class="NewsLinks">

<b><a href="{$SafeLinkUrl}" mce_href="{$SafeLinkUrl}"

target="{$LinkTarget}" title="{@LinkToolTip}">

<xsl:value-of select="$DisplayTitle"/>

</a></b> <br/>

<xsl:value-of select="@Created " />

<br/>

<xsl:value-of select="@Description" /><br/><br/>

</div>

</xsl:template>

Go back to the web part page and select 'Modify Shared Web part' on the

CQWP. And expand “Presentation”. Scroll down to the Styles section and change

the Item style to 'ShowRollup'. Click Ok.:

THIS IS MY STYLE NOW

I forgot one thing: you remember that I have created my custom columns. One

of them is “News Summary”. I want to display it here as well.

CUSTOM QUERY WEBPART: ADD NEW COLUMN TO QUERY WEBPART

Best Practices for Working with Column Names in

SharePoint

When creating a column in MOSS 2007, SharePoint stores the name you entered as a

display name AND an internal name. The internal name is created by escaping out

special character like this:

Display Name: My Column Name

Internal Name: My_%20_Column_%20_Name

Even worse, when you edit the column name and change it to something totally different,

the internal name doesn't change:

Display Name: New Name

Internal Name: My_%20_Column_%20_Name

Now, at first you might think "who cares what the internal name is". When you are

working with DataViews, some third party controls, and custom Webparts - you must use

the internal name. The potential for confusion is enormous.

Best Practice

When creating new columns, name them without any specail characters or spaces. After

the column is created, rename it with the special characters or spaces. This way the

internal name is "clean":

Display Name: My Column Name

Internal Name: MyColumnName

When renaming a column, create a new column (using the best practice above), copy the

data to the new column, and then delete the old column. This will eliminate any

confusion down the road.

Otherwise, you need to use the internal name: which is difficult to find in sharepoint.

Here is something that can help:

For my case, I have created “News Summary” column so the internal name will be

“News_x0020_Summary” (according to the table above)

How I have added the “News Summary” field to show the news list like that:

I have following the below instructions:

Edit the Query web part by editing the page. And export the web part:

Save the “.webpart” file to your disk:

Now open up the file in any text editor, I will use Visual Studio but notepad will

work just as well. Now in the file there is a property called

"CommonViewFields". This needs to be changes as below.

Before

<property name="CommonViewFields" type="string" />

After:

<property name="CommonViewFields" type="string"

>News_x0020_Summary,Note;</property >

NOTE: I HAVE STRUGGLED A LOT TO FIGURE IT OUT. BECAUSE I HAVE

DONE ALL THE STEPS, BUT THE FIELD IS NOT COMING UP IN THE VIEW.

I NOTICED THAT FOR “TEXT AREA” FIELD YOU HAVE TO DEFINE IT AS

“NOTE” DATA TYPE.

SEE:

<property name="CommonViewFields" type="string"

>News_x0020_Summary,Note;</property >

In the xsl file locate this line and modify accordingly

<property name="DataColumnRenames" type="string"

>News_x0020_Summary,summ;</property >

This will map the internal field name to your wish field name:

Means, you should use “summ” instead of “News_x0020_Summary”

Last thing is to change in the xls file:

<xsl:value-of select="@summ" /><br/><br/>

MORE STUFF HERE

Creation date

You can take it even further by formatting the date. Instead of reinventing the wheel and writing

our own date formatting function I’am using the ddwrt namespace used in Data View Web Parts,

which contains great functionality for formatting date and time.

1) Add the ddwrt namespace

Add the following namespace attribute to the root xsl:stylesheet element

xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"

2) Use the date formatting functionality of ddwrt

Add an xsl:variable element to our xsl:template element

<xsl:variable name="Created">

<xsl:value-of select="ddwrt:FormatDateTime(string(@Created) ,1033

,'dd-MM-yyyy')" />

</xsl:variable>

Page content + 'Read More' link

The idea here is to show a few lines of the page content with a ‘Read

more’ link that redirects to the entire article. This way readers get a small preview of the article’s contents.

Add the following text to the xsl markup . It will display the first

200 characters of the Page Content field and the link pointing to the entire article.

<div class="description">

<xsl:value-of select="substring(@PublishingPageContent, 0, 200)"

disable-output-escaping="yes"/>

<a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="Lees

meer">...</a>

</div>

DEVELOPING THE LATEST NEWS BOX IN THE HOME

PAGE

Before I start to explain, I would like to remind that I have create a column called “Show

in Home page” as “yes/no” data type under the content type I have created “News

Details Page”

Conclusion:

You can insert a web part in a master page. But you cannot insert a web part zone.

I have opened the “fh_page.master” in SPD2007 and scroll to the location that I

want to display the latest news.

I have used a query web part. I have inserted the web part from here:

In the right side the “web parts” box will appear. Select “Query Web Part” and

click on “Add Selected Web part” button:

The code will be something like that:

<PublishingWebControls:ContentByQueryWebPart runat="server"

AdditionalFilterFields=""

FrameState="Normal"

ID="ContentByQueryWebPart1"

MissingAssembly="Cannot import this Web Part."

DataSourceID=""

HelpMode="Modeless"

AllowMinimize="false"

ZoneID=""

IsIncludedFilter=""

SortBy="{8c06beca-0777-48f7-91c7-6da68bc07b69}"

ExportControlledProperties="True"

ExportMode="All" ChromeType="None"

Description="Use to display a dynamic view of content from your site on a web page"

AllowHide="false"

SuppressWebPartChrome="true"

AllowConnect="True"

Title="Content Query Web Part"

ViewContentTypeId=""

GroupStyle="DefaultHeader"

NoDefaultStyle=""

DetailLink=""

PartImageSmall=""

AllowRemove="True"

PageSize="-1"

Dir="Default"

PartImageLarge=""

IsVisible="True"

ConnectionID="00000000-0000-0000-0000-000000000000"

AdditionalGroupAndSortFields=""

IsIncluded="True"

UseSQLDataSourcePaging="True"

ShowWithSampleData="False"

AllowEdit="false"

AllowZoneChange="false"

ItemStyle="Default"

HelpLink=""

PartOrder="0"

FrameType="TitleBarOnly"

SortByDirection="Desc"

__MarkupType="vsattributemarkup"

__WebPartId="{ab40d1dd-7daf-4df1-a41f-c6af7bd16e7a}"

WebPart="true" Height="" Width=""

ContentTypeName="News Details Page" FilterType1="Boolean"

FilterField1="{3ee958bc-a4ca-47ee-8125-1da2acbeb278}" FilterOperator1="Eq"

FilterValue1="1" ><Xsl>

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:cmswrt="http://schemas.microsoft.com/WebPart/v3/Publishing/runtime"

exclude-result-prefixes="xsl cmswrt x" > <xsl:import href="/Style Library/XSL Style

Sheets/Header.xsl" /> <xsl:import href="/Style Library/XSL Style Sheets/ItemStyle.xsl" />

<xsl:import href="/Style Library/XSL Style Sheets/ContentQueryMain.xsl" />

</xsl:stylesheet></Xsl>

<DataFields>

</DataFields>

<SampleData>

<dsQueryResponse>

<Rows>

<Row Title="Item 1" LinkUrl="http://Item1" Group="Group Header"

__begincolumn="True" __begingroup="True" />

<Row Title="Item 2" LinkUrl="http://Item2" __begincolumn="False"

__begingroup="False" />

<Row Title="Item 3" LinkUrl="http://Item3" __begincolumn="False"

__begingroup="False" />

</Rows>

</dsQueryResponse></SampleData>

</PublishingWebControls:ContentByQueryWebPart>

I have set the query web part to load my news pages by setting this property:

ContentTypeName="News Details Page"

Also, I need to make the web part to filter the news by my custom field which is

“show in home page” . to do so, I have set the following properities:

FilterType1="Boolean" FilterField1="{3ee958bc-a4ca-47ee-8125-

1da2acbeb278}" FilterOperator1="Eq" FilterValue1="1"

Note: FilterField1 = “{3ee958bc-a4ca-47ee-8125-1da2acbeb278}”

The id above is GUID format representing my custom field “show in home page”. How I

knew the GUID for it?!

Answer:

I went to the news page which I have query web part.

Then edit the query webpart to show the properties box in the right side.

In the query define the filter:

Apply the changes

Then export the “Content_Query_Web_Part.webpart” file.

Open the file and search for “FilterField1”. You will see the GUID name format

for the selected filter field.

CUSTOMIZING THE HOME PAGE

What I have done is:

I create new page layout. Refer to the “DEVELOPING MY OWN NEWS DETAILS

PAGE LAYOUT” section. It is the same.

I have added three picture place holders, three title place holders, three

summaries and three hyperlinks.

Then I created the page layout using SPD 2007.

Then I have created new page based in the layout.

Finally I changed the welcome page to my new page. See the screen shot:

Go to site setting:

Then under the look and feel. Click on welcome page link

REFERENCES

http://mail:81/_layouts/settings.aspx

http://www.cleverworkarounds.com/2007/10/08/sharepoint-branding-how-css-works-

with-master-pages-part-1/

http://www.codeproject.com/KB/sharepoint/FBA.aspx

http://msdn.microsoft.com/en-us/library/ms497457.aspx

http://blogs.msdn.com/ecm/archive/2006/10/30/building-tylerbutler-com-part-1-

planning-and-basic-branding.aspx

http://blogs.msdn.com/ecm/archive/2007/02/10/moss-navigation-deep-dive-part-

1.aspx

http://blogs.msdn.com/ecm/archive/2007/02/16/moss-navigation-deep-dive-part-

2.aspx

http://naveedshare-licensetoplay.blogspot.com/2008/06/designing-site-pages-by-using-

controls.html

http://msdn.microsoft.com/en-us/library/dd586621.aspx

http://www.andrewconnell.com/blog/archive/2006/11/15/5168.aspx

http://weblog.vb-tech.com/nick/archive/2006/08/03/1710.aspx

http://blog.tylerholmes.com/2008/02/deleting-content-types-in-sharepoint.html

http://www.andrewconnell.com/blog/articles/UsingCodeBehindFilesInSharePointSites.a

spx

http://www.cmswire.com/cms/web-cms/web-content-management-with-sharepoint-

moss-2007-part-2-workflow-002021.php

http://www.microsoft.com/belux/msdn/nl/community/columns/stevenvandecraen/con

tentquerywebpart.mspx

http://www.helloitsliam.com/archive/2007/01/15/moss2007-%E2%80%93-content-

query-web-part-step-by-step.aspx

http://www.sharepointblogs.com/tonstegeman/archive/2007/07/23/associating-the-

default-page-in-a-sharepoint-2007-publishing-site-with-a-custom-content-type-and-a-

custom-page-layout.aspx

http://blogs.msdn.com/sharepoint/archive/2007/03/22/customizing-moss-2007-my-

sites-within-the-enterprise.aspx

http://cakriwut.wordpress.com/2007/05/05/moss-2007-branding-a-publishing-page-

answer-for-a-friend/

http://blog.richardszalay.com/2006/10/moss-2007-changing-default-welcome.html

http://www.heathersolomon.com/blog/articles/servermstpageforsitecollect_feature.as

px

http://heathersolomon.com/blog/articles/servermstpageforsitecollect.aspx

http://social.msdn.microsoft.com/forums/en-US/sharepointinfopath/thread/bcdf0c3e-

0e22-42bc-a2d2-2c990b57dc6e/