SharePoint Magazine » Featured

SPoint.me – The SharePoint Social Network

Arno Nel — Tue, 02 Mar 2010 15:50:13 +0000

It gives me great pleasure to introduce you to SPoint.me . SPoint is aiming to become the premier Social Network for people in the SharePoint Industry. Its a little bit of Facebook, Twitter, LinkedIn, Digg, and Wordpress, all rolled into one.

Differentiate yourself
Create a User Group
Launch your products
Provide Support
Engage
Connect

Some of the features are listed below, but the best way to understand, is to sign up More details in the next few weeks.

Blogging

Start a blog built on the best blogging software in the world. Even allow each of your users to start their own full powered WordPress blog. Track new posts and comments across your site.

Groups

Powerful public, private or hidden groups allow your users to break the discussion down into specific topics

Friends

Let your users make connections so they can track the activity of others, or filter on only those users they care about the most.

Messaging

Private messaging will allow your users to talk to each other directly, and in private. Not just limited to one on one discussions, your users can send messages to multiple recipients.

Activity Streams

Global, personal and group activity streams with threaded commenting, direct posting, favoriting and @mentions. All with full RSS feed and email notification support..

Profiles

LinkedIn style profiles fields allow members to describe themselves..

Forums

Full powered discussion forums built directly into groups allow for more conventional in-depth conversations..

Everything You Need to Know about BDC: Part 8 of 8

Wen He — Mon, 08 Feb 2010 10:53:04 +0000

Welcome back to Part 8 of our 8-part series on the Business Data Catalog (BDC). From the previous 7 installments, we have covered everything about BDC, from BDC architecture, ADF, BDC Web parts, BDC search and profile, to the BDC object model in details. We also touched the surface of BDC actions in Part 4 and Part 5. As promised, we’ll dedicate this final article to actions. We’ll explain what the BDC actions are and what they can do for you. We’ll then walk you through how to create custom actions and how to perform these actions by using custom Web parts and InfoPath forms. As you will soon learn, this is another power capability of BDC because it extends the ability to link content to Web sites. This allows you to quickly create mashups that are item-specific so that you can take actions in context, such as write back to your LOB systems.

For your reference, these are our previous seven articles:

Part 1, BDC Purpose and technical architecture
Part 2, Application Definition File (ADF) and its Development
Part 3, Developing an ADF to Connect to Web Services
Part 4, Consuming Business Data through Web Parts and SharePoint Lists
Part 5, Implementing Enterprise Search with Business Data
Part 6, Integrating User Profiles with Business Data
Part 7, Working with the BDC Object Model

With that, let’s dive into BDC actions and start by asking what is an action.

What is an action?

An action is simply an operation upon a selected item. The operation can retrieve information about the selected item, or it can launch a program or Web page with the selected item as a parameter. The operation is a predefined URL link in each BDC item that enables you to act on the item, such as editing, or mapping it using Live Search as we demonstrated in Part 4.
An action is composed of a URL target where the action is to occur, and the matching parameters in the URL QueryString format. When we associate an action with an entity, we can pass parameters to that action based on the contents of one or more fields. For example, in the Live Search example in Part 4, we associate the Live Search page’s URL with a customer and provide the customer’s address to parameterize the search.

From the above, major characteristics of actions are as follows:

URL-based, parameter-driven
Actions on any entity and appear everywhere an entity goes
User can take action in ECB menu
Custom actions means custom code

A perfect example of action is the default View Profile action, as shown in Figure 1.

Figure 1 View Profile action in a Business Data Actions Web Part

Through a View Profile action we can navigate to the profile page of an entity. Clicking the View Profile action in a Business Data Actions Web Part as shown in Figure 1 above, as well as in a Business Data column, or in a Business Data List Web Part, lets us view the details of an item on that item’s profile page. Figure 2 shows that a Profile page that displays employee details.

Figure 2 A Profile page that displays employee details

What is a Profile page?

A profile page is automatically generated for each entity that has a SpecificFinder method after BDC imports an ADF file, a profile page can display all the information from a record in the BDC. As we’ve seen in Figure 2, a profile page can display all the fields in a record for a specific employee. The default profile page contains a BDC Item Web Part for that entity.
If we put the profile page in Edit mode, there are actually two Web parts: a Business Data Item Builder and a Business Data Item that connect together. The Item Builder parses the querystring (http://win7:10001/ssp/admin/Content/Employee.aspx?EmployeeID=1) and passes the EmployeeID value to the Business Data Item, which then executes the SpecificFinder method and returns a record of Employee data.

Figure 3 Profile page components

Default Profile Page and default action

As we have seen from above section, the default action (View Profile) along with the default Profile page is automatically created when the entity has a SpecificFinder method. To provide an ECB menu user experience, we can also add actions in a Business Data List Web part without using the Business Data Actions Web Part.

Defining an Action

There are three ways to add an action: 1) defining it in the ADF, 2) adding it in the BDC admin page after the ADF has been imported into BDC, and 3) through the BDC Object Model. Here we’re focus the first two.

Defining it in the ADF

To define an Action for the specified BDC entity, we’ll first locate the section within the and hierarchy.

Figure 4 Actions is nested within the Entities/Entity in ADF

And insert the portion like this one:

Adding an action in the BDC admin page

In the SSP administration page (View Application –> View Entity), the action is defined below and the URL that takes EmployeeID as a parameter: http://dpm:10001/ssp/admin/Content/Employee.aspx?EmployeeID={0}

Figure 5 Add an action the SSP Admin page

Custom Actions

We also can create custom actions for entities in BDC. Among other things, custom actions allow users to navigate to any custom page to manipulate business data.
Here are some scenarios that custom actions can do:

Parameterize custom search
Update employee in HR system
Customize profile page for an entity
Integrate BDC search into enterprise report center

We’ll be creating custom actions in the last part the article.

Figure 6 Enable View Profile action in a Business Data List Web part

This enables the ECB-style action, we will specify a Title property and add the following in the ADF:

LastName

It specifies which column in the Business Data List/Related List Web part displays the Actions menu. It also specifies the name of the TypeDescriptor that corresponds to the column you want to display as the default column in Business Data lists.

In the Business Data Column scenario, we can also display the action menu and link the column to the business data profile in a Business Data list.

Figure 7 View Profile action in Business Data Column

This is default behavior OOB for a Business Data column. When adding the column, just make sure the following two are checked:

Display the actions menu
Link this column to the profile page to

Figure 7 Enable the actions menu and profile page in Business Data list

These profile pages are used and being indexed by BDC Search. The following search results display the profile pages that contain the search keyword (s). Notice in Figure 8 how a search for Great Lakes will display the profile pages for both this customer and their orders.

Figure 8 BDC Search Results in Profile Pages

Enhancing the Profile Page

By default, the profile page is hosted on the Shared Services Provider site collection where the BDC administration site is located. The search result (that is, the URL) links back to the Shared Services Administration site collection address that is not scalable when you extend the Web application. In real world, we may not want to give end users access to the SSP Admin site for security reason. A better practice is to create our own profile pages and host them in any site that is not part of the SSP site collection.
In this example, we’ve created a dashboard page in Report Center to replace the default Profile Page. The Report Center provides enterprise reporting capabilities that are scalable and centralized. We can direct users to custom profile pages by updating the View Profile action.

Figure 9 Replace the default Profile Page with Custom Report Center

As an alternative, we can also replace the default the URL in Action element in ADF with the path to the Profile.aspx page:

http://reportcenter/Pages/Profile.aspx?EmployeeID={0}” ImageUrl=”/_layouts/1033/images/viewprof.gif” Name=”View Profile”>

An action to call the Profile.aspx page for each Employee ID has been defined. This action will be the default action provides in the search result.

Now let’s create Profile page to display information about the Employee entity in Report Center. (The Report Center is a site that provides a central location for business-intelligence-related information.)

In the http://reportcenter site, create a new Blank Web Part Page called “Profile.aspx”.
Add the following two web parts: Query String (URL) Filter Web Part and Report Viewer Web Part.
Configure the Query String (URL) Filter Web Part to pickup parameter “EmployeeID” from the URL query string.
Configure the Report Viewer Web Part to display the employee profile report called “Employee Profile”.
Connect the Query String (URL) Filter Web Part parameter to the SQL Server Reporting Services Report Viewer Web Part parameter “EmployeeID”.

Figure 10 SQL Server Reporting Services Report Viewer

Note: Please make sure you use this Web Part and not the OOB Report Viewer Web Part.

Test that the page is picking up the URL string parameter “EmployeeID” correctly by typing the following URL: http://reportcenter/Pages/Profile.aspx?EmployeeID=108

Figure 11 Custom Profile Page in Report Center

Creating Custom Actions

Creating custom actions requires custom code. The approach we take is to treat the BDC source simply as a data reader, and to build our CRUD (create/read/update/delete) logic in custom code. The BDC object model provides the means to retrieve collections, list items and enumerators, and we can use GenericInvoker to perform CRUD, which has been extensively covered in Part 7. We get the Web Parts to display data, and then we can use custom actions to create and update records by using Web parts and InfoPath Forms.

Creating Web Parts

We have created and deployed two Web Parts using the Object Model as shown below, with one inserting a record and one updating an existing record. (Special thanks to Lightning Tools! I’ve used BDC Meta Man to help with creating the Web parts.)

Figure 12 The two Custom Web Parts can be used to add and update employee records

Add these two actions in the SSP Admin page:

Figure 13 Adding actions in the SSP Admin page

Now you can access the two actions from the content menu in the Employee List:

Figure 14 Custom Actions Add Employee and Update Employee in the context menu

Figure 15 Add Employee Web Part

Figure 16 Update Employee Web Part

Creating InfoPath Form

MSDN has a great article titled Using Business Data Catalog Actions to Pass Parameters to InfoPath 2007 Browser Forms that walks you through this in detail. So I’ve created our InfoPath Form and added the action using the Form Template path:
http://dpm/_layouts/FormServer.aspx?XsnLocation=http://dpm/FormServerTemplates/EmployeeUpdate.xsn&DefaultItemOpen=1&EmployeeID={0}&FirstName={1}&LastName={2}

Figure 17 Adding Custom Action that uses InfoPath Form

Figure 18 Update Employee in InfoPath Form

Conclusion

In this final article, we have focused on actions that users can take on the business entities. We can define actions in ADF or add it “after the fact”. We have also created custom actions using the BDC object model by using custom Web parts and InfoPath forms to enable CRUD (create/read/update/delete) operation support. Once added, actions can be performed from within the list, which becomes relatively transparent to the user where the data comes from. [The statement that the BDC data is read-only is not true anymore as we have just demonstrated.] As you have learned from our 8-part series, BDC enables user interaction in business intelligence, enterprise content management, collaboration and social features, and enterprise search.

Looking Forward to SharePoint Server 2010

BDC has evolved to what is now called BCS (business connectivity services) in SharePoint 2010. Even though we can use BDC to enable connectivity to external systems, it was difficult to create solutions because of the lack of a designer and it was not so simple to create a solution that enabled users to make changes and write that data back to the external store. BCS now enables you to integrate LOB data into SharePoint and Office with full CRUD support, tighter integration with Office client applications, and better tools for modeling business entities. BCS is all about connecting to external data. We look forward to sharing with you the exciting new features in BCS and what they can do for you in the near future. Until then, aloha!

SharePoint’s Branding Limitations, Part 4

Diantha van Marion — Fri, 24 Jul 2009 07:51:47 +0000

Introduction

As a Front-end Developer with a background in designing I’ll show you how to make a graphical design that works for a default SharePoint-environment. If you want to take control over the front-end, don’t use any themes. Create your art by using style sheets!

Not all graphical designs for a portal will work in a SharePoint environment. There are a couple of limitations the Graphical Designer must know. A Graphical designer needs to know the scope of the graphical design. For example, if a Graphical Designer puts a border on an element like a table, that will take him about 3 minutes to design, but this simple border could take the Front-end Developer a few hours to implement.

It’s really important that the Graphical Designer and the Front-end Developer work together and have a clear communication about the graphical design. Making a graphical design specifically for a MOSS environment could save you days on the implementation! This article will give the Graphical Designers more insight into the effect of these design decisions.

This article assumes that the reader has SharePoint and basic HTML knowledge.

Search

There are multiple search interface within a SharePoint portal. One of them is the search interface in the header. Part 1 of “The art of SharePoint, how to make a graphical design work for SharePoint” discusses that one.

The search result page has it’s own page layout. If you take a look at the search results page you will see that the search interface is no longer in the header but is now onto the content area. It is not another web part, because it has kept it’s ID #1, that is reserved for the search interface.

Page layout

There is a specific page layout for the search results. If you take a closer look at the Black Search Page (Welcome page) you can identify the following page elements:

• Tabs

• Input fields

• Results bar

• Search results

• Paging (only visible when there are more then 10 item found)

The next section discusses all page elements in detail.

Tabs

The code in the following image shows that the tabs are rendered inside a table, the .ms-ptabarea, which is rendered inside the .ms-pagetitleareaframe of the web part

This table has one more cell as there are tabs. In this case there are two tabs, so there are three cells. The last cell of the table has only one function; it makes sure that the whole table has a bottom border all the way to the right.

The ’s with a tab all contain the class name .ms-sctabcf, or if the tab is selected, the class name is .ms-sctabcn. This makes it possible to style the selected tab different from the others. The last, the one for the border, has the class name .ms-sctabrx.

You can make the tabs look like textual links by removing the background color and the borders of the ’s. Make sure that the selected item will be styled a bit different so that it is still visible that it’s the one selected. Also make sure you style the rollover state of them. Every class name will get “hover” behind the usual class name (except for the .ms-sctabrx). For example .ms-sctabcfhover and .ms-sctabcnhover.

Input fields

Another web part on the search result page is where the input fields are. The table the input fields are in, has a cell for every element, plus one.

All the ’s have the class name .ms-sbcell, except for the last cell, that is empty. This one is called .ms-slLastcell. The cell that has the search button in it, has two class names, the .ms-sbcell and the .ms-sbgo. You can style this area by using these class names.

Results bar

The results bar is located just above the search results. It has it’s own web part zone called #MidUpperLeftCell. This web part has a table with three <tr>’s. The first ans the second <tr>’s are empty. The third one has a with a web part that is responcible for showing the result text. The text and the sort-links have a classname, you can use to style it.

The second results-row, is an other web part, in the web part zone #MidLowerLeftCell. Inside the .ms-WPBody is a div.srch-WPBody. In there is the div .srch-stats in where the text is located.

Inside the #MidLowerRightCell is the upper paging positioned.

Search results

The search results are positioned in the web part zone #BottomCell. The div inside this web part does have class name: .srch-results. All the search results are positioned inside that div. For every search result there is a .srch-Icon, .srch-Title, .srch-Description and a .srch-Metadata, so every element can get its own styling.

All the elements inside a search result have a class name. It is, for example, possible to hide the icon of the document, or give the search title, description or url another color. I advise you to only style the colors and fonts and leave the position of the element as they are, which leaves as much space as possible for the search results.

Paging

Inside the #MidLowerRightCell is the upper paging positioned. The paging at the bottom of the screen is also positioned in the #BottomCell. Inside the paging div, the .srch-Page there is an -tag for every link. The page that is being visited at the moment does not have a link, nor a classname. So when styling the numbers, first style every element inside the .srch-Page, then restyle every -tag inside the .srch-Page.

My Site

The My Site is a bit different then the other sites of SharePoint. First of all it uses another master page, which is composed out of different files. If you want to make changes in the master page or page layout of the My Site, there’s no easy way to do it. How you can edit the master page will not be discussed in this article. Just stick to the existing layout and only change the style sheet. It is possible to make a beautiful my site.

Because the master page of the My Site is a bit different, it does not contain a reference to your style sheet you created. Ask a developer or architect to add the reference for you, or if that is not possible paste the css code underneath the rest of the styiling in the portal.css. This is not the best way to go, because you really want to separate the default styles from the new one’s. And you do not want to make changes in the style sheet twice (once in your custom stylesheet and once in the portal.css). So, it is better to make the master page of the My Site work with your style sheet by adding the reference to it.

If you apply the layout style sheet for the portal onto the My Site, you will see that your graphical design is implemented for about 90%. I advise to double check all the items and make sure every element is styled correctly. Pay special attention to the blog and wiki, the calendar and the colleague tracker.

SIFR

Scalable Inman Flash Replacement (SIFR) is ment to replace short pieces of text (for example a title or header) by any particular font. Users of the portal do not need to have the font installed on their machine. SIFR works with javascript, flash and css and replaces the particular piece of text in a split second.

In the configuration file of SIFR you can refer to a class name or ID, so that the text inside that element will be replaced by a SIFR object. It is very easy to use. There is one thing you need to consider before using SIFR on a portal.

SIFR replaces the text with a flash object, a swf. This object is placed on top of the text, while the text that is being replaced is made invisible. It is possible to edit some of the object styles, for example the color and the padding.

What if the text you are replacing with SIFR is a link? Like for example a news header? In the news overview page the header is a link. SIFR replaces the text by a swf-object, but the object does not copy the reference the link had. So be careful where to use SIFR on a SharePoint Portal, because, if what you are replacing a link with SIFR, which has the same class name/ID as referred to in the configuration file, you cannot use SIFR. Make sure your Graphical Designer knows this, and prevent him from designing a fancy menu with spiffy fonts.

Calendar and date picker

The calendar has its own style sheet. Just like the date picker. When you style the calendar, you should also style the date picker, because those two have the same table-like structure and use the same colors. I advise you to only style the colors and fonts of the calendar and use the layout default.

Because there already is a special calendar style sheet, the calendar.css, it is very easy to style the calendar.

1 First of all, find an element you would like to style.

2 Search in the style sheet for its color and/or background image or -color.

3 Copy all the class names and ID’s that have that particular color or background image.

4 Make a separate calendar section in the exsisting style sheet, for example after the last line, at the end of the other styling in the calendar.css.

5 Paste the class names and ID’s in there and give them the color and background images you would like to give them.

This way, you can end up by changing a handfull color codes, and it can be done pretty easy. You can work the same way for the date picker, and you can use the same colors as you did for the calendar.

Here are some examples:

Make sure you have checked the day, week and month view. Also check a short appointment, an appointment over a few days and an all day appoint.

Summary

Here’s a small overview with highlights of all four parts of the article “The art of SharePoint, how to make a graphical design work for SharePoint”.

Styling elements will work best on elements that have a class name, ID or a combination of both.
Always double check if you haven’t forgotten to style any elements.
The calendar and the date picker have their own style sheet.
The look and feel is well manageable when making custom master pages and page layouts. This gives you the opportunity to find the boundaries and give it all a bit more exciting looking.
Most of the time, adjusting the height, width or colors of an element, text or image is not that hard. It is more difficult to style the position, the location of the page elements. Because you cannot change the order in which elements are rendered, you will need style sheets to edit the location on the page where the elements are shown.
Changing an elements position can cause some trouble on other pages on the portal, because class names and ID’s are used through the whole portal. Changing one of them will cause another element on another page to change also.

Resources

CSS Reference Chart for SharePoint 2007

By Heather Solomon

SIFR

By Mike Davidson

Tamtam blog Diantha van Marion

By Diantha van Marion

Thank You Tam Tam !

A big thank you to Diantha and Tam Tam from Arno at SharePoint Magazine. This post is from the SharePoint Magazine Partner Spotlight Week, where our featued partner was Tam Tam.

If you would like to be featured on the SharePoint Magazine Partner Spotlight, please contact us

SharePoint’s Branding Limitations, Part 3

Diantha van Marion — Thu, 23 Jul 2009 08:04:48 +0000

Introduction

This article assumes that the reader has SharePoint and basic HTML knowledge.

Web parts

This section is all about SharePoint’s web parts. First the display mode of the web parts will be the point of interest, then the Edit mode, and after that the Article page layouts will be discussed.

The with class name .ms-bodyareacell is the overall container for the content. Inside this is a table with class .ms-propertysheet, and a td.ms-bodyareaframe inside that there is another table. These are the containers for the content on a page and are being defined in the page layout. Inside the .ms-bodyareaframe are a few nested tables and one of these tables is the table of a web part.

Web part ID’s

If a web part is placed inside a web part zone, it will get an ID. Depending on the amount of already placed web parts on that page, and the order in which they are placed, the ID will get its tracking number. It does not change when you change the order of the web part zones. So therefore, the ID of the web part actually isn’t unique, it is just unique for that page.

The web part in this example is the third web part of the page and as you can see, it carries number 3 in the ID. The search interface in the header is always the first web part of the page. In this case there were two web parts placed on the page, which together with the search makes three: the ID number of the last placed web part. If you want to style the web part in its entirety, you can only list all the web part ID’s and add styling to them. This nasty solution is the only solution to styling every web part on itself. A better solution would be for example to style the elements inside the web parts, such as the .ms-WPBody.

..
#MSOZoneCell_WebPartWPQ27,
#MSOZoneCell_WebPartWPQ28,
#MSOZoneCell_WebPartWPQ29,
#MSOZoneCell_WebPartWPQ30{
     Border:1px #f2f2f2 solid;
}

Because every web part has a and inside that a table as a container, it is possible to style the background of the web part with two background images, but it is very tricky an I advice you not to do so. Make sure every with ID #MSOZoneCell_WebPartWPQ2 (a web part ID of your choice) has a background image. Then style every table inside the with those ID’s with another background image. Secondly, hide every background image on every second or more nested table inside the with the web part ID.

Here’s an example of how, just for web part ID 3:

#MSOZoneCell_WebPartWPQ3{
     Background:transparent url(images/webparttop.jpg) repeat-x left top;
}
#MSOZoneCell_WebPartWPQ3 table{
     Background:transparent url(images/webpartbottom.jpg) repeat-x left top;
}
#MSOZoneCell_WebPartWPQ3 table table{
     Background:transparent none;
}

Which means “only apply if table is the first element inside #MSOZoneCell_WebPartWPQ3“, because it is not supported in Internet Explorer 6 and older versions.

Unfortunately you cannot use

#MSOZoneCell_WebPartWPQ3 > table {
     ..
}

Make sure the images you use are repeatable on the x-axis. If they are not, you will need to make a new page layout where the web part zones have a static width (set in the style sheet of course). This way you can control the width of the web parts in a particular web part zone, and make your background images as wide as the web parts.

Web part headers

Inside the with the web part ID is always a table with two ’s. The first one is for the header of the web part, the second one is for the content of the web part.

The first class you can use to style the header is the tr.ms-WPHeader. This has two ’s, one for the title of the header, and another one for the little arrow on the right pointing down. Only the first has an ID, which has the same ID-number as the web part-ID. To style the background and the borders of the header, you can style every inside the .ms-WPHeader.

.ms-WPHeader td {
     border-bottom:1px solid #4E7CB7;
}

To style the text of the header, style the .ms-WPTitle. Be aware that some web part titles contain a hyperlink. The little arrow is also a link, and to style that you can style the -tag inside the , and then overrule the styling for the header text. Like this:

/*This styles every link in the header*/
.ms-WPHeader td a{
	background-color:#000000;
}

/*This styles every textual link in the header*/
.ms-WPHeader .ms-WPTitle,
.ms-WPHeader .ms-WPTitle a:link,
.ms-WPHeader .ms-WPTitle a:visited{
	color:#4F3B2F;
}

It is possible to hide the header by changing the settings of the web part. Choose “appearance” and in the “chrome type” drop down and choose “none”. The with the header will not be rendered then.

Content Editor Web parts

The of the second of the #MSOZoneCell_WebPartWPQ contains a

with a web part ID that has the ID number related to the amount of web parts on the page, like #WebPartWPQ3. It also has a class called .ms-WPBody. The core.css uses this class to set the font family and size.

When using a Content Editor Web part, text is placed directly in the .ms-WPBody. The color of the text is set by the styling in the core.css, on the .ms-propertysheet and the body tag. The same goes for the hyper links in the text.

Lists

In a list web part, there is a table.ms-summarycustombody class, in where all the links are positioned. Every has a class.

Depending on what list with hyper links you use, the ’s will have one of the following class:

.ms-vh,
.ms-vh2,
.ms-vh-icon,
.ms-vh-icon-empty,
.ms-vhImage,
.ms-gb,
.ms-gb2,
.ms-gbload,
.ms-vb,
.ms-vb2,
.ms-vb-tall,
.ms-GRFont,
.ms-vb-user,
table.ms-disc td,
.ms-vh2-nofilter,
.ms-vh2-nograd,
.ms-vh3-nograd,
.ms-vh2-nograd-icon,
.ms-vh2-nofilter-icon,
.ms-pb,
.ms-pb-selected,
.ms-ph {
     font-family:tahoma,sans-serif;
     font-size:8pt;
}

The first two of this list are for example also used for list headers. Most graphical designs will have the same styling for all hyper links on the portal, so you can add your styling to the above classes and their -tags. The “add new” (add new announcement, add new event, add new link, etc. ) hyper links can be styled with their own class, for example: a.ms-addnew. Here’s an example of how you could style the lists.

Data table

SharePoint uses tables and lists to display its data. The Document Center is one of those ‘data tables’. The Document Center uses another page layout, because the purpose of the page is to show a big list with data and no text like articles. Therefore the Document Center has one web part zone that uses the whole width of the page. When styling the web parts, make sure the lists of the Document Center (Documents, Announcements, Tasks) are styled correctly. Pay special attention to the list headers here and make sure the fly outs of the top navigation are positioned above the list headers. If they are, make sure you position the .ms-vh div and .ms-vh2 div statically.

Width

Sharepoint comes with a set of page layouts. These page layouts have middle and right zones, but they do not always have an ID or class name for those zones. If you want to control the width of the web parts in either the middle or the right column, you need to create new ones, based on the existing page layouts. Make sure every web part zone has an ID or class, so you can set the width of those in the style sheet.

Edit mode

In edit mode the styling is usually kept default. Most of the classes and ID’s of the content are different when in edit mode, so the styling of elements inside web parts is rather easy to separate, but the web parts themselves aren’t. When editing a page, some web part zones and web parts will get other class.

System pages like the “site settings”-page and the “all site content”-page only contain the same header elements. The rest of the page has classes that are not used on the front-end. Therefore you can style those pages differently. I advise to only change the colors and fonts and leave the layout and the positioning the way it is by default. This way you won’t corrupt the usability of the system pages.

News articles

When creating a news article, it is possible to choose between several news article layouts; the page layouts. The first page layout for an article page is the “article page with body only”. Other page layouts are the “article page with image on left”, “article page with image on right” and the “article page with summary links”.

Article page with body only

This page contains a page content zone and a roll up image. When publishing the page, all the content will be inside the #MSO_ContentTable. Inside that is the div.pageContent.

Since the div.pageContent is an element of every news article page layout, you cannot set the width of the element. Styling this element will cause other page layouts also to be adjusted.

Article page with image on left

The second page layout is the “Article page with image on left”.

This page layout has the following elements:

Page image
Article date
Byline
Page content
Image caption
Roll up image

Page image

The .bodyareaframe contains two tables and some

’s. The first table has the property float:left. This makes the image positioned to the left of the text.

Article line and byline

The second table of the .bodyareaframe is the header. It contains two cells, one for the article date (.dateLine) and one for the “byline”.

Page content

The div.pageContent contains a div#ctl00_PlaceHolderMain_Content__ControlWrapper_RichHtmlField, which contains the text. The ID is not unique for this piece of page content, it is only unique on this page.

Other page layouts use the same ID, so by styling this element, the text looks the same, no matter what article page layout is chosen.

Article page with image on right

The “article page with image on right” has got the same fields and controls as the “Article page with image on left”. The only difference is the floating. Where in the “Article page with image on left” the table was floating left, here the table has no floating, but a

around it has a right floating. There’s an extra container div, the .articleLayout that was not in the “Article page with image on left”.

Article page with summary links

The “Article page with summary links” has, instead of the page image and image caption, a Summary Links control. These links are positioned inside a table that is floated to the right.

Next time in “SharePoint’s Branding Limitations”

Next time in part four of “the Art of SharePoint, how to make a graphical design work for SharePoint”, I will discuss some design decisions for search pages and the My Site. Other points of interest are the styling of the calendar and date picker and the use of SIFR.

SharePoint’s Branding Limitations, Part 2

Diantha van Marion — Wed, 22 Jul 2009 07:27:58 +0000

Introduction

This article assumes that the reader has SharePoint and basic HTML knowledge.

Navigation

This section is all about SharePoint’s navigation elements. First the meta navigation is discussed, secondly the top navigation with a focus on it’s fly outs. Thirdly, the quick launch navigation is discussed and last but not least the site actions menu.

Meta navigation

The meta navigation contains a set of links: Sign In/Welcome, My Links, etc. The meta navigation is positioned at the upper right top of the page. It has three textual links and a help icon as you can see in the image below.

The meta navigation begins with the table.ms-globalright. The table is floated to the right which causes the menu to be positioned at the right of the page. This table has five ’s and they all contain the class name .ms-globallinks.

The first is empty.
The second contains the welcome text and a fly out.
The third contains the vertical line.
The fourth contains a new table.This table contains the “My Site” link, separator, “My Links” link and separator.
The last contains the help icon.

Every of the meta navigation has the class name .ms-globallinks. Unfortunately you cannot give this class and every inside a color to change the color of all the links in the meta navigation. The Welcome link doesn’t change after applying a color to the .ms-globallinks and it’s -tags. Because this contains a

.ms-SPLink. Every link inside that

has a different color specified in the core.css style sheet. An other link that won’t change color is the My Links link.

When coloring all the links of the meta navigation add the declaration to the -tags in the class name .ms-SPLink, like this:

.ms-SPLink a:link,
.ms-SPLink a:visited,
.ms-globallinks,
.ms-globallinks a{
    color:green;
}

This will overrule the styles for the links in the .ms-SPLink, as defined in the core.css, the master style sheet which takes care of the default styling on a SharePoint portal.

Welcome ‘Your Name’ and ‘My Links’

The of these links contains two spans. The first one, which is hidden, contains the fly out. The second span contains a

which contains the -tag. Within the -tag the little arrow pointing down is positioned as well, as seen in the next picture.

The graphical behavior of the Welcome and “My Links” link is the same. When hovering the link, there’s a background-color and a border, suggesting it is a button. For consistent use of the graphical design you probably want to style the “My site” link the same as the other buttons.

Here’s the code to remove the background-color and border. Add the underline on hovering, to make it look like a textual link instead of a button:

.ms-HoverCellActive,
.ms-SpLinkButtonActive,
.ms-HoverCellActiveDark{
    background-image:none;
    border:0px none;
    background-color:transparent;
}
.ms-HoverCellActive a:hover,
.ms-SpLinkButtonActive a:hover,
.ms-HoverCellActiveDark a:hover{
    text-decoration:underline;
}

My site

The My Site link is the only link (in the meta navigation) that does not contain a fly out. Therefore, this link will respond to any styling assigned to .ms-globallinks a. The hover state of the .ms-globallinks a is not defined in the core.css style sheet, and therefore overridden by .ms-globalbreadcrumb a:hover. Style the .ms-globallinks a:hover to change the hover state.

Help icon

The help icon is an image inside an -tag. Because the image itself does not have a class name or ID, it is not specific enough to hide all the images inside the .ms-globallinks. That is because then the separators would also be effected. Therefor, you can use the -tag (with an ID) in where the image is, to hide the help icon (by hiding the -tag, the image will also be hidden). It is not recommended to hide the help icon because it’s function is to help the user. It is possible to show another image here. To do this you need to hide the image inside the -tag and make the -tag behave like a block. Then give it dimensions and place the new image of the icon as a background image.

An example:

.ms-globallinks a#ctl00_PlaceHolderGlobalNavigation_TopHelpLink img{
    display:none;
}
.ms-globallinks a#ctl00_PlaceHolderGlobalNavigation_TopHelpLink{
    display:block;
    background:transparent url(/_layouts/images/new_help_icon.gif) no-repeat left center;
    width:10px;
    height:10px;
}

Separators

It is possible to make the separators of the meta navigation hidden, because these are the only non-hyper links in the .ms-globallinks. Because they don’t have any class names or ID’s that are unique within the meta navigation, you need to style it all. Afterwards you can style the links differently. Giving all the items in the .ms-globallinks a visibility:invisible or a display:none, and the links a visibility:visible or a display:block, will cause your links to disappear, but only in Internet Explorer. The only way to hide them for all browsers is by giving them the same color as the background color of the meta menu, which off course should have a solid background color.

The steps are as follows: give the .ms-globallinks the same color as the background color (or any other color you wish), and give the links in the .ms-globallinks a of your choice. Like this:

.ms-globallinks{
    color:#FFFFFF !important;
}
.ms-SPLink a:link,
.ms-SPLink a:visited,
.ms-globallinks,
.ms-globallinks a{
    color:green;
}

You can remove some padding of the .ms-globallinks to make the spaces between the hyper links less wide.

It is not possible to style the links on multiple lines, because the ‘welcome’-link and the ‘my site’-link have the same class names, and will react the same.

Top navigation with fly outs

The top navigation is the horizontal navigation bar at the top of every page (inside the bannercontainer). The top navigation shows the sites or pages from the first level. This first level contains every page or site made from the homepage. The homepage is always level 0. SharePoint enables users to rename, remove or add a link.

The top navigation has a lot of nested tables. The table of the banner frame contains four ’s.

The first is empty.
The second contains the top navigation menu.
The third is empty.
The fourth contains the site actions menu.

The site actions will be discussed later. First I want to focus on the top navigation menu. In the ideal world and maybe in the future it will by default, the menu would look like this:


	
	
		
			 .. 
			 .. 
			 .. 
		
	
	
	siteactions menu goes here

The second contains a table, the .ms-topNavContainer, which contains multiple ’s. The first is the home menu item, the menu item of level 0. The rest of the ’s are empty or contain other items of the top navigation.

Home, the first menu item

The home menu item is placed into another table, the .ms-topnav. Every menu item of the top navigation is placed inside a table with the same class name. When the menu item is active, it gets another class name added, the .ms-topnavselected. By using this class name in your style sheet, it is possible to style the active menu items different. Another element contains the class name .ms-topnav as well: the -tagtable.ms-topnav or a.ms-topnav, or use just .ms-topnav for giving them both the sames styling. The same goes for the .ms-topnavselected. of the menu item. Be sure to style the right item by styling the

It is not possible to style the home menu-item differently then the other menu items, because they all have the same class names. If you want to do it anyway, you need to edit the HTML that is rendered for this menu.

Other first level menu items

The with the other menu items, contains a table with two cells. The first cell is empty, the next cell contains a table, the .ms-topnav. If the menu item does not contain any pages or sites at second level, the only contains the -tag, just like the home button.

Background images

To style the menu items, you can use the class table.ms-topnav. You can give it a background color or background image. Be aware that the image must be repeatable on the x-axis unless the menu items have a fixed width. You cannot use an image that is different on the left and right side when the images have variable widths. This is because items with no second level have only one . So you cannot use an image for the left side and another image for the right side.

If the table.ms-topnav has a fixed width, you can use one background image on the table, but be aware that menu items with a long text can be bigger then the set width. The styling of the menu item will fail.

The first image shows a menu item that has no arrow on the right. The second image shows the menu item when it does have an arrow on the right.

An example of how you could style the first level of the top navigation:

.ms-topnav {
     background-color:#70C8D4;
     background-image:none;
     border:0px none;
     color:#FFF;
}

.ms-topnavselected {
     background:#2B9AAE url(/_layout/images/topnavselected.gif) repeat-x fixed left bottom;
     border:0px none;
}

Hide the little arrow pointing down by:

table.ms-topnav td img{
     visibility:hidden;
}

Second level menu items (fly outs)

The second level menu items are the sub menu items that will become visible when you hover a top navigation menu item. In the HTML, the sub menu items are positioned underneath the overall table that contains the first level menu items. The whole fly out is rendered as a

, that contains a lot of nested

’s and tables, for every sub menu item and sub sub menu item.

Every sub menu item is rendered inside the table with class name .ms-topNavFlyOuts. This table contains a with the link to the concerning page. When there are sub sub menu items, there are two ’s. The first one contains the -tag. Only when there is a third level in the menu, the second one contains the little arrow image, pointing to the right.

The top navigation fly outs can be styled by referring to the ’s of the .ms-topNavFlyOuts table. The arrows are not that easy to style, because the image is not on the file system, but it is generated by code. To alter this image, you need to change a property of the AspMenu in your master page. How to do this is not discussed in these articles.

Reset the styling of the rollover of the menu items:

.ms-topNavFlyOutsHover,
.ms-topNavFlyOutsHover a{
     background-color:#000000;
}

Reset the styling of the background of the flyout items:

.ms-topNavFlyOuts{
     background-color:white;
}

The border that comes around the whole fly out area still has a blue border. This is set on the class name of the .zz1_TopNavigationMenu. Every fly out menu has it’s own class name, with a number. The number is variable and depends on the number of menu items on that page. You will never know which numbers will be used, since you do not know how many menu items there are. This for example will only work on one of the fly outs:

.zz1_TopNavigationMenu_8 {
     background-color:#F2F3F4;
     border:1px solid #A7B4CE;
}

When you look closer, you see that besides this class name, every fly out area has the same class name: zz1_TopNavigationMenu_0. So, to style the border of the fly out menu, you can change the border of this class name, like this:

div.zz1_TopNavigationMenu_0{
     border:1px #000000 solid;
}

Do check the fly out menu on a listpage, and double check if the list header is not visible on top of the fly out menu. This could happen when the the list header (.ms-vh or .ms-vh2) is relatively positioned. The solution for this is to make it static, it will not influence the styling of the menu.

.ms-vh div,
.ms-vh2 div{
     position:static !important;
}

Quick Launch navigation

The quick launch navigation is also known as the left menu. The quick launch has three parts.

• Quick Launch header

• Menu items

• Recycle Bin

The set of the three items together are rendered into two containers, the div.ms-quickLaunchouter and inside that is the div.ms-quickLaunch. Because the quick launch has two containers, it is possible to give the top of the menu another background image then the bottom, for example.

Hiding the quick launch menu

Some customers like the portal homepage to be without the left menu. There are several ways to do this. I’ll discuss three of them.

1: The first is to make a special page layout for the homepage. Make sure the control for the quick launch menu is inside the page layout and not in the master page. For that you have to edit all the other page layouts. Now make sure the left menu on the page layout you made for the homepage isn’t showed or even isn’t rendered at all, by removing the menu control. This solution will cost you the most effort and time.

2: The second way is to give the homepage page layout an extra reference to a style sheet. That would be a style sheet you make specially for the homepage and in where you add styles to hide the left menu.

3: Another solution to hide the left menu on the homepage is by adding styles that will make the menu disappear. It can be done in the style sheet, so the left menu will be hidden in every page, or it can be done by adding a Content Editor Web part on the page you wouldn’t want the left menu on.

First, add a Content Editor Web part to the particular page. Open the tool pane, and add some source code that will hide the left menu:

This way the quick launch outer is hidden and the left area is also gone, so that the content in the middle will have more space. The .ms-navframe is responsible for the width of the area the menu is in.

Next thing is to make sure the web part with the styling is not visible on the front end. For that, choose Chrome type “none”, in the Appearance menu and under the layout section check the check box for hiding the web part header. The menu (and the web part that is hiding the menu) is now hidden on only this page.

Quick Launch header

The header of the quick launch is a

with a and a .

The label contains the text “Quick Launch”, but is invisible because it is absolute positioned and placed out of sight by the core.css. The span contains a

with class name .ms-quickLaunchheader. This

has a background image and background color. There’s also font-color defined here, but the text inside this

is always a link. So if you want to style that, it’s more efficient to style the -tag.

Quick Launch menu items

The second part in the quick launch is the

with ID ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager. Inside this is a table with class name .ms-navSubMenu1. The 1 indicates the level of the menu items, The first level menu items. For every menu item there’s a in this table.

Every menu item is positioned inside it’s own table, the .ms-navheader. Only the menu items on the first level are called navheader. Besides that, the inside the table has an -tag containing a class name .ms-navheader. So when styling the whole area of the menu item, or just the link itself, make sure you use table.ms-navheader or a.ms-navheader.

Sub menu items of the quick launch

As there is a for every first level menu item, there is also a for a collection of second level menu items. Inside that is another table, the .ms-subNavMenu2 and every sub menu item has it’s own in there.

Changing the background of the sub menu items can be done very easily, because of the .ms-navSubMenu2 class name. By default the of this table has the bullet background image.

Removing this bullet can be done like this:

table.ms-navitem td, span.ms-navitem {
	Background-image:none;
	Padding-left:0px;
}

Every sub menu item has it’s own table and only one . Therefore it is possible to use two background images underneath the text of the -tag of a second level menu item. One image for the left and one for the right side.

Recycle bin

The recycle bin is the third item inside the quick launch. This table contains another table named .ms-recyclebin. Inside this table is the -tag, containing the icon and the text “recycle bin”.

It is possible to hide the trash bin icon, because it is the only image inside the -tag. There’s no padding on the -tag, so by removing the image like this, the -tag should automatically align with the other menu items.

.ms-recyclebin a img{
	display:none;
}

Site Actions navigation

If you have at least editor rights, you will find the site actions button on the right top of your screen.

The site actions button has a few nested tables and

’s. Only a few of them have ID’s or class names. From the outside to the inside:

Table.ms-siteaction
Td#siteactiontd.ms-siteactionsmenu
Div
Div
Span
Div (on hover it does have a class name: .ms-siteactionsmenuhover)
a

The -tag for example does have an ID, but since it is an index number that points to the number of menu items, it is not wise to use this ID, because it could change per page or after a menu item was added.

When changing the background image of the button, refer to .ms-siteactionsmenu div div div and .ms-siteactionsmenu div div div.ms-siteactionsmenuhover.

Here’s some css to clear up the button and undo it from it’s (background-)colors, so that it looks like it is a textual link:

.ms-siteactionsmenu div div div,
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover{
    background-color:transparent;
    background-image:none;
    background-repeat:no-repeat;
    border:0px none;
}

The secret of the little arrow

What is up with the little arrow in the site actions button? As you can see in the code, there is a blank.gif, which is not the image of the arrow. And there is no background image on it whatsoever. The arrow isn’t a background image of the -tag either. So, where does this arrow come from then? It looks like it’s the -tag’s parent

, but that one only has a background image that is responsible for the blue background. The answer is closer than you think, because there is an image next to the -tag, which is called whitearrow.gif. The question I cannot answer is why it is not inside the -tag, since it should also be click-able, right? Well, it does explains why at first sight I couldn’t find the image. Mystery solved.

The site actions fly outs

The site action button had also a fly out menu when you have clicked on it. This menu is hidden in the span by an in-line display:none.

This menu is a bit different from the other menu’s. It has a

tag and a for each sub menu item. These objects cannot be styled in the style sheet.

Next time in “SharePoint’s Branding Limitations”

Next part of this article will contain information about web parts with text zones, lists and tables. Other topics are the graphical possibility’s of the edit mode and the news articles. Stay tuned!

SharePoint’s Branding Limitations, Part 1

Diantha van Marion — Tue, 21 Jul 2009 14:40:38 +0000

Introduction

This article assumes that the reader has SharePoint and basic HTML knowledge.

Process description

Communication flows

The communication between the Graphical Designer and the Front-end Developer is all about the graphical design for SharePoint and the ways to implement it. The Graphical Designer discusses the design he wants to make with the Front-end Developer to check if his design ideas are implementable on a SharePoint environment. After the Graphical Designer has a first version of the graphical design, the Front-end Developer determines if it can be implemented in the available time. If the actual costs are higher than the estimated costs, the Graphical Designer and the Front-end Developer could look for another elaboration of the customers idea, one that is easier to implement, and more predictable.

The communication between the Graphical Designer and the Front-end Developer will continue like this until the graphical design is approved by the customer and the implementation can start. The communication between the Graphical DesignerGraphical Designer has in mind for its design. Decisions concerning the colors, fonts, margins, menu’s and links are transferred by a style guide. However, if there’s a lack of time frequently the style guide isn’t fully developed, so the Graphical Designer needs to explain the Front-end Developer about the styling guides. Disadvantage of this is that the Front-end Developer co and the Front-end Developer will change and will all be about the transfer of knowledge about what can be implemented and what can’t. It is important that the Front-end Developer knows exactly what the uld forget information or interpret it differently than the Graphical Designer has in mind, and the Front-end Developer cannot check it in the style guide. Therefore, be sure that there is always a style guide that is as extended as possible.

What can happen after the graphical design is implemented is that the customer decides to change a component in the graphical design. Depending on the change, the Graphical Designer must be consulted again, or the Front-end Developer can modify it, in consultation with the Graphical Designer. The ideal situation is to adapt the style guide too.

The style guide is made by the Graphical Designer. Since he has made the design and knows exactly how the design should look like and elements graphically should behave. Beside the style guide the Front-end Developer also needs the design files of the Graphical Designer to be able to implement the Graphical Designer, for example the PSD files.

Image of default homepage

Knowledge transfer

The graphical design is based on the requirements of the customer and its company, depending on the browsers to use and its users, and of course the estimated capacity and the creative ideas of the Graphical Designer. Graphical Designers which design for MOSS must have knowledge of SharePoint. Most Graphical Designer’s will catch the default (blue) graphical design of a MOSS portal as a basis for the graphical design. They can take the default or frequently used elements of MOSS and use them for their graphical design. They keep the location of the elements approximately the same to what they see on the default portal, their example. This is the most common way to start a graphical design for MOSS.

The Graphical Designer also needs to have some knowledge about how the designed elements of the graphical design will be implemented. He needs to know how the Front-end Developer will implement a graphical design. Because the Graphical Designer does not know of every table, div and so, it is important that the Front-end Developer informs the Graphical Designer about the possibilities of implementation, however the Front-end Developer does need to have this knowledge of course. Even if the Graphical Designer used a default MOSS portal for making the graphical design, it is possible that there are elements in the graphical design that cannot be implemented on a default MOSS portal, because the default HTML won’t let you. That’s why it is very important to communicate a lot and involve the Front-end Developer at an early stage of the graphic design.

Design decisions

In this part I will evaluate some design decisions. I will comment on a number of standard components of a SharePoint publishing portal and indicate per component how the element’ HTML has been rendered and the possibilities for implementing a design on that HTML.

Scaling pages

The Graphical Designer needs to know how the page will behave if the visitor of the portal gives another format to the browser window. In case of a portal the Graphical Designer will generally recommend to use the complete width of the browser window, because portals are all about displaying lots of information. It is desirable to be able to use the full width to place as much information on the page as needed/possible, and make it liquid. This is default by MOSS, when widening the browser window, the middle column will become wider and more space for content will be available. The left column with the menu will keep its width, just like the right column.

However it is possible that the customer chooses to let the scaling behave differently. For example by dividing the available space to the left and right column. In this case the fixed width of the right column is put on a certain percentage in the style sheet instead of a fixed number of pixels, mostly 20 or 30%. The middle column should also get a width in a certain percentage. For making another partitioning it is desirable to make a custom page layout.

Example of page with variable width

Header

The area positioning on a page consists out of several rows. First there is the header, then a content area and then the footer. All visual elements of SharePoint are in one of those zones. The elements of the edit console are underneath the header, they will be discussed later.

The header itself is also built out of rows, with in every row a few SharePoint elements. In the header every row has a class name or unique ID name. The header is built with tables, and nested tables, who together are responsible for the area positioning.

Global breadcrumb

The global breadcrumb, which is the first row of the header, contains two tables, each with its own class name. This aligns the text to the left and the meta menu to the right. Therefore the global links on the left side and the global links on the right side can be styled and positioned differently.

Global breadcrumb

The menu items of the meta menu can be styled separately. However, frequently it is desirable to style all meta menu items the same. The styling can be done by using the class name of the common parent element. This way the styling isn’t influenced by any nested tables or divs that may be in the menu table.

Customized metamenu

.ms-SPLink a:link,
.ms-SPLink a:visited {
                color:green;
}

The icon that is used for the help function can be styled too. Just keep the width and height of the new image the same as the original, so that a replacement can be done easily. Always keep a copy of the original image, for back-up.

Global title area

The global title area is the second row of the header. It contains a table with three cells, the global title area image, the site title and the search function.

Global title area

The global title area image can be used to display the logo, because this element has a link with a reference to home. Therefore it is important to hide the image, stretch the a-tag to the dimensions of the logo and make the logo disappear as the background image of the -tag. Then, the text of the -tag will be placed outside the view of the browser with a negative indent. This way the logo will still have a textual link for users that use screen readers.

Global Title Area Image

.ms-globalTitleArea {
    background:blue url(/_layouts/images/logo.gif) no-repeat left top;
}

 .ms-globalTitleArea #GlobalTitleAreaImage img{
    visibility:hidden;
}

.ms-sitetitle h1 a{
    display:block;
    height:30px;
    width:100px;
    text-indent:-2000px;
}

The last cell with the search functionality doesn’t have a class name or ID. To style the search function you’ll need to dig deeper into the HTML-structure. It is possible to style the search function in the header differently than the other search functions that could appear on the portal, even if they are built the same way. That’s why you’ll need to find a unique class name combination or unique ID name or a combination of both. It is possible to style the search function in the header differently, but the other search functions, in the content zone will be styled the same, since they have the same structure. Do not style the search engine absolute, since the search engine needs to come down in the content zone when searching advanced.

#SRSB{
	position:relative;
	top:100px;
}

The icon that is used to start the search request can also be styled. Keep the width and height of the new image the same as the original, so that a replacement can be done easily. Always keep a copy of the original image, for back-up. The easiest way to style the icon is to replace the default one on the file server. A result of this is that all search icons will change, through the whole portal. As mentioned above, it is possible to style the search icon in the header differently, but the other search icons will be styled the same, since they have the same structure.

Customized search engine

Banner Container

The third row from above is the banner container or oneidtopnavbar container. In here is the banner frame wherein there is a section for the top navigation menu, the banner and the site actions menu.

Top navigation menu

The top navigation menu is built out of a table, whereof the first cell contains the first menu item and the second cell contains a set of other menu items. In each of these cells is a table with a class name that marks it as topnav and if selected, it marks it also as selected. In the first cell of this table is the a-tag, the link. If the menu item contains any child elements, there is a second cell in this table to place the little arrow pointing down. This arrow is an indicator for any child menu items available, the fly outs.

The ’s of this table do not have a unique class name combination or ID. This means the of the text link cannot be styled differently than the of the arrow. This could lead to difficulties when implementing background images on the menu items. A background image cannot be placed on the , because this will cause it to disappear twice. Once for the text link and once for the arrow td. The image must be placed as a background image on the table. This means the image will be visible underneath the text link all the way to the arrow on the right. So there can only be one background image on a menu item. It isn’t possible to use two images, like when the left side of the menu item has a different ending as the right side of the menu item, when the image isn’t repeatable on the x axis. It isn’t possible to make two images out of one, so make it a background image of the table. It is always unsure how wide the menu item will be, and so how wide the background image must be. The arrow is rendered by the code, so you cannot style the arrow or replace it with an image, though.

It is possible to give the first menu item a different styling then the others, because this menu item is considered as the top level menu item and is rendered a bit different then the other menu items. For this menu item also counts that you do not know how wide the menu item will be, so be cautious about it when making the graphical design.

If you need to use background images on the top navigation menu, use images that are repeatable on the x axis and have the same pattern at the outer left pixels and at the outer right pixels. This of course also counts for the hover states and active states of the menu items.

Next thing to style are the fly outs. These child menu items are inside a table, and there is one table, and for every child menu item. Only the table has a class name, so all the ’s, that is all the child menu items will have the same styling. The menu item that has a mouse hover can be styled differently though. For the fly outs there is the same rule, you do not know how wide the content inside it will become. Use that information wisely when making the graphical design. You can use these class names to style the fly outs:

.ms-topNavFlyOutsContainer{}
.ms-topNavFlyOuts{}
.ms-topNavFlyOuts a{}
.ms-topNavFlyOutsHover{}
.ms-topNavFlyOutsHover a{}
.zz1_TopNavigationMenu_8 {}

Banner

The banner is empty, and does not contain anything. Therefore, it will not be discussed here.

Site actions menu

The cell that contains the site action button has a table with a class name for its own. Inside that, there is one cell wherein there are different kinds of nested

’s. The a-tag inside does not have a class name or ID, just like the nested

’s. But it could be referenced using this declaration:

Default siteactions button

.ms-siteactionsmenu div div div a {...}

The site action button usually isn’t restyled, but only made blank, by removing its colors and background image. Most of the time it is repositioned by giving the table a relative or absolute position. This button is only visible for users with editor rights, so only a select group of users will see the site actions button.

Customized site actions button

.ms-siteactionsmenu div div div,
.ms-siteactionsmenu div div div.ms-siteactionsmenuhover{
    background-color:transparent;
    background-image:none;
    background-repeat:no-repeat;
    border:0px none;
}

The fly out of the site actions button is a default SharePoint fly out, and usually isn’t styled. This fly out is reused throughout the whole portal, so styling it could give some unwanted results. In the next part, I’ll tell more about the menu’s and fly outs.

Web part zones

Underneath the header is the content part. In here are the left menu and the content container. The number of web part zones in the content container depends on which page layout is chosen when creating the page. Most of the page layouts contain two columns, a wide one in the middle and a smaller one on the right. Other page layouts do not contain a left or right column, just one big zone for the content.

Page layout

The partitioning of the web part zones depends on the page layout that is chosen. There are a few default page layouts in SharePoint, but these can easily be made custom.

Not all the default page layouts have got a left and right separation; some page layouts use the whole width to show the content. The page layouts that do have a partitioning, not always do have a class name or ID on the that separates the zones. The page is then partitioned by a table with two or more columns, were for example the first cell has a hard coded width of 70% and the second cell a hard coded width of 30%. If the cells do not contain a class name or ID, you cannot overrule the width and it makes it impossible to style them separately or give them another width.

Example of page layout with variable widths

Since these class names and ID’s are the hand dishes for the styling, it makes it difficult to style a particular column or web part zone. Not only the width but also the other styling like headers, links and content could need to be styled differently, dependent on which column or zone they are in. Creating a custom page layout has the advantage that you can style the columns or web part zones differently.

Web part zone

Except the fact that a columns separation can be made easily when creating custom page layouts, web part zones can be added if wished. It is possible to provide every web part zone width a class name or ID, which means that the web parts can be styled differently depending on the web part zone they are in. If web parts are dragged to another web part zone, they will adjust to the styling of that particular web part zone.

Two column page with two web part zones in the right zone

This cannot be done with SharePoint’s default page layouts. So if there’s no budget for creating page layouts, the Graphical Designer should take notice of that and style all the web parts the same. By default there’s no way to separate styling for particular web parts or web parts in particular columns.

Two column page with one web part zone in the right zone

Footer

The content container contains the columns with web part zones and the menu and is as wide as the whole page. Underneath this container is the footer. By default, SharePoint does not have a real footer. Actually there are a few table cells, which make the optical margin, just like the left and right margin of the page. These cells can be used to create a footer.

Position of the footer

The lower down cells of the page, the footer, always are down under on the page. Even if the page does not contain a lot of content and the content does not fill the page, the footer is always at the bottom of the page, against your browser window. It speaks for itself that the footer is also on the bottom of the page when there is a lot of content and the used needs to scroll.

The footer sticks to the browser

The footer is built like this:

Page Bottom Margin Left

Page Bottom margin

Body Area Page Margin

Page Bottom Margin Right

When you remove the background color and image of these cells, you’ll keep an empty space, which is a nice margin for the bottom of the page. It is also possible to use these cells for a footer image.

Example of footer with rounded corners

Since every cell has its own class name, it is possible to make a colored bar for example with small rounded corners. Such a footer can be placed underneath the menu and content, or just underneath the content. The width of the image depends on the cells you use to display the image in, as a background image. The height of the footer is also adjustable. To place text in the footer, the master page must be edited. Making the master page custom allows you to make the custom footer instead of using the default margin cells at the bottom of the page.

Next time in “SharePoint’s Branding Limitations”

Part two of this article will contain information about the menus. The meta menu and the top navigation with fly outs in the header and the quick launch menu and site actions menu. What are the possibilities for styling this menu’s? And how is it implemented? Stay tuned!

This post is from the SharePoint Magazine Partner Spotlight Week, where our featued partner is Tam Tam

Partner Spotlight : Tam Tam

Arno Nel — Mon, 20 Jul 2009 13:04:32 +0000

CompanyName : Tam Tam

Company Website URL: http://www.tamtam.nl

Company Blog: http://www.tamtam.nl/blogs.aspx

Public Email: info@tamtam.nl

Social Sphere:

Address: Tam Tam Patrijsweg 80, Rijswijk, Zuid-Holland 2289 EX, Netherlands
Phone: +31 (0)15 750 2000
No. of employees: 50-250
Microsoft Partner Status: Gold
Capability

Communications and Collaboration
Enterprise Content Management
Enterprise Search
Unified Communications
Other

Company History:

“In 1996, Tam Tam has been set up by Paul and Bart Manuel. Paul and Bart are linked as partners to Tam Tam and have an important role in daily business. Ever since, Tam Tam has been establishment profitable with a solvency of 40%. (Mainly hours) 8.4 millions euro convert were in 2008. For customers and employees all figures are public. Financial statements can be find at the KvK under the next number: 27239483. General director at TamTam is: Arjan Nataraj (06-55888776, arjan.nataraj@tamtam.nl). You can contact him for general questions concerning Tam Tam.”

Company Description:

Tam Tam is a full-service internetbureau.We link concept, design and technique such way that online questions of our customers are filled in successfully. In this we are ambitious, but also simply complete Dutch. We are proud of our top position in the Netherlands, our employees AND customers.
Questions about the next topic, which we gladly fill in: cooperate, communication and e-business. We also give these solutions beautiful user experience.
With our online solutions we improve in connection with customers, employees and the world. With these we are able to improve and develop more rapidly than other organizations.
Solutions or Services *

Online communication: ranging from marketing sites, corporate sites, and visual identities, to social networking solutions.
Online marketing: search engine optimisation and marketing, email marketing, bannering, websurveys
Customer Selfservice: eBusiness and eCommerce solutions, Selfservice, Custom made solutions
Information Worker Solutions/collaboration: intranet portals, document management, knowledge sharing and customer specific applications
Website optimization and site management: website statistics and analysis, application management, hosting and support

SharePoint Based Websites built:

Tags (Keywords) :
Tam Tam, full-service internetbureau, SharePoint, Online Communications, Selfservice, Search Engine Optimization, search engine advertising, collaboration, enterprise search, E-business, operational services, innovation lab, Microsoft, Smartsite, Umbraco

SharePoint Magazine Articles :

SharePoint’s Branding Limitations, Part 4

If you would like to be featured on the SharePoint Magazine Partner Spotlight, please contact us

SharePoint Magazine Partner Spotlight

Arno Nel — Fri, 17 Jul 2009 11:30:41 +0000

SharePoint Magazine is excited to introduce a new program for Microsoft Partners. The idea is simple:

Full focus on the magazine for 1 week, Monday to Friday.

Free advertising on the magazine for 1 week

Monday = Full Partner Profile and Biography

Tuesday to Friday = 4 part article series on a SharePoint topic

I dont want to say more than that at this point. Why not tune in on Monday to view our first Partner:

“Tam Tam is a full-service internetbureau.We link concept, design and technique such way that online questions of our customers are filled in successfully. In this we are ambitious, but also simply complete Dutch. We are proud of our top position in the Netherlands, our employees AND customers.
Questions about the next topic, which we gladly fill in: cooperate, communication and e-business. We also give these solutions beautiful user experience.
With our online solutions we improve in connection with customers, employees and the world. With these we are able to improve and develop more rapidly than other organizations.”

If you are a partner and want to be on the spotlight, please contact us

Creating a SharePoint Web Part that hosts a data binding Silverlight application

Karine Bosch — Tue, 11 Nov 2008 10:25:46 +0000

In the beginning of this year I started working on the Silverlight BluePrint for SharePoint together with my mentor Patrick Tisseghem who suddenly passed away recently. I dedicate this article to him.

With Silverlight you can really light up your SharePoint user interfaces. It can be used in different SharePoint domains like web parts, application pages, navigation, content management, custom fields, editor parts, etc.

In this tutorial I’m going to explain how you can host a Silverlight 2 beta 2 application from within a SharePoint Web Part. The Web Part will pass the URL of the SharePoint site together with the name of the list for which the Silverlight application will show the data. The retrieval of the data will be done by the Silverlight application using the HttpWebRequest technique for calling the SharePoint web services. As the SharePoint web services return a chunk of XML the XML will be handled by using LINQ for XML. The data will be bound to the Silverlight controls.

When the Web Part loads the complete list of AdventureWorks products will be loaded. In the Topic box you can enter a part of a product number and click the Search button. Based on that search string a restricted list of products will be returned. You can select a product from the list to view its details.

AdventureWorks listbox

You can also modify its list price if you want and update the AdventureWorks products list. This will again use the HttpWebRequest technique to call the UpdateListItems method of the Lists.asmx web service.

AdventureWorks product details control

The Silverlight application will be deployed as an embedded resource of the SharePoint Web Part.

You can download the source code of this tutorial from here. The zip contains the sources for the SharePoint Web Part and the Silverlight application, together with two SharePoint list templates for the AdventureWorks Products and the AdventureWorks Product Pictures.

Creating the Web Part

I created the sample Web Part using the Visual Studio 2008 extenstions for WSS 3.0. It creates the necessary infrastructure for the deployment afterwards.

AdventureWorks Web Part project

Before you can start coding you need to add a reference to the System.Web.Silverlight.dll (version 2.0.5.0) and to the System.Web.Extensions.dll (version 3.5.0.0).

Open the AdventureWorksProducts.cs file in Code View and declare a class level variable for the silverlight control that will host the silverlight application:

System.Web.UI.SilverlightControls.Silverlight silverlightControl = null;

Override the OnLoad method in which you need to check whether a script manager already exists on the page. If not, you have to add one at the first position of the Controls collection:

protected override void OnLoad(EventArgs e)
{
      base.OnLoad(e);
 
      // Script manager instance may appear only once on a page
      ScriptManager scriptManager = ScriptManager.GetCurrent(this.Page);
      if (scriptManager == null)
      {
          scriptManager = new ScriptManager();
          this.Controls.AddAt(0, scriptManager);
      }
}

Within the CreateChildControls method that is already prepared for you, you have to instantiate the Silverlight control and set its properties. One of these properties is the Source property. The setting depends on where you are going to deploy your silverlight application. In this sample I will deploy the Silverlight application as an embedded resource of my SharePoint Web Part so the Source property has to point to that location. I will come back to this property once the Silverlight application is created. Don’t forget to specify a Width and Height, otherwise the Silverlight application will not be visible. Another property that is worth mentioning is the InitParameters property. I use this property to pass the URL to the SharePoint site and the name from the list that needs to be queried. The retrieval of the data, and thus the communication with SharePoint, will be done from within the Silverlight application. Notice that this property is a string. You can pass data in it by respecting the syntax name1=value1,name2=value2,… Within the Silverlight application this data will be unpacked in a dictionary. But more on this in next section.

Don’t forget to add the Silverlight control to the Controls collection of the Web Part.

protected override void CreateChildControls()
{
      base.CreateChildControls();
 
      // instantiation of the silverlight control
      silverlightControl =
            new System.Web.UI.SilverlightControls.Silverlight();
      silverlightControl.ID = "SLAdventureWorks";
      silverlightControl.MinimumVersion = "2.0.30523";
      silverlightControl.Width = new Unit(750);
      silverlightControl.Height = new Unit(600);
      silverlightControl.Source = null;
 
      // parameters passed are the the URL of the SharePoint site and the
      // name of the list that contains the AdventureWorks products
      silverlightControl.InitParameters =
         "siteurl=" + SPContext.Current.Web.Url
          + ",listname=AdventureWorks Products";
 
      this.Controls.Add(silverlightControl);
}

Now override the RenderContents method to render the Silverlight control:

protected override void RenderContents(HtmlTextWriter writer)
{
     if (silverlightControl != null)
         silverlightControl.RenderControl(writer);
}

That’s all for the Web Part code.

Creating the Silverlight application

The development of the Silverlight application is a bit harder, certainly if you are a normal ASP.NET or SharePoint developer. Add a new project to the solution using the Silverlight Application template. This template comes with a standard Page.xaml and an App.xaml. The App.xaml file inherits from the System.Windows.Application class which represents the Silverlight application while the Page represents a Silverlight control.

Before designing the Silverlight controls you will have to retrieve the parameters that have been passed by the SharePoint Web Part. Open the App.xaml.cs file and locate the Application_Startup method. The second incoming argument is of type StartUpEventArgs and contains in its InitParams property the data you passed in via the Web Part. At this side of the Silverlight application it is a dictionary of key-value pairs.

To be able to use this data from within the Silverlight application you have to pass the data to constructor of the Page control.

private void Application_Startup(object sender, StartupEventArgs e)
{
     string siteUrl = null;
     string listName = null;
 
     if (e.InitParams != null &amp;&amp; e.InitParams.Count == 2)
     {
         siteUrl = e.InitParams["siteurl"];
         listName = e.InitParams["listname"];
     }
 
     // Load the main control
     this.RootVisual = new Page(siteUrl, listName);
}

Open the Page.xaml.cs code behind file and modify the constructor:

public Page(string siteUrl, string listName)
{
}

The Silverlight application also contains a class that defines the Product object. The different text boxes in the Silverlight controls will be bound to the properties of this type of objects. The class inherits from INotifyPropertyChanged, to enable the object to be notified when the data changes. This interface requires only one thing: that the class has an event of type PropertyChangedEventHandler, named PropertyChanged. This event is fired when any property that is tied to a UI control is changed. In this case the Product object will be notified when the user tries to update the product price.

    public class Product : INotifyPropertyChanged
    {
        public int Id { get; set; }
        public int ProductId { get; set; }
        public string ProductNumber { get; set; }
        public string ProductName { get; set; }
        public string Description { get; set; }
 
        private double listPrice;
        public double ListPrice { get { return listPrice; }
           set { listPrice = value; OnPropertyChanged("ListPrice"); } }
 
        public string Color { get; set; }
        public string Size { get; set; }
        public string Weight { get; set; }
        public string ThumbNail { get; set; }
 
        #region INotifyPropertyChanged Members
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void OnPropertyChanged(string name)
        {
            if (PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(name));
        }
 
        #endregion
    }

Now it is time to design the Silverlight controls.

The Silverlight application consists of 3 controls: the main control that displays a search box with a button and a ListBox for displaying the list of AdventureWorks products. The second control displays the details of the product selected from the list. In the details control you will also be able to update the product price and save your changes to the SharePoint site. The third control is a rotator control that is only shown when data is retrieved from the SharePoint web service with the purpose to show the user that the application is busy.

The XAML for the main Silverlight control is not much:


    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:SL.XAML.AdventureWorksProducts"
    Width="750" Height="600">
    
        
            
            
        
        
            
                
                
                
            
            
                
                           Style="{StaticResource TitleText}"  />
            
            
                     FontFamily="Trebuchet MS" Grid.Column="1"
                     FontSize="12" Padding="1,3,1,1"/>
            
                 
                    
                        
                        
                    
                     
                        
                        
                        
                    
                     
                    
                     
                    
                        
                        
                        
                        
                        
                        
                        
                    
                    
                        
                        
                        
                        
                        
                        
                        
                    
                     
                         Style="{StaticResource DetailBlock}" FontStyle="Italic" />
                
                 
             
         
    

Now to the code behind of both Silverlight controls. When the Silverlight application loads, all products of the AdventureWorks Products list are retrieved using the HttpWebRequest for calling the GetListItems method of the Lists.asmx web service.

HttpWebRequest request = (HttpWebRequest)WebRequest.Create(new Uri(siteUrl +
     "/_vti_bin/Lists.asmx", UriKind.Absolute));
request.Method = "POST";
request.ContentType = "application/soap+xml; charset=utf-8";
request.Headers["ClientType"] = "Silverlight";
request.BeginGetRequestStream(new AsyncCallback(RequestCallback), request);

The call to the Request is asynchronous an thus needs a callback method. In that callback method the soap envelope is build. If you don’t know the correct envelope of a web service method you have to browse to that web service and check the method of your choice. You will get a page with the necessary information of the envelope.
The envelope contains the necessary XML to execute the GetListItems method on the AdventureWorks Products list passed in via the Web Part. If the user entered a string in the Search text box a CAML query is build to retrieve only the products containing that string.  The body of the request is retrieved by calling the EndGetRequestStream method of the HttpWebRequest object. Then the envelope is written to the body and the request is send back to the server.
Also the Response is asynchronous so you need to define another callback method for HttpWebRequest when coming back from the server.
The envelope is constructed as follows:
GetListItems envelope

private void RequestCallback(IAsyncResult asyncResult)
{
     try
     {
         string envelope = @"see image";
 
         string query = string.Empty;
         if (!string.IsNullOrEmpty(searchstring) &amp;&amp; searchstring != "Topic...")
         {
             query = "{0}";
             query = string.Format(query, searchstring);
         }
         envelope = string.Format(envelope, listName, query);
         HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;
         body = request.EndGetRequestStream(asyncResult);
         System.Text.UTF8Encoding encoding = new System.Text.UTF8Encoding();
         byte[] formBytes = encoding.GetBytes(envelope);
         body.Write(formBytes, 0, formBytes.Length);
         body.Close();
         request.BeginGetResponse(new AsyncCallback(ResponseCallback),
            request);
     }
     catch (WebException ex)
     {
         string s = ex.Message;
     }
}

Both the Request and the Response are started asynchronously on another thread. When the response comes back from the server, it is not on the worker thread. So the data is stored in a class level variable and the ProcessResponse method on the worker thread is called.

private void ResponseCallback(IAsyncResult asyncResult)
{
     LoadRotator.Visibility = Visibility.Collapsed;
 
     HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;
     HttpWebResponse response =
        (HttpWebResponse)request.EndGetResponse(asyncResult);
     if (response.StatusCode == HttpStatusCode.OK)
     {
        products = new ObservableCollection();
        Stream content = response.GetResponseStream();
 
        using (StreamReader reader = new StreamReader(content))
        {
            responsestring = reader.ReadToEnd();
        }
 
        try
        {
            this.Dispatcher.BeginInvoke(ProcessResponse);
        }
        catch { }
     }
     else
     {
         MessageTextBlock.Visibility = Visibility.Visible;
     }
}

The ProcessResponse method parses the XML into a collection of Product objects using LINQ to XML. For this purpose a reference to the System.Xml.Linq assembly is added. All products are added to the Products collection and then assigned to the ItemSource property of the products list box in order to enable the data binding.

private void ProcessResponse()
{
    LoadRotator.Visibility = Visibility.Collapsed;
    products = new ObservableCollection();
 
    XDocument results = XDocument.Parse(responsestring);
    var query = from item in results.Descendants(XName.Get("row",
        "#RowsetSchema"))
    select new Product()
    {
        Id = System.Convert.ToInt32(item.Attribute("ows_ID").Value,
            CultureInfo.InvariantCulture),
        ProductNumber = item.Attribute("ows_Title").Value + "_",
        ProductName = item.Attribute("ows_ProductName").Value,
        ListPrice =
            System.Convert.ToDouble(item.Attribute("ows_ListPrice").Value,
            CultureInfo.InvariantCulture),
        Description = item.Attribute("ows_Description") != null ?
            item.Attribute("ows_Description").Value : string.Empty,
        Color = item.Attribute("ows_Color") != null ?
            item.Attribute("ows_Color").Value : string.Empty,
        Size = item.Attribute("ows_Size") != null ?
            item.Attribute("ows_Size").Value : string.Empty,
        Weight = item.Attribute("ows_Weight") != null ?
            item.Attribute("ows_Weight").Value : string.Empty,
        ThumbNail = GetThumbnailUrl(item.Attribute("ows_Thumbnail"))
    };
 
    foreach (Product p in query.ToList())
    {
        products.Add(p);
    }
    ProductsList.ItemsSource = products;
}

When the user selects a product in the list, a box containing the detailed information is shown to the user. This is triggered by the SelectionChanged event of the list box. The selected product is retrieved from the list box and assigned to the ProductDetails control, which is then made visible.

private void ProductsList_SelectionChanged(object sender,
     SelectionChangedEventArgs e)
{
     Product product = (Product)ProductsList.SelectedItem;
 
     if (product != null)
     {
         DetailsView.DataContext = product;
         DetailsView.SiteUrl = siteUrl;
         DetailsView.ListName = listName;
         DetailsView.Visibility = Visibility.Visible;
     }
}

This brings us to the code behind of the ProductDetails control. The control is populated by the main control. This control contains also an Edit Price button. When the user clicks this button, the list price text block is changed into a text box in which the user can enter the new price. When the user then clicks the Update button,  the UpdateListItems method of the Lists.asmx web service is called to save the new list price. The update is also performed by using HttpWebRequest, which runs asynchronously on different threads.
The envelope for the UpdateListItems method looks like follows:
UpdateListItems envelope

private void UpdateListPrice()
{
    HttpWebRequest request = (HttpWebRequest)WebRequest.Create(
       new Uri(siteUrl + "/_vti_bin/Lists.asmx", UriKind.Absolute));
    request.Method = "POST";
    request.ContentType = "application/soap+xml; charset=utf-8";
    request.BeginGetRequestStream(new AsyncCallback(RequestCallback),
       request);
}
 
private void RequestCallback(IAsyncResult asyncResult)
{
    string envelope = @"see image";
 
    string query = string.Empty;
    query = @"{0}{1}";
 
    query = string.Format(query, selectedProduct.Id, newListPriceString);
 
    envelope = string.Format(envelope, listName, query);
 
    HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;
    body = request.EndGetRequestStream(asyncResult);
    System.Text.UTF8Encoding encoding = new System.Text.UTF8Encoding();
    byte[] formBytes = encoding.GetBytes(envelope);
    body.Write(formBytes, 0, formBytes.Length);
    body.Close();
 
    request.BeginGetResponse(new AsyncCallback(ResponseCallback), request);
}
 
private void ResponseCallback(IAsyncResult asyncResult)
{
    HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;
    HttpWebResponse response =
        (HttpWebResponse)request.EndGetResponse(asyncResult);
    Stream content = response.GetResponseStream();
    if (response.StatusCode == HttpStatusCode.OK)
    {
       try
       {
           this.Dispatcher.BeginInvoke(ProcessResponse);
       }
       catch { }
    }
}
 
private void ProcessResponse()
{
    selectedProduct.ListPrice = newListPrice;
}

Because of the TwoWay binding mode set on the ListPriceTextBlock on the list box, the price change is propagated to the item in the list box during the execution of the ProcessResponse method.
Build the Silverlight application and copy the resulting .xap file to your SharePoint project. I copied it to a Resources sub directory.
Deploying the solution
Now that it comes to the deployment of the SharePoint web part and its Silverlight application, you have to make some modifications to the Web Part files that contain the metadata for the Web Part.
Set the properties of the embedded silverlight resource. Include the Resources folder and the .xap file to the Web Part project. In the file properties set the Build action to Embedded Resource.
Compile as an embedded resource
Build the SharePoint project and open the DLL with a tool like Reflector in order to copy the right namespace of the embedded resource which is the silverlight application. Return to the Web Part project and open the Web Part class. Before the namespace declaration you have to add the metadata attribute that enables an embedded resource in an assembly:

[assembly: WebResource("SL.AdventureWorksProducts.Resources.SL.XAML.AdventureWorksProducts.xap", "application/x-silverlight-app")]
namespace SL.AdventureWorksProducts
{
   … Web Part code …
}

In the CreateChildControls method set the source property of the silverlight control to the location of the silverlight application. You can retrieve this location by using the GetWebResourceUrl method:

silverlightControl.Source =
    this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "SL.AdventureWorksProducts.Resources.SL.XAML.AdventureWorksProducts.xap");

If needed you can modify the .webpart file and the .xml file to set certain Web Part properties.
When working with the Visual Studio 2008 extensions for WSS you can set the Start browser with URL property of the web part project to the URL of your SharePoint site. This will deploy the Web Part to this URL.
When deployed you can add the Web Part to a web part page. Don’t forget to configure your SharePoint server for enabling Silverlight! If you don’t know how to do that, you can always check the document – which is part of the Silverlight BluePrint for SharePoint –  included with this article.
Conclusion
If you want to learn more about Silverlight integration in SharePoint you can download the Silverlight BluePrint for Sharepoint at http://codeplex.com/SL4SP.

Leveraging the SharePoint Platform (Part 1)

Jeremy Thake — Thu, 14 Aug 2008 08:26:41 +0000

After reading this six part series hopefully you’ll have a clearer understanding of what the SharePoint Platform can offer to you and your organization. It will also provide some direction in using the SharePoint Platform. I have broken the series down as follows:

Part 1 – What is the SharePoint Platform
Part 2 – What capabilities to start with
Part 3 – How to start with the SharePoint Platform
Part 4 – Levels of leveraging the SharePoint Platform
Part 5 – Why use SharePoint as a Development Platform
Part 6 – Lessons learnt from Leveraging the SharePoint Platform

What is the SharePoint Platform?

The SharePoint 2007 Platform has been sending a buzz round the IT industry now since November 2006 when it was launched, I won’t go through the history of SharePoint in this series, but it is beneficial to understand how the platform has evolved since it’s introduction in 2001. Marc Andreessen, of Netscape fame, defines a Platform succinctly:

“A “platform” is a system that can be programmed and therefore customized by outside developers — users — and in that way, adapted to countless needs and niches that the platform’s original developers could not have possibly contemplated, much less had time to accommodate.”

This definition is very much targeted at cloud based platforms in the consumer market such as Facebook, Amazons’ S3 and Ning. I think it is a very fitting to description of SharePoint…the amount of times I have been asked “can SharePoint do x?” and thought quietly in my head…”well yes…but it depends how far you want to go with it…”. In this series I hope to get people thinking in structured ways of how they can leverage the SharePoint Platform with some experience and advice to point people in the right direction.

The six SharePoint “Pillars” / Capabilities

SharePoint Capabilities

The six core pillars/capabilities of SharePoint are a good basis to start thinking about what the Platform has to offer. The Microsoft SharePoint site describes the platform in these sections and has case studies focused around them. Below I’ve covered them off in less sales speak and in terms that people outside of Microsoft terminology will understand with direct comparisons to commonly know consumer platforms.

Collaboration and Social Computing

Real time presence; Standard Site Templates; Wikis; Blogs; People and Groups; Calendars; Email Integration; Task coordination; Surveys; Document Collaboration; Issue Tracking; Social Networking

With all the buzz around about Web 2.0, since the evolution of the consumer Internet with platforms such as WordPress, Blogger and Wikipedia, it is no surprise that Microsoft have bet on Enterprise 2.0 being the next big thing. Each of the areas of this capability are by no means “best of breed”, but do cover basic functions expected. The issue here is the expectation of the user base exposed to more feature rich consumer platforms and also the take up of these without mature enough governance.

Portals

Mobile Device Support; Office 2007 Suite integration; My Site personal sites; Content syndication; Privacy and security; Site Directory; User Profiles and the Profile Store; Audience Targeting; Site Manager; Portal Site Templates; SharePoint Sites and Document Aggregation Web Parts; Colleagues and Membership Web Parts

As with the social computing aspects of the first capability, consumer Platforms such as Facebook, MySpace and iGoogle are leading the way here. This area focuses on the Personalization and Customization features commonly found in Portal technology products by providing the ability to create personalized spaces for users. These spaces can be driven by roles based rules, as well as user behavior and user preferences.

Enterprise Search

User Interface; Search results; Enterprise content sources; Relevance; Administration and Management; Indexing controls; Security; People search; Business data search

Enterprise Search has been a large talking point for generations of Platforms. The frustrations around the assumptions that Internet Search Engines find information so easily from millions of pages online when Enterprise equivalents fail miserably. The SP1 and Infrastructure Updates extend these capabilities further with faceted searches and a more advanced administrative web control panel. It also leverages core base platforms such as Active Directory with People Search functionalities.

Enterprise Content Management

Business document workflow support; Document management site templates; Integration with Microsoft Information Rights Management; Document Information Panel; Document Action Bar; Retention and auditing policies; Records repository; Email content as a records; Legal Holds; Navigation controls; Content authoring; Content publishing and deployment; Site templates; Page layouts; Site variations; WYSIWYG Web Content Editor; Slide libraries; Policies, auditing and compliance

Enterprise Content Management has been the driver behind a lot of the major players in the Document Management space swallowing up their smaller competitors such as: IBM with Filenet; OpenText with Hummingbird; and EMC with Documentum. This capability covers three main areas: Document Management; Records Management and Web Content Management.

Business Process and Forms

Browser based forms; Centralized forms management and control; Design once development model; Form Import Wizard; Integrated deployment model for “no code” forms; Comparability checker

Business Process and Forms capabilities focus around InfoPath Forms being hosted within the Office Forms Services as web pages. There are some features of InfoPath Forms that mean that they won’t host as web pages, but this is an extremely powerful way to build basic forms fast and integrate them within SharePoint Lists and therefore fully utilize the Platform Services. Remembering the InfoPath Forms store data in an XML format, it allows powerful manipulation of collections of forms and the ability to use this XML data within the List Column data (metadata).

Business Intelligence

Integrate, flexible spreadsheet publishing; share, manage and control spreadsheets; web based business intelligence using Excel Services; Data Connection Libraries; Business Data Catalogue; Business Data Web Parts; Business Data actions; Integrated Business intelligence dashboards; Report Center; Key Performance Indicators; Filter Web Parts

The Business Intelligence capability focuses around the hosting of Excel spreadsheets online. This has been a feature that really hasn’t made too many ‘blog’ headlines as yet, but once the product has matured I’m 100% positive that it will be a highly used capability of the platform. The Key Performance Indicators (KPIs) and integration with SQL Reporting Services allows for Executive Dashboards makes for a compelling platform of choice.

Platform Services

Configuration management; Administration user interface; Delegation; Re-parenting; Provisioning; Usage analytics; Monitoring; Alert Notifications; RSS Feeds; Rights trimmed user interface; Automated bread crumb; Quick launch bar; Top Navigation bar; Accessibility; Recycle bin; Backup/restore support; Document Libraries; Metadata; Content Types; Application templates; Object Model; Web Services; Change Logs; Job Service; Feature Framework; Solution Deployment Model; Single Sign On

The base Platform of which all these capabilities surround has been extended significantly from SharePoint 2003. The core of which surrounds itself around the SharePoint Object Model of Site Collections, Sites and Webs and the security around these objects. The base concepts of the Platform Services area are where most people will find themselves configuring and creating instances of objects for their solutions. I will be focusing a lot of this series around these core concepts.

The three SharePoint Editions

SharePoint Editions

The above diagram illustrates the difference in capabilities at each Edition of SharePoint. Windows SharePoint Services (WSS) 3.0 is available as an installation for Windows Server 2003 for free. Microsoft Office SharePoint Server (MOSS) 2007 Standard and Enterprise Editions are based on a licensing model (which I will not go into here…best place to start is to talk directly with Microsoft on this one). Microsoft has a more detailed page describing the granular differences between each Edition. To summarize, Enterprise Edition allows Business Intelligence and Business Process and Forms.

Later on in the series I will be referring to these capabilities and when they are typically utilized during the maturity of the implementation of the Platform. One thing to bear in mind is that because WSS 3.0 is free, you do get a significant set of capabilities to leverage that would typically take weeks to build in ASP.NET/SQL traditional development platform. So you don’t necessarily have to jump straight into the large edition to get the functionality you require, that said, to scale your farm out from a one server role to multiple roles requires a MOSS Edition.

SharePoint Architecture

SharePoint Infrastructure

This diagram illustrates the architectural structure of the SharePoint Platform. SharePoint is simply another layer built on top of the .NET Framework and as with any typical dynamic ASP.NET web site, it runs within the Internet Information Services (IIS) 6.0 and connects to a SQL Server 2005 database. Both of which are hosted on a Windows Server 2003 machine.

This series talks about how you can leverage SharePoint and in doing so leverage ASP.NET 2.0 technologies such as Master Pages, Page Layouts and Web Parts that the Platform implements. It also leverages the Windows Workflow Foundations of the .NET 3.0 Framework with a custom SharePoint persistence database. This allows Microsoft professionals to become familiar with the environment based on experience around these technologies, although there aren’t many of us out there who are well rounded in all of the technologies in this architecture. This series will hopefully give you some understanding of the issues in the marketplace of sourcing SharePoint people and also getting the correct fit for the task at hand.

The SharePoint Object Model

Without going too far into the realms of the Object Model, I just wanted to promote the fact that most of the capabilities mentioned above basically are developed using it’s own Object Model which is made up of SharePoint Sites, SharePoint Webs, SharePoint Lists and SharePoint List Items. Thinking in these four terms you can start to structure your solutions to advantage of the methods and events available out of the box of each and also extend them if necessary. In this series I will be describing solutions and how they fit into these four simple objects – trust me it’s not as complicated as 1st Normal Form Database Design!

SharePoint Object Model

Trying to be everything to everybody

From reading this first part, you will probably realize that the SharePoint Platform is trying to be everything to everybody just like the other juggernauts in this space such as Oracle, SAP, IBM, EMC Documentum, OpenText and open source vendors such as Alfresco. This is a big jump from the previous 2003 version that was simply a Portal/Collaboration application and has now incorporated the ASP.NET 2.0 Framework, as well as amalgamating the Microsoft Content Management Server technologies. SharePoint vNext will surely mature some of the new entries into the WSS 3.0/MOSS 2007 version such as Business Forms, Business Intelligence and Search.

As I have mentioned before in my previous posts around the capabilities some of them are simply no where near the best of breed applications that focus on one core capability. Microsoft Partners will continue to build successful solutions on top of the SharePoint Platform to further extend the capabilities such as K2 for Workflow, Nintex for Reporting, Bamboo Solutions for Portal Web Part enhancements, Colligo for Offline Document Management, NewsGator for RSS Readers and Atlassian for WIkis.

The next part in the series will talk more in detail about the out of the box (OOTB) capabilities and how leverage them.

Until next time,

Jeremy Thake
http://wss.made4the.net/ | http://www.readify.net/

Microsoft SharePoint on the iPhone

sbell22 — Thu, 17 Jul 2008 15:49:10 +0000

The Odd Couple?

I recently discovered what appears to be a “killer application” for mobile productivity: using and managing fully-featured SharePoint sites from an iPhone. No, not the dumbed-down, “/m” DOS-like simplified SharePoint views. We’re talking about the full, richly formatted and designed SharePoint user experience, including logging in to the back-end and configuring sites. Accessed from an iPhone, SharePoint now allows business workgroup teams to collaborate while truly “on the go”, potentially speeding up the tempo of team workflow on critical projects.

I would not have understood how compelling using SharePoint from a pocket-sized mobile device is, but actually using SharePoint on an iPhone is a bit of a “wow!” experience. SharePoint could open up a whole new universe for iPhone users: the Microsoft universe, which is a very large one.

iPhone’s Safari mobile browser renders many sites as well as a notebook or desktop computer; some even better. Site designers at Amazon.com, BofA.com, LinkedIn.com have developed and are dishing up iPhone-optimized web pages, with stunning results. But SharePoint sites really require no such modifications when accessed from an iPhone. Authentication can be an issue, however; we are still sorting out exactly what the technical and configuration issues may be.

SharePoint challenge screen on a 2nd-generation (3G) iPhone

There are now scores of iPhone-resident business productivity applications bursting onto the scene for the iPhone, based upon AAPL’s software developer’s kit (SDK). During the first three days after the 3G iPhone’s launch July 11 2008, 1 million new 3G iPhones were sold and over 10 million applications were downloaded from Apple’s iPhone applications store.

That is a lot of activity downloading individual applications; but Microsoft’s Office SharePoint Server platform is a much bigger suite of fully-featured Microsoft applications than any individual iPhone-resident application. Being a server resident Microsoft CMS ecosystem complete with an application development universe, app extensions, API, and add-ons there is no comparison to stand-alone, resident iPhone applications in terms of power, extensibility, and potential for scalability and robustness in many business enterprise environments – whether it is a large Corporation, or a startup company looking to execute at breakneck speed.

Why is using SharePoint from an iPhone compelling?

SharePoint on the iPhone may simply be the most promising and robust combination of mobility and a powerful server-based application out there.

Using a SharePoint site from a 1st generation (2.5G) iPhone

Running SharePoint from an iPhone, workgroup team members can be liberated to do these sorts of things “on the go” from anywhere, without needing a laptop computer:

Centrally host documents, spreadsheets, and presentations in a secure environment
Edit those documents, spreadsheets, and presentations collaboritely with change control
Maintain, publish, and distribute group calendars and events
Schedule and update group meetings and events efficiently
Share photos/graphics using project-specific albums
Create internal/private social networks for sub-topic discussions
Create and share internal web content and media privately
Track issues, milestones, and Gantt charts for projects
Conduct internal opinion polls
Create and post internal announcements

… and that’s just the start of it. SharePoint running on an ultra-mobile device, could potentially change a lot of corporate lifestyles, and make a major impact on team productivity.

Logged into full-screen SharePoint application with the new 3G iPhone

We have found that having full remote to SharePoint access can be even more useful than having access to email — allowing you to do real substantive work; more than just “knocking down email”. It’s a very robust private project work portal for teams which has allowed our clients as to enhance team visibility and communications, speeding the pace of workflow.

SharePoint is massively deployed, and growing exponentially

How widely used is SharePoint with Corporate users? VERY widely, and growing like a wildfire:

“Today at the Microsoft Office SharePoint Conference 2008, Microsoft Chairman Bill Gates noted that SharePoint is one of the fastest growing products in the company’s history, having reached the milestone of a US $1billion-dollar business with 100 million licenses sold, and growth of more than 50 percent in the second quarter of the current fiscal year”.

“A recent report by IDC found that 61 percent of users surveyed said they were deploying SharePoint enterprise-wide. Another 28 percent of those using SharePoint in departments today are expected to expand usage to the enterprise within the next 12 months”. [source: Microsoft; IDC]

“Bill Gates showed in terms of growth in revenue, growth in adoption — 100 million users, that’s a phenomenal number. Another number is three-quarters of the Fortune 100 now have SharePoint. That’s just a very impressive number, people seeing the impact that it can have in their businesses, how they do business; just very, very gratifying for us”

[source: Kurt DelBene, Sr Vice President, Microsoft Office Business Platform Group]

Can it really be better than Windows Mobile?

Apples’ ‘Safari mobile’ browser is the first mobile browser to render many websites nearly as well as a notebook computer running fully featured browsers such as Internet Explorer, Firefox, or Opera. I was especially surprised by how well Safari handles SharePoint, since even Microsoft’s own Windows Mobile devices do not seem to do that great of job of it. But that is not too surprising, given that mobile browsers that render any website well, have not been seen until just recently.

I walked up to Microsoft’s Mobile Computing counter at a recent telecom conference (NXTcomm 08 in Las Vegas) and asked if it’s possible login to a Sharepoint site with a Windows Mobile device. “Of course” was the answer. The photo below shows what I got after attempting to login with the provided Opera Browser on the new Windows Mobile 6.1 device (see photo). Clearly, Opera Mobile on WM 6.1 does not work with SharePoint, at this point in time.

Attempting SharePoint access from Windows Mobile 6.1 using the included Opera mobile browser

Authentication screen on a WM 6.1 device running mobile IE

When using the standard-issue IE browser on WM 6.1, I did get the SharePoint “challenge” login screen, but could not get past that. I am reasonably confident though, that with sufficient effort, full SharePoint access – not just “/m” mode – can be accomplished with a Windows Mobile device.

iPhones can access SSL secured SharePoint sites

I have successfully accessed SharePoint servers with both 1st generaton (2.5G) and the second genertation (3G) iPhones, with secure 128-bit (“https://) SSL connectivity from the browser to the Sharepoint server. The photo below shows a 3G iPhone successfully accessing a SSL-secured SharePoint site.

MOSS vs WSS

There are two versions of SharePoint: MOSS (Microsoft Office SharePoint Server) and WSS (Windows SharePoint Server). MOSS is a superset of WSS, and can (among other capabilities) host live Excel spreadsheets on the server (MOSS includes an Excel engine, server-side), allowing individual SharePoint users to collaborate on live-computing spreadsheets (for example, driven by live stock market data) not merley on shared spreadsheet documents.

MOSS and WSS use the same rendering engine. We believe the iPhone should access either MOSS or WSS SharePoint sites, but further testing will be required to be certain.

iPhone supports NTLM Access authentication protocol

SharePoint uses either NTLM or Kerberos based protocol, along with Microsoft Active Directory, to authentication users for access, depending upon how the server and the SharePoint installation have been configured by the SharePoint server administrator, and the Microsoft Windows Server Administrator.

The iPhone supports a variety of authentication types including passwords, MD5 Challenge-Response, NTLM, and HTTP MD5 Digest. Some SharePoint sites do not let you past the “challenge” (login) screen, most likely due to NTLM or Kerberos authentication issues. I do not yet have a handle on what configuration settings prevent iPhones from gettting through the authentication screen for some SharePoint sites, but will report on that once it is sorted out (if technically inclined readers don’t figure it out for me, first!).

Summary

Running full Sharepoint, an extremely powerful server-based application, from a versatile device as small as the iPhone can be a bit of a jaw-dropper. I suggest you give it a try, before leaping to any conclusions! The “user experience” is remarkably good.

The author will be following up this article by posting followup comments and perhaps a followup article, after some more research and testing has been conducted.

NewsGator Social Sites

Arno Nel — Wed, 16 Jul 2008 15:31:51 +0000

This Article was authored by Laura Farrelly:

“Laura Farrelly is currently the Director of Marketing for NewsGator Technologies, Inc. Laura has nearly 10 years of executive level marketing and product management experience at business-to-business software companies. Laura has a B.S. in Engineering from Michigan Technological University, a M.S. in Engineering from the University of Michigan, and an MBA from the Kellogg School of Management at Northwestern University.”

NewsGator Social Sites provides behind-the-firewall social computing and RSS capabilities that enable businesses to deliver “Facebook for the Enterprise”. Social Sites integrates seamlessly with Microsoft SharePoint to provide employees with:

Social Home/Start Pages – provides users with colleague activity feeds, enables network building, and surfaces relevant content.
Social Profile Pages – enables expert/colleague location and validation, provides social network graphs, and displays activity streams.
Communities – allows for easy discovery and creation of ad hoc groups, supports social bookmarking and content sharing, and offers rich discussion and document collaboration capabilities.
Content Discovery – provides advanced RSS capabilities (feeds, subscriptions, and management), surfaces hot topics and content, and eases content discovery with tagging and tag clouds.

NewsGator Social Sites integrates seamlessly with SharePoint to provide enterprises with secure social computing capabilities that have been designed specifically for business purposes. The following is a review of some of Social Sites most social features.

1) Social Network Graphs – these graphs provide a visual depiction of a person’s closest colleagues along with recommendations for new colleagues. The nice part about this feature is that Social Sites compiles this information automatically based on the actions people are taking within SharePoint. With this feature, people can quickly locate experts or find other people in the organization that are working on similar projects.
2) Communities – Social Sites enables people to create groups on the fly in order to collaborate around a special interest or project. Non-technical users can create groups with a few simple clicks. Groups can share documents and content and engage in discussions. Communities facilitate collaboration and help businesses improve productivity and innovation.
3) Profile Pages – these pages feature overviews of a person including the content they create in SharePoint, their favorite RSS subscriptions, the tags they use most frequently, their current status, areas of expertise, etc. Profiles make it easy for people to find subject matter experts to assist with problem solving or work projects.
4) Start Pages - Start pages provide a person with a personalized portal experience. Users can track their colleague’s portal activity including blog posts, document additions, discussion threads, etc. Relevant content is automatically surfaced for the user based on their portal activities. Users can track colleagues’ current status and even update their own status. Personalized tag clouds can be added to the start page such that the user has quick access to their most important content. Users can set up a personalized RSS reader with their favorite feeds. And the system even suggests new colleagues to a user based on people’s activity in the portal.
5) Community Discovery – Social Sites makes it easy to discover relevant groups and communities within SharePoint. Social Sites recommends communities based on colleagues who are already members, as well as similar tags, read content, subscriptions and activities. Social Sites also provides for easy discovery of groups via tags, search, and lists of recently created communities.
6) Social Bookmarks - This feature allows users to tag any URL or web content and automatically save it to a community, their profile, or other SharePoint locations.

“Newsgator has a terrific front end to SharePoint. Check it out if you’re considering SharePoint for SN/Collab.” Susan Scrupski, IT Insider, Twitter Update, June 11, 2008.

“You perhaps are familiar with Newsgator as an RSS aggregator. Earlier this year we wrote about its social platform built on top of Microsoft SharePoint. Newsgator was showing its newest release of the software and we remain impressed with the approach. Many vendors are trying to deliver ‘Facebook for the Enterprise.’ Newsgator is one of the best.” Jonathan Yarmis, Fanning the Flames of Enterprise 2.0, June 13, 2008.
Universal McCann Launches Intranet 2.0, Adopts Social Networking Platform, Joe Mandese, Media Post, Jun 10, 2008.
Microsoft, Other Firms Take Aim at Enterprise 2.0 Market with New Tools, By Heather Havenstein, ComputerWorld, June 9, 2008.

Company Details:

Company Name: NewsGator
Company URL: www.NewsGator.com
Product URL: www.newsgator.com/Business/SocialSites
Product Video: http://www.newsgator.com/Business/SocialSites/Video/SocialSites_Viddler.aspx
Pricing: Pricing and licensing for Social Sites is based on a one-time, per-user license fee that scales based on number of users. Yearly support is charged as a percentage of the license fee.

A tribute to the humble “leave form” – Part 2

cleverworkarounds — Sat, 12 Jul 2008 13:49:05 +0000

Hi again and welcome to the next exciting instalment in the series that pays tribute to the consultant “get out of jail free” card that is the organisational “leave form”. My experience of SharePoint implementations may be somewhat skewed by regional and/or cultural bias of course, but many SharePoint installations tend to follow a script of something like

IT Manager attends an “information session” from a Microsoft Gold Partner, has one two many chardonnays and is convinced that SharePoint is the *answer*, but isn’t sure of the question just yet…
IT Manager calls aforementioned Microsoft Gold Partner and I am sent out to dazzle them with my wit, charm and technical brilliance
IT Manager agrees with me that SharePoint has to be sold to (and owned by) “the business”, so chooses the first candidate business process that pops into his head
All hail the mighty “leave form“

Me sarcastic? never!

Note: I was recently certified as a Microsoft Certified Trainer for SharePoint, and I am using this series as practice for my training material! Thus this entire series of articles is pitched at a very high (end user) level. Readers with some exposure to SharePoint may find this article from the series is particularly easy-going, but rest assured, by the time I am done, I will be delving into web services, code and all sorts of goodies. Writing that stuff for the non developer will be a challenge – so stay with me, I will slowly ramp up the concepts as we go on.

So to recap the introductory article, we have documented the leave application and approval process for the Springfield nuclear power plant, and they have kindly supplied us with their existing leave form that their employees print out and fill in by hand. So our very first job is to see how InfoPath handles importing this MSWord based form to InfoPath.

InfoPath 101

Even though InfoPath is part of MSOffice, many people do not know about it, let alone used it. If you have never seen InfoPath before now, then I suggest you do some reading about it and maybe even download the evaluation. My one sentence explanation is that it allows you to create electronic forms for data entry or data collection. Among its features is that it can import Word or Excel documents to speed up the form creation process. So let’s do that first up.

Upon starting up InfoPath 2007 we are presented with a “Getting Started” wizard. Our job is to design a new form, so the option to choose is to Design a Form Template as marked in the screen-grab below.

The next screen is to choose various options in relation to designing a form. We are starting from a completely blank form (which is the default option anyway), but this form is going to web browser based, so that people filling it in do not need InfoPath installed on their PC’s. SharePoint enterprise edition provides support for browser based forms via the “Forms Services” feature. InfoPath 2007 has built-in support for forms services, but the form must be marked as “browser compatible”.

This is not a default setting, so be sure to check the “Enable browser-compatible features only” box before clicking the OK button.

Now we are at the main form designer screen within InfoPath. Being part of the MSOffice suite, it has a set of toolbars that looks very much like the other applications in the MSOffice suite. To the right of the InfoPath screen is the “design tasks” tool pane. I’ve shown it below.

You will come to know the “design tasks” pane very well soon enough. From here we can perform all sorts of actions to construct a new electronic form such as create textboxes, buttons, drop down lists and the like. Not only that, but we can instruct InfoPath to connect to “data sources” to populate the values in say, a drop down list box. Imagine for example that all of your clients are listed in your CRM system. InfoPath has the capability to access those client details and display them on the form. Think of the data entry duplication that this will save, not to mention the maintenance of data accuracy, eh?

But hey, we are here to impress the clients with our technical wizardry and to show how InfoPath allows non-developers to create sophisticated electronic forms. So what we will do first-up is import the existing MSWord based leave document and see what we get out of the box.

Importing the old form

So, you should be at the main InfoPath screen to perform this action. From the “File” menu, choose “Import Form”. On the next screen, choose “InfoPath importer for Word documents” and click “next”

You will be prompted to browse to a file to import. In this example, I have chosen the “springfieldleaveform.doc”. The “options” button allows you to control the specifics of the import process. In this example, I will simply import the form with all of the default import settings.

Click “Finish” and InfoPath will do its thing – viola! We have the beginnings of a leave form!

Graphics?

Ah, but wait, what happened to the graphics? The original MSWord form had two pictures in the header of the document – a 3-eyed fish and a picture of the towers. It turns out it seems, that graphics in the header or footer of an MSWord document do not get imported into InfoPath. Bummer – I really liked that 3-eyed fish!

But fear not, importing graphics is as easy as a cut and paste. If I open my original word version of the form, I can double click near the top of the document, and the header/footer will now be available to edit as shown below.

Now you can click to highlight both images and they will paste into InfoPath. Not exactly earth shattering, is it?

It’s still not right…

Okay, so it wasn’t a perfect import. In fact I’d give it about a 6 out of 10. But the point is we have our images and our text inside InfoPath. Also to be fair, MSWord files were not designed for the web either, so it is unsurprising that it wasn’t flawless.

So, now we can use the native features of Infopath to tidy up this form. First, we will tidy up the arrangement of the two images, and then we will add some graphical elements like textboxes and option buttons to allow the form to be electronically filled in. We will create a table on the form that looks like this

In the right-hand “design task” bar, we select “Layout” and then choose to create a “custom table”. Choose a 2*2 table and you should see the table as shown in the third image below (look above the fish graphic).

The next step is to format the table correctly. Highlight the two rightmost cells, right click on them and choose “merge cells”. The result should be a table looking like the rightmost image below.

Now drag and drop the three-eye fish to the leftmost cell and the plant picture to the rightmost cell of the top row of the table. Your result should look something like this.

Now highlight the remaining title text, and then cut and paste it into the empty bottom left cell . Aha! We are starting to look better! A bit of resizing of the table cells width and it is looking more like the original.

Are we impressed yet?

Okay, sorry that is very much a rhetorical question, I know. I haven’t exactly written the most technically complex article ever.

But at least we have gotten the InfoPath version of the form to look much more like the MSWord version. If I had been running that as a client demonstration, it all in all would be around 2-3 minutes work. Is the client blown away in amazement and opening the chequebook yet?

Not exactly, but we haven’t gotten to the good stuff yet. In part 3, we will add some textboxes and other graphical elements (called “controls”) to the form, and then we will do some smart things to reduce manual data entry, as well as ensure that the data that we have collected is accurate.

Bye for now

Paul Culmsee