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.

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.

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:

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.

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

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.

// 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);
});

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.

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

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.

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 🙂