ALL IS well: 2012

V5, THE RESPONSIVE HTML5 MASTER PAGE FOR SHAREPOINT 2010

“v5.master” is a simple HTML5 master page designed for SharePoint 2010. It makes good use of the amazing new features of both HTML5 and CSS3, including CSS3 media queries. The master page is extremely simplistic in nature, and is truly meant to serve as a framework for building your own SharePoint 2010 customizations.

SharePoint Gets Responsive

SharePoint has a knack for being rigid and difficult to customize. I’ve been working with responsive layouts for a while now, but the nature of SharePoint has thus far prevented me from making something that is as flexible as, say, this WordPress blog you’re reading right now. It’s easy-peasy to do this in WordPress, but SharePoint simply does too much. When you create a layout in SharePoint, you’re creating a layout that encompasses much more than just pages: you’ll have to contend with pages, web parts, lists, libraries, blogs, wikis, search, meeting workspaces, team sites, calendars, and the list goes on. With so much content to contend with, creating something that can contract to any width is a tall order to say the least.

To me, at least, the answer was simple: ignorance. I’m ignoring every part of SharePoint that I don’t care about. 90% of the sites that I create in SharePoint are publishing sites: public-facing with a focus on pages, navigation, and web parts. Now, that’s a list I can handle. The v5 master page uses a fluid layout that drops to a single column when the display size shrinks below 800 pixels in width. Check out the screens to see the flexibility in action:

Large/Desktop Displays:

Medium/Tablet Displays:

Small/Mobile Displays:

Features

New HTML5 document type declaration
Revised <head> content to adhere to new HTML5 standards and best practices
New HTML5 semantic layout (<header>, <footer>, <section>, etc.)
Uses html5shim for backwards-compatibility
Responsive CSS3 media queries

Download v5.master

v5-masterpage.zip (16kb)

The v5 master page is provided completely free, released under the Creative Commons Attribution license 3.0.

Update Oct 26, 2011: Dércia Silva has been kind enough to create a deployable solution package, as well as a Visual Studio template, if you’d rather automate the deployment of this master page and related files. See Dércia’s post here.

Installation

Copy the v5.master file into the /_catalogs/masterpage/ folder of your SharePoint 2010 site collection.
Copy the entire v5 folder into the /Style Library/ document library, located at the root of your site collection.
Check in, publish, and approve all copied files.
Change your site and system master page to use the new file you created.
Optionally change the site logo setting to use the new logo image located at /Style Library/v5/i/v5.png.

Requirements & Assumptions

This master page was designed for SharePoint 2010, Enterprise and Standard versions.
This master page was designed and tested for SharePoint publishing and wiki sites. No other site templates have been tested.
Keep in mind that some SharePoint content simply doesn’t work well at smaller screen resolutions (lists with many columns, calendars, etc.). The focus is on external-facing sites with a lot of text- and image-based content.
The SharePoint front-end server must have internet connectivity to access Google’s hosted version of html5shim. If you do not have internet connectivity in your environment, download and use a local copy of this file.

Known Issues (Updated Jan 19, 2012)

A few people have encountered some issues with the v5 master page. Although I think the master page still works great (especially as a publishing master page), you may want to consider making these changes, depending on your SharePoint environment and how you choose to utilize the interface.

Error on “Save” in SharePoint dialogs (IE9) — this is caused by an error in Microsoft’s internal JavaScript files. This easily remedied by simply not using v5 master page as your “system” master page. If use a lot of system pages in your SharePoint site, you may also try adding the following line of code to the <head>section of your master page:
```
<meta http-equiv="x-ua-compatible" content="IE=8"/>
```
This forces newer versions of Internet Explorer to display in compatibility mode. Note that you’ll also lose CSS3 and HTML5 functionality when you add this to the master page (everything works, but the site will look a little more bland in IE).
Ribbon not appearing at the top of the browser window — I’ve had some mixed reports of this happening in Internet Explorer, but I think it’s actually an indication that the paths to the attached CSS and JavaScript files are incorrect. If you are deploying v5 master to any site other than the ROOT site collection, make sure you update all references to these files where appropriate.
Scrollbars appearing in SharePoint dialogs (Chrome, Firefox, Safari) — this is actually a side-effect of my ribbon/scrolling fix for SharePoint. SharePoint dialogs are still entirely functional, but the positioning and sizing of them just gets a little weird in any non-IE browser. Again, the idea is that the master page is optimized for publishing sites, which don’t make much use of these dialogs (if at all). If you have a lot of trouble with this, consider using a different system master page.

AJAX Accordion Control

Accordion Ajax Control

The Accordion Control is a part of the Microsoft Ajax Toolkit. The Accordion Control organizes your content into expandable Panes or Tabs which can be clicked to make the content of that Pane visible while hiding all the others. You can have virtually any HTML content inside the pane.

When used properly, the Accordion control can be a very effective UI element that can not only help you save costly screen real-estate, but will also make your site look more interactive and organized.

In this article we will learn how to use the Accordion Control in our websites, the different properties that can be modified to change the control appearance and the functionality that you can add.

Using the Accordion Control in Your Website

The Accordion control is one of the few independent or stand-alone controls in the Microsoft Ajax Toolkit. By standalone we mean that it does not extend the behavior of any existing ASP.Net control, and is instead implemented independently.

To add the Accordion control to your website begin by installing the Microsoft Ajax Toolkit on your computer, and reference the Microsoft Ajax Toolkit DLL in your project so that the Ajax controls appear in the Controls toolbox.

If you’re using Visual Studio 2008 then you must add a page of the type ‘Ajax Web Page’ in your project. This will automatically put in a reference to the Ajax ScriptManager control in the page, otherwise you can manually add the ScriptManager to the page. Like all Ajax Control in the toolkit, the Accordion control depends on the ScriptManager to run.

Drop the control on to your webpage by double clicking on the icon in the toolbox, or by dragging and dropping it into the toolbox. I recommend that you drop the control on the page in Source view. It will help you place it accurately

Try shifting to the Design view now. Notice that nothing is visible on the design view yet. That is because the Accordion Control is a Container control. The control will display only content that’s placed in an Accordion Pane inside it.

Let’s see the full code for an Accordion control with two panes in it, and analyze the code bits.

<cc1:Accordion ID="Accordion2" runat="server" SelectedIndex="0">
    <Panes>
        <cc1:AccordionPane ID="AccordionPane1" runat="server">
            <Header>
                Heading
            </Header>
            <Content>
                Content
            </Content>
        </cc1:AccordionPane>
        <cc1:AccordionPane ID="AccordionPane2" runat="server">
            <Header>
                Heading
            </Header>
            <Content>
                Content
            </Content>
        </cc1:AccordionPane>
    </Panes>
</cc1:Accordion>

This is the bare minimum code required to display an Accordion control on a page. Quite a bit isn’t it? And the display you’ll get out of it isn’t anything useful.

To make it look pretty we have to work a little more. But before that, let’s understand how the Accordion control works.

Components of Ajax Accordion Control

Panes – The Accordion Panes must be placed inside the Panes tag. If you do not place the Accordion Panes in the Panes tag, they will not be recognized.

Accordion Pane – This is the control which will hold the content of the panes. You can have multiple Accordion Panes inside the Accordion control.

The Accordion Pane control is divided into two parts, the Content and the Header. The Header is the part that will be displayed for all the Panes, while the Content will be displayed only for the active Pane. If you click on the header of some other pane, the active content will be hidden, and the content of that pane will animate into view.

SelectedIndex – This is a property of the Accordion control. It is used to mark which Accordion Pane will be have its Content visible when the page is first loaded. It’s a 0 based collection.

Remember that each Accordion Pane in the Accordion control will have its own ID. This is to allow you to control the Accordion Pane in code.

Enhancing the Look of the Control

In its present state the control is useless even though it animates the panes because it looks very unimpressive. Fortunately the Accordion control supports CSS styling, and you can specify how you want the Accordion control to look with a few settings. Here are the properties that you can use to set the CSS classes for the Accordion.

ContentCssClass – Styling for the material which is inside the Content portion of the Accordion Panes.
HeaderCssClass – Styling information for the header part of the Accordion Panes.
HeaderSelectedCssClass – You can specify different CSS settings in this property if you want the selected CSS header to look different.

We have created two Sample CSS classes for our Accordion.

    <style>
        .AccodionHeader
        {
            background-color: Blue;
            color: Yellow;
            border: solid 1px green;
        }
        .AccordionContent
        {
            background-color: Yellow;
            color: brown;
            font-size: 12px;
            font-family: Verdana, Arial, Helvetica;
        }
    </style>

This is how the accordion pane looks when the settings are applied.

Notice the difference between the version with stylesheets? We have set up only the background and foreground colors, and it’s looking much more organized than the original version. Though we’ve selected rather garish colors, you can pick any color scheme you want and make this look really attractive.

You can highlight the header of the selected Pane by setting the CSS property for HeaderSelectedCssClass.

If you’re not in mood to write CSS, you can also exercise limited control over the appearance using AccordionPane properties like BackColor, Font-Name, Font-Size, etc., but I really do recommend using CSS for this because it will give you much better control over things.

Some More Properties of the Accordion

Here are some more properties of the Accordion Pane that you can set to modify the behavior of the Accordion control.

FadeTransitions – If you set this property to true, the Panes will change with a fade effect when the header is clicked. I.e. the pane going out of view will fade out as it animates. Pretty neat.

FramesPerSecond – This decides how smooth the animation is. Usually this should be set to around 35-45. Keep it too low and the animation will be jerky. Keep it too high and the computer may not be able to render it well if it’s a slow computer.

TransitionDuration – The length of the animation in milliseconds. A length of 1000 means 1 second.

RequireOpenedPane – If this property is set to true, at least one of the panes will be required to be open.

Binding Accordion to a DataSource

The Ajax Accordion is a Data aware control. This means that you can bind it to a data source. The data source can be a collection, or a DataSet that’s drawn from a database. To do data binding, you must set the HeaderTemplate, and the ContentTemplate to setup the data. In this case you will not have any Accordion Panes in the control as they will be generated on the runtime.

You can use any Data Aware control inside the Accordion including labels, text boxes, or even datagrids.

Accordion in Code-Behind

Like all standard ASP.Net controls, Accordions can be controlled from the code-behind too. Though it’s primarily a container control, so you wouldn’t have many situations in which you would want to do this.

You can place any standard ASP.Net control inside the Accordion and use it in Code-Behind. You can also attach events to the controls and process them.

Let’s learn how we can make some real good Ajax magic happen inside the Accordion.

Let’s drop an ASP.Net textbox inside our Accordion control, and let’s drop a button to change the textbox content. Here’s how our Ajax control looks now.

Now if we were to change the text of the Textbox in the Clicked event of the button, we would write the code like this:

    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.Text = "Gubba";
    }

Try clicking the button after writing this code. Notice the refresh? Yep. If you write code for ASP.Net controls the controls will post-back when the event occurs and you will still have to endure that pesky refresh.

Luckily there is a workaround, another control from the Ajax Toolkit. Just put your Accordion control inside an UpdatePanel and everything will work without a Postback. Here’s how to write this code.

Let’s go back to our code-behind module and get even more radical. Have a look at the following code.

Yes, if the Accordion is inside an Updatepanel you can even change the visible Pane of the Accordion control itself. This is very useful if you want to have a button that changes the Accordion Pane from outside. Unfortunately it will not animate the way it animates when the header is clicked.

Conclusion
This concludes our tutorial of the Microsoft Ajax Accordion Control.

One important thing to remember is that the Accordion control pre-loads all of the data that’s in the panes when the page first shows up. So if you have a lot of data, all of it will be loaded before the page renders. If you put too much material in the Accordion, the page will take longer to load.

Don’t use the Accordion as an alternative for complete Pages, instead use it as an attractive UI element that spices up the look of your page, and makes it more interesting. I am sure you have seen Accordion like behavior on many websites, and can figure out where to make them look best.
-Maha....

ALL IS well

Monday, August 27, 2012

V5,THE RESPONSIVE HTML5 MASTER PAGE FOR SHAREPOINT 2010