Check the difference between two dates with a custom JavaScript implementation

This might be useful if you are having problems with different browsers and how they handle JavaScript and date + time data.


var duedateString = "you due date time value here";

 var today = new Date();

 var ddYear = parseInt(duedateString.substring(0 ,4));
 var ddMonth = parseInt(duedateString.substring(4 ,6));
 var ddDay = parseInt(duedateString.substring(6 ,8));

 var yearDifference = ddYear - (today.getFullYear()) ;
 var monthDifference = ddMonth - (today.getMonth() +1);
 var dayDifference = ddDay - (today.getDate());
 var stringDueDateParsed = duedateString.substring(6 ,8) + "." + duedateString.substring(4 ,6) + "." + duedateString.substring(0 ,4);
 var dueDate = new Date((ddYear),(ddMonth),(ddDay));

 var totalDifference = 0;

 if(yearDifference < 0)
 {
 totalDifference = -1;
 } else if(yearDifference > 0)
 {
 totalDifference = 1;
 } else if(monthDifference < 0)
 {
 totalDifference = -1;
 } else if(monthDifference > 0)
 {
 totalDifference = 1;
 } else if(dayDifference < 0)
 {
 totalDifference = -1;
 } else if(dayDifference > 0)
 {
 totalDifference = 1;
 } else
 {
 totalDifference = 0;
 }

 // the dates are equal
 if(totalDifference === 0)
 {
 // do something
 }
 // The dueDate is greater than the current date, in the future
 else if(totalDifference > 0)
 {
 // do something
 }
 // The dueDate is smaller than the current date, in the past
 else if(totalDifference < 0)
 {
 // do something
 }

How to display all of the refinement options in SharePoint 2013 Search results

By default for some reason, I could not show all of the items, I could define how many items are shown and but not get rid of the “show more” links under the refinements.

This JavaScript snippet can help you. It will hide the “short list” containing a minimum of items to be displayed, then it will show the long list and finally it will hide the “show more” link.

</pre>
<script>
 $( document ).ready(function() {
$('#unselLongList').show();
$('#unselShortList').hide();
$('#unselToggle').hide();

});
</script> 

SharePoint CORS fix

This is possible fix for the a possible calls made from one application to your SharePoint side that is located in another domain.

In your SharePoint application add the following custom headers to enable requests from a different domain. Just change the header: Access-Control-Allow-Origin to point to the application who is making a call to your SharePoint application.

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name=”Access-Control-Allow-Credentials” value=”true” />
        <add name=”Access-Control-Allow-Origin” value=”http://source-application.com​&#8221; />
        <add name=”Access-Control-Request-Method” value=”GET,POST,HEAD,OPTIONS” />
      </customHeaders>
    </httpProtocol>​
</system.webServer>​

Also if you are making an AJAX call add the following parameter to the call:
xhrFields: { withCredentials: true }

 

Sample code:

jQuery.ajax({
 url: requestUri,
 type: 'GET',
 dataType: 'json',
 headers: requestHeaders,
 xhrFields: { withCredentials: true },
 success: function (data)
 { 

 },
 error: function ajaxError(response) {
 console.log(response.status + ' ' + response.statusText);
 }
 });

Other possible parameters for the AJAX call:

crossDomain: true
And for CORS support:
$.support.cors = true;

A bit more detail can be found here in this post:
https://blog.kenaro.com/2014/03/18/cross-site-scripting-with-sharepoint-2013-rest-calls/

Hiding and showing HTML elements with ASP .NET

Hi,

Ok, this is probably a quite simple thing to do and maybe everyone knows it BUT just in case… :).

Well, you need two things a C# code(or some other way to ouput HTML) to generate and anchor link by which to display or hide a given HTML element.

In this case, let’s say that you have a DIV element. You assign as the ID value the client ID which your control receives from ASP .NET(notice that the unique ID or the ID but the ClientID, it is HTML friendly).

Then you would do something like the code below. You are calling a JavaScript function which receives as parameters the full ID for the DIV element and the start of the DIV full id.

The idea is to be able to identify all of the elements which are under this same hide and show logic while still being able to identify a single item.

Exmaple ID:
id =”cars_ASP.NETUserControlClientID_carnumber”

The bolded part would be used to identify ALL of the items which need be processed at the same time. While the non-bolded value(carnumber) is the identifier for a single item.

The C# code below creates an anchor calling the function below the C# code. Notice the href definition “javascript:void(0)“, this is to avoid page jump in certain browsers and their versions.

String.Format("<a href=\"javascript:void(0)\" onclick=\"showInfo('{0}','{2}')\">{1}</a>", "HTML Element ID to find unique counter or ID" + this.ClienID, "The link title/name", this.ClienID);

function showInfo(id, controlUniqueID) {
// Search for all items and hide them
 $('*[id*=' + controlUniqueID + ']').each(function () {
 $(this).hide();
 });

// Next open only the item which you want to see
 if ($('#' + id).css('display') == 'none') {
 $('#' + id).show();
 }
 else {
 $('#' + id).hide();
 }

 }

How to use: Azure Service Bus – Notification hub, Azure hosted SignalR Hub with .NET clients, Android clients and web JavaScript clients

Huh that is a looong title for a blog post :). It is easier for me to write these all in one post since they are related the code in this case. So here I go, bear with me, it’s going to be alot of stuff and code.

The codes and examples here are from the own personal technology workbench project hosted in Azure. More code and examples how these features and functionality work can be found here.

I will go in the following order with the topics covered in this post:

  • Notification Hub
    • Setting up the Azure Service Bus – Notification Hub
    • Connecting with a .NET Client and sending messages
    • Connecting and listening to messages with an Android device client
  • SignalR Hub
    • Setting up a Azure hosted SignalR hub
    • Connecting and listening to activities with the following clients:
      • Connecting with the .NET Client
      • Connecting with the JavaScript client
      • Connecting with the Android client

Notification Hub

Some links to get you started:

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-push-notifications-app-users/

Setting up the Azure Service Bus – Notification Hub

I wont go into much details here. Microsoft has done a great job documenting these steps, I recommend you go to the following link and follow the first part of these instructions:

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/

What you will need for my code example is a Google Developer account and a API Key from google to be able to send and receive GCM messages to Android devices. Of course you will also need a Azure account to be able to create the notification hub.

Add the following Nugget package:

Microsoft Azure Service Bus

Connecting with a .NET Client and sending messages

The code below will connect from a .NET Client to the Notification Hub. This is done in the class constructor. At the moment this code can only send GCM messages to Android devices. Note that these operations are asynchronous.

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessTrackerLibrary/ServiceBus/NotificationGateway.cs

But you could use a "central" hub from where to send these messages which will handle sending messages to different devices through a WebAPI:
https://github.com/lionadi/MyFitnessTracker/tree/master/FitTrackerHubCentral
https://github.com/lionadi/MyFitnessTracker/blob/master/FitTrackerHubCentral/FitTrackerHubCentral/Controllers/NotificationsController.cs



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.ServiceBus.Notifications;

namespace MyFitnessTrackerLibrary.ServiceBus
{
    // TODO: Replace this with a connection to the notification central hub, do not sent message directly from here in the future!!!!
    public class NotificationGateway
    {
        private NotificationHubClient hub = null;
        private static NotificationGateway _notificationGateway;
        public NotificationGateway()
        {

            hub = NotificationHubClient.CreateClientFromConnectionString(MyFitnessTrackerLibrary.Globals.MyFitAppSettings.NotificationHubConnectionString, MyFitnessTrackerLibrary.Globals.MyFitAppSettings.NotificationHubName);

        }

        ~NotificationGateway()
        {

        }

        public async Task<NotificationOutcome> SendMessage(string message)
        {
            var toast = "{ \"data\" : {\"message\":\"" + "From : " + message + "\"}}";
            return await hub.SendGcmNativeNotificationAsync(toast);
        }

        public static NotificationGateway GetInstance()
        {
            if(_notificationGateway == null)
            {
                _notificationGateway = new NotificationGateway();
            }

            return _notificationGateway;
        }
    }
}

Connecting and listening to messages with an Android device client

The Android side is a bit more complicated and annoying. You have to do more work here.

At the first you need two Microsoft java libraries to be able to connect to a notification hub:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/libs/notification-hubs-0.4.jar

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/libs/notifications-1.0.1.jar

After this you need to add them to your Android Studio gradle file:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/build.gradle

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:21.0.3'
 compile 'com.google.android.gms:play-services:6.5.87'
 compile 'com.google.code.gson:gson:2.3.1'
 compile files('libs/signalr-client-sdk.jar')
compile files('libs/notifications-1.0.1.jar')
compile files('libs/notification-hubs-0.4.jar')
 compile files('libs/Java-WebSocket-1.3.0.jar')
 compile project(':signalr-client-sdk-android-release')
}

 Please remember to follow these instructions to setup your Android Studio project in a correct manner, more details here:

http://azure.microsoft.com/en-us/documentation/articles/mobile-services-dotnet-backend-android-get-started-push/

http://azure.microsoft.com/fi-fi/documentation/articles/notification-hubs-aspnet-backend-android-notify-users/

The most important piece of code is the class named MyHandler in this case which will handle your notifications once your device is registered to the notification hub:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MyHandler.java


package com.example.adriansimionescu.myfitnessandroidapp;

import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.NotificationCompat;
import com.microsoft.windowsazure.notifications.NotificationsHandler;

public class MyHandler extends NotificationsHandler {
    public static final int NOTIFICATION_ID = 1;
    private NotificationManager mNotificationManager;
    NotificationCompat.Builder builder;
    Context ctx;

    static public MainActivity mainActivity;

    @Override
    public void onReceive(Context context, Bundle bundle) {
        ctx = context;
        String nhMessage = bundle.getString("message");

        sendNotification(nhMessage);
        mainActivity.DialogNotify("Received Notification",nhMessage);
    }

    private void sendNotification(String msg) {
        mNotificationManager = (NotificationManager)
                ctx.getSystemService(Context.NOTIFICATION_SERVICE);

        PendingIntent contentIntent = PendingIntent.getActivity(ctx, 0,
                new Intent(ctx, MainActivity.class), 0);

        NotificationCompat.Builder mBuilder =
                new NotificationCompat.Builder(ctx)
                        .setContentTitle("Notification Hub Demo")
                        .setStyle(new NotificationCompat.BigTextStyle()
                                .bigText(msg))
                        .setContentText(msg);

        mBuilder.setContentIntent(contentIntent);
        mNotificationManager.notify(NOTIFICATION_ID, mBuilder.build());
    }
}</pre>
<pre>

You also need a class that will register you device to the notification hub:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/RegisterClient.java

 


package com.example.adriansimionescu.myfitnessandroidapp;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.Set;

import org.apache.http.HttpResponse;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.methods.HttpPut;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.content.SharedPreferences;
import android.util.Log;

public class RegisterClient {
    private static final String PREFS_NAME = "ANHSettings";
    private static final String REGID_SETTING_NAME = "ANHRegistrationId";
    private String Backend_Endpoint;
    SharedPreferences settings;
    protected HttpClient httpClient;
    private String authorizationHeader;

    public RegisterClient(Context context, String backendEnpoint) {
        super();
        this.settings = context.getSharedPreferences(PREFS_NAME, 0);
        httpClient =  new DefaultHttpClient();
        Backend_Endpoint = backendEnpoint + "/api/register";
    }

    public String getAuthorizationHeader() {
        return authorizationHeader;
    }

    public void setAuthorizationHeader(String authorizationHeader) {
        this.authorizationHeader = authorizationHeader;
    }

    public void register(String handle, Set<String> tags) throws ClientProtocolException, IOException, JSONException {
        String registrationId = retrieveRegistrationIdOrRequestNewOne(handle);

        JSONObject deviceInfo = new JSONObject();
        deviceInfo.put("Platform", "gcm");
        deviceInfo.put("Handle", handle);
        deviceInfo.put("Tags", new JSONArray(tags));

        int statusCode = upsertRegistration(registrationId, deviceInfo);

        if (statusCode == HttpStatus.SC_OK) {
            return;
        } else if (statusCode == HttpStatus.SC_GONE){
            settings.edit().remove(REGID_SETTING_NAME).commit();
            registrationId = retrieveRegistrationIdOrRequestNewOne(handle);
            statusCode = upsertRegistration(registrationId, deviceInfo);
            if (statusCode != HttpStatus.SC_OK) {
                Log.e("RegisterClient", "Error upserting registration: " + statusCode);
                throw new RuntimeException("Error upserting registration");
            }
        } else {
            Log.e("RegisterClient", "Error upserting registration: " + statusCode);
            throw new RuntimeException("Error upserting registration");
        }
    }

    private int upsertRegistration(String registrationId, JSONObject deviceInfo)
            throws UnsupportedEncodingException, IOException,
            ClientProtocolException {
        HttpPut request = new HttpPut(Backend_Endpoint+"/"+registrationId);
        request.setEntity(new StringEntity(deviceInfo.toString()));
        request.addHeader("Authorization", "Basic "+authorizationHeader);
        request.addHeader("Content-Type", "application/json");
        HttpResponse response = httpClient.execute(request);
        int statusCode = response.getStatusLine().getStatusCode();
        return statusCode;
    }

    private String retrieveRegistrationIdOrRequestNewOne(String handle) throws ClientProtocolException, IOException {
        if (settings.contains(REGID_SETTING_NAME))
            return settings.getString(REGID_SETTING_NAME, null);

        HttpUriRequest request = new HttpPost(Backend_Endpoint+"?handle="+handle);
        request.addHeader("Authorization", "Basic "+authorizationHeader);
        HttpResponse response = httpClient.execute(request);
        if (response.getStatusLine().getStatusCode() != HttpStatus.SC_OK) {
            Log.e("RegisterClient", "Error creating registrationId: " + response.getStatusLine().getStatusCode());
            throw new RuntimeException("Error creating Notification Hubs registrationId");
        }
        String registrationId = EntityUtils.toString(response.getEntity());
        registrationId = registrationId.substring(1, registrationId.length()-1);

        settings.edit().putString(REGID_SETTING_NAME, registrationId).commit();

        return registrationId;
    }
}

After all these steps and setups you can finally go to your activity and add the following pieces of codes to fire up the connection and start listening to messages:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MainActivity.java

import com.microsoft.windowsazure.messaging.*;
import com.microsoft.windowsazure.notifications.NotificationsManager;

// Define this properties in you activity class</pre>
<pre>private RegisterClient registerClient;
private String SENDER_ID = "";
private GoogleCloudMessaging gcm;
private NotificationHub hub;
private String HubName = "fittracker";
private String HubListenConnectionString = "";</pre>
<pre>
@SuppressWarnings("unchecked")
private void registerWithNotificationHubs() {
 new AsyncTask() {
 @Override
 protected Object doInBackground(Object... params) {
 try {
 String regid = gcm.register(SENDER_ID);
 DialogNotify("Registered Successfully", "RegId : " +
 hub.register(regid).getRegistrationId());
 } catch (Exception e) {
 DialogNotify("Exception",e.getMessage());
 return e;
 }
 return null;
 }
 }.execute(null, null, null);
}

/**
 * A modal AlertDialog for displaying a message on the UI thread
 * when theres an exception or message to report.
 *
 * @param title Title for the AlertDialog box.
 * @param message The message displayed for the AlertDialog box.
 */
public void DialogNotify(final String title,final String message)
{
 final AlertDialog.Builder dlg;
 dlg = new AlertDialog.Builder(this);

 runOnUiThread(new Runnable() {
 @Override
 public void run() {
 AlertDialog dlgAlert = dlg.create();
 dlgAlert.setTitle(title);
 dlgAlert.setButton(DialogInterface.BUTTON_POSITIVE,
 (CharSequence) "OK",
 new DialogInterface.OnClickListener() {
 public void onClick(DialogInterface dialog, int which) {
 dialog.dismiss();
 }
 });
 dlgAlert.setMessage(message);
 dlgAlert.setCancelable(false);
 dlgAlert.show();
 }
 });
}</pre>
<pre>

So the first function will register you device and the next one will create a notification with a message in your device. Next you create the connection with this piece of code:


<pre>MyHandler.mainActivity = this;
NotificationsManager.handleNotifications(this, SENDER_ID, MyHandler.class);
gcm = GoogleCloudMessaging.getInstance(this);
hub = new NotificationHub(HubName, HubListenConnectionString, this);
registerWithNotificationHubs();</pre>

Notice how you pass your activity instance you the myhandler class. This is important.

And that’s it :D. Simple yet alot of work. Luckily Microsoft has made a good job documenting these steps. If in trouble don’t hesitate to look up on some documentation.

SignalR Hub

Implementing SignalR on the .NET side is rather easy BUT there is so much automation that it simply feel weird :). Everything seems to work if you just follow the instuctions but as I noticed one you poke around custom authentication and authorization you can really mess thing up. For example I wanted to add to my SignalR hun web project EDM mapping to a database or a custom authentication, well I made the mistake of choosing to use Entity Framework version 6.0 which uses a different version of Newtonsoft.json library which caused all sorts of problems. Another issue which I ran into was that I create a connection identification by client ID to be able to notify the client devices and services of changes within my system. At one point I did a simple mistake of forgeting to pass on the identification information which lead to weird errors on the client side browser such as IE and Chrome. The errors had nothing to do with the fact that the connection failed on the server side because the user ID was missing. The browsers expressed errors related to CORS which made no sense since I configured CORS support. So just be careful.Setting up a

Azure hosted SignalR hub

Start by looking at this source:

http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

To host my SignalR hub in Azure I simply created an empty web application and followed the instructions in the link above. Sample code:

https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/ChatHub.cs

https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/index.html

Also include the following SignalR nuget package:

Microsoft ASP .NET SignalR (to be able to host)

Microsoft ASP .NET Cross-Origin Support

Windows Azure Storage

Lets look at bit more closely at the ChartHub:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using SignalRGateway.AzureTableStorage;
using System.Configuration;

using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Table;
using MyFitnessTrackerLibrary.Globals;

namespace SignalRGateway
{
 public class ChatHub : Hub
 {

 public void Send(string name, string message)
 {
 // Call the broadcastMessage method to update clients.
 var queryResult = this.SendMessageTo(name, message);
 foreach (var entity in queryResult)
 {
 Clients.Client(entity.RowKey).broadcastMessage(name, message);
 }
 }

 public void IsDataUpdateRequiredForWeb(string name, bool isRequired, string message)
 {
 var queryResult = this.SendMessageTo(name, message);
 foreach (var entity in queryResult)
 {
 Clients.Client(entity.RowKey).isDataUpdateRequiredForWeb(name, isRequired, message);
 }
 Clients.All.isDataUpdateRequiredForWeb(name, isRequired, message);
 }

 public void IsDataUpdateRequiredForMobileClient(string name, bool isRequired, string message)
 {
 var queryResult = this.SendMessageTo(name, message);
 foreach (var entity in queryResult)
 {
 Clients.Client(entity.RowKey).isDataUpdateRequiredForMobileClient(name, isRequired, message);
 }
 }

 private List<ConnectionEntity> SendMessageTo(String who, String message)
 {
 //var name = Context.User.Identity.Name;
 var name = this.GetConnectionUser();

 if (!String.IsNullOrEmpty(name))
 {
 var table = GetConnectionTable();

 // Notice that the partition keys are stored in azure storage as lower case
 var query = new TableQuery<ConnectionEntity>()
 .Where(TableQuery.GenerateFilterCondition(
 "PartitionKey",
 QueryComparisons.Equal,
 who.ToLowerInvariant()));

 var queryResult = table.ExecuteQuery(query).ToList();
 if (queryResult.Count == 0)
 {
 Clients.Caller.showErrorMessage("The user is no longer connected.");
 }
 else
 {
 // Load only once the host application connections to display the data there
 if(queryResult.Count(o=>o.PartitionKey.Equals(Constants.SignalR_HostApplicationUserName.ToLowerInvariant())) <= 0)
 queryResult.AddRange(this.SendMessageTo(Constants.SignalR_HostApplicationUserName, message));

 return queryResult;
 }
 }

 return new List<ConnectionEntity>();
 }

 // This assumes that "normmaly" all others clients than the host SignalR web application (this app) will use header named as username for user identification. The SignalR web app will user querystring.
 private String GetConnectionUser()
 {
 var name = Context.Headers[Constants.SignalR_HeaderID_Username];

 if (String.IsNullOrEmpty(name))
 {
 name = Context.QueryString[Constants.SignalR_HeaderID_Username];
 }
 if (String.IsNullOrEmpty(name))
 return null;

 // Notice that the partition keys are stored in azure storage as lower case
 return name.ToLowerInvariant();
 }

 public override Task OnConnected()
 {
 //var name = Context.User.Identity.Name;
 var name = this.GetConnectionUser();

 if(!String.IsNullOrEmpty(name))
 {
 var table = GetConnectionTable();
 var created = table.CreateIfNotExists();

 var entity = new ConnectionEntity(
 name.ToLower(),
 Context.ConnectionId);
 var insertOperation = TableOperation.InsertOrReplace(entity);
 table.Execute(insertOperation);
 }

 return base.OnConnected();
 }

 public override Task OnDisconnected(bool stopCalled)
 {
 //var name = Context.User.Identity.Name;
 var name = this.GetConnectionUser();

 if (!String.IsNullOrEmpty(name))
 {
 var table = GetConnectionTable();

 var deleteOperation = TableOperation.Delete(
 new ConnectionEntity(name, Context.ConnectionId) { ETag = "*" });
 table.Execute(deleteOperation);
 }

 return base.OnDisconnected(stopCalled);
 }

 private CloudTable GetConnectionTable()
 {

 var storageAccount =
 CloudStorageAccount.Parse(
 MyFitnessTrackerLibrary.Globals.MyFitAppSettings.AzureTableStorageConnectionString);
 var tableClient = storageAccount.CreateCloudTableClient();
 var table = tableClient.GetTableReference("connection");

 return table;
 }
 }
}

In my code example connections are stored and managed in Azure Table Storage(check the link below how to create one):
http://azure.microsoft.com/en-us/documentation/articles/storage-dotnet-how-to-use-tables/

When you connect to the hub you will enter the OnConnected() function. Here my implementation seeks for the username header value or QueryString username value(this is to just go around a problem in JavaScript client which I did not want to spend to much time on). After this we connect to the Azure Table Storage and add a new connection to the table.

When disconnecting the reverse is done to the Azure Storage Table.

The GetConnectionTable() function will open a connection to the storage table(check from azure management web console for your connection data).

The SignlarR has threee function which will send information to listening clients based on connection IDs:

  • Send
  • IsDataUpdateRequiredForWeb
  • IsDataUpdateRequiredForMobileClient

The SendMessageTo() function is used to get all of the connection for a user name which needs to be notified of updates.

The code is pretty simple an easy. Microsoft has done a great job documenting this: http://www.asp.net/signalr

Last thing which I recommend to do is to configure CORS support:

https://github.com/lionadi/MyFitnessTracker/blob/master/SignalRGateway/SignalRGateway/Startup.cs


// Branch the pipeline here for requests that start with "/signalr"
 app.Map("/signalr", map =>
 {
 // Setup the CORS middleware to run before SignalR.
 // By default this will allow all origins. You can
 // configure the set of origins and/or http verbs by
 // providing a cors options with a different policy.
 map.UseCors(CorsOptions.AllowAll);
 var hubConfiguration = new HubConfiguration
 {
 // You can enable JSONP by uncommenting line below.
 // JSONP requests are insecure but some older browsers (and some
 // versions of IE) require JSONP to work cross domain
 // EnableJSONP = true
 };
 // Run the SignalR pipeline. We're not using MapSignalR
 // since this branch already runs under the "/signalr"
 // path.
 map.RunSignalR(hubConfiguration);
 });

Simply copy&paste the code above to get it to work but notice that it will allow requests from all possible connections.
http://www.asp.net/signalr/overview/security/introduction-to-security#csrf

Connecting and listening to activities with the following clients:

You will need to import the following libraries in Visual Studio to get you clients to work on SignalR:

Microsoft ASP .NET SignalR .NET Client

Microsoft ASP .NET SignalR JavaScript Client

Connecting with the .NET Client

The .NET Client code is pretty easy to understand:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Client;
using System.Threading.Tasks;
using MyFitnessTrackerLibrary.ServiceBus;
using MyFitnessTrackerLibrary.Globals;

namespace MyFitnessTrackerLibrary.SignalRLogic
{
 public class HubGateway
 {

 private String hubLocation = MyFitAppSettings.SignalRHubHostLocation;
 private static HubGateway _hubGateway = null;
 private String hubProxyName = MyFitAppSettings.SignalRHubProxy;
 private IHubProxy hubProxy = null;
 private HubConnection hubConnection = null;
 private String sourceID = "NO ID";

 public IHubProxy HubProxyPoint
 {
 get { return this.hubProxy; }
 }

 public String SourceID
 {
 get
 {
 return this.sourceID;
 }

 set

 {
 this.sourceID = value;
 }
 }

 public HubGateway()
 {
 hubConnection = new HubConnection(this.hubLocation);
 hubProxy = hubConnection.CreateHubProxy(hubProxyName);
 }

 ~HubGateway()
 {
 this.Stop();
 }

 public async Task SendNormalMessage(String name, String message)
 {
 await this.Start(name);
 await this.HubProxyPoint.Invoke("Send", name, message + " #Source ID: " + this.sourceID);
 }

 public async Task IsDataUpdateRequiredForWeb(String name, bool isRequired, String message)
 {
 await this.Start(name);
 await this.HubProxyPoint.Invoke("IsDataUpdateRequiredForWeb", name, isRequired, message + " #Source ID: " + this.sourceID);
 await NotificationGateway.GetInstance().SendMessage("New data was added. Your UI is updated/updating.");
 }

 public async Task IsDataUpdateRequiredForMobileClient(String name, bool isRequired, String message)
 {
 await this.Start(name);
 await this.HubProxyPoint.Invoke("IsDataUpdateRequiredForMobileClient", name, isRequired, message + " #Source ID: " + this.sourceID);
 await NotificationGateway.GetInstance().SendMessage("New data was added. Your UI is updated/updating.");
 }

 public static HubGateway GetInstance()
 {
 if( _hubGateway == null)
 {
 _hubGateway = new HubGateway();
 }

 return _hubGateway;
 }

 public async Task Start(String userName)
 {
 if (hubConnection.State == ConnectionState.Disconnected)
 {
 if(!this.hubConnection.Headers.ContainsKey(Constants.SignalR_HeaderID_Username))
 this.hubConnection.Headers.Add(new KeyValuePair<string, string>(Constants.SignalR_HeaderID_Username, userName));

 await hubConnection.Start();
 }
 }

 public void Stop()
 {
 hubConnection.Stop();
 }
 }
}

The important part in this code in when you call the Invoke() function to invoke in the SignalR hub the needed function and notify registered clients of updates.

The second important part is the Start() function. We add the username data in the connection, this way the hub knows where to send the messages/updates requests. Yes I know there is a bug in the code above, only one user will receive messages from this piece of code. I haven’t got around to fix this in my original project but it’s a simple matter.

Connecting with the JavaScript client

</pre>
<pre>
var connection = $.hubConnection(Constants.SignalRGatewayLocation);
 connection.qs = { "username": CookieHelper.UserName };
 var contosoChatHubProxy = connection.createHubProxy(Constants.SignalRHubProxyName);

 contosoChatHubProxy.on(Constants.SignalRHubMethod_IsDataUpdateRequiredForWeb, function (name, isRequired, message) {
 // Html encode display name and message.
 var encodedName = $('<div />').text(name).html();
 //var encodedMsg = $('<div />').text("isDataUpdateRequiredForWeb is Update Required: " + isRequired + " Message: " + message).html();
 var encodedMsg = $('<div />').text("Updating UI. New data from the mobile app.").html();
 // Add the message to the page.
 $('#notifications').append('<ul><li><strong>' + encodedName
 + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li></ul>');
 highChartsController.LoadProperChartByUserSelection();
 });

 connection.start()
 .done(function () {
 console.log('Now connected, connection ID=' + connection.id
 );
 })
 .fail(function () {
 console.log('Could not connect');
 });

The code above is rather simple. You create a connection, define the hub name, register to a function on the SignalR hub and start the connection.
The only “weird” part is that the username is passed in the QueryString and not in the header. This was due to a problem which I could not fix and had to go around. There might be a better solution out there.

Connecting with the Android client

Now here comes the hard part. Getting SignalR to work on android was a pain in the but :). Lots of weird problems and lack or proper documentation.

To start with you will need this library downloaded and compiled in Android Studio(or some other Java development tool you are using).

https://github.com/SignalR/java-client

You also might need the following library:

http://java-websocket.org/

Then a good place to go next would be:

https://whathecode.wordpress.com/2014/03/20/getting-started-with-the-java-signalr-sdk/

BUT the example above did not work for me as it was stated in the example. Here what I had to do:

Add to your Android project these libraries:

signalr-client-sdk.jar

Java-WebSocket-1.3.0.jar

signalr-client-sdk-android-release.aar

The following libraries can be added from Android Studio UI: File -> Project Structure. Then add a new library from the plus icon and in the new popup select the “import .JAR or .AAR Package”.

Your gradle file should look something like this:

dependencies {
 compile fileTree(dir: 'libs', include: ['*.jar'])
 compile 'com.android.support:appcompat-v7:21.0.3'
 compile 'com.google.android.gms:play-services:6.5.87'
 compile 'com.google.code.gson:gson:2.3.1'
 compile files('libs/signalr-client-sdk.jar')
compile files('libs/notifications-1.0.1.jar')
compile files('libs/notification-hubs-0.4.jar')
 compile files('libs/Java-WebSocket-1.3.0.jar')
 compile project(':signalr-client-sdk-android-release')
}

The next step is to start to create a background service in Android that will be able to communicate with your desired activity.

We Start this by defining a interface which is implemented in the activity:

https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/ServiceCallbacks.java


package com.example.adriansimionescu.myfitnessandroidapp;

public interface ServiceCallbacks {
    void updateUI();
}</pre>
<pre>// To implement it in your activity:</pre>
<pre>public class MainActivity extends ActionBarActivity implements ServiceCallbacks {
...
}

Next we create the background service:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/SignalRService.java


package com.example.adriansimionescu.myfitnessandroidapp;

import android.app.IntentService;
import android.app.Service;
import android.content.Intent;
import android.os.Binder;
import android.os.IBinder;
import android.util.Log;
import android.widget.Toast;

import java.util.concurrent.ExecutionException;

import microsoft.aspnet.signalr.client.SignalRFuture;
import microsoft.aspnet.signalr.client.hubs.HubConnection;
import microsoft.aspnet.signalr.client.hubs.HubProxy;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler1;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler2;
import microsoft.aspnet.signalr.client.hubs.SubscriptionHandler3;
import microsoft.aspnet.signalr.client.transport.ClientTransport;
import microsoft.aspnet.signalr.client.transport.ServerSentEventsTransport;

public class SignalRService extends Service {

    // Binder given to clients
    private final IBinder binder = new LocalBinder();
    // Registered callbacks
    private ServiceCallbacks serviceCallbacks;

    // Class used for the client Binder.
    public class LocalBinder extends Binder {
        SignalRService getService() {
            // Return this instance of MyService so clients can call public methods
            return SignalRService.this;
        }
    }

    @Override
    public IBinder onBind(Intent intent) {
        return binder;
    }

    @Override
    public void onCreate() {
        super.onCreate();
    }

    public void setCallbacks(ServiceCallbacks callbacks) {
        this.serviceCallbacks = callbacks;
    }

    @SuppressWarnings("deprecation")
    @Override
    public void onStart(Intent intent, int startId) {
        super.onStart(intent, startId);
        Toast.makeText(this, "Service Start", Toast.LENGTH_LONG).show();

        String server = Constants.SignalRGateway;
        HubConnection connection = new HubConnection(server);
        connection.getHeaders().put("username", UserDataContainer.LoginData.userName);
        HubProxy proxy = connection.createHubProxy(Constants.SignalRHubName);

        //SignalRFuture<Void> awaitConnection = connection.start();

// This was added to get around a websocket problem with Android devices to the SignalR hub hosted in Azure
        ClientTransport transport = new ServerSentEventsTransport(connection.getLogger());

        SignalRFuture<Void> awaitConnection = connection.start(transport);
        try {
            awaitConnection.get();
            proxy.subscribe(this );
        } catch (InterruptedException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (ExecutionException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        //--------------------------------------------------------------------------------
    }

    public void Send( String name, String message )
    {
        final String fmessage = message;
        final String fname = name;

    }

    public void IsDataUpdateRequiredForMobileClient( String name, boolean isRequired, String message ) {
        final String fmessage = message;
        final String fname = name;
        final boolean fisrequired = isRequired;
        if (serviceCallbacks != null) {
            serviceCallbacks.updateUI();
        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

}

There are a few important function.

onBind() => Use this to bind the actual instance of the service from your activity
setCallbacks() => use this to create a connection to the activity class interface so that we can call a desired method in the activity when a singalr message is received.

To bind to the SignalR function and message you need to define methods that use the same names as in the hub.
IsDataUpdateRequiredForMobileClient() and Send()

After the connection in made you need to call the subscribe method in the proxy class and pass the service class as a parameter. This will allow the binding between the defined methods above with the one in the SignalR hub.

The last part of the puzzle is that we call the interface function updateUI() which will trigger the same function in the activity to trigger and allow you to perform something in the activity.

Then all you have to do is to create the service instance in the activity, bind it and start it:
https://github.com/lionadi/MyFitnessTracker/blob/master/MyFitnessAndroidApp/app/src/main/java/com/example/adriansimionescu/myfitnessandroidapp/MainActivity.java

private SignalRService signalRService;</pre>
<pre>@Override
protected void onStart() {
    super.onStart();
    // Bind to LocalService

        Intent intent = new Intent(this, SignalRService.class);
        bindService(intent, serviceConnection, Context.BIND_AUTO_CREATE);
    // Do this to avoid starting multiple service, only one is needed
    if(this.signalRService == null) {
        this.startService(intent);
    }
}

@Override
protected void onStop() {
    super.onStop();

    // Unbind from service
    if (bound) {
        this.signalRService.setCallbacks(null); // unregister
        unbindService(serviceConnection);
        bound = false;
    }
}

/** Callbacks for service binding, passed to bindService() */
private ServiceConnection serviceConnection = new ServiceConnection() {

    @Override
    public void onServiceConnected(ComponentName className,
                                   IBinder service) {
        // cast the IBinder and get MyService instance
        SignalRService.LocalBinder binder = (SignalRService.LocalBinder) service;
        signalRService = binder.getService();
        bound = true;
        signalRService.setCallbacks(MainActivity.this); // register
    }

    @Override
    public void onServiceDisconnected(ComponentName arg0) {
        bound = false;
    }
};

/* Defined by ServiceCallbacks interface */
@Override
public void updateUI() {
// update your UI here
}

In the OnStart() and OnStop() functions we bind and start the service.

In the serviceConnection class instance we do the actual binding and notice how the code maps the activity to the service to be able to call the updateUI() function below.

 

The End

Huh, a long post but I hope you got the idea how to use notification hub, azure table storage and singnalr to communicate between different service and devices in different manner. SignalR is pretty cool what you can do with it. Especially with games and backend stuff. Cool 🙂

SharePoint and Google Maps – How to use them together

Here is an example how to use Google Maps and how to integrate it with SharePoint.

To start with you need to include the following files somewhere in your project

<SharePoint:ScriptLink ID=”JQueryJSFunctionality” runat=”server” Name=”/_layouts/myfolder/scripts/jquery-1.11.2.min.js”></SharePoint:ScriptLink>
<script src=”http://maps.google.com/maps/api/js?sensor=false&#8221; type=”text/javascript”>
</script>

<script type=”text/javascript”>
var listName = ‘<%=ListName %>’; // This can be used to pass a list name from web part properties to the JavaScript/JQuery logic, this is a propert defined in the code behind of a user control
</script>

<!–<SharePoint:ScriptLink Name=”SP.js” runat=”server” OnDemand=”true” Localizable=”false” />–>
<SharePoint:ScriptLink ID=”ScriptLink1″ Name=”sp.debug.js” LoadAfterUI=”true” Localizable=”false” runat=”server” />
<SharePoint:ScriptLink ID=”userWorldMapJSFunctionality” runat=”server” Name=”/_layouts/myfolder/scripts/yourGoogleMapsLogicFileName.js”></SharePoint:ScriptLink>

 

Next is the JavaScript/JQuery code

Create instances of needed Google Maps functionalities

var gmGeocoder = new google.maps.Geocoder();
var gmBounds = new google.maps.LatLngBounds();

var mapOptions = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.HYBRID
};

var gmMap = new google.maps.Map($(“#map_canvas”)[0], mapOptions);

// You can use this to listen when the Google Maps has finnished its operations
google.maps.event.addListenerOnce(gmMap, ‘idle’, function () {

});

 

// You can use this function class to pass on information to the Google Maps geo location finder

var street = “”;
var zip = “”;
var city = users[iter].city;
var country = users[iter].country;
address = street + “,” + zip + “,” + city + “,” + country;

gmGeocoder.geocode({ ‘address’: address }, function (user, allUsers) {
return (function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results.length == 0) {
//console.log(“Geocoding: There are no results for address ‘” + results[0].formatted_address + “‘! Expected exactly one result. > Do not show any marker on map for this address.”);
}
else {

// Here is where you get a results back for the specified address and start to construct data for a Google Maps marker
var externalCount = 0;
var internalCount = 0;
gmLatLng = results[0].geometry.location;
//markerBounds.extend(gmLatLng);
var msgForInfoWindow = “<div id=’slider1′ >”;
var colorValue = “red”;
if (user.isexternal == true) {
colorValue = “blue”;
externalCount++;
} else {
internalCount++;
}
var orderID = 0;

// The actual content that goes into the marker starts here
msgForInfoWindow += “<div class=’viewport’>”;
msgForInfoWindow += “<ul class=’overview’>”;

 

orderID++;
msgForInfoWindow += “<li>”;
msgForInfoWindow += “Add your data here”;
msgForInfoWindow += “</li>”;
msgForInfoWindow += “</ul>”;
msgForInfoWindow += “</div>”;
msgForInfoWindow += “<a class=’buttons prev’ href=’#’><</a>”;
msgForInfoWindow += “<a class=’buttons next’ href=’#’>></a>”;

msgForInfoWindow += “</div>”;
var isExternalMarker = false;
if (externalCount > internalCount)
isExternalMarker = true;

// Calling this function will create a maker based on the given parameters
SetMarkerForGoogleMapForSharePointList(gmLatLng, gmMap, gmBounds, user.city + “, ” + user.country, msgForInfoWindow, isExternalMarker);
}
}
else {
//console.log(“Geocode for address ‘” + address + “‘ was not successful for the following reason: ” + status);
}
});
} (users[iter], users));

//getting coordinates
gmGeocoder.geocode({ ‘address’: address }, function (results, status) {

});

 

function NullVerification(stringValue) {
var returnValue = ” “;
if (stringValue != null)
returnValue = stringValue;

return (returnValue);
}

function NullVerificationBool(stringValue) {
var returnValue = false;
if (stringValue != null)
returnValue = true;

return (returnValue);
}

 

function SetMarkerForGoogleMapForSharePointList(gmLatLng, gmMap, gmBounds, title, contentForInfoWindow, isExternalMarker) {

// This is just a logic on how to control the marker styling, you can use your own

var icon = “”;

if (isExternalMarker)
icon = “yellow”;
else
icon = “red”;
icon = “http://maps.google.com/mapfiles/ms/icons/&#8221; + icon + “.png”;

// Create the marker for the Goole Map
var gmMarker = new google.maps.Marker({
position: gmLatLng,
map: gmMap,
title: title,
zIndex: 0,
icon: new google.maps.MarkerImage(icon)
});

// This will center the map based on given marker positions
gmBounds.extend(gmLatLng);
gmMap.setCenter(gmBounds.getCenter());
gmMap.fitBounds(gmBounds);

// Define properties for the info window that is opened when the marker is pressed

if (contentForInfoWindow != null && contentForInfoWindow != “”) {
var gmInfowindow = new google.maps.InfoWindow({
content: contentForInfoWindow,
maxWidth: 500,
maxHeight: 600
});

// This will attach a listener to the marker to that we can apply logic when it is opened.

google.maps.event.addListener(gmMarker, ‘click’, function () {
gmInfowindow.open(gmMap, gmMarker);
$(‘#slider1’).tinycarousel({ bullets: true });
var t = 0;
});
}
}

// This is an example how to retrieve data from a SharePoint list using JavaScript 

function retrieveListItems() {

var clientContext = SP.ClientContext.get_current();
if (IsEmpty(listName))
listName = ‘UsersMapData’;
var oList = clientContext.get_web().get_lists().getByTitle(listName);

var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(‘<View><Query><Where><And><IsNotNull><FieldRef Name=”Country” /></IsNotNull><And><IsNotNull><FieldRef Name=”City” /></IsNotNull><IsNotNull><FieldRef Name=”PersonName” /></IsNotNull></And></And></Where><OrderBy><FieldRef Name=”ID” Ascending=”True” /></OrderBy></Query></View>’);
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

 // When the data retrieval from the list succeeds this function is called. Here the needed data is then retrieved and parsed. Then passed on to be used later

function onQuerySucceeded(sender, args) {

var listItemInfo = [];

var listItemEnumerator = collListItem.getEnumerator();

// Here the data from SharePoint is went through and items are retrieved to container objects to be used later

while (listItemEnumerator.moveNext()) {

var oListItem = listItemEnumerator.get_current();
var newUserData = { id: oListItem.get_id(),
name: oListItem.get_item(‘PersonName’),
country: oListItem.get_item(‘Country’),
city: oListItem.get_item(‘City’),
imageLocation: oListItem.get_item(‘UserImageLocation’)
};
listItemInfo.push(newUserData);
}

return (listItemInfo);
}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

SharePoint 2013 Blog – Change the author of the post with a custom selected user

This is a sample JS to use with the posts webpart in the SharePoint blog(JSLink webpart property). Originally I wanted to the blog.xsl but I simply could not get it to world desirably in SharePoint 2013. Well it worked in a different manner that what it used to be in SharePoint 2010.

Here is the code with comments:

var userID = 0;
var globalListItemIDs = [];
var spjsLoaded = false;
var listName = “Viestit”;
var customUserFieldInternalName = “PostOwner”;

// Main function – Start point
(function () {

var overrideCtx = {};

overrideCtx.Templates = {};

// Register a template override for the author field
overrideCtx.Templates.Fields = {‘Author’:{‘View’:CBody}};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function CBody(ctx) {

// Load SP client context, ote async event
SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, sharePointReady);

// create a point of focus where to add the loaded information from the post item user field, Notice taht we are using the list item ID as an identifier where to put our user data
var ret = “<b><span class=’Blog_userTemplateContextData’ id=’userTemplateContextData” + ctx.CurrentItem.ID +”‘></span></b>”
var newListItemData = { id: ctx.CurrentItem.ID };

globalListItemIDs.push(newListItemData);

//var ret = ctx.CurrentItem.Body;

return ret;

}

function sharePointReady() {
if(spjsLoaded == true)
return;
spjsLoaded = true;

clientContext = SP.ClientContext.get_current();
website = clientContext.get_web();

var oList = clientContext.get_web().get_lists().getByTitle(listName);

// Check if a specific post list item is specified, this would mean that the user is viewing a sigle post
var listItemID = getParameterByName(‘ID’);

// If no single post id is found then load all available posts and their custom users to be used instead of the author(TODO: Optimize for displayed posts only)
if(listItemID === null || listItemID === “”)
{
/*for (var iter = 0; iter < globalListItemIDs.length; iter++)
{
listItemID = globalListItemIDs[iter].id;
MakeNewDataCall(oList, clientContext, listItemID);
}*/
var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(‘<Query><OrderBy><FieldRef Name=”Created” Ascending=”False” /></OrderBy></Query>’);
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
} else
{
// Only a single post is needed
MakeNewDataCall(oList, clientContext, listItemID);
var newListItemData = { id: listItemID };

globalListItemIDs.push(newListItemData);
}

}

function MakeNewDataCall(oList, clientContext, listItemID)
{
var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(‘<Query><Where><Eq><FieldRef Name=”ID” /><Value Type=”Counter”>’ + listItemID + ‘</Value></Eq></Where><OrderBy><FieldRef Name=”Created” Ascending=”False” /></OrderBy></Query>’);
this.collListItem = oList.getItems(camlQuery);

clientContext.load(collListItem);

clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {

var listItemInfo = [];

var listItemEnumerator = collListItem.getEnumerator();

// Get the post data(single or many) and process it
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var listItemID = oListItem.get_id();

// Seek the SharePoint generated posts and seek if the current item is something we want to process
var userDataDiv = document.getElementById(“userTemplateContextData” + listItemID);
if(!(userDataDiv === null))
{
var author = oListItem.get_item(‘Author’);
// IF so then get the custom user information
var personOwner = oListItem.get_item(customUserFieldInternalName);
if(!(personOwner === null))
{
var name = personOwner.get_lookupValue();

// Put default data that is going to be used if a user image is not found, Notice that we define a user image location
userDataDiv.innerHTML = “<span class=’Blog_postUserData’ id=’postUserData” + personOwner.get_lookupId() +”‘>” + name + “</span>”;
var context = SP.ClientContext.get_current();
var web = context.get_web();
var userInfoList = web.get_siteUserInfoList();

// Make a call to the user profile information for this user to see if there is a user image available
var camlQuery = new SP.CamlQuery();
camlQuery.set_viewXml(‘<View><Query><Where><Eq><FieldRef Name=”ID”/><Value Type=”Number”>’ +personOwner.get_lookupId()+ ‘</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>’);
this.listItems = userInfoList.getItems(camlQuery);
context.load(listItems);
context.executeQueryAsync(Function.createDelegate(this, this.onProfileSuccessMethod), Function.createDelegate(this, this.onQueryFailed));
}
}
}
}

function onProfileSuccessMethod(sender, args) {
var item = listItems.itemAt(0);
var firstName = item.get_item(‘FirstName’);
var lastName = item.get_item(‘LastName’);
var userId = item.get_id();
// Get the location where the user image is to be inserted
var userDataDiv = document.getElementById(“postUserData” + userId);
if(!(userDataDiv === null))
{
// If there is an image then use it, if no image is provided do nothing and display the user full name instead.
var picture = item.get_item(‘Picture’);
if (picture!=null) {
userDataDiv.innerHTML = “<img class=’Blog_userDataImgClassStyle’ src='” + picture.get_url() +”‘ height=’42’><span class=’Blog_postUserDataName’ id =’postUserDataName’>” + firstName + ” ” + lastName + “</span>”;
}
}
}

function onQueryFailed(sender, args) {

alert(‘Request failed. ‘ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

function getParameterByName(name) {
name = name.replace(/[\[]/, “\\[“).replace(/[\]]/, “\\]”);
var regex = new RegExp(“[\\?&]” + name + “=([^&#]*)”),
results = regex.exec(location.search);
return results === null ? “” : decodeURIComponent(results[1].replace(/\+/g, ” “));
}