Successfully reported this slideshow.
UNPLUGGED MOBILE CONTROLS
USER GROUP
April 2014
Agenda
 Deep Dive
 UnpNavigatorComputed Control
 Case Study
 SMC – Barbara Houchin
 Next Month
 UnpDialog
 CapExApp...
Deep Dive - UnpNavigatorComputed
 Control for displaying nav categories
 Features include:
 Icon
 Sub-Menus
 Auto-hig...
Replaces Old UnpNavigator
UnpNavigatorComputed Config
 Uses JSON objects to populate categories
UnpNavigatorComputed Properties
 label
 string - label on tile
 hasSubMenu
 boolean – expands to subsection
 page
 s...
UnpNavigatorComputed Properties
 If hasSubMenu: true
subMenu: [
{ …properties from last slide… }
]
 Sub-menus can be 2 l...
Other considerations
 UnpHeader:
 viewsButton=“true”
 UnpFlatView, UnpAccordionView,
UnpFormEditor, UnpFormViewer:
 Po...
UnpNavigatorComputed - Demo
 Lets build one….
Case Study
 Over to Barbara at SMC
Next Month
 Meeting onThurs 8th May
 Deep Dive
 UnpDialog
 Case Study
 CapEx ApprovalsApp
 WirelessWednesday – Matt ...
Q & A
 @Unp_UG
 @MobileAppsRule
 @mattwhite
 www.Teamstudio.com/Unplugged
 https://github.com/unplugged/unplugged-
co...
 SMC Corporation of America
– Pneumatics industry Leader
– Forbes list of World’s Most Innovative Companies
MOBILE ENERGY...
 Mobile Energy Assessments (MEA)
– Domino 9 XPages app
– Designed for iPad
– Using
– Unplugged Mobile Controls
 Eliminat...
MOBILE ENERGY ASSESSMENTS
Assessment
Machine(s)
Component(s)
bhouchin@smcusa.com
bhouchin@smcusa.com
 Unplugged Mobile Controls (v1.5)
MOBILE ENERGY ASSESSMENTS
UnpHeader
UnpFooter
UnpScrollableArea
UnpFlatView
bhouchin@sm...
MOBILE ENERGY ASSESSMENTS
 Up to 4 different document types available via a “portal-like” XPage.
– Machines for this Asse...
MOBILE ENERGY ASSESSMENTS
 Each page shows multiple layers of data.
– Navigate backward by clicking in a color-coded sect...
MOBILE ENERGY ASSESSMENTS
 Machine and Component pages have fields grouped into Collaplisble
“title-pane” style sections
...
 Photos are taken using Unplugged photo capture integration with iOS.eice.
– Uses File Upload control with parameters set...
 Photo Gallery allows for ease in scrolling through all photos on one page.
– Tap on photo to open Photo document.
MOBILE...
MOBILE ENERGY ASSESSMENTS
 Mobile app using
– Unplugged Mobile Controls from OpenNTF for Native look & feel
– Rapid Devel...
April Unplugged Mobile Controls User Group
April Unplugged Mobile Controls User Group
Upcoming SlideShare
Loading in …5
×

April Unplugged Mobile Controls User Group

512 views

Published on

The April 3rd Unplugged Mobile Controls User Group meeting covers:
- Changes to the UnpNavigator and why UnpComputedNavigator should now be used
- Barbara Houchin from SMC presents their mobile Field Service application built using a mix of the Unplugged Controls and JQuery Mobile (with camera integration)
- Q&A

Published in: Technology
  • Be the first to comment

  • Be the first to like this

April Unplugged Mobile Controls User Group

  1. 1. UNPLUGGED MOBILE CONTROLS USER GROUP April 2014
  2. 2. Agenda  Deep Dive  UnpNavigatorComputed Control  Case Study  SMC – Barbara Houchin  Next Month  UnpDialog  CapExApprovals app  Q & A
  3. 3. Deep Dive - UnpNavigatorComputed  Control for displaying nav categories  Features include:  Icon  Sub-Menus  Auto-highlight  Auto-size/display
  4. 4. Replaces Old UnpNavigator
  5. 5. UnpNavigatorComputed Config  Uses JSON objects to populate categories
  6. 6. UnpNavigatorComputed Properties  label  string - label on tile  hasSubMenu  boolean – expands to subsection  page  string - XPage to load when tapped  icon (optional)  string - Icon displayed on left of tile – uses FontAwesome*  ajaxloadid  string -Target div of content to load from ‘page’  ajaxtargetid  string -Target div to load content into current xpage  disabled  boolean -Tile is tappable or section header
  7. 7. UnpNavigatorComputed Properties  If hasSubMenu: true subMenu: [ { …properties from last slide… } ]  Sub-menus can be 2 levels deep
  8. 8. Other considerations  UnpHeader:  viewsButton=“true”  UnpFlatView, UnpAccordionView, UnpFormEditor, UnpFormViewer:  Position=“menu-aligned” (default)
  9. 9. UnpNavigatorComputed - Demo  Lets build one….
  10. 10. Case Study  Over to Barbara at SMC
  11. 11. Next Month  Meeting onThurs 8th May  Deep Dive  UnpDialog  Case Study  CapEx ApprovalsApp  WirelessWednesday – Matt White and Myself  Wednesday 7th May  JQuery Mobile
  12. 12. Q & A  @Unp_UG  @MobileAppsRule  @mattwhite  www.Teamstudio.com/Unplugged  https://github.com/unplugged/unplugged- controls
  13. 13.  SMC Corporation of America – Pneumatics industry Leader – Forbes list of World’s Most Innovative Companies MOBILE ENERGY ASSESSMENTS Barbara Houchin – Application Developer @BarbHouchin bhouchin@smcusa.com
  14. 14.  Mobile Energy Assessments (MEA) – Domino 9 XPages app – Designed for iPad – Using – Unplugged Mobile Controls  Eliminated transcription task  Automated report generation  Integrated photos  Improved data for Sales Mgmt MOBILE ENERGY ASSESSMENTS bhouchin@smcusa.com
  15. 15. MOBILE ENERGY ASSESSMENTS Assessment Machine(s) Component(s) bhouchin@smcusa.com
  16. 16. bhouchin@smcusa.com
  17. 17.  Unplugged Mobile Controls (v1.5) MOBILE ENERGY ASSESSMENTS UnpHeader UnpFooter UnpScrollableArea UnpFlatView bhouchin@smcusa.com
  18. 18. MOBILE ENERGY ASSESSMENTS  Up to 4 different document types available via a “portal-like” XPage. – Machines for this Assessment listed in white section – Click on binoculars (xp:button wi/icon) to reveal Machine’s Components in blue section. – Click on Machine or Component line to open that document. bhouchin@smcusa.com
  19. 19. MOBILE ENERGY ASSESSMENTS  Each page shows multiple layers of data. – Navigate backward by clicking in a color-coded section for that “parent” or “grandparent’. – The last “child” of a document type will be highlighted – Collapsible sections for Photos (separate documents) and Notes – Multiple independently scrollable areas bhouchin@smcusa.com
  20. 20. MOBILE ENERGY ASSESSMENTS  Machine and Component pages have fields grouped into Collaplisble “title-pane” style sections – Using jQuery plugin – Modified plugin to allow nesting – Added Collapse All function bhouchin@smcusa.com
  21. 21.  Photos are taken using Unplugged photo capture integration with iOS.eice. – Uses File Upload control with parameters set to tell Unplugged to perform photo capture MOBILE ENERGY ASSESSMENTS bhouchin@smcusa.com
  22. 22.  Photo Gallery allows for ease in scrolling through all photos on one page. – Tap on photo to open Photo document. MOBILE ENERGY ASSESSMENTS bhouchin@smcusa.com
  23. 23. MOBILE ENERGY ASSESSMENTS  Mobile app using – Unplugged Mobile Controls from OpenNTF for Native look & feel – Rapid Development + Ability to work offline – Photo Capture integration  Portal-like UI – Multi-level data on a page – Independent scrolling areas – Touch a panel to open another page – Highlight most recent visited documents – Collapsible panel within scrollable area – Scrollable Photo Gallery  JQuery calendar (coming soon) bhouchin@smcusa.com

×