tomo

Create a weather feed using Nintex Workflow

Blog Post created by tomo on Jan 18, 2015

In this post I will be running through the process of creating a customisable weather feed using Nintex Workflow and the Content Query Web Part (CQWP). I've seen quite a few weather web parts out there but for the most part I have found them to look quite dated. Nintex Workflow introduces a Live Catalog of actions that can be installed and provide the ability to interact with various services on the web. One of these actions provides the ability to retrieve data from the Weather Underground. In this example we will populate a SharePoint list with the data retrieved from this service and then use this to drive an attractive weather feed.

 

The final result will look something like the screenshot below, since we are styling this with XSLT it offers us an additional level of flexibility by being able to customise it to our liking.

1.png

Create the list

Create a custom list with the following columns, this can be called anything you like, I imaginatively called mine ‘Weather’.

 

Column NameTypeRequired
CitySingle line of textYes
CountrySingle line of textYes
UnitChoice:
Celsius
Fahrenheit
Yes
TemperatureSingle line of textNo
ForecastSingle line of textNo
Last UpdatedDate and TimeNo

 

Populate the list with one or more entries, include the city, country and the unit that you would like the temperature to be returned in (Celsius or Fahrenheit).

2.png

Create the workflow

We will create a site workflow that reads in the city names from the Weather list and then fetches the associated weather observation data and then writes this information back.

  1. Start creating a site workflow by clicking the settings cog and select Nintex Workflow 2013 > Create Site Workflow.
  2. Create the following variables, these variables will be used throughout the workflow.
    Variable NameType
    TempNumber
    ForecastMultiple Lines of Text
    Last UpdatedMultiple Lines of Text
    UnitSingle Line of Text
    CitiesCollection
    City List ItemSingle Line of Text
    City NameSingle Line of Text
    CountrySingle Line of Text


  3. Drag the Query list action on to the workflow designer and configure it as follows.
    3.png
  4. Next we will use a For Each loop and configure it with the following settings.
    4.png
  5. Add a Query List action within the For Each loop and configure it with the following settings.
    5.png

  6. Now that we have gathered the city details we can query the Weather Underground service. If you haven’t added this action to your environment it will be necessary to open the Nintex Live Catalog and add the action. The availability of this feature is dependent on whether it has been allowed/enabled in your environment. If all is good, you should see a ribbon icon for the Nintex Live Catalog while in the Workflow Designer.

  7. Click the Catalog icon and do a search for ‘Weather’, the following action will appear. Click the Add button, once complete it will show as Added.
    6.png
  8. Close the Catalog window and add the Wunderground Weather action to your workflow. This will sit inside our For Each loop and will occur after querying for the City details. Open the action and configure it with the following details.
    7.png
  9. The last step in the workflow is to update the list item with the current observation data. Drag an Update Item action into your workflow, still within the For Each Loop and configure it with the following settings.
    8.png

Use the Content Query Web Part to display the results on a page

I’ve created the following basic XSL template, the cool thing about this is that you have full control to easily modify the way the weather appears on your page. This provides you with a heap of control, much more than you would otherwise have if you used a third party web part.

 

The Content Query Web Part by default uses styles that reside in the Style Library of your site collection. The template below will be added to the ItemStyle.xsl.

 

 <xsl:template name="Weather" match="Row[@Style='Weather']" mode="itemstyle">
 <xsl:variable name="icon">
    <xsl:choose>
       <xsl:when test="@Forecast = 'Chance of Flurries'">chanceflurries</xsl:when>
       <xsl:when test="@Forecast = 'Chance of Rain'">chancerain</xsl:when>
       <xsl:when test="@Forecast = 'Chance Rain'">chancerain</xsl:when>
       <xsl:when test="@Forecast = 'Chance of Freezing Rain'">chancesleet</xsl:when>
       <xsl:when test="@Forecast = 'Chance of Sleet'">chancesleet</xsl:when>
       <xsl:when test="@Forecast = 'Chance of Snow'">chancesnow</xsl:when>
       <xsl:when test="@Forecast = 'Chance of Thunderstorms'">chancetstorms</xsl:when>
       <xsl:when test="@Forecast = 'Chance of a Thunderstorm'">chancetstorms</xsl:when>
       <xsl:when test="@Forecast = 'Clear'">clear</xsl:when>
       <xsl:when test="@Forecast = 'Cloudy'">cloudy</xsl:when>
       <xsl:when test="@Forecast = 'Flurries'">flurries</xsl:when>
       <xsl:when test="@Forecast = 'Fog'">fog</xsl:when>
       <xsl:when test="@Forecast = 'Haze'">hazy</xsl:when>
       <xsl:when test="@Forecast = 'Mostly Cloudy'">mostlycloudy</xsl:when>
       <xsl:when test="@Forecast = 'Mostly Sunny'">mostlysunny</xsl:when>
       <xsl:when test="@Forecast = 'Partly Cloudy'">partlycloudy</xsl:when>
       <xsl:when test="@Forecast = 'Partly Sunny'">partlysunny</xsl:when>
       <xsl:when test="@Forecast = 'Freezing Rain'">sleet</xsl:when>
       <xsl:when test="@Forecast = 'Rain'">rain</xsl:when>
       <xsl:when test="@Forecast = 'Sleet'">sleet</xsl:when>
       <xsl:when test="@Forecast = 'Snow'">snow</xsl:when>
       <xsl:when test="@Forecast = 'Sunny'">sunny</xsl:when>
       <xsl:when test="@Forecast = 'Thunderstorms'">tstorms</xsl:when>
       <xsl:when test="@Forecast = 'Thunderstorm'">tstorms</xsl:when>
       <xsl:when test="@Forecast = 'Unknown'">unknown</xsl:when>
       <xsl:when test="@Forecast = 'Overcast'">cloudy</xsl:when>
       <xsl:when test="@Forecast = 'Scattered Clouds'">partlycloudy</xsl:when>
    </xsl:choose>
 </xsl:variable>
 <div class="weather">
    <div class="weather-icon">
       <img>
          <xsl:attribute name="src">
               <xsl:value-of select="concat('http://icons.wxug.com/i/c/k/',$icon,'.gif')"/>
          </xsl:attribute>
          <xsl:attribute name="alt">
               <xsl:value-of select="@Forecast"/>
          </xsl:attribute>
       </img>
    </div>
    <div class="city-details">
       <div class="city"><xsl:value-of select="@City"/></div>
       <div class="temp">
          <xsl:value-of select="@Temperature"/>
          <xsl:choose>
             <xsl:when test="@Unit = 'Fahrenheit'">
                <xsl:text> °F</xsl:text>
             </xsl:when>
             <xsl:when test="@Unit = 'Celsius'">
                <xsl:text> °C</xsl:text>
             </xsl:when>
          </xsl:choose>
          <xsl:text> - </xsl:text><xsl:value-of select="@Forecast"/>
       </div>
    </div>
 </div>
 </xsl:template>

 

Add the following CSS to the page that you will be displaying the weather on, this can be done in a number of ways e.g. adding a custom stylesheet to your masterpage or adding the CSS directly on the page.

 

.weather {
  display: block;
}


.weather-icon {
  padding: 5px 10px 0px 0px;
  float: left;
}


.city-details {
  padding: 10px 10px 10px 0px;
}


.city-details > .city {
  font-weight: bold;
  font-size: 1.2em;
}


.city-details > .temp {
  font-size: 1.1em;
}

 

Once you have done this your weather feed is complete. The site workflow can be easily scheduled ensuring the data presented is current and up to date.

Outcomes