UNPLUGGED MOBILE CONTROLS USER GROUP

May 2014

Agenda

Deep Dive UnpDialog UnpAlert UnpTabbedFooter

Case Study Extracted Design Method (One View Example)

Q & A

Deep Dive - UnpDialog

Problem: dialog(String); cannot be formatted

Deep Dive - UnpDialog

UnpDialog gives full range of customization Size, color, background, font etc

Deep Dive - UnpDialog

Usage: 1) Drag a UnpDialog control onto your XPage 2) Complete Title and Callback custom properties 3) Drag in a label or computed text for content

Deep Dive - UnpDialog

Usage: 4) ‘Callback’ is an optional client side JS function

executed on ‘OK’ 5) To trigger, call: unp.openDialog('dialogPopup');

Deep Dive - UnpDialog

Callback is a CSJS function:

Deep Dive - UnpDialog

Current Disadvantages: 1. Only 1 dialog per page as ID is hard coded 2. Cannot pass arguments into function call

(‘Callback’ property)

Deep Dive - UnpDialog

Other Advantages: 1. Extendable and can include other controls

Deep Dive - UnpDialog

Example: Selecting an item from a list (2 Options) 1) ComboBox/Dropdown:

Deep Dive - UnpDialog

ComboBox/Dropdown:

Deep Dive - UnpDialog

Do not use xp:ListBox for this: Blank as the HTML code generated in the same as for

a xp:comboBox But no ‘selected’ attribute can be set

Deep Dive - UnpDialog

Displayed list of items use xp:repeat and ul/li:

Deep Dive - UnpDialog

Scrollable area inside the dialog

Deep Dive - UnpDialog

Advantage 2 – Use SSJS (back to comboBox example)

Deep Dive - UnpDialog

Activate via hidden button

Deep Dive - UnpDialog

Exercise for viewer: Apply SSJS to ul/li version Hint use xp:panel with tagName =“li” for <li>

Deep Dive - UnpAlert

Simpler than UnpDialog – just a message and ‘Close’ button Drag in and complete the custom properties ‘Title’ and

‘Content’ WIP currently – will be part of Controls 3.3 release Want to parameterize title and content so multiple alerts

can be used on same page

Deep Dive – UnpTabbedFooter

Aid with Navigation usually for large forms/high number of fields but can be used as alternative to the UnpNavigator control

Allows the compartmentalization of form ‘areas’

Deep Dive – UnpTabbedFooter

Usage: Drag the custom control onto your XPage and set the

synctype property to point to either 'none', 'currentDB' or 'alldbs' to allow syncing the current db only (default) or all dbs on device. If set to 'none' then the sync button will not appear.

Create 'tabs' to include tappable areas in the footer for navigation purposes. Within each 'tab' you can set the icon, text, icon when tapped and the page to navigate to.

A callback client side JS function is available to perform post tap events

PostSyncTarget will navigate the user to a specified XPage after a sync has completed *

Navigation via the tabbed footer is currently performed as a full page load.

* Not for Mobile Web Browser Apps – only valid for Unplugged apps

Design Architecture – Abstracted Design Creating a mobile design in one NSF that pulls data

from other NSFs.

Design Architecture – Abstracted Design

Set up data in a view in existing DBs View must be common

Design Architecture – Abstracted Design

In new ‘Design DB’: Use data sources to external DB’s.

Design Architecture – Abstracted Design

Use beforeRenderResponse to collate data

Design Architecture – Abstracted Design

Use scoped var to sort data

Design Architecture – Abstracted Design

Store results in scoped var

Design Architecture – Abstracted Design Use xp:repeat and Controls CSS to mimic

UnpFlatView

Design Architecture – Abstracted Design

Result…

Design Architecture – Abstracted Design

For the form data, create the XPage content in the original DB

Use a ‘design’ XPage in the new design DB and load the data via UNID using AJAX

Q & A

@Unp_UG @MobileAppsRule @mattwhite

www.Teamstudio.com/Unplugged https://github.com/unplugged/unplugged-

controls