November 26 2014

Using best in class UI technologies, AVIO is developing a custom workspace that will manage your work the way you want. It starts with a initial layout that is similar to Oracle's BPM workspace, but it can use a layout that is best for you. It works in most browsers and media types; cell phones, tablets or PCs.

AVIO's workspace uses open source technologies, Angular JS (angularjs.org) and Bootstrap CSS (getbootstrap.com). Angular JS provides best in class MVC architecture to render the UI fast and rich in features. Bootstrap CSS is used for a "Design for Mobile First" approach. Where Angular is rapidly becoming the technology of choice for the front-end, Bootstrap will give your designs the responsiveness it needs for cell phones, tablets or PCs.  As opposed to Oracle's workspace, Angular enables your workspace to be customized from its own and AVIO's pre-built libraries. These libraries leverage AVIO's REST services for BPM CRUD operations with the server. Bootstrap CSS can layer on top of any open source tools to give your UIs the "wow" factor you want. These cool features will include modal menus, dynamic widgets and pages, and Kanban style task boards for an intuitive user experience. 

 

Before we look at the workspace on a mobile device, take a close look at the top and left menu bar on a full-size display. The top menu bar contains a search box to filter the list or locate a particular work item. It also contains tabs for applications (to start new tasks), dashboards  (for grapical representation of your work) and a settings tab; for configuring your workspace. The menu on the left contains a list of views to group your work by task or case; initiated or administrative; tasks due within some time-frame; or by some metadata like region, department, or status.

The main panel (on the right) contains a work list represented by cards. These cards can be customized to contain important text and date fields,  images, links and other meta-data to identify them. These cards can represent different work items like a task or a case. With cards, there's no need to switch between task and case view when using Oracle's Adaptive Case Management (ACM) features. If mixing them together in a single list is not desired, it is easy to create views with only one or the other.

To get a feel for how this works, we will look at the UI rendered in a hand-held device as seen below. Notice that the left menu bar has been hidden and the top menu collapsed to an expandable menu icon. The work item list of cards makes it easier to design responsive layouts over a static table with rows. Different card types may need different meta-data, images and fields. Likewise the details behind the cards can adapt according to the card type. This provides more uniformity for handling tasks and cases for an intuitive and friendly look and feel.

One reason cards are used as opposed to a static table is the way the concept handles different work item types. The other reason is to allow Kanban style drag and drop.  Each card type can contain its own set of text fields, dates, images and links according to the card type. It can be dragged around (in Kanban style), sorted moved from view to view, or whatever the case may be. Cards provide more flexibility over tables. However if a table suits the need better, that is possible too. It's easier to turn off features than add them back in later on. 

To fit the card on the screen the card can be resized to fit within the hand-held device (by stacking the fields on top of each other) or you can simply swipe the card back and forth as shown.

The card can be expanded to show more detail. Here, a task card is expanded showing a tabbed panel appropriate for tasks. For example, the tabs shown for a task are; View, Process Map and Documents. Again, these are fully customizable. But here we show the task form, process maps or documents displayed within the context of the main workspace view.

 

For cases, the card can show tabbed panels like; Case Data, Activities, Milestones and Stakeholders. This would replicate the funtionality of Oracle's case tab while staying within the context of the main view.

To see how case management works on a mobile device, the same view is rendered on a cell phone. Notice that the case activity types (Available, Running and Completed) are now stacked on top of each other where everything about the card can be seen by swiping it up and down. Other case features are similarly displayed like; Case Data, Milestones and Stakeholders.

Using Angular and Bootstrap, your custom workspace can be designed for hand-held and desktop devices. It leverages responsive designs so that the UI can add features in larger windows and remove or collapsed them in smaller ones. These technologies are well know and can be seen showcased on the internet. To see some examples visit, expo.getbootstrap.org.

Summary

Using AVIO's Customizable Workspace you can have the UI you and your employees need to run your business from the office or on the road. It uses open source and best in class technologies such that it is easy to support and maintain. For more information on how we can help you implement BPM and Case Management, contact us at info@avioconsulting.com

About the Author

Mark Peterson

Software Implementer using Business Process Management (BPM) for small to large firms. Used best practices in system design and software methodologies. Successfully executed projects on time and on budget using incremental and iterative software development methodologies.

Join the Conversation

March 30, 2015

Any reason you decided to not use ADF (Alta UI)?

 

Thank you

Vitaliy