Thursday, August 30, 2012

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.
     

Wednesday, August 29, 2012

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

SharePoint 2010: Howto start customize list form (New/Edit/View) using InfoPath Designer 2010

In SharePoint 2010 there we have more option to customize list form. For instance, you can use SharePoint Designer 2010 or InfoPath Designer 2010. Since modifying list form using SPD is already exist in previous version. I will just show you how to customize list form using InfoPath Designer 2010.
When customizing list form using InfoPath Designer 2010, you will get all form designer benefit. For example, you can define the field validation rules, parent-child relation etc. And bet what, the process is straight forward. In this very basic how-to, I will demonstrate how to start customize list form using InfoPath Designer 2010. I will create an Book List with “Title” – “Author” – “Status” column. In the New form, I will only show “Title” and “Author” – while in Edit form, “Title” and “Author” will be readonly, but “Status” is editable.
How to customize list form using InfoPath Designer 2010.
  1. Prepare the custom list.

    Prepare custom “Book List” with 3 columns: “Title” – “Author” – “Status”. “Status” field is choice “Available” – “In Used” – “Missing”. After creating the list and preparing columns, we can start to use the list and add a new item in this form.
  2. Start InfoPath Designer
    Start InfoPath Designer and select to design SharePoint List form.

    Type in the SharePoint site URL

    And then select the Book List from the list of available data.

    Finally, click on Finish.
  3. When the form editor open , you can start to edit the New form. I add a title “Book List Entry” and delete the “Status” row.


    And here is the result:
  4. Add “Edit Form” view in the designer, and set Title and Author as readonly.


    Type-in the view title.

    Design the form – add “Status” column in the form.

    Set “Title” and “Author” textbox property to “ReadOnly”

  5. Publish the form to the list.

  6. Configure the “Book List” to use designated form.
    Open the list setting page, and expand context menu for the Forms.

    Since the first view will be the default – our interest is only to the “(Item) Edit Form”. Click on (Item) Edit Form link, and change the Form view.
    You will realize that now you are seeing form services in web part.

    Click on Web Parts Tools tab, and then click on Web Part Properties.

    In the Web Part Properties, select the designated view.
  7. And here we go with the custom “New Form” and “Edit Form” for the list.
    New Form.

    Edit Form.

    Happy design