How Themes work in SharePoint 2010

Sharepoint 2010 having a different concept of themes then Sharepoint 2007. Sharepoint 2010 having a new theme engine. You can do cool things such as create a theme in PowerPoint, export it and then import it into SharePoint 2010, click apply and you got a custom theme. One aspect that I could not find documented is the definition of when you choose a color for a particular element what is it really changing?

If you modify the theme for a site you can use the picker to choose a OOTB or custom theme. Or you have the ability to choose your own color scheme via the following elements.

My approach: Make each element white to start with and then one by one add color and document the results. Just for kicks here is what it looks like when it is completely white… (not a color scheme I would recommend…) I will be using a red color: #C12345 for testing.

Here are the details for each one of the elements above:

Text/Background- Dark 1 (41 Classes)

• Page Title Hyperlink Text
• Hover Text
• VB Body Text
• Site Action Menu Text
• Left Navigation Links Text
• Site Setting Page Text Headers

Text/Background - Light 1  (37 Classes)

 

• Body Background
• Toolbar Background
• Quick Launch Borders
• Web Part Header Background
• Site Action Menu Background
• Site Action/Welcome Text Color
• Pop-Up Window Background

Text/Background - Dark 2  (43 Classes)

• Top Banner Background
• Left Navigation Header Text
• Recycle Bin/View All Site Content Text
• I Like/Tags Notes Text
• Library Column Text
• Site Action Drop Down Border
• Breadcrumb Current Location Text
• List Description Text

Text/Background - Light 2  (19 Classes)

 

 

• Browse Tab and hover Background
• Title Container Background
• Top Links/Header 2 Background
• Quick Launch Background
• Web Part Adder Background

Accent 1  (10 Classes)

• Quick Launch Hover Text
• Top Link Selected Tab

Accent 2  (4 Classes)

• .ms-error
• Rich Text Colored Heading 2 Text Styles

Accent 3  (9 Classes)

• Rich Text “Caption” Style Text Color

Accent 4  (5 Classes)

• Border Under Web Part Selector

Accent 5  (3 Classes)

• Rich Text Colored Heading 4 Text Styles

Accent 6  (3 Classes)

• Rich Text Highlight background color

Hyperlink  (12 Classes)

• Toolbar Text Color
• VB Body Hyperlink Text
• a:link Class Text Color
• Web Part Title Hyperlink Text (Not Visited)

Followed Hyperlink (2 Classes)

• .ms-WPBody a:visited
• a:visited

I hope this post will help you when you decide to create your own theme via the above elements. If you create your own theme you can simply view the source of the page and there will be a unique CSS style sheet reference “_themes/16/corev4-8digithex.css?ctag=#”.

How to use RDLC with Asp.net?

I just passed thru a situation where my client does require 2 reports to be developed in SSRS ( SQL Server Reporting Service ). It was not good advise to spend extra money behind SSRS on shared hosting as his requirement was very small. I show some example of RDLC (Report Definition Language Client-side) to my client and he was very excited about that.

I thought it’s nice to share this with all my blog readers and my friends.

Introduction

Step : 1 Create a Parameterized Store Procedure.

(I have used table called ProjectDetail for this tutorial )

CREATE PROCEDURE [dbo].[ReportProjectDetail]

(

@ProjectID INT=NULL ,

@FromDate DATE=NULL,

@ToDate DATE=NULL

)

AS

BEGIN

SET NOCOUNT ON;

BEGIN TRY

SELECT ProjectID,

ProjectName,

ClientName,

ProjectReqDate,

ProjectValue,

PartnerID,

PartnerType,

PartnerName,

PartnerEmail,

FundingID,

FundingStatus,

AmountRequested,

AmountRecieved,

SentFundTo,

FROM ProjectDetail

WHERE (@ProjectID =NULL or ProjectID=@ProjectID)

AND (@FromDate IS NULL OR CreatedOn BETWEEN @FromDate AND @ToDate)

END TRY

BEGIN CATCH

PRINT Error_Message()

DECLARE @msg VARCHAR(MAX)

SELECT @msg = ERROR_MESSAGE()

EXECUTE ERR_LogError

RAISERROR('Error in %s: %s', 16, 1, 'ReportProjectDetail',@msg)
END CATCH

END

Step : 2 Create a DataSet using the DataSet Designer

• Start by running Visual Studio and select New Website from the Start page.
• Add ASP.Net folder App_Code
• In Solution Explorer Right Click on App_Code > Add new Item > DataSet
• Now select DataSet & Give name. e.g. ds_ProjectDetail.xsd and Save.
• Now Right Click anywhere in DataSet sceen and select Add from the context menu.
• Select Table Adapter In to Wizard. Now create data table.
• Now choose Existing Store procedures.

Step : 3 Create a report definition

• In Soultion Explorer right click on & select > Add New Item > Reporting > Report
• Now Given report name e.g. rptProjectDetail.rdlc Click Add to your project.
• Now Drag a table from the report designer screen.
• Now Dataset Properties has to be come in pop up now give your dataset name next choose your dataset next select available reports & last click OK.
• The table has in three Bands, first header, second detail, & last footer bands.
• After created your dataset, it will appear on your left panel in Website Data Source window.
• Expand it and drag the file to the report designer page . For example, drag and place it in the Table Fields.
• After you have assigned the attribute, now report creation is done.
  
  
  
  
  
  Step : 4 Add Report Viewer control into your ASPX page
  

  Step:-

  • In Solution Explore Right click > Add new item >Web > Web Form now give name e.g. rdlcDemo.aspx and click on Add.
  • Now Open your Left Side Toolbox and drag the Report Viewer control to your ASPX page (In Design mode).
  • Once your have Drop n drag Control on aspx Webpage , select it and click on the arrow on the top right corner to choose your rdlcReport.rdlc report in dropdown list.
  • Don’t Forget to add namespace Microsoft.Reporting.WebForms to be in your code-behind file.
  
  
  
  using System;

  using System.Configuration;

  using System.Data;

  using System.Data.Common;

  using System.Web.UI;

  using Microsoft.Practices.EnterpriseLibrary.Data;

  using Microsoft.Practices.EnterpriseLibrary.Data.Sql;

  using Microsoft.Reporting.WebForms;

  using System.Collections.Generic;

  using System.Linq;

  using System.Web.UI.WebControls;

  using System.Data;

  using DataAccessLayer;

  
  

  protected void GenerateReportButton_Click(object sender, EventArgs e)

  {

  ReportViewer1.Visible = true;

          string connectionString = ConfigurationManager.ConnectionStrings

  ["ConnectionStringName"].ConnectionString;

  
  

  Database db = new SqlDatabase(connectionString);

  DbCommand command = db.GetStoredProcCommand("ReportProjectDetail");

  db.AddInParameter(command, "@ProjectID", DbType.String, ddlProject.SelectedValue);

  if (calFromDate.Text.ToString() != "")

  {

  db.AddInParameter(command, "@FromDate", DbType.String, calFromDate.Text.ToString());

  }

  if (calToDate.Text.ToString() != "")

  {

  db.AddInParameter(command, "@ToDate", DbType.String, calToDate.Text.ToString());

  }

  DataSet dataset = db.ExecuteDataSet(command);

  ReportDataSource datasource = new ReportDataSource("DataSet1", dataset.Tables[0]);

  
  

  ReportViewer1.LocalReport.DataSources.Clear();

  ReportViewer1.LocalReport.DataSources.Add(datasource);

  
  

  ReportViewer1.LocalReport.Refresh();

  
  

  }

  }
  Bind and Run The Report
  
  

  Now  Press F5 to Run the .aspx page.

How to Create Custom SharePoint 2010 Page Layouts using SharePoint Designer 2010

Scenario:

You’re working with the Enterprise Wiki Site Template and you don’t really like where the “Last modified…” information is located (above the content). You want to move that information to the bottom of the page.

Option 1: Modify the “EnterpriseWiki.aspx” Page Layout directly.

Option 2: Create a new Page Layout based on the original one and then modify that one.



We’ll go ahead and go with Option 2 since we don’t want to modify the out of the box template just in case we need it later on.

How To:

Step 1

Navigate to the top level site of the Site Collection > Site Actions > Site Settings > Master pages (Under the Galleries section). Then switch over to the Documents tab in the Ribbon and then click New > Page Layout.

Step 2

Select the Enterprise Wiki Page Content Type to associate with, give it a URL and Title. Note that there’s also a link on this page to create a new Content Type. You might be interested in doing this if you wanted to say, add more editing fields or metadata properties to the layout. For example if you wanted to add another Managed Metadata column to capture folksonomy aside from the already included “Wiki Categories” Managed Metadata column.

Step 3

SharePoint Designer time! Hover over your newly created Page Layout and “Edit in Microsoft SharePoint Designer.”

Step 4

Now you can choose to build your page manually by dragging your SharePoint Controls onto the page and laying them out as you’d like…



… Or you can copy and paste the OOB Enterprise Wiki Page Layout. I think I’ll do that.

Step 5

Alright, so you’ve copied the contents of the EnterpriseWiki.aspx Page Layout and now it’s time for some customizing. I found the control I want to move, so I’ll simply do a copy or cut/paste to the new spot.

Step 6

Check-in, publish, and approve the new Page Layout. Side note: I like to add the Check-In/Check-Out/Discard or Undo-Checkout buttons to all of my Office Applications’ Quick Access Toolbars for convenience.

Step 7

Almost there! Navigate to your publishing site, in this case the Enterprise Wiki Site, then go to Site Actions > Site Settings > Page layouts and site templates (Under Look and Feel). Here you’ll be able to make the new Page Layout available for use within the site.

Step 8

Go back to your site and edit the page that you’d like to change the layout for. On the Page tab of the Ribbon, click on Page Layout and select your custom Page Layout.



Et voila! You just created a custom Page Layout using SharePoint Designer 2010, re-arranged a SharePoint control and managed to plan for the future by not modifying the out of the box template. That was a really simple example but I hope it helped to give you some ideas on how else you can customize Page Layouts within SharePoint 2010!

Top 20 Examples of Creative Navigation within SharePoint

With the launch of SharePoint 2010, I thought it might be fitting to start focusing on the design and branding element of SharePoint and show the world what can be done when you are thinking of being creating with the product.
Leading on from that I am doing to launch a series of Top 20′s ranging from search box examples , navigation examples and my favourite sites all based on the platform of SharePoint.
So to start the series off I am going to start with my Top 20 Examples of Creative Navigation, with a brief summary of why I like it. They are in no particular order and are the opinion of myself. Enjoy.
So then, let the showcase commence…
1. Carbon Trust

I really like the font they have used for starters and I think the hover state with the reverse colour is effective combined with the immediate show of the sub navigation, which has a subtle fade for the potential white-on-white scenario.
http://www.carbontrust.co.uk
————————————————————————————————————————————————
2. BSG Blog

I love this Silverlight navigation, orbiting around home/earth button is really cool. I always love the little touches of the shooting star, UFO that flies across and the twinkle of stars that happens every now and again. All in all and unique and very creative navigation that can be achieved with the combination of SharePoint and Silverlight.
http://blogs.bsg.co.uk
————————————————————————————————————————————————
3. Linklaters

I really like big and bold navigation as it is one of most important elements of any website – clear navigation. Looking at it now as a little picture your eyes are drawn to the logo and navigation instantly. This navigation uses drop down menu functionality with combined with the purple arrow and purple text in hover state just polishes is clean and simple example.
http://www.linklaters.com
————————————————————————————————————————————————
4. Central Ohio Technical College

One good way to gain your users attention is the use of animation. Too much can be overpowering and annoying but used subtly it can be a great way to get them clicking. This navigation I like because I did just that, I was hovering over all the menu options over and over, the animation is smooth and colourful.
http://www.cotc.edu
————————————————————————————————————————————————
5. Hyder Consulting

Something a bit different in terms of layout, on top of a large photo, which sometimes can make navigations lost within the background. One way to counter this is using a large navigation which I this site does well, combined with white text in hover state in the line of sight with the logo and search area, this site navigation works.
http://www.hyderconsulting.com
————————————————————————————————————————————————
6. Victorinox

The use of the burgundy background with the white navigation as well as the capitalisation of lettering works really effectively and even more so when reversed on the hover state. Leading on from this, the sub menu and the active menu state still using the reverse color of white background and burgundy hover state on the submenu polishes off this example perfectly.
http://www.victorinox.com
————————————————————————————————————————————————
7. Arts & Auto

I really like colour-categorised navigation, it is a simple way to break up and easily identify content within sections on your website. Not only have they done this and have incorporated a dropdown / sub menu with some navigation, in which when cooked together they’ve baked a nice piece of animation with a nice design.
http://www.artsenauto.nl
————————————————————————————————————————————————
8. Hyro

Sometimes when you have a clean site you don’t need to use a graphically heavy navigation. Also using a clean and crisp navigation can really complement a design, which this site does and does well. Not over the top, no animation just simple text with a simple hover state that of an underline. Simples
http://www.hyro.com
————————————————————————————————————————————————
9. Sdu Uitgever

Not my favourite of navigation examples but I think it is important to demonstrate something different and with that I respect. One thing all creative designers should be looking to do is think outside of the box and this navigation does.
http://www.sdu.nl
————————————————————————————————————————————————
10. SharePoint HQ

What I particularly like about this is the combination of colour palette (I love those blues), the animation and the bottom-right gradient they have used. Also what I think is good to recognise is the contrast of the menu with the background it sits on, creating enough contrast to make the user experience seamless without looking out of place.
http://www.sharepointhq.com
————————————————————————————————————————————————
11. Lutron

Having a site with a large navigation structure can be tricky to present in a clean and clear way, which isn’t busy and cluttered. This site does this perfectly! It is well presented and even incorporates a little bit of content in the sub menu pane. The only thing I think ruins, what could be a lovely example, is the animation for the sub menu pane, I think it very ‘choppy’ and quite violent on the eyes going from a brown palette in their photography then to be presented with a white background instantly. My opinion is that a nice piece of fade in/out animation would be perfect here.
http://www.lutron.com
————————————————————————————————————————————————
12. Central Ohio Technical College

Similar to Central Ohio Technical College further up, this is animating up instead of to the right, BUT with a little twist not only does this navigation animated up it also changes the image below based on what you option you have decided to hover over. Although it is flash and I think that it is cheating to use a flash menu on a SharePoint site, I like it and it is my blog so I will include! but this will be the only one I promise! I would like to think that CCB have used flash to tap into a list to power their navigation, if they have then then I suppose that’s a decent compromise.
http://www.ccb.pt
————————————————————————————————————————————————
13. Ferrari

If there is one colour that goes with a strong and vibrant color like red it is grey and in particular gun metal grey, one of my favourites. What I think makes this navigation really cool is that use of imagery on the drop down boxes to emphasis the area you are in and could head over to, I also like the animation that is used just tops off the whole navigation.
http://www.ferrari.com
————————————————————————————————————————————————
14. Safe Network

First thing I noticed on this navigation was the shadow that is used on the right/bottom of the drop down which really gives the sub menu definition. With a site that used big, bold colours the navigation supports this really well. I also like the way the top header and navigation sit on top of the image slider/view that is used behind the site.
http://www.safenetwork.org.uk
————————————————————————————————————————————————
15. Rado

Sometimes you just need to go back to the basics! The brand for this site is clearly black and white, using this they have kept their navigation simple, but with a twist. Using the sub menu they have added the functionality of when you hover over the different options you are presented with a visual representation, in this case a picture of the watch based on the what model you hover on. A perfect example of simplicity works.
http://www.rado.com
————————————————————————————————————————————————
16. Goodman

One thing I like is trying something different! Clever navigation based on their logo the ‘+’ (plus) sign really works well. Instantly identifiable with the logo you cant help but notice that Goodman use a + as there logo. Going back to the navigation you are clearly presented with 5 options which takes you to various areas. Once in those areas they use a standard navigation you see everywhere, shame really as their initial navigation is cool.
http://www.goodman.com
————————————————————————————————————————————————
17. Cox

This is a common trend I have seen where people use the navigation to tell people the sections they will be clicking on them and underneath what the section is about. It can be used really effectively sometimes but also can become a very busy as well on the flip side. Just wish they had a mute button for the woman…
http://www.coxhelpcenter.com
————————————————————————————————————————————————
18. Embark

Sometimes you didn’t even need to use the conventional horizontal or vertical navigation. This site shows us you can use a search interface to get around your site however I will always put my money on that people prefer the normal way of navigation as that is what people are used to. But I think it is a good example of what can be done especially with the search capabilities within SharePoint.
http://www.embark.com
————————————————————————————————————————————————
19. Neudesic

What I want you to focus on here is the use of the ‘house’ icon for the home button. First time I have seen this on a SharePoint site and it is a really good way to free up a bit of space if needed and is instantly recognisable as the button to click to go ‘home’.
http://www.neudesic.com
————————————————————————————————————————————————
20. 1 By Youth

Another example of pushing the boundaries of navigation with SharePoint is using the overwhelming power of CSS. Using the hover state and mixed with an image for the background you can instantly create a unique hover experience for your navigation as demonstrated here.
http://www.1byyouth.com
————————————————————————————————————————————————
Well there you have it! Some great examples of all the different possibilities of what can be achieved with SharePoint. I

Customizing SharePoint List New/Edit/Display Forms individually in InfoPath 2010

Summary:  Customizing list forms is very easy with infopath 2010.  A “Customize Form” option is provided along with the list properties as shown below. Now the problem is the editing performed on the form is reflected same in the entire three list forms (new/edit/display). Sometime the requirement can be to have different kinds of forms for new/edit/display fields. The steps described below provides a solution to this problem.

 
Applies to:  Microsoft InfoPath 2010, Microsoft SharePoint Server 2010, SharePoint Designer 2010
Contents

1. Introduction
2. Customize list forms
3. Create views in InfoPath
4. Associate views with list forms using SP Designer

Introduction
The basic knowledge of following things are required to perform this activity:

• InfoPath 2010
• SharePoint Server 2010
• SharePoint designer 2010

Before you start, set up a list with required number of columns on SharePoint site. The list will be having the OOB new/edit/display pages. These pages are to be individually modified using InfoPath 2010. Open the list as shown below.

Customize the list form

1. On the List tools, click List. You will see a Customize Form option on the right(highlighted in red)
2. Click on it, the edit form page will be opened in InfoPath
3. You can modify the form here, but the change will be reflected in all the 3 forms of the list
4. But here we need to individually modify each form. To achieve this we need to create separate views for each form

Create views in InfoPath
  

1. On InfoPath, click on Page Design tab on the top ribbon
2. You would see option to create New View as shown above.
3. You already will be having an edit view (default). You need to create two more views for new and display options.

 

1. Click on New View, You will get an option to specify the name as shown below. Specify the name of the view (ex:- New View) and click ok to create the view for new page.
2. Similarly we need to create one more view for display page. (Name :- Display View)

 

1.  The three views will be available on the Views drop down list (Highlighted in green)
2. These three views can be individually modified. You can change page layouts, hide fields or add rules or validations. But still views are not associated with the list views. To do that, we need help of SharePoint designer.
3. Click on the publish icon to publish the changes made so far.(highlighted below)

 
Associate views with the list forms
Open the list in SharePoint designer. The list forms would be displayed as shown below.(Highlighted in Green)
 
Click and open each list item. Right click as shown below and select Properties.
 

1. In Properties list, you will see an option “Default View”. Type the View names which you have created in this space. Associate forms with views properly as shown below.

• NewForm – NewView
• EditForm – EditView
• DisplayForm – DisplayView