Post on 18-Dec-2014
description
transcript
UNPLUGGED MOBILE CONTROLS USER GROUP
April 2014
Agenda
Deep Dive UnpNavigatorComputed Control
Case Study SMC – Barbara Houchin
Next Month UnpDialog
CapEx Approvals app
Q & A
Deep Dive - UnpNavigatorComputed
Control for displaying nav categories
Features include:
Icon
Sub-Menus
Auto-highlight
Auto-size/display
Replaces Old UnpNavigator
UnpNavigatorComputed Config
Uses JSON objects to populate categories
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
UnpNavigatorComputed Properties
If hasSubMenu: true
subMenu: [
{ …properties from last slide… }
]
Sub-menus can be 2 levels deep
Other considerations
UnpHeader:
viewsButton=“true”
UnpFlatView, UnpAccordionView, UnpFormEditor, UnpFormViewer:
Position=“menu-aligned” (default)
UnpNavigatorComputed - Demo
Lets build one….
Case Study
Over to Barbara at SMC
Next Month
Meeting on Thurs 8th May
Deep Dive
UnpDialog
Case Study
CapEx Approvals App
Wireless Wednesday – Matt White and Myself
Wednesday 7th May
JQuery Mobile
Q & A
@Unp_UG
@MobileAppsRule
@mattwhite
www.Teamstudio.com/Unplugged
https://github.com/unplugged/unplugged-controls
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
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
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@smcusa.com
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
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
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
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
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
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