Education Solutions in Office 365 and SharePoint – SharePoint Hosted Add-Ins – Bootstrap Navigation – Mobile App Designs and Prototypes

As we progress with the Education Solution in Office 365 and SharePoint, the first build of our Mobile App (SharePoint Hosted Add-In) has been deployed. As expected, design and prototyping are consuming a majority of project time and budget.

  • Creation/Maturation of artifacts (solution components, functional and technical specifications, IA, icons and design elements, etc.).
  • Iteration on the above and more.
  • Approval/Reject cycle.

We’re keeping a constant churn of dev-test-fix with QA and eliciting stakeholder feedback as new milestones are reached. Some minimal-for-critical-success criteria are in place to help manage a project under a rapid-churn like this:

  • BDMs/TDMs are truly empowered to make decisions.
  • Daily stand-ups are enforced.
  • A task board or something like the SharePoint Project Task Tracker is in place for triage.
  • Communication and visibility are embraced, hence “Daily stand-ups” above, but I’m more so referring to team support and successful execution here.

Let’s review progress on the UI, IA, and our first mobile app.

SharePoint Page and Navigation with Bootstrap UI Update

The distribution of mobile and desktop focus is being refined and implemented. Shop-floor/mobile-ready app entry points are in the core UI (G-Code Lookup and Time Clock), and so are classroom oriented entry points for viewing assignments, grades, and linking to other sites for online learning.

SharePoint Mobile and Desktop

These graphics are also closing on final sign-off, and they’re wired up to actual endpoints such as custom apps, document libraries, and external sites.

Checking in on the Office 365 SharePoint Information Architecture

IA design and implementation are in a mixed state. Content types, site columns, and list definitions that are locked down (or are very close) have been implemented in Visual Studio and are deploying via WSP. Other definitions are being built on the front-end and will be migrated into our solution after approval. We see below, for example, our G-Code content-type and associated list defined in Visual Studio and implemented/deployed in SharePoint.

Content Types and Lists


The Mobile App SharePoint Hosted Add-In: G-Code Lookup

When CNC Machinists program mills and lathes, they define their part programs using a series of codes that are prefixed with a representative character related to the codes’ function (e.g. G71 for canned cycle, M3 for spindle-on clockwise, T0202 for tool selection on a lathe, I-.125 to specify a radius, etc.). The broader part program specifies highly precise control over different materials as they collide at high speeds to produce parts ranging from a spring in a keyboard to airplane wings. A broad-stroke reference of “G Codes” is used during casual conversation when talking about the entire set of codes.

In an educational setting, and in a professional shop, the question of which G-Code means exactly what comes up often. It happens enough such that each machine has a chart of all the primary G/M codes permanently mounted to its structure. On a shop floor, the mounted reference chart is perfect, especially if you know exactly which code you’re looking for. There’s no need to pull out your phone or go to a kiosk when a perfectly structured chart that is specific to that machine is within a hand’s reach.

However, in the lab or in a classroom, one is not standing in front of the machine. And, it’s not so easy to find a code on those mounted charts by keyword or description. For example, one may ask, “What code is ‘coolant on'”? With the mounted chart (which is in very fine print), you need to manually scan dozens of codes which may have that word present. So, we have a real-world problem that exists in both our environments (education and professional) and we have a solution that will work for both: the G-Code Lookup Mobile App.

  • Must be as easy to use as the manual reference chart.
  • Should scale well on a desktop and mobile.
  • Enables machinists to search by exact-or-partial code, keywords, and description.

Here’s where the SharePoint Hosted Add-In (App) is at so far:

G-Code SharePoint App

Fidelity across Android, Internet Explorer, Firefox (not shown), and Chrome are 100%, and the app is connected to SharePoint via the JavaScript Object Model JSOM.

In the near term we’ll clean-up the G-Code Mobile App to get it pushed for review and iteration, move on to the next app (Time Clock), keep building out the IA components, and start putting some structure around security and document management. There’s a lot more to do.


Next Posts: activity around submitting assignments and the start of managing grades.

Categories: Education Solutions, Machine Technology, SharePoint, Software Development

Tags: , , , ,

Leave a Reply