Forget emoticons - use selfies!

SharePoint Framework

The SharePoint Framework (SPFx) is an application model that provides full support for client-side SharePoint development. It runs in the context of the current browser page, so you can use REST API calls, JSOM, page context and other features that are accessible by the user.

SPFx is very similar to Script Editor, as it also allows HTML markup, styles, and JavaScript code. However, it makes the process of development, maintaining, configuration and updating much easier. It is the next step in SharePoint application development, combining traditional data flow and modern Front-End technologies such as NodeJS, Yeoman, Webpack, Gulp, React, Angular, TypeScript.

SharePoint framework

Microsoft Cognitive Services

Microsoft Cognitive Services is a collection of APIs based on machine learning and data analysis. 

There are 5 groups at the moment:

a.       Vision

b.       Speech

c.       Language

d.       Knowledge

e.       Search

Vision group contains tools for photo recognition. Speech provides translation, text-to-speech and vice-versa. Language APIs helps you to use linguistic analysis and spell checking. You can use Knowledge APIs for input predictions. Finally, you can improve app search functionality with Search API.

Go to the official Azure portal to find a full list of available Cognitive Services.

In order to use Cognitive Services, you just need to have a Microsoft Azure account. Select a plan that suits you best, get your own API key, and you are ready to get started!


Emotions Voting Application


Every day on social media, we “like” or “double tap” to express our response to a story or photo. Facebook recently extended this capability with “Reactions.” Instead of just giving a thumbs up and liking a post, you can respond with a love, ha-ha, wow, sad, or angry emoticon.

Our idea is to use selfies in place of these emojis and then interpret the emotions of users from the photo.

1)      Read the blog post,

2)      Make a selfie,

3)      ???

4)      Profit!

This is how we see it:

Web part component

Figure 1 – Web part component.

The program allows users to take a picture using their web-camera, look at detailed statistics for the survey, and then preview the selfies. It can be placed anywhere on the webpage (for example, right after the article or news section). Administrators can configure the lists where the information is stored, and place several emotions voting web parts into a single page or connect two web parts on different pages to one survey.



We decided to make this application using the power of SPFx and cognitive services.

First of all, we followed the Office Dev Center article and created the necessary project structure. With this template, it is extremely easy to dive into SPFx application development. We utilized a lot of Office UI Fabric components and features, e.g. Buttons, Panels, Callouts, Icons and others.

Every single vote and survey are saved into SharePoint lists, so you can manipulate this data to modify views, create reports, manage items, etc. From my point of view, this model is preferred, because it does not break common SharePoint user experience. Of course, site administrators should take care of list permissions.

There are four main components in the application:

1)      Web-camera

2)      Statistics

3)      Photo preview

4)      Root web part component

The main logic is concentrated in the root component, whereas additional components are used for displaying data. The web part was rather small, and we were not able to display all the necessary information inside it at any single moment. We did not want to display too many elements, just enough to get the most important information from the first look.

Hover tooltips.

Figure 2 – Hover tooltips.

We used hover actions and tooltips for showing a pie diagram legend and preview as shown above. If users want to get detailed statistics with numbers, they can simply click on the pie. The hover panel appears and becomes the main eye-catching content on the page.

Full survey statistics view

Figure 3 – Full survey statistics view

The same logic is applicable when you want to see personal statistic of each emotion.

Personal emotion

Figure 4 – Personal emotion statistics view

Finally, you can click on ‘Take a Picture’ to see the panel with a camera preview window, as the screenshot below shows.

Take My Emotion web-camera view

Figure 5 – Take My Emotion web-camera view

In summary, the developed Emotions Voting web part is a user-friendly interface with flexible functionality that can be a useful and interactive part of any website.

Feel free to contact iTechArt to get more details and try it out!

Created by Mikhail Krupsky, Sergey Shiroky.