Label Context Bubble
Context Bubble and Related Panel
Related Panel
Alt Tag for context bubble
Bubble on click
Status bar at top
Sneak preview of other tab's status
Task path step in status bar area (in white banner)
Master Detail view for 3 levels deep
Task Path in status bar
Notes in layer
The Yellow Tab, aka "Virtual Child"
Task Paths in dropdown
The Yellow Tab in grid view
Possibility to add tabs to Yellow Tab
Lines section collapsed
Moving tabs
Oldies: replacing all column values at once
Oldies: grid and form with kids in one (long) view
Linked Items in Yellow Tab
More Yellow Tab
Attachments in Yellow Tab
Linked Items in Yellow Tab (2)
Linked Items in Yellow Tab (3)
A simplified Advanced Search
In Grid Edit
UI Selector for In Grid
UI Selector for In Grid: Unhide columns?
Mega Menu for Role
Form: Top labels
Form: Top labels, no lines, mandatory fields icons
Form: Top labels, lines, icons
Form: field fill
Form: icons per field
Form: Hint bubble
Form: Hint banner
Form: Hint banner in form
Form on smart phone (800x480px)
Right aligned labels
Comparison of form layouts
Left aligned labels
Right aligned & Grouped: sections
Right aligned & Grouped: twisties
Right aligned & Grouped: twisties 2
Bold Verdanas
Section headers in bars
Right aligned, headers left aligned
Toolbar (1) - Separate buttons
Toolbar (2) - Actions in flyout menu
Toolbar (3) - Icons on form and Global Menu at top
Toolbar (4) - Comparison Map
Toolbar (5): button clustering
Grid (1): Double and half column widths
Grid (2): Single width columns
Rounded Concept
Field guidance below fields
Field help text boxes
*New*, RSS and Link-to
Action Button in Grid
Action Button in Form
Action buttons on a dedicated row
Actions in Mega Menu
Top aligned again: it looks so good!
Top aligned again: double width description field
3-Kolom - Are we krazy?
Filter in toolbar for Recently Modified
Additional Gadget Bar: horizontal
Additional Gadget Bar: vertical
Create New via * Button
More Nifty Thingies
Fast Forward
Master-Detail, step 1: Header grid
Master-Detail, step 2: Lines grid
Master-Detail, step 3: Third level deep
Other Pages: Create Invoice From Order 1
Other Pages: Create Invoice from Order 2
Other Pages: Price List Report
Other Pages: Requisition to Order
Pop-on-click menu
Wizard style report creation 1
Wizard style report creation 2
A Ribbon toolbar showing the Actions as buttons
The Ribbon toolbar can handle simple flows (complete)
The Ribbon toolbar can handle simple flows (Copy Lines)
Harmonica 1
Harmonica 2
Harmonica 3
Harmonica with Form 1
Harmonica with Form 2
Destyling...
1280x1024 resolution (cropped for browser borders)
Sequence: ribbon tab 1
Sequence: ribbon tab 2
Sequence: ribbon tab 3
Sequence: ribbon tab 4
Harmonica sequence 1 (user clicks on Lines tab)
Harmonica sequence 2 (user clicks on Price Adjustments tab)
Harmonica sequence 3 (third level deep)
Minimize to rows or keep all grids and forms expanded?
Double Grid Split is still a very desirable concept
Double Grid Split: top grid active
Double Grid Split: top grid active, bottom grid faded to emphasize this
Form-Grid Split
Scenario 1/11
Scenario 2/11
Scenario 3/11
Scenario 4/11
Scenario 5/11
Scenario 6/11
Scenario 7/11
Scenario 8/11
Scenario 9/11
Scenario 10/11
Scenario 11/11
Scenario 2 (1/10)
Scenario 2 (2/10)
Scenario 2 (3/10)
Scenario 2 (4/10)
Scenario 2 (5/10)
Scenario 2 (6/10)
Scenario 2 (7/10)
Scenario 2 (8/10)
Scenario 2 (9/10)
Scenario 2 (10/10)
Letter Box
Pen icons (buttons) to go to form view
Checkboxes, no pen icons
"Show Selected on Top" feature
Grid and Column menus using (modified) ExtJS
Counters: 1-15 of 51
Counters: 51 (2 selected)
Counters: (101, 5 selected)
Counters: (101)
Counters: (51)
Counters: 500+ (notice the "loading more items...")
Header Form View
Header Form View with lines section open
Header Form View with lines section open (and active)
Header and Lines Form View
800x600 px
800x600 px, form fields with reduced width
800x600 px, wrapping toolbar
Having all contextual, meta and collaboration data inside the form
800x600 (0.7% + PDAs)
1024x768 (20.2%)
1280x1024 (24%)
1440x900 (11.4%)
1680x1050 (17.6%)
1920x1200 (4.6%)
Bank Statement to Bank Reconciliation 1/5
Bank Statement to Bank Reconciliation 2/5
Bank Statement to Bank Reconciliation 3/5
Bank Statement to Bank Reconciliation 4/5
Bank Statement to Bank Reconciliation 5/5
Accounts. Drill down into Checking Account opens a new tab
Checking Account drildown on new tab
Income Statement
Balance Sheet
Drill-down from Balance Sheet into Accounts Receivable
Matching imported bank statement transfers with accounts receivable transfer. OB suggests matches based on refs or ids. You can manually make matches by connecting the bulls' eyes using the mouse.
Procure to Pay process
Manage Requisitions
Purchase Orders are generated from the requisitions
Purchase Order form view
Request for Quotation
Received Quote Proposal
Request for Quotation (comparing quotes)
Vendor Suggestions
Current Purchase Order Report
Current Pending Goods Receipt
Combining Purchase Order Report with Pending Goods Receipt
Pre-filter step for slow reports
An alternative pre-filter
Purchase Order Report after filtering for July '09 & Status=open. The warehouse staff is about to enter 2 received products
Bank Statement to Bank Reconciliation task flows
Financial Management - An overview
Sometimes showing headers by default is not necessary and a sort of summary pad is better
Matching OB bank transaction lines with those of the imported bank statement
When there is no match, you can create a transaction on the fly
You can also create a new transaction on a new tab. Note the cheeky creation of a line via the header.
Header Pad in action 1
Header Pad in action 2. I moved the toolbar down, not sure if this is nice, consistent placement maybe better
Closing the Header Pad takes you to the regular top grid
Form view (notice the Summary link on the form that opens the Header Pad)
Focus on bottom grid
Business Partner Summary View
Product Summary View
Family Grid example: Expense Reports
Family Grid example: PO Reports
"Faking" a single form when entering both header and child values
Using form for header and grid for lines has benefits in many cases
Detailed purchase order form view: header form is active
Detailed purchase order form view: child form is active
Detailed purchase order form view: header form is active and bottom shows child grid
Copy from past orders...
Copy entire past orders...
My Openbravo
My Openbravo - Edit
Business Partner Card in bottom left
My Openbravo v0.2
My Openbravo v0.2 - edit
