In preparation for the previous instance of the course last year, we shot a video with yours truly explaining what the course was about and why you should attend.

Omniversity : Web Programming with SAP’s Internet Communication Framework from Madlab on Vimeo.

Madlab have their own semi-resident video expert and in the run up to the next course we’re going to shoot a new video with lots of exciting content! Well, I guess you might call it exciting if you are into SAP tech and seeing debugging activity in slow motion.

Anyway, watch this space – next week I’m over at Madlab again for the shoot. Perhaps I should get a haircut. Or a wig.

His team has an enormous scope, covering Mobile, In-Memory, On-Demand, HANA and more. While the word “Marketing” might be auto-filtered by a techie’s radar-filter, what became clear very quickly is that this group is totally developer focused. His group is already building a brand-new Developer Center (I wrote about this earlier this week) and is focused on helping the developer help themselves. What’s more, the group is staffed with developers. I’ve not managed to find anyone in TIP yet that doesn’t have a developer background.

DJ Adams interviews Aiaz Kazi at SAP TechEd Live 2011

Hasso is reported to have said “developers are the key to success”, and of course, we all know that Developers Are The New Kingmakers. What becomes clear in this interview, is that there’s a re-focus on the developer in the space that spans the distance between mobile and enterprise. This re-focus is long overdue in our industry, so I applaud SAP for having the courage to lead on this. Yes, SAP will benefit because one of the keys to a successful mobile platform is a host of developers in the non traditional-SAP space. But if the message and focus builds, the developer at large will benefit even more.

Perhaps this is a milestone along the way to the upcoming Developer Renaissance?

The interview is here: http://www.sapvirtualevents.com/teched/sessiondetails.aspx?sId=841

HTML5 is one of those technologies. While not so much a surprise, what’s more revealing, and encouraging, is that it’s being given decent coverage at SAP TechEd this year. The adoption of HTML5 as the core of a new UI library (originally codenamed “Phoenix”) for app front-ends is something that has a voice here. Look at the TechEd sessions available:

• CD202 HTML5 for Lightweight SAP Applications
• MOB264 Building & Customising a Mobile Application Without Writing Code
• MM220 How to Customise a Mobile Application with HTML5 and Javascript
• EXP443 HTML5 @ SAP

That’s not to say that this is breaking news – Thomas Jung (an SAP Mentor from SAP Labs) made reference to Phoenix in an interview with Jon Reed a few months ago. Furthermore, in a very useful chat with SAP’s Chris Whealy on Monday after InnoJam, I got to understand more about the philosophy and approach of SAP NetWeaver Gateway’s exposure of data objects and their relationships in a way that would make HATEOAS pay attention. And Chris used an early version of the UI library to present the exposed data. This seems to be a common theme internally in SAP, at least.

So what’s the deal? In EXP443 I learned that the library is built upon jQuery. So SAP are avoiding the NIH syndrome, that’s good. But there were other attendees that were questioning SAP’s decision to build Yet Another Javascript Ui Library. At the very least, the model implementation of the library’s MVC framework gives the wily Javascript hacker a head-start on using and consuming Gateway services. And in my opinion that’s the deal. Yes, we have a very nice UI library (and no, it’s not available until 2Q12, before you ask!) but we also have code that speaks the language of thousands of front-end developers on the one hand, and eases the connection to the proprietary back-end on the other.

SAP’s future lies with developers, and they’re embracing those developers in many different ways (the Technology & Innovation Platform team is one group that is making seriously good moves in this direction — but that’s a story for another time). HTML5 adoption by SAP was most likely part of a scratching of an internal itch, but it implicitly embraces non-SAP developers in potentially far-reaching ways. Great stuff.

David Brutman - Technology Platforms Developer Programs

Tangible at this year’s TechEd is the explosion of concepts, tools and technologies all fighting for primary position in the finite developer mindspace. HANA, NetWeaver Gateway, SUP, and the rest. And perhaps I’m not a typical developer these days, but I’m looking for guidance: some focused documentation, some tutorials, and perhaps most importantly, a platform to try this stuff out on.

Enter the SAP Developer Center (I’ll keep to the US spelling of this for consistency!) – which is pretty much exactly what I’m looking for. It’s not live yet, but when it is (we’re talking 1Q12), it looks to be a killer resource centre. Right now it’s in beta testing, specifically with HANA. Think code.google.com / developer.google.com with a cloud-based offering of trial instances on demand. A go-to resource centre for building your skills in the new era of SAP’s technology platform.

Sounds good? I think it sounds great! Look out for it appearing as part of the SAP Community Network soon.

I’m taking part in Movember, a fun and serious movement where moustaches are grown, ridicule is thrown, and hopefully people become more aware of men’s health in general, and prostate and testicular cancer in particular.

The idea is that you start clean-shaven on 1st Nov, and grown your moustache through the month, raising money along the way. I have a Movember page here:

http://mobro.co/qmacro

Please visit and donate what you can – I’ll be very grateful, thank you!

SAP’s Internet Communication Framework (ICF) is the platform that underpins the majority of SAP’s offerings in this space, even SAP NetWeaver Gateway. This 2-day course will help you gain a detailed understanding of the framework, harness its power, and unleash your own resource orientated web service masterpieces!

Dates in March and May are available; follow the links to find out more and to book a place:

Sat 03 – Sun 04 March 2012

Wed 09 – Thu 10 May 2012

Alternative Dispatcher Layer

One of the topics covered in Day 2 on this course is the Alternative Dispatcher Layer (ADL), a lightweight alternative approach to building web applications, an approach informed and influenced by other libraries and frameworks such as the Python webapp framework in Google App Engine. Read more about the origins of ADL in this SAP Developer Network post: A new REST handler / dispatcher for the ICF.

If you’re after more background, see this post from earlier this year: Stand Steady on the Shoulders of Giants

Looking forward to seeing you on the course!

Life at AstraZeneca has been great; it’s one of the friendliest places to work, the people are great, and the location and facilities are second to none. I also met my wife and theoretical childhood sweetheart Michelle here. It’s not all been a bed of roses of course (nowhere is!) at times the work has been frustrating and increasingly there are too many layers between me and the code surface.

At heart I’m a coder and builder, driven by curiosity and the desire to learn, teach and implement.

So it’s with great excitement that, in January 2012, I’m joining Bluefin Solutions as a permanent member of the team. I’ve known many of the gang at Bluefin for a while, and feel as though I already have a lot in common with them. I’ve spoken at the Northern IT Directors’ Round Table for them, was their first guest blogger, and have bumped into many of them during SAP orientated events from SAP Evenings to SAP TechEds and beyond.

My official title will be “Senior SAP Development Architect” but there’s also an “Evangelist” flavour to my role, which I’ll be embracing and making my own. What attracts me to Bluefin in addition to the quality of their people is their drive, their leadership and their embrace of technology, and with that in mind, I’m really looking forward to helping research, steer and shape innovation in the Enterprise in the near future.

Hooray!

Parts Overview

1. Introduction to the app, and a short screencast showing the features
2. Using the Tasks API to retrieve and insert tasklists, and the Ui Services to build the tasklist chooser component
3. Using the UrlFetch Services to interact with the Google+ API and grab info on articles pointed to by users in their activity stream
4. Synchronising the URL list in the spreadsheet with corresponding tasks in the chosen tasklist
5. Putting it all together and using the OnOpen event to insert a new 2-item menu entry on the spreadsheet’s page <– You Are Here

Putting it all together

So at this stage we’ve done pretty much everything required for this example app. The final task is to extend the standard Spreadsheet menu to give the user access to the custom features of selecting a tasklist, and kicking off an update (URL pull and synchronisation). It’s very easy to extend the menu; in a few lines of code we’re going to end up with something like this:

Menu

It’s as simple as this:

function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [
    {name: "Update", functionName: "update"},
    {name: "Select Task List", functionName: "taskListUi"}
  ];
  ss.addMenu("Articles", menuEntries);
}

We use the addMenu() method of the Spreadsheet class to create a new menu entry with an array of objects representing menu items. And the function name? onOpen() is one of a number of built-in simple event handler functions; this one runs automatically when a spreadsheet is opened – an ideal time to extend the menu.

The complete script

So we’re done with the final part! Let’s celebrate with the script in its entirety. And a beer. Cheers!

// Constants

APIKEY = "AIz...drBs"; // don't forget to get your own and record it here
ACTIVITYLISTURL = "https://www.googleapis.com/plus/v1/people/{userId}/activities/{collection}";
READINGLISTCELL = "D1";
USERIDCELL = "B1";
USERID = "106413090159067280619"; // Fallback default

// update()
// Pulls in article links into sheet and synchronises with task list

function update() {
  // First, check that we have a tasklist id already; it's stored in
  // the comment section of the 'readinglistcell'
  var sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var taskListId = sh.getRange(READINGLISTCELL).getComment();
  // If we don't have an id, tell the user to choose a tasklist
  if(taskListId === "") {
    SpreadsheetApp.getActiveSpreadsheet().toast(
      "Use Articles -> Select Task List to choose a task list",
      "No Task List",
      5
    );
  // Otherwise, we know which task list to synchronise with, so
  // go and update the reading list with URLs from the Google+ activity
  // list, and then sync that with the task list items
  } else {
    retrieveActivityUrls_();
    synchronise_(taskListId);
  }
}

// taskListUi()
// Displays a Ui to allow the user to select a tasklist to manage
// the reading tasks. Can select an existing task list or create a new one

function taskListUi() {
  var doc = SpreadsheetApp.getActiveSpreadsheet();
  var app = UiApp.createApplication();
  app.setTitle('Task Lists');

  // We'll have a grid and a button in this
  // vertical panel
  var panel = app.createVerticalPanel();

  // Use a listbox to display a choice of existing tasklists
  var lb = app.createListBox(false);
  lb.setName('existingList');
  var tasklists = getTasklists_();
  for (var tl in tasklists) {
    lb.addItem(tasklists[tl].getTitle());
  }  

  // Use the grid to layout the listbox, a textbox for a new list,
  // and some corresponding labels
  var grid = app.createGrid(2, 2);
  grid.setWidget(0,0, app.createLabel("Existing:"));
  grid.setWidget(0,1, lb);
  grid.setWidget(1,0, app.createLabel("Or new:"));
  grid.setWidget(1,1, app.createTextBox().setName('newList'));

  // The only button; handler will be linked to this button click event
  // Remember to add the grid contents to the callback context
  var button = app.createButton("Choose");
  var chooseHandler = app.createServerClickHandler('handleChooseButton_');
  chooseHandler.addCallbackElement(grid);
  button.addClickHandler(chooseHandler);

  // Put it all together and show it
  panel.add(app.createLabel("Select existing or create new list"));
  panel.add(grid);
  panel.add(button);
  app.add(panel);
  doc.show(app);
}  

// handleChooseButton_(e)
// Handler for 'Choose' button on taskListUi Ui; creates a new task list
// if a new one has been specified; grabs the ID of the chosen task list
// and stores the task list name and id in the TASKLISTCELL

function handleChooseButton_(e) {

  // Assume an existing list was chosen
  var selectedList = e.parameter.existingList;

  // But check for a new list being specified; if it as, create
  // a new task list
  if(e.parameter.newList != '') {
    selectedList = e.parameter.newList;
    var newTaskList = Tasks.newTaskList().setTitle(selectedList);
    Tasks.Tasklists.insert(newTaskList);
  }

  // Grab the list of tasklists, because we'll need the id
  var taskLists = getTasklists_();
  var taskListId = -1;
  for(tl in taskLists){
    if(taskLists[tl].getTitle() === selectedList) {
      taskListId = taskLists[tl].getId();
      break;
    }
  }

  // Record the list name and id
  var sh = SpreadsheetApp.getActiveSheet();
  var cell = sh.getRange(READINGLISTCELL);
  cell.setValue(selectedList);
  cell.setComment(taskListId);

  // Close the Ui popup and display the name of the chosen list
  var app = UiApp.getActiveApplication();
  app.close();
  SpreadsheetApp.getActiveSpreadsheet().toast(selectedList, "Selected List", 3);
  return app;
}

// onOpen()
// Event based function called when the spreadsheet is opened; adds items
// to the menu

function onOpen() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var menuEntries = [
    {name: "Update", functionName: "update"},
    {name: "Select Task List", functionName: "taskListUi"}
  ];
  ss.addMenu("Articles", menuEntries);
}

// getTasklists()
// Retrieve a list of the user's tasklists (uses the APIs Services)
// Note that the Tasks Services docu is not accurate here; we would
// expect to be able to use the TasklistsCollection class.

function getTasklists_() {
  var tasklistsList = Tasks.Tasklists.list();
  return tasklistsList.getItems();
}

// retrieveActivityUrls_()
// Use UrlFetch to retrieve a Google+ API resource: activities for a person
// Use Javascript data structures; restrict the number of API calls

function retrieveActivityUrls_() {

  // Grab existing list of URLs
  var sh = SpreadsheetApp.getActiveSheet();
  var lastRow = sh.getLastRow();
  var urlList = sh.getRange(2, 1, lastRow - 1 || 1) .getValues();
  var list = {'old': {}, 'new': []};
  for (var i in urlList){
    list['old'][urlList[i]] = 1;
  }

  // Use the userid in the sheet, fallback to a favourite
  var userid = sh.getRange(USERIDCELL).getValue() || USERID;

  // Build Google+ API resource and retrieve it; parse JSON content
  var actListUrl = buildActivityListUrl_(userid, 'public', APIKEY);
  var jsonString = UrlFetchApp.fetch(actListUrl).getContentText();
  var activities = Utilities.jsonParse(jsonString);

  // We're looking for the item object attachments, where the
  // attachment's objectType is 'article'. We want the url and displayName
  for (var i in activities.items) {
    var attachments = activities.items[i].object.attachments;
    for (var a in attachments) {
      var attachment = attachments[a];
      // We've got a URL and title; store it as new if it doesn't
      // already exist. Store it as list of lists, ready for
      // a setValues([][]) insert
      if (attachment.objectType == 'article') {
        if (! (attachment.url in list['old'])) {
          list['new'].push([attachment.url, attachment.displayName]);
        }
      }
    }
  }

  // Blammo!
  if (list['new'].length) {
    sh.getRange(lastRow + 1, 1, list['new'].length, 2).setValues(list['new']);
  }

}

// synchronise(taskListId)
// Synchronise the URLs in the spreadsheet with items in the chosen tasklist
// The task list item id for a URL is stored in the comment for that URL cell

function synchronise_(taskListId) {

  // Grab list of all URLs, and associated comments
  var sh = SpreadsheetApp.getActiveSheet();
  var urlRange = sh.getRange(2, 1, sh.getLastRow() - 1, 1);
  var urls = urlRange.getValues();
  var comments = urlRange.getComments();

  // For each URL, check the status of the associated task.
  // If there isn't an associated task, create one.
  for (var i = 0, j = urls.length; i < j; i++) {
    if (comments[i] == "") {
      Logger.log("New task");
      var task = Tasks.newTask();
      task.setTitle(urls[i]);
      var newTask = Tasks.Tasks.insert(task, taskListId);
      sh.getRange(i + 2, 1).setComment(newTask.getId());
    } else {
      Logger.log("Existing task");
      var existingTask = Tasks.Tasks.get(taskListId, comments[i][0]);
      if (existingTask.getStatus() === "completed") {
        sh.getRange(i + 2, 1, 1, 2).setFontLine("line-through");
      }
    }
  }
}

// buildActivityListUrl_(userId, collection, apiKey)
// Creates a specific resource address (URL) for the public activities
// for a given person in Google+
// See https://developers.google.com/+/api/latest/activities/list
// This will be obsolete when there are direct Google+ Services for
// Apps Script

function buildActivityListUrl_(userId, collection, apiKey) {

  var actListUrl = ACTIVITYLISTURL;
  actListUrl = actListUrl.replace(/{userId}/, userId);
  actListUrl = actListUrl.replace(/{collection}/, collection);
  actListUrl = actListUrl + '?key=' + apiKey;

  return actListUrl;
}

Parts Overview

1. Introduction to the app, and a short screencast showing the features
2. Using the Tasks API to retrieve and insert tasklists, and the Ui Services to build the tasklist chooser component
3. Using the UrlFetch Services to interact with the Google+ API and grab info on articles pointed to by users in their activity stream
4. Synchronising the URL list in the spreadsheet with corresponding tasks in the chosen tasklist <– You Are Here
5. Putting it all together and using the OnOpen event to insert a new 2-item menu entry on the spreadsheet’s page

Putting this into context: the Update request

We’ve covered a lot of ground in the previous three parts in this series. Now we’re at the stage where we have the functions for

• creating a Ui for choosing an existing / creating a new tasklist
• handling the button event on the Ui
• getting a list of tasklists
• retrieving URLs from a Google+ activity stream

So the one main piece of work outstanding is synchronising the retrieved URLs as tasks on the chosen tasklist.

If you watch the screencast shown in Part 1 you’ll see that the synchronisation is part of a more general ‘update’ request, that includes the fetching of new URLs from Google+ and synchronising them with the tasklist. So let’s have a look at the function that binds those two things together.

Here’s the update() function, which we’ll allow the user to call from a menu item (we’ll cover this in the next instalment).

READINGLISTCELL = 'D1';

function update() {
  // First, check that we have a tasklist id already; it's stored in
  // the comment section of the 'readinglistcell'
  var sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var taskListId = sh.getRange(READINGLISTCELL).getComment();
  // If we don't have an id, tell the user to choose a tasklist
  if(taskListId === '') {
    SpreadsheetApp.getActiveSpreadsheet().toast(
      "Use Articles -> Select Task List to choose a task list",
      "No Task List",
      5
    );
  // Otherwise, we know which task list to synchronise with, so
  // go and update the reading list with URLs from the Google+ activity
  // list, and then sync that with the task list items
  } else {
    retrieveActivityUrls_();
    synchronise_(taskListId);
  }
}

This function grabs a reference to the active sheet, and pulls the comment from the cell that we’ve designated as where the reading list tasklist info is stored: READINGLISTCELL. The name is stored in the cell, and the ID is stored in the cell’s comment. If there isn’t an ID, then we’ll ask the user to choose a tasklist using the Ui we built in Part 2. The Browser class in Google Apps Script’s Base Services gives us a nice dialog box that looks like this:

Message Box

But there’s also a nice visual message feature that’s available in the Spreadsheet Services, specific to a spreadsheet: toast(). Calling this causes a popup to appear in the lower right of the screen, which stays visible for a short while. This is what it looks like:

Toast message

Because the ‘toast’ name is so evocative, we’ll use it in our function to prompt the user to choose a tasklist.

If there’s already a tasklist chosen, then we go straight into retrieving the URLs (see Part 3) and then call the synchronise_() function, passing the ID of the tasklist.

Synchronising URLs and Tasks

Ok, so what do we need to do to synchronise the URLs? It’s similar to the technique described in the great article “Integrating with Google APIs – Creating a simple reading list“. There are a couple of differences: I’m not going to use the UrlShortener Services, and I’m going to try and reduce the number of API calls by bulk-grabbing the cell data.

First, we get a range reference on the active sheet, which equates to the list of URLs already there. We get all of the URLs (urlRange.getValues()) and all of the corresponding comments (urlRange.getComments()).

function synchronise_(taskListId) {

  // Grab list of all URLs, and associated comments
  var sh = SpreadsheetApp.getActiveSheet();
  var urlRange = sh.getRange(2, 1, sh.getLastRow() - 1, 1);
  var urls = urlRange.getValues();
  var comments = urlRange.getComments();

We go through each of the URLs, and create a new task in the tasklist if there isn’t already something in the comment for that URL:

• instantiate a new task object: Tasks.newTask()
• add the title: task.setTitle()
• add the task to the tasklist: Tasks.Tasks.insert()
• insert the new task’s ID into the comment for the URL: setComment()

Otherwise we’ve already created a task for the URL, so we grab the task to get the status, and if it’s marked as completed, we format the URL and corresponding description (in the next column) to set strike-through text.

  // For each URL, check the status of the associated task.
  // If there isn't an associated task, create one.
  for (var i = 0, j = urls.length; i < j; i++) {
    if (comments[i] == "") {
      Logger.log("New task");
      var task = Tasks.newTask();
      task.setTitle(urls[i]);
      var newTask = Tasks.Tasks.insert(task, taskListId);
      sh.getRange(i + 2, 1).setComment(newTask.getId());
    } else {
      Logger.log("Existing task");
      var existingTask = Tasks.Tasks.get(taskListId, comments[i][0]);
      if (existingTask.getStatus() === "completed") {
        sh.getRange(i + 2, 1, 1, 2).setFontLine('line-through');
      }
    }
  }
}

That’s it. Stop by next time for the last part in this series, where we put everything together and insert a 2-item menu entry to tie it all together. Thanks for reading!