Q10 too fast ? why you need UNDO functionality

If you’re NOT developing for BlackBerry 10 platform perhaps your users are complaining apps running too slow.

Speedy Q10

On BlackBerry 10 you have to think ahead because apps are running so incredible fast – esp. using Keyboard devices like Q10 – that you run into situations not thinking about on a ‘normal’ smartphone.

You speed up users workflow using shortcuts:

E → 12 → enter

and you’re done with:

• tip on E to edit the quantity of an order position
• new page opens
• curser already in quantity field
• keyboard switched to numeric mode
• type 12 as new quantity
• tip on ENTER key
• new quantity saved
• page closed
• list summary recalculated

this is an intuitive and fast way to work with business apps on a smartphone.

And sometimes it can be too fast 😉

DeleteAction on Z10 (Touch)

As a good citizen of Cascades UI design guidelines you’re using a special ActionItem to delete a row in a list or so:

DeleteActionItem {
    id: deletePositionAction
    title: qsTr("Delete Position") + Retranslate.onLanguageChanged
    ActionBar.placement: ActionBarPlacement.InOverflow
    onTriggered: {
        // delete the position
    }
}

Delete actions are always placed at the bottom of your menu. Here’s how it looks like on a Touch Device:

To get something deleted you have to do a first tap to get the menu:

then you have to tap on the delete action:

there’s enough time to decide what to do and you have to tap directly on the delete action, so normaly you don’t ask the user “do you really want to delete this item ?”

DeleteAction on Q10 (Keyboard)

Now on Q10 the situation is different using shortcuts. You must know that Cascades automatically maps some actions to keys – and this will work in all applications without the need for you to code this by yourself. If a user on the Q10 taps on the menu, then the keyboard shortcuts become visible:

the DEL – key is mapped to the Delete Action. automatically.

the E – key is mapped to the Edit Quantity Action by me as a SystemShortcut:

SystemShortcut {
    type: SystemShortcuts.Edit
}

Because I want to edit something, I’m using one of the SystemShortcuts instead of my own custom ShortCuts.

Now we enter the dangerous area 😉

If the user tips on the DEL key here, the delete action will be triggered. without any warning. perhaps it was the wrong key and the user wanted to type P or ENTER.

You have to find a way to avoid this.

Undo – the user-friendly solution

Normaly converting apps from Touch (Z10) to Keyboard (Q10) is easy and soon done – but you should carefully test your app on Q10 to find hidden traps.

What can you do to avoid deleting a record by accident ? the easiest way would be to insert a yes/no SystemDialog and always ask if the record should be deleted. But now you’re breaking the users workflow. not so good.

here’s one solution:

• on Z10 use it as before
• on Q10 add an Undo function

Undo must be implemented a way not breaking users flow. There is a UI control you can use for this: Cascades SystemToast: a small popup window going away after a short time. And here’s my solution:

If DeleteAction is triggered, test if you’re on a keyboard device and if so, don’t execute the delete logic. Instead of this I’m changing the Icon of the list row and bring up a Toast with the same icon and some text to inform the user.

SystemToast {
    id: deleteToast
    body: qsTr("Position will be deleted") + Retranslate.onLanguageChanged
    icon: "asset:///images/position_to_be_deleted_small.png"
    position: SystemUiPosition.BottomCenter
    button.label: qsTr("Undo")
    onFinished: {
        if(deleteToast.orderId > 0){
            if (value == SystemUiResult.ButtonSelection) { 
                // UNDO clicked - revert to normal Icon in this case
            } else {
                // do your DELETE stuff
            }
        }
    }
}

Now it’s up to the user:

• if DEL was done by accident click on the Undo button an all will change back to normal
• if DEL is what user wants to do simply follow the workflow – ther Toast will disappear automatically

From my POV this is an elegant way to solve this situation: user has full control and workflow not broken 🙂

The Video

here’s a short video where you can see how it works before and after:

Some tips for developers implementing such a solution

Toasts will go away after a short time, but you cannot set this delay. Toasts with a button will remain on screen until user does some work on UI, which will start the countdown until Toast disappears. In some situations this is too long for me, so I want to dismiss the Toast per ex. if user triggers another action, clicks the back button or something else.

cancel() on a Toast will stop and hide the toast immediately. cool. or not ? If Toast is canceled means, user has NOT clicked the Undo Button, so the data can be deleted.

But cancel() doesn’t trigger the onFinshed() at Toast. with a little trick this will work:

add a boolean property ‘killed’ to the Toast, fire this if you cancel() the Toast and now onKilled() at the Toast can execute the same delete- businesslogic as onFinished() from TimeOut.

I will publish some code on this later and will also add this pattern to my workshops on Cascades, because you’ll need this all the time in business apps.

Have fun with Q10

If you need an App: I’m developing quality BlackBerry10 APPS for customers around the world 😉
If you want to write such kind of apps by yourself: You can book a training (in german or english)

ekke

SerCar10 – a new way to manage ServiceCars

the product website is online:

http:// sercar10.com

Navigation (Panes, Pages, Lists…) SerCar10

Cascades gives you the power to navigate easy through your apps.

You can start with a TabbedPane to separate your app into segments.

Each TabbedPane can contain single Pages or a NavigationPane as root of a stack of Pages you can push() and pop().

Here’s an example from SerCar10  (Management of ServiceCars with Cascades). In this article we want to take a look HowTo add, edit, delete positions of work. In this blog I only demonstrate dealing with positions of parts from your stock items catalogue. Another blog will focus HowTo add working hours.

Hint: Sourcecode – snippets will follow later

Overview

Here’s a short overview what you can do:

• A: HomeScreen of the APP is a TabbedPane
• B: Tapping on WorkOrders opens scheduled Work Orders, a NavigationPane with a ListView
• C: Tapping on one Item (Work Order) shows details of this Work order
• D: Action opens another Page with a ListView displaying all positions of work done for thie order. (Parts, Hours, Attachments)
• E: Selecting parts – Action opens another ListView ‘on top’ from where you can select parts
• F: Selecting a part opens a Page with details ‘on top’ where you can enter the Quantity
• G: Action to save the selected part adds this item to the list of positions, recalculates pos value and totals and sets Working Order status in root ListView.
• H: Tapping on a Part item in list of positions opens details of this position
• I: From this details Page you can edit the quantity or delete the position. Changes are immediately visible in list of work positions.

Screenshots from this Workflow

—–

—–

—–

—–

—–

—–

—–

—–

—–

—–

—–

—–

—–

—–

—–

—-

—–

—–

Peeking (looking back)

With Cascades and BlackBerry 10 it’s easy to know where you are in your workflow: you can peek back from your Content area to the last Page or from the Action Bar to the complete Application. Here are some samples:

—–

—–

—–

——

—–

Video

Short Video to demo HowTo add, edit or delete positions of work orders:

Attention: Please switch HD ON (Top Right Corner of Video)

---

(c) 2012 Creative Commons License 3.0 (BY-NC-SA) by ekkescorner

Custom Maps for SerCar10

TBD: Source Snippets will be inserted later, as first steps some screenshots and video

SerCar10 is a BlackBerry 10 APP for small medium sized companies to manage their service cars out there. One important part are Maps and Location: Drivers of Service Cars need to know where their next Jobs are located, how to drive to the locations and what to do there. Dispatchers also need to know the locations to decide which driver goes to which location. Following screenshots are from Car Drivers Module of SerCar10.

Thanks to Shadid Haque there’s a sample at GitHub demonstrating HowTo create a custom map with Cascades.

Navigate to the Map

There are two ways to get a custom Map of Work order – Locations (Job Sites)

Homescreen of SerCar10 shows Tabs from a TabbedPane from where you can go the most important parts of the app.

Tab on “Work Order” brings you the list of scheduled Work Orders for the day. Tap on Overview shows you a Map with all scheduled Jobs.

Here’s the list of scheduled Work Orders:

The List of scheduled Work Orders is a ListView as root Page of a NavigationPane.

Tap on a row gives you the details od this specific Work Order:

From this page you can add “Positions of Work” (Labour Hours, Parts from Stock items, …)

But there are “More” Actions:

You can open a custom Map to see the location of this specific Job.

Actions of custom Map

At first take a look at the Actions available on this MapView:

• GoTo Job Site: centers the Map to the Location of this Work Order (Image Overlay – a blue flag)  and automagically openes the details Overlay (short description of the work order). If the map is opened from “Overview” Tab you cycle through all jobs of the day: each tap jumps to the next job.
• GoTo My Location: centers the map to my current location. If sensors are OFF, they are switched on automatically: Compass for the heading, Rotation for tilt angle and PositionSource to get the position. My current position is displayed as a green marker.
• Follow Me / UnFollow Me: This is a toggle: follow me always centers the map to my current location – this is useful if you’re driving to the next job. Unfollow still gets your current location, but you’re free to drag the map where you want.
• Get Route to Job: This action is only enabled if Sensors are ON and invokes the BlackBerry10 RouteMapInvoker to get the Route from your current location to the selected Job Site.
• Hide Actions: This action hides the ActionBar from bottom of your screen to see as most as possible from your map. You can also do a long click to hide the Action Bar and you have to do a long click to get the Action Bar back.
• Show Compass / Hide Compass: thios Toggle Action allows you to hide the Compass to free the space.
• Use Demo Location / Use LIVE Location: a toggle to decide if your location should be the real one tracked from PositionSource or a fix Location (Rathaus of Rosenheim). If you’re running the app in demo mode (Try-before-you-buy) it makes no sense to track your live location to simulate a Car Drivers work.
• Show My Location / Stop Sensors: a toggle to start or stop the sensors.
• Reset Sensors: this action is only enabled if you stopped the sensors. Stopping the sensors leaves the map in the heading from compass and tilt angle from rotation. If you want to go bacjk to heading to North and tilt angle 0°, simple reset the sensors.

Map for a single location (Work Order)

Some screenshots from custom map for a single location:

Flags for the Location, details of order can be displayed:

show and hide the Action Bar (long-press on Map)

also in Landscape:

Landscape without ActionBar (Cinema effect)

Map for all scheduled Jobs (Overview)

Some screenshots from the Overview – Tab to get an overview of all scheduled jobs of the day. Different flags to show the order priority (regular, urgent, emergency):

Sensors for Heading (Compass) ant tilt angle °

easy cycling through all scheduled jobs:

—–

Video

Short Video to demo HowTo work with this custom map:

Attention: Please switch HD ON (Top Right Corner of Video)

---

(c) 2012 Creative Commons License 3.0 (BY-NC-SA) by ekkescorner