Developing an Online Menu
Leveraging SharePoint, HTML, CSS,
JavaScript, and JQuery
By Michael Chard, PMP
 SPONSORS
About Me
Michael Chard is a Program Manager and SharePoint Power
User/Trainer with Koniag Information Security Services in
Chantilly, VA. He is a US Navy Veteran and a certified
Project Management Professional (PMP). Mike has over 20
years' experience in the IT industry with positions ranging
from systems administrator to developer and trainer. Mike
has been working with SharePoint since 2006 with a focus
on Project and Portfolio Management.
Overview
 The
Challenge / Current Situation
 Gathering Requirements
 Building A Proof Of Concept
 Refining The Requirements
 Enhancing The Proof Of Concept
 How Was The Proof Of Concept
Developed?
 DEMO
HTML,
CSS, JavaScript, and JQuery
The Challenge
Can
you create an online ordering website in
SharePoint?
Over the weekend can you create a proof of
concept to demo Monday morning?
Current Situation
Automate
the meal ordering process
Orders
taken by phone and manually entered in
a Point of Sale (POS) system
Requires
2 – 3 personnel to answer the phones
during meal hours
The
All
POS system - standalone network
systems need to be on premise
Gather Requirements
 Meet
with Key Stakeholders
People
placing orders
People
currently taking orders
Leadership
Gather Requirements
Phase
Use
1: Web portal to place orders
existing menu to model the same look and feel
Breakfast, Lunch, and Dinner menus
Daily special food choices based on the date
available added to the existing menu
Meal items can include options such as type of
bread or additions to an omelette
An email is sent to the person when placing
the order and when food is ready for pickup
After an order is placed it will be transferred to the
POS system manually
Gather Requirements
Phase
2: The POS system will be moved
to the same network as the website
The
website would be set to push the order
directly to the POS system
Making
the ordering process automated from
the person ordering all the way to the
kitchen
Building A Proof Of Concept
 Work
on an on-premises government system
 Work within SharePoint
 No server-side code
 May be able to use Advanced Workflows
for Phase 2
SharePoint 2013 or Nintex
(neither currently installed)
Proof of Concept
Refining The Requirements
 Meet
with Stakeholders
 Add other features
Choice
and radio options to food items
Delegate
Specific
ordering for multiple people
meal ordering times
Enhancing The Proof Of Concept
Enhancing The Proof Of Concept
How Was The Proof Of Concept Developed?
 OOTB
SharePoint will not provide the
functionality nor the look and feel
 How was the proof of concept
developed?
HTML,
 On-line
CSS, JavaScript, and JQuery
Demo of the Menu
The
Code
JQuery call to retrieve Main Menu
Call to retrieve the Categories list
Set the Main Variables
Checking ordering time
Creating the Menu for Dinner
Building a menu item
Adding the Menu item to table
Building the item option popup
Creating the final order
Saving the order to a list
Questions?