Extending Microsoft Teams for Developers - Part II

Today we will extend our look into how to publish content into Microsoft Teams using the Office 365 connector model and webhooks.  Make sure you have your webhook url handy for last week, because we will use it again.

Creating an Office 365 Connector SDK Class

You can create your own, or you can use the one Microsoft has posted in Github and extend it like I am going to.

Here are the classes include

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	namespace Office365ConnectorSDK
	{
	public class Section
	{
	public string title { get; set; }
	public string activityTitle { get; set; }
	public string activitySubtitle { get; set; }
	public string activityImage { get; set; }
	public string activityText { get; set; }
	public List<Fact> facts { get; set; }
	public List<Image> images { get; set; }
	public string text { get; set; }
	public bool? markdown { get; set; }
	public List<PotentialAction> potentialAction { get; set; }
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	using Newtonsoft.Json;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	namespace Office365ConnectorSDK
	{
	public class PotentialAction
	{
	public PotentialAction()
	{
	context = "http://schema.org";
	type = "ViewAction";
	}
	[JsonProperty(PropertyName = "@context")]
	public string context { get; set; }
	[JsonProperty(PropertyName = "@type")]
	public string type { get; set; }
	public string name { get; set; }
	public List<string> target { get; set; }
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	using Newtonsoft.Json;
	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Net.Http;
	using System.Net.Http.Headers;
	using System.Text;
	using System.Threading.Tasks;
	namespace Office365ConnectorSDK
	{
	public class Message
	{
	public string summary { get; set; }
	public string text { get; set; }
	public string title { get; set; }
	public string themeColor { get; set; }
	public List<Section> sections { get; set; }
	public List<PotentialAction> potentialAction { get; set; }
	public string ToJson()
	{
	return JsonConvert.SerializeObject(this, new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore });
	}
	public async Task<bool> Send(string webhook_uri)
	{
	HttpClient client = new HttpClient();
	client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
	var content = new StringContent(this.ToJson(), System.Text.Encoding.UTF8, "application/json");
	using (var response = await client.PostAsync(webhook_uri, content))
	{
	return response.IsSuccessStatusCode;
	}
	}
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	namespace Office365ConnectorSDK
	{
	public class Fact
	{
	public Fact() { }
	public Fact(string name, string value)
	{
	this.name = name;
	this.value = value;
	}
	public string name { get; set; }
	public string value { get; set; }
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Text;
	using System.Threading.Tasks;
	namespace Office365ConnectorSDK
	{
	public class Image
	{
	public Image() { }
	public Image(string image) { this.image = image; }
	public Image(string image, string title) { this.image = image; this.title = title; }
	public string title { get; set; }
	public string image { get; set; }
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

As you can see the Message class is a combination of the sub classes and it also holds are method for posting with a parameter of our webhook url.

Here is a sample piece of code that creates a simple console app, defines the message, then posts it to our Teams channel.

	static void Main(string[] args)
	{
	string myuri = "https://outlook.office.com/webhook/"; //Real webhook here
	string myoutlookuri = "https://outlook.office.com/webhook/"; //Real webhook here
	Message message = new Message()
	{
	summary = "Doug Routledge Code Test",
	title = "Bridge Communications",
	sections = new List<Section>() {
	new Section() {
	activityTitle = "Doug Routledge Posted",
	activitySubtitle = "In Microsoft Teams",
	activityText = "\"Here is the Bridge Operator Console\"",
	activityImage = "https://www.bridgeoc.com/lync/images/blocskypeicon-small.png"
	}, new Section() {
	title = "Details",
	facts = new List<Fact>() {
	new Fact("Labels", "Features"),
	new Fact("Summary", "Customers often require additional call control features and lightening fast searching in the Skype for Business client. The ability to control calls, utilize several transfer methods, join or record calls, discover availability and see users transfer preference and perform these actions from a single super fast interface can slow the adoption of a new solution in some scenarios. The Bridge Operator Console provides a solution for these challenges."),
	new Fact("Attachments", "[img5.jpg](https://www.bridgeoc.com/Lync/images/img5.jpg)")
	}
	}, new Section() {
	title = "Images",
	images = new List<Image>() {
	new Image("https://www.bridgeoc.com/Lync/images/img5.jpg"),
	new Image("https://www.bridgeoc.com/lync/products/win3/images/screen9.png"),
	new Image("https://www.bridgeoc.com/lync/products/win3/images/rgnewsmall.png"),
	new Image("https://www.bridgeoc.com/lync/images/2016-03-24_080908.png")
	}
	} },
	potentialAction = new List<PotentialAction>() {
	new PotentialAction()
	{
	name = "View more Info",
	target = new List<string>() { "https://www.bridgeoc.com/lync/products/win3/index.htm" }
	}
	}
	};
	var result = message.Send(myuri);
	while (!result.Result)
	{
	System.Threading.Thread.Sleep(100);
	}
	Console.WriteLine("Post Complete, Press Any Key to Exit");
	Console.Read();
	}

view raw gistfile1.txt hosted with ❤ by GitHub

You can see the result here, it's a bit a of train-wreck to put it mildly.

The reason it looks bad, isn't because we did anything wrong, rather Teams just doesn't quiet render the data properly, yet, as I am told they are aware of it, and working on a solution.


As you can see here if we posted the same thing to Office Groups, we get more like what we would have expected.



So what works and what doesn't work so well in teams?

Working
Basic message with title and text
Section using the fact class *minus the image, it's cut off

Not Working
Section of images
Potential Action (The blue button that takes us to a website)

Since it works so much better today in Office Groups, next week I'll show you how to create a group and add a webhook you can post to directly to Microsoft Outlook.

Doug Routledge, C# Lync, Skype for Business, SQL, Exchange, UC, Full Stack Developer  BridgeOC Bridge Operator Console Twitter - @droutledge @ndbridge