All posts tagged SharePoint

LifeInSharePoint – Metro Weather WebPart

metroweatherwebpart

UPDATE :

Due to an update to the World Weather Online API to a new one, the WebPart is currently having issues raised in the comments. I am working on bringing you an update with the new API and also trying to include time information as well. If you are able to be patient I will bring this asap. Thanks.

Overview

After a couple of days tweaking, and adding some additional functionality, I am happy to release the first version of the Metro Weather WebPart. This WebPart was created due to the lack of (in my opinion) good looking weather WebParts available. The WebPart has multiple modes, built in caching, XSLT rendering and a great look. See below for the release and its features.

Features:

What it looks like:

Now you know the features how about we show you how the webpart looks when it is installed on the page.

Horizontal:

This mode shows the locations horizontally tiled from left to right and when you click on a specific location the forecast will fly out “Horizontally” to the right to show the day of the week, the weather, the temperature (in centigrade or fahrenheit) and the wind speed (in mph or kph).

weather_horizontal

Vertical:

This mode shows the locations horizontally tiled from left to right and when you click on a specific location the forecast will fly out “Vertically” to the bottom to show the day of the week, the weather, the temperature (in centigrade or fahrenheit) and the wind speed (in mph or kph).

weather_vertical

Horizontal Summary:

This mode shows the locations in a single fixed widget displayed “Horizontally” with prev and next buttons to the left and right of the forecast. The weather, the temperature (in centigrade or fahrenheit) and the wind speed (in mph or kph) is shown for each day in the forecast.

weather_summary_horizontal

Vertical Summary:

This mode shows the locations in a single fixed widget displayed “Vertical” with prev and next buttons to the left and right of the forecast. The weather, the temperature (in centigrade or fahrenheit) and the wind speed (in mph or kph) is shown for each day in the forecast.

weather_summary_vertical

How to use:

To use the new Metro Weather WebPart first download and upload the solution to your site collection. After you have activated the feature you are then able to add the WebPart onto the Page and configure the webpart to display the weather information of your choice.

The WebPart has the following properties that can be configured at set:

  • – This is the most complex property to complete. This is a comma and semi-colon delimited string which will configure the location that will be displayed, its colour and if required a different display name.
    • The string should be in the following format: Location{Display Name},Colour;Location{Display Name},Colour
    • Examples from the screenshot above would be: London,red;Las Vegas{Sin City},blue;New York,green;
    • If you emit the {Display Name} then the city name from the xml results will be displayed instead.
    • The avaliable colours are shown in the features above.
  • – This sets the number of days forecast that can be displayed. (The Free API enabled a max of 5)
  • – Before you are able to use the webpart you will need to sign up for an API key at http://www.worldweatheronline.com/register.aspx
  • – This is the XSLT path for the WebPart. The default setting should be: http://servername/Style Library/LifeInSharePoint.Weather/xslt/Weather.xslt
  • – Sets the display type of the WebPart. Horizontal, Vertical, SummaryHorizontal, SummaryVertical.
  • – Sets the temperature setting to either centigrade, or fahrenheit.
  • – Sets the wind speed to be displayed in either Mph, or Kph.

Download

To download this webpart please visit our Codeplex site and as always if you like it please leave a review, and if you find any issues or bugs either let me know via this site or the codeplex site.

Conclusion

I really hope that this webpart comes in handy for the SharePoint community. Really hope you all like it :)

iGoogle UI for SharePoint 2010 – Part Four: Control Adapters

Series Content

  1.     Part One – Overview, Concept,  HTML Structure & jQuery Basics
  2.     Part Two – Dragging, Dropping,  Sorting and Collapsing
  3.     Part Three – Saving WebPart states using Cookies
  4.     Part Four – Control Adapters – Current Article
  5.     Part Five – SharePoint 2010 Integration
  6.     Part Six – Bringing it all together
  7.     Bonus – Saving WebPart States using the Client Object Model

Overview

In Part Four we will take the take a look at how we will create our widgets in SharePoint 2010.  As the title of this post mentions we are going to use what is known as a Control Adapter.  This Post will outline what they are, how they work, and how we are going to use them in this series.  There will also be a code snippet to explain how we can use it.

Control Adapters

Rather than try to explain these myself I thought it would be easier to grab a snippet from a Microsoft Article which i think does a great job of explaining what and how they work from an architectural level and in more detail than I could probably achieve :).

At their core, control adapters are simply a way of providing different renderings for controls without actually modifying the controls themselves. Because control adapters are designed to provide alternate renderings for different clients, you specify control adapter mappings in a .browser file, which is where associations between User Agent strings and browser capabilities are defined. The control adapter class itself must inherit from the System.Web.UI.Adapters.ControlAdapter, which is an abstract base class that looks much like the Control base class, with events for Init, Load, PreRender, and Unload, as well as a virtual Render method.

The next step to use a control adapter is to derivatively bind your adapter to a specific control.  To do this you use a Browser Definition File Schema which is found in the App_Browsers folder of the IIS WebSite you are using.

How are we going to use Control Adapters?

Now we know what a control adapter is, what do we need them for?  Well, if we are going to have our WebPart rendering like we have built in the previous three post then we will need to use a Control Adapter to do the hard work for us.  WebParts can be placed onto a SharePoint 2010 Page in many ways.  They can be either added to content inline using the rich content editor, they can be added directly into a page layout or masterpage, or (the most common way) is that they can be placed into a WebPart zone.  It is this final method that we are going to use to modify the rendering of our WebParts.

A basic WebPart Control Adapter Code looks like this:

As you can see from the code above we have a class which inherits from System.Web.UI.Adapters.ControlAdapters.  We first get a reference to the current WebPartZone on the Adapter.  If this is not null then we can start to override the WebPart rendering.  We then check how many WebParts exist in the current WebPartZone that we are in and if there are some then we create a new WebPartCollection object with all the WebParts in the current zone.

We can then loop through each WebPart in the collection and render the WebPart control.   This alone will remove all the tables for each WebPart rendered in a WebPartZone.  The final step to get this basic Control Adapter working is to update the compact.browser file stored (in my case) in the inetpub > webapp > App_Browsers > compact.browser file.

We need to add a single line into the <controlAdapters> node to register our new custom adapter.

Save this file and ensure that the dll is in the GAC and then the control adapter should work.  One thing that is important to know about Control Adapters is that when they are in use they will by default process EVERY WebPart on the site.  For our implementation however we want to be able to choose which WebParts are rendered as our widgets.  To do this we will place some logic into our control adapter which will check the title of the WebPartZone to ensure it contains the text “iGoogle” and only process WebParts that are contained within those specific zones.  Another piece of logic that we need to place into our zones is that we only want our rendering to process WebParts when the page is in the Display mode and not in Edit mode.  The code below shows the updated adapter with the new pieces of logic included.

As you can now see we have first added a line to get a reference to the current WebPartManager on the page which will enable use to get the state of the page and check if we are in display or edit mode.

We are then able to set a boolean value to the state of the page.

The final step is to wrap a new if statement around the render code which will control when the table removal is processed.

When this code is run only WebPartZones with the iGoogle text value in the title will be rendered.

Adding the Widget Code Wrapper

Now that we have the basics sorted for our Control Adapter we now need to wrap our widget code around the render control and this can be done like it would be done in a normal WebPart.  We need to add the following code and replace it within the foreach loop around for each WebPart.

Those who have been following the previous three posts will recognize the HTML from above.  I have use the writer object to inject the HTML and have also ensured that the ID of my widget wrapper div is generated from the current WebPart ID – (wp.ID), and the title of the WebPart is injected into the <H3> tag.

Summary

That wraps up part four of the iGoogle series.  The next post will be to integrate the code above into a SharePoint 2010 solution and include some of the extra pieces such as CSS to enable the this solution to come to life.  The final code for this Control Adapter is shown below.  Thanks for reading and all the positive feedback is greatly appreciated.

 

Metro UI – SharePoint Masterpage for Sandbox Solutions

Just a quick note that i have updated and created a blue themed wsp which now works in a Sandbox Solution.

http://lifeinsharepoint.codeplex.com/releases/view/78033

Hope this helps some people.

Quick Tip – jQuery Accordion for SharePoint 2010 Quick Launch

accordion_header

I thought that i would share a quick piece of code that you can use on your SharePoint sites to change the Quicklaunch from a standard view to an “accordion” style version using jQuery. The following code uses the OOTB v4.master so may not work if you have customised your design. (Changes to selectors should be all that would be required to get it working with your own design)

As you can see the jQuery is pretty simple. Firstly we need to get a reference to the jQuery library. (we have the version hosted with Microsoft. If you have a server which does not have internet access, you will need to download and reference a locally stored version of the library).

Next is to hide all of the children of the quicklaunch items so we are left with just the headings.

The Next step is to capture when the user hovers over the headings. When they do this they need to find the first anchor tag in the current <li> element and for the next element in the DOM (which is the UL) perform a slide toggle which will animate the accordion. When you hover the mouse off the item the alternate function is run the same code again which will reverse the accordion.

The final step is to add a count of the number of children into each of the headings. This will provide the end user with an indicator telling them an item as some hidden items. So with the current child <ul> we need to get the parent item (the heading) and get the text inside the anchor tag. To this anchor tag we append the number of items using the $this.children().length code block.

Finally you need to insert this into your masterpage using SharePoint Designer and thats it. I hope this quick tip was useful. I will hopefully be adding some more soon.

Please let me know how you get on.

Metro UI – SharePoint 2010 Masterpage & Solution : UPDATED

metroheader

So today i have released onto Codeplex a SharePoint 2010 Masterpage design which is inspired from the Metro UI of Windows 8.  The design has the following features:

  • Liquid Layout
  • Cufon Integration
  • Jquery Accordion Quicklaunch with Sub Item Count
  • Full Solution with single Site Feature to activate branding (Thanks CKS:Dev Team)
  • Custom Site Settings Action to choose one of three colour schemes (Green, Blue & Red)

If you would please leave me comments be it positive or negative they are all welcome.  I hope you enjoy and if you come across any bugs please let me know and i can fix them.

Download

To download the wsp please click here and get it from our CodePlex Site.  Enjoy :)