SharePoint Hosted App to retrieve local weather information

30. April 2015 06:08 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
In one of my previous post I explained how to get current user locale information like city, country, latitude, longitude, IP address using SharePoint hosted app. In this post I have taken one further step and get the weather information of current logged in user's location. Follow the below steps to achieve the same results Create new SharePoint hosted app project inside visual studio. Edit the “app.js” file and replace the code with below code. Remember to update APIKey variable value in below code. You can new APIKey from https://developer.forecast.io/register and it is free. jQuery.ajax({ url: '//freegeoip.net/json/', type: 'POST', dataType: 'jsonp', success: function (location) { jQuery('#city').html(location.city); jQuery('#longitude').html(location.longitude); jQuery('#latitude').html(location.latitude); jQuery('#country-name').html(location.country_name); GetWeatherInfo(location.latitude, location.longitude); } }); function GetWeatherInfo(lati, longi) { var APIkey = 'API Key' // Get a new key from https://developer.forecast.io/register and it is free var urlForecast = 'https://api.forecast.io/forecast/'; var unit = 'si'; // "si" is shortcut for Celsius and "us" is shortcut for Fahrenheit jQuery.ajax({ url: urlForecast + APIkey + "/" + lati + "," + longi + "?callback=?&units=" + unit , type: 'GET', dataType: 'jsonp', timeout: 3500, success: function (data) { $('#currentTemp').html(data.currently.temperature.toFixed(0)); $('#minTemp').html(data.daily.data[0].temperatureMin.toFixed(0)); $('#maxTemp').html(data.daily.data[0].temperatureMax.toFixed(0)); $('#humidity').html(data.currently.humidity); $('#windSpeed').html(data.daily.data[0].windSpeed.toFixed(0)); $('#windBearing').html(data.daily.data[0].windBearing.toFixed(0)); $('#visibility').html(data.daily.data[0].visibility.toFixed(0)); $('#cloudCover').html(data.daily.data[0].cloudCover.toFixed(0)); $('#pressure').html(data.daily.data[0].pressure.toFixed(0)); $('#summary').html(data.currently.summary); } }); } On default.aspx page replace the “PlaceHolderMain” control with the following code <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> <label for="city">City: </label><label id="city"></label> <br /> <label for="country-name">Country: </label><label id="country-name"></label> <br /> <label for="currentTemp">Current Temprature: </label><label id="currentTemp"></label> <br /> <label for="minTemp">Min Temp: </label><label id="minTemp"></label> <br /> <label for="maxTemp">Max Temp: </label><label id="maxTemp"></label> <br /> <label for="humidity">Humidity (0-1): </label><label id="humidity"></label> <br /> <label for="windSpeed">Wind Speed (km/h): </label><label id="windSpeed"></label> <br /> <label for="windBearing">Wind Bearing: </label><label id="windBearing"></label> <br /> <label for="Visibility">Visibility (km): </label><label id="visibility"></label> <br /> <label for="cloudCover">Cloud Cover: </label><label id="cloudCover"></label> <br /> <label for="pressure">Pressure (mb): </label><label id="pressure"></label> <br /> <label for="summary">Summary: </label><label id="summary"></label> <br /> </asp:Content> Press F5 and see the magic  My Results A user from London Office   You can build UI something like below using css once you have all the weather information in hand.       Happy SharePoint coding 

Simple SharePoint hosted App “User Location Tracker”

27. April 2015 08:24 by Rashid Aziz in Sharepoint blogs  //  Tags: ,   //   Comments
You can follow the below steps to get user location information inside your SharePoint hosted app. Create a “SharePoint Host App” project in visual studio 2013 Replace app.js contents with below code jQuery.ajax({ url: '//freegeoip.net/json/', type: 'POST', dataType: 'jsonp', success: function (location) { jQuery('#city').html(location.city); jQuery('#region-code').html(location.region_code); jQuery('#region-name').html(location.region_name); jQuery('#ip').html(location.ip); jQuery('#longitude').html(location.longitude); jQuery('#latitude').html(location.latitude); jQuery('#country-name').html(location.country_name); jQuery('#country-code').html(location.country_code); } }); On default.aspx page replace the “PlaceHolderMain” control with the following code <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> <label for="city">City: </label><label id="city"></label> <br /> <label for="country-name">Country: </label><label id="country-name"></label> <br /> <label for="country-code">Country code: </label><label id="country-code"></label> <br /> <label for="region-name">Region: </label><label id="region-name"></label> <br /> <label for="region-code">Region code: </label><label id="region-code"></label> <br /> <label for="latitude">Latitude: </label><label id="latitude"></label> <br /> <label for="longitude">longitude: </label><label id="longitude"></label> <br /> <label for="ip">IP address: </label><label id="ip"></label> <br /> </asp:Content> Press F5 and see the magic  My Results A user from London Office    A user from Amsterdam office    This is just the basic user location specific information I have managed to get using http://freegeoip.net free web service. Now you can use this information to drive user experience in you SharePoint environment. Good luck!

Stay connected

SharePoint Links

Month List