Create fly-out behavior for your Current Navigation menu of SharePoint 2010 Publishing Sites.

One of the first thing SharePoint branding process involves is 'Creating a 'fly-out menu'. Steps are easy and involve basic understanding of asp.net markup and css.

Step: 01 - Copy nightandday.master and rename the copied file to my_nightandday.master.

Step: 02 - Edit the my_nightandday.master and search for <SharePoint:AspMenu ID="CurrentNav".
Change the field StaticDisplayLevels to 1 and MaximumDynamicDisplayLevels to 2

Your Current Navigation control's markup should look like this

<SharePoint:AspMenu
               ID="CurrentNav"
               runat="server"
               EnableViewState="false"
               DataSourceID="SiteMapDS"
               UseSeparateCSS="true"
               UseSimpleRendering="true"
               Orientation="Vertical"
               StaticDisplayLevels="1"
               MaximumDynamicDisplayLevels="2"
               CssClass="nightanday-menu" SkipLinkText="<%$Resources:cms,masterpages_skiplinktext%>"/>


Step: 03 - Register your custom css file in your custom master page. In my case its style.css. Below is the markup to register a custom css file in master page.

<SharePoint:CssRegistration runat="server" name= "<%$SPUrl:~SiteCollection/Style Library/MY_STYLE/style.css%>" After="corev4.css"></SharePoint:CssRegistration>

Step: 04 - Place below css classes in your custom style.csss

.nightanday-menu
{
background-color: #CFD69C !important;
border-top: 1px solid green !important;
border-left: 1px solid green !important;
border-right: 1px solid green !important;
}

.menu-item
{
border-bottom: 1px solid green !important;
}

.dynamic .menu-item
{
background-color: #CFD69C !important;
border: 1px solid green !important;
font-size: 10pt !important;
color: #676767 !important;
font-weight: normal !important;
}

Step: 05 - Go to Site  Settings  > Master Page and select my_nightandday.master page to your publishing pages. Click on save.

DONE ! Your left navigation menu is now having a cool fly-out behavior.

Integrating with External SQL Database through SharePoint 2010 Business Data Connectivity Services

One of the features of SharePoint is connecting with External Data like SQL, Oracle, Siebel, SAP etc. SharePoint provides two ways to do so. First one is an easier, code less way through SharePoint Designer which provides basic CRUD operations on external data. Second way is by developing a Business Data Connectivity Model through Visual Studio which enables us to write complex business logic.  

First, let’s explore how to connect with external data through SharePoint Designer.

consider, we have a custom table named Orders in our SQL Server 2008 DB (TestDB).

Open the SharePoint Designer and click on Open Site. 

A dialog will appear which will allow you to select your SharePoint Site. In my case, I have a SharePoint site at http://homestation/.

Select the site and click Open. 

SharePoint Designer will open the site for you. On the left hand side under Site Objects, click on External Content Types. 

Click on External Content Type ribbon button from the top.  

Click on Add Connection button to specify a new external data source connection.

A dialog will appear allowing you to select the Data Source Type. Select SQL Server as Data Source as we are going to connect with SQL Server 2008.

Specify your SQL Server Database Server and Database Name. In my case, its HomeStation and TestDB respectively.

Click on Ok button. Designer will populate all DB Objects for you to select in Data Source Explorer pane.

Right click on Orders table and then click Create All Operation from the menu.

A dialog will appear which will allow us to create basic Create, Read Item, Update, Delete and Read List functions.

After clicking next Paremeters Configuration dialog will appear. Select each field one by one and click on Show in Picker from the Properties panel.

After clicking Next, Filter Parameters Configuration dialog will appear. Filters are important performance factor to consider when we handle large volume of external data.

For now lets skip this step and click Finish.

Click on Save button. SharePoint Designer will take some time to save the changes.  

Click on Create Lists & Forms ribbon button. A Dialog will appear as below. Provide the List Name as Orders and click OK button.

Navigate to All Site Content page of your SharePoint site. SQL table Orders will be available for you as a Custom List (Orders).

Click on Orders List. You can see the data in the list populating from external SQL Orders table.

Add a New Item in the list and provide details.

Go to SQL Server and refresh the Orders Table. You can see the Item inserted from SharePoint Orders List is available in the table. Similarly you can perform Update and Delete actions on the list and changes will take effect directly on the table.

SharePoint Designer is a quick and easy way to explore SharePoint Business Data Connectivity features but in real world scenarios we have more complex logic.

In my next blog, I will explore Business Data Connectivity Model through Visual Studio which enables us to write custom business logic while integrating with external data.