Date post: | 18-Dec-2014 |
Category: |
Technology |
Upload: | teamstudio |
View: | 101 times |
Download: | 0 times |
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
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
Unplugged Mobile Controls (v1.5)
MOBILE ENERGY ASSESSMENTS
UnpHeader
UnpFooter
UnpScrollableArea
UnpFlatView
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.
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
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
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
Photo Gallery allows for ease in scrolling through all photos on one page. – Tap on photo to open Photo document.
MOBILE ENERGY ASSESSMENTS
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)