All posts in SharePoint 2010

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:

  • 7 different Colours – Red, Yellow, Blue, Light Blue, Purple, Green, Light Green
  • 4 different layouts – Horizontal, Vertical, Horizontal Summary, Vertical Summary
  • XSLT Rendering – Change how you want the weather to render
  • Free Online API – http://www.worldweatheronline.com/.  Allows 500 API Calls an hour. (Please ensure if using a free API key that you keep the “Credit to World Weather Online intact”)
  • Caching – WebPart caches data every minute to ensure api limit is not reached.
  • CSS – Styled via css stored in Style library to ensure you are able to customise layout easier.
  • Multiple measures – Display speeds in mph, or km/h and temperature in Celsius or Fahrenheit

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 :)

SharePoint Metro Weather – Sneak Peak

weather_banner

I would like to just show off a new WebPart that is nearly ready for public release / testing by the community.  After a long time of SharePoint development I have become bored and disappointed at the styling of the various “Weather WebParts” that are available.  I decided to build my own which is not only free, but is styled my much loved “Metro Windows 8″ style.

metroweather

The Weather displays the current weather and up to 5 days forecast.  I am getting my weather data from http://www.worldweatheronline.com/ which provides a free Weather API which has a 500 requests/hr limit.  Therefore i have implemented caching into the webpart to ensure that this is not an issue.  I hope to finish the WebPart soon and it will also be rendered using XSLT to ensure that it is extensible to your requirements.

Let me know your initial thoughts on the design and the release will be coming VERY soon.

jQuery Collapsable Quick Launch – Plugin Update & Cookie States & 2013 Compatibility

Overview

Christmas is nearly with us and it has been a long while since my last post. To try and give some people a little Christmas cheer I am releasing part one of my new set of jQuery plugins for many of my Quick Tips that I have posted. Today’s update is to the ability for a user to hide / show the Quick Launch menu. Although the previous version worked well, there were a number of requests for new functionality which I have integrated into my new version. The new version also makes configuration MUCH easier and friendlier for non-techy types.

New Features:

  • Plug-in Architecture based on jQuery Boilerplate
  • Ability to set default state of the Quick launch (HideOnDefault)
  • Quick launch state is now saved across page views using Cookies. This can be turned off.
  • Re-written code.
  • Fully configurable for various scenarios (Have tested on OOTB & Custom Masterpages)
  • 2013 Compatible. I can confirm the plug-in works on the OOTB Seattle.master with no code changes (only plug-in configuration).

How to use:

The quick launch plug-in can be used and applied as follows:

Options:

The following default options are available:

No CSS is required for the plugin and the main plugin selector should be the side navigation div that you are hiding. So in the case of SharePoint 2010 this will be “#s4-leftpanel”

Full Usage (2010 / 2013)

2010 Full Usage (OOTB Masterpage)

2013 Full Usage (OOTB Masterpage)

Hope you enjoy this plug in and as always if you have any issues please let me know.

Download

Developer Version : jQuery.LISP.quicklaunch.js

MinifiedVersion : jQuery.LISP.quicklaunch.min.js

SharePoint 2013 Masterpage for SharePoint 2010 – Sandbox Solution

2010-2013

Overview

After some additional tweaking the the design and trying to match the functionality of the SharePoint 2013 interface as much as i could, a SharePoint 2013 masterpage is now ready for testing by my blog visitors.  The SharePoint 2013 Masterpage for 2010 has the following features:

  • SharePoint Sandbox Solution – Office 365 Compatible
  • Custom Site Actions Menu Link
  • “Focus on Content” – hide site navigation to allow user to focus on content only
  • Get the SharePoint 2013 interface without having to upgrade :)

As with my previous solutions they are all available via Codeplex and should you have any positive comments please leave them either here or on codeplex.

Thanks and I hope you all enjoy.

Download

Download the WSP from our codeplex site: http://lifeinsharepoint.codeplex.com/

Screenshots

Custom Homepage

OOTB 2010 Blank Site

OOTB 2010 Blog Site

OOTB 2010 Team Site

OOTB 2010 Team Site – Navigation Hidden

Custom 2010 Site Actions Menu

 

SharePoint 2013 Masterpage for SharePoint 2010 – Sneak Peek

Following on from the success and well received Metro Masterpage, I have decided to start building a SharePoint 2010 masterpage copying the SharePoint 2013 design.  This will enable those who want it to make your SharePoint “look” like 2013 even if the rest is the same.  Below is a screenshot of my current progress and if there is enough positive feedback / requests for this masterpage I will try to get it on codeplex as soon as I can.

Let me know your thoughts.