CHAMPS Mobile Maintenance App can run on any size device. The User interface is designed to automatically resize itself and respond to touch and swipe gestures.
The purpose of this section is to introduce the appearance and functionality related to screens, buttons, and data input/display columns.
When a Back button is not displayed, a menu icon will open the app’s menu drawer. The menu drawer will provide quick access to important pages, user and location management, the QR code scanner and settings.
Browse screens, or Lists, use tiles or cards to represent individual records in the database. Each card displays the Id, Name, Description or other pertinent data necessary to select a record to view in more detail.
Use swipe gestures to scroll through the records.
Browse screens are usually sorted by record Id in ascending order.
Detail Screen tabs
Detail screens group related information together under named Tabs. A Detail screen identifies the record being displayed as part of the screen title and this is visible regardless of which Tab is selected.
To see additional Tabs use a swipe horizontally across the Tabs.
Every browse screen displays a Search icon at the top of the screen.
The Search icon opens a search input box. No special wildcard characters (*, %, etc.) or commands (like, >, =, etc.) are required. To reset the browse screen to the original list, use the backspace key to erase the search box characters or click the x icon to the right of the input box.
Auto-complete, Type-Ahead Selection Column
Search fields as well as input fields on screens that support such (Add Work Request) employ a three character minimum type-ahead feature. After three characters have been input, the selection list will be automatically filtered to those rows containing the entered string.
Date Selection Column
Date input columns are seen on the Work Request Add page. These columns default to the current date. Each month, day, year segment of the date is associated with a scrollable selection list.
Hyperlinks to phone numbers, email addresses, and webpages will open the default App on the device for those items.
Many icon meanings have become standardized by Google, Microsoft and Apple. This user-knowledge base is leveraged in CHAMPS Mobile Maintenance App.
Functional buttons are displayed at the bottom of screens to provide additional functionality to the specific screen. A Functional button may be provided to Add a Work Request, Upload a Document or Access the device Camera.