PointTaken – final submission ASPC 2015

Red Button Marketing
Red Button Marketing (RBM) is a PR agency that has specialized in helping companies and persons to promote themselves in social media.
RBM helps the company/person to identify what the hottest topics within their profession are.
RBM’s solution scans new blogs, tweets and hash tags posted by high profiled persons (lead stars) within the industry. This is how the company knows what the latest and greatest is and what they should blog about next. The solution also lets other people within the company come with suggestions for new company blog posts. Case officers write the blog post.
When a blog post is approved and published the red button starts blinking and the button is “armed”.

A Sith lord or commander pushes “The red button” (a physical red button). This trigger an event that at first blogs the spams social media such as Twitter, Facebook and LinkedIn with a link to the blog post.
In this way, the company or person shows the world that they too are experts within their field of profession.
wix

Logging into SharePoint
When users log on to SharePoint they are routed to their correct role-based dashboard.

User pop-up for routing:
user route

Editor pop-up for routing:
editor route

Case Officer for routing:
CO route
Flow chart of the process

Visio Process- Red Button Marketing

Flow chart explained
New suggestions are either added by users or by a search service. The search service is a configured Google Custom Search, but can be hooked up to any open search proivder. The search is configured to be scoped on several sites like TechNet, Social, yammer, facebook, twitter, etc. The search is done with a set of “buzzwords” distributed through a SharePoint list. The list of buzzords can be filled by registering leaders in the community and their hashtags or buzzwords.
The articles found with the keywords as searchterms will be grabbed and title and url to blog post is added to a SharePoint list. Users add new suggestions from the user dashboard.
suggestions

The search service
To meet the need of our customers, we need to be able to find new and relevant articles on the internet. The search is done with a set of “buzzwords” distributed through a SharePoint list. The articles found will be grabbed and handed over to SharePoint Online and included in our internal workflow/production.
The solution consists of three parts.

Skjermbilde1

We have configured a Google Custom Search. The search is configured to be scoped on several sites like TechNet, Social, etc, but – important: we’re NOT searching the whole internet.
Unfortunately the Google Custom Search only offers 100 free searches before we will have to pay. As a company, we would off course have paid the price – right here on ASPC2015 we don’t do that. Because of that, we’ve been forced to keep manual control over the Google search (else we would’ve ran out of fun within 5 minutes ….)

Capture1

We have a server “out there” – from now on referred to as “The Bergen server” – on which our search app, resultstorer and services runs.
The first application is the controller. This app is executed manually to avoid running out of free search queries. When executed, this app takes the first buzzword and kicks off the second application. This application implements a call to the google custom search and receives the results before it calls our third application. This application stores the results in a database on the Bergen Server.
The forth app on the Bergen Server, is the app that hands over the search results to SharePoint Online when called. This app may be configured to only send results registered since day x, week y or – for that sake – all findings stored.

We have created a provider hosted app in Azure. This app looks pretty simple with one single button – but it has a very important job.
When the button is clicked, the app makes a call to our Bergen Server and gets all the latest search results found. When received, the app begins to iterate them. Every new item will be stored in the SharePoint list “Suggestions” – but NOT before we’ve checked if it already may exist in the list. The check is done by looking at the incoming items Google Cache Id and if there are items already stored with the same id (Google Cache –yes, that “dies” after a while – but in production, our scope is never longer than 1 to max 2 weeks. Checks shows that the Google cache lives longer for items that are created within the last or two weeks.

The user dashboard contains a add-new-suggestion button, a Visio web part which is connected to the suggestion list, and a web part showing filtered suggestions. The Visio web part is clickable and filters the suggestion list web part based on status (new, blogs in progress and blogs published). The picture shows the user dashboard with filter on published blogs.
User accepted

When new suggestions are added an editor is alerted by mail through a workflow. New suggestions are also shown in the editors dashboard.
editor dash

The dashboards:
The dashboards is made entirely on the client side and all the files are stored in Site Assets. By leveraging User Custom Actions we have deployed two js-files via the scriptlink. The files are jquery (always nice to have ready for action, and a small file called appLoader.js. The appLoader.js helps our development environment (hello SublimeText!) and extremely small-footprint clientside development.
The whole appLoader is the following code:

$(document).ready(function(){
$(“#editorsDashboard-app”).load(“../../SiteAssets/modules/editorsDashboard/editorsDashboard.html”);
$(“#publishPost-app”).load(“../SiteAssets/modules/publishPost/publishpost.html”);
$(“#welcome-app”).load(“../SiteAssets/apps/wp/post.html”);
});

This means that are apps can be developed side by side and without the .tmp-issues that tend to follow mapping the O365-folders to your own machine.

Case officers dashboard:
CO dash

The editor assigns a new suggestion to a case officer which writes a blog post. When the blog post is written the editor decides if it’s ok or not. If it’s not ok, it gets sent back to the case officer for more editing. When a blog post is ok, the editor changes status field in blog post by clicking on a button. This updates the suggestion list item and posts the blog post on WordPress. Then the the physical red button gets armed.
BigRedButton2

When the red button is pressed a blog post is created on wordpress (or your flavour of the month blogging-tool)

This is the internal blog:
internal blog pt

This is the WordPress-blog that starts everything.
wordpress pt

with the use of ifttt.com it then publishes a post on facebook, twitter, and yammer with a link to the newly posted blog. This can of course be added on to more social media accounts.

twitter tweet blog

facebook PT

Post to yammer

When the red button is pressed, it publishes a post to different social media. This is how it posts on yammer:

Request:

yam.platform.request(
               {
                   url: “https://api.yammer.com/api/v1/messages.json”
                  , method: “POST”
                  , data: {
                     “body”: msg_value
                  , “group_id”: groupID
                  }
                  , success: function (msg) { alert(“Broadcasted to yammergroup!”); }
                  , error: function (msg) { alert(“Luke, I’m you father”); }
               }
            )

yammer post

All this is possible by using the brilliant RedMarking Yammer app:
yammer app

For this we are claiming for the Yam-yam Gimme Some badge:
Badge-YamYam

Dashboard redux

We have added some nice functionality to our dashboards. Namely contextual buttons that enables the editor to either make a suggestion worthy of a blog or finally accept a blog proposal (Hereby arming the red button). We have also made the dashboard a little more visually appealing.

dashboard2

Badge-Dash

H2H no. 2

Our preferrred solution:
We wanted to utilizie our existing search in th sky-app:

The writing to sharepoint is done by our azure-app:
To read the external API we would
1) Have an external service running on a separate server. This service grabs the http://www.arcticsharepointchallenge.com/api/teams, iterates it an generates a JSon string. This Json string would be the response of the service.
2) Include a rest-call in a provider hosted app in Azure that calls the service mentioned above. It receives the JSon file, iterates it and populates the SharePoint list.

The list is:
H2H - list

For the client we are utilizing a small custom sp-list and canvasjs to display our data:

the js code for displaying data for PointTaken over the years:

$(document).ready(function(){
var aspcData = [];
var teamResults = LS.SP.REST.GetListItemsByFieldValue(_spPageContextInfo.webAbsoluteUrl, “h2h”, “team”, “PointTaken”).then(function (items)
{

$.each(items,function(i){
aspcData.push({
label: item[i].Year,
y: parseInt(items[i].Points)
});

});
});

var chart = new CanvasJS.Chart(“chartContainer”);
chart.options.axisY = { prefix: “”, suffix: “” };
chart.options.title = { text: “PointTaken over the years in ASPC” };

var series1 = { //dataSeries – first quarter
type: “column”,
name: “”,
showInLegend: false
};
chart.options.data = [];
chart.options.data.push(series1);
series1.dataPoints = aspcData;
chart.render();

});

We are sharing it!

Earlier, we created and implemented the “Search App in the Sky” – now we’re sharing it on GitHub!

These solutions works as a platform to evolve and expand into a fully functional external-site search platform for delivery of results back to SharePoint. As stated in an earlier blogpost, the solution is deployed and running on three different places – 1 x server (BergenServer) on which the search runs, 1 x Azure provider-hosted website and the O365 site in which we register and uploads the provider hosted app.

Capture2

The GitHub uploads includes all necessary files you need.

Url to the GitHub repository: https://github.com/engelschion/Search-App-in-the-Sky

Tweet:
apsctweet

Badge-SharingCaring

Editors dashboard

Finally the editor has its very own dashboard.

The dashboard is made entirely on the client side and all the files are stored in Site Assets. By leveraging User Custom Actions we have deployed two js-files via the scriptlink. The files are jquery (always nice to have ready for action, and a small file called appLoader.js. The appLoader.js helps our development environment (hello SublimeText!) and extremely small-footprint clientside development.
The whole appLoader is the following code:

$(document).ready(function(){
$(“#editorsDashboard-app”).load(“../../SiteAssets/modules/editorsDashboard/editorsDashboard.html”);
$(“#publishPost-app”).load(“../SiteAssets/modules/publishPost/publishpost.html”);
$(“#welcome-app”).load(“../SiteAssets/apps/wp/post.html”);
});

This means that are apps can be developed side by side and without the .tmp-issues that tend to follow mapping the O365-folders to your own machine.

The Editor dashboard loooks like this and is leveraging a couple of JS-frameworks and components (angularjs, canvasjs, bootstrap).

The grids are made for quick look of the most useful cases and statuses for blogposts (New suggestions, blogs in progress and published blogs).

We also have KPIs that listen to these numbers and give the user a quick color-coded status. For instance is the KPI for blogs that are being processed based on a factor of new suggestions divided by all the completed posts. If this relation is too high (above 10) the KPI flashes red. The same way the KPI for suggestions says that we need at least 30 new suggestions at any given time.

The dashboard also consist of graphs based on canvasjs a nice little HTML5 and Canvas driven framework for building nice graphs. Our data for these grapsh consists of the hashtags we are using in our blogs And a compilation of these.

editordashboard

We think this qualifies for some badges namely:

For building the whole app on the client:
Badge-Salsa

For utilizing Canvas and canvasjs:
Badge-HighFive
And by the way for canvasjs:
thieving_bastards

For showing a lot of data for decision making business users (including graphs and som nice number aware kpi-boxes)
Badge-Dash

I also think it looks kinda nice, but that may be due to that fact the its 2AM, anywho im going for glossy pixels as well.
Badge-GlossyPixels

Excel Viso Power

Project manager Satine Dexterson keep track of number of new suggestions, blogs written, how many likes and how many retweets the blogs have. She put these data in a Excel spreadsheet. A Visio diagram is connected to this spreadsheet and show key numbers next to figures in Visio. This Visio diagram is added in a Visio web part in the Report dashboard page in SharePoint. The spreadsheet and Visio diagram are stored in a SharePoint Library.

Picture of the report dashboard with visio web part (notice the suggestion value in Q4):
Reports1

Picture of Excel spreadsheet and Visio diagram stored in SharePoint library:
Reports2

Picture of updating spreadsheet in Excel Online. Adding values to the december row. The value in Q4 suggestions before update was 430. Now it is 575:
Reports3

Picture of navigating back to the report dashboard. Q4 values are updated:
Reports4

For this we are claiming the Power User Love badge:
Badge-PowerUserLove

RestBatchExecutor in Action

To add all the hashtags that we farm on google drive and avoid using multiple requests and doing a lot of chit-chat when adding these to our sharepoint list we use the $batch endpoint.

As mentioned in our Lightning Speak earlier, the RestBatchExecutor is great for bundling up your batches. So instead of writing all the batchstuff ourself we went to github and got the RestBatchExecutor.js . wow its nice not having write the whole batch request as a string!

restbatchexecutor

Link to github:
https://github.com/SteveCurran/sp-rest-batch-execution

Badge-Thief