Saturday, August 08, 2015

Text Emoticon Outlook and OWA Compose App

Emojis and emoticons have been around for quite a while but are picking up a bit of steam of late with the release of Windows 10. The Daily mail had a really good article on their use recently which is worth a read.

Like everything these new emoji's have there origins story and text based emoticons (which have many other names) are kind of a interesting sub branch with a slightly retro feel.

In this post I'm going to show you how you can create a Mail App to make using text emoticon's easy in Exchange 2013 and Office365 using the new compose apps feature which was introduced last year at MEC.

Compose apps are one way of easily extending the User interface in OWA and Outlook 2013 (and 2016). So for this example I can do something like the following to make these text emoticons easy to insert into either the Subject or Body of a message (you need to active the app by selecting the Addin Button in OWA or Apps for Office in Outlook)


At this point it should be noted the Unicode support in Email subjects is a relative new thing the RFC came out in 1996 https://tools.ietf.org/html/rfc2047 full Unicode support in Outlook didn't really happen until 2003. So if your sending to someone still rocking old versions be warned actually because of the difference in the implementation of character sets and available between different platforms windows/android/ios etc some of these text base emoticons may only display correctly on some platforms/browsers/mail clients. But you can then have hours of fun filling you mailbox with this type of stuff



Mail Apps are relatively simple to implement and this is a pretty straight forward example the first thing you have is the Manifest file where all the configuration information is held for this Mail App. Eg in my app some of the important relative information is

 <FormSettings>
    <Form xsi:type="ItemEdit">
      <DesktopSettings>
        <SourceLocation DefaultValue=
          "https://gscales.github.io/TextEmoticon/index.html" />
      </DesktopSettings>
      <TabletSettings>
        <SourceLocation DefaultValue=
          "https://gscales.github.io/TextEmoticon/index.html" />
      </TabletSettings>
      <PhoneSettings>
        <SourceLocation DefaultValue=
          "https://gscales.github.io/TextEmoticon/index.html" />
      </PhoneSettings>
    </Form>
  </FormSettings>

This tells us where the Mail App is being hosted is my case just in my GitHub Repo to learn more about the other manifest setting have a read of this. The Mail App itself is just a pretty simple html and javascript app that creates a table and reads in the text emoticons and controls the formatting and takes care of the backend operations by hooking into the JavaScript Api for office.

In the script.js for this app when you select the Subject object and click a text emoticon to insert your chosen Icon it will append this to the current subject (there is no way to do a positional insert based on the current position of the cursor in the subject. For the body you can insert the Icon at the current cursor location using the method from https://msdn.microsoft.com/EN-US/library/office/dn574748.aspx#mod_off15_HowToInsertDataBody_AtCursor

I've posted the code for this up into my GitHub repo at https://github.com/gscales/gscales.github.io/tree/master/TextEmoticon  if you want to test it you can install the app from the manifest at  https://gscales.github.io/TextEmoticon/manifest.xml . Although I'd recommend you clone it yourself and then you can change the text emoticons in the script.js file to whatever you like. If you do clone the repository you need to change the (the source location settings shown above) settings in the Manifest file to ensure its pointing at the files your hosting or you will never see your changes take affect.

No comments: