Table of Contents
Main Navigation
Submenus
Collapsing the Sidebar Navigation
Common UI Elements in Fleetio
Account Menu
Settings Sidebar
Profile Menu
Option
Toggle
Drop-down
Index
Column Header
Tab
Filter
Index Search
Status Tab
Index Settings
Actions Drop-down menu
More Actions button
Details Page
Card
Edit Icon
Details Sidebar
Form
Widget
Main Navigation
Let's start with the Main Navigation in Fleetio and discuss the common areas you will access on a daily basis.
- Sidebar Navigation (a): Used to access all pages in Fleetio
- Search (b): Quickly search the Fleetio web app for any record
- Top bar (c): Access the Notification Center, Help & Training Resources and the Quick Add menu
Submenus
Click a menu option in the Sidebar Navigation to show available Submenu options.
Collapsing the Sidebar Navigation
Click the Collapse Icon to collapse and expand the Sidebar Navigation.
Common UI Elements in Fleetio
Now, let's break it down even further and look at individual UI elements in Fleeto. Below, you will see the element's name, an example image, and the description of how this element is used in Fleetio.
Account Menu
Description: The Account Menu enables you to access Settings, User Management, Integrations, Imports, and the ability to Switch Accounts if you have access to multiple accounts. Click your Account name at the top of the Sidebar Navigation to open the Account Menu.
|
Settings Sidebar
Description: Click Settings under the Account Menu to access various system settings in the Settings Sidebar.
|
Profile Menu
Description: The Profile Menu enables you to access your User Profile, Notification Settings, Login & Password information, and to Log Out of Fleetio. Click your Profile image to open the Profile Menu.
|
|
Option
Description: Various areas of the system allow you to select an Option from a list of choices.
|
Toggle
Description: Various areas of the system include Toggles for you to turn features ON or OFF.
|
Drop-down
Description: Various areas of the system include Drop-down boxes that allow you to make a selection from several choices.
|
Index
Description: An Index in Fleetio is the main screen you see when clicking any of the pages on the Sidebar Navigation. This will bring you to a list of records in Fleetio where you can view, add, edit and remove data.
|
Column Header
Description: The Column Headers can be found on various pages throughout Fleetio to visually organize data. By clicking the Column Header, you can re-sort the data by that specific column.
|
Tab
Description: Tabs are located on Index pages to filter the data by specific criteria. Clicking each tab will only display those records that fit the title of the tab.
|
Filter
Description: Filters allow you to select certain traits that you would like to view in the data.
|
Index Search
Description: Utilize the Search in an Index to view specific records you are quickly trying to locate.
|
Status Tab
Description: Located in the Work Orders Index, you can sort the Work Order Index by various statuses.
|
Index Settings
Description: Click the gear icon on the right side of an Index to view Index settings, such as Managing Columns and customizing items per page that are visible.
|
Actions Drop-down menu
Description: The Actions Drop-down menu can be found on the top left of any Index after selecting one, or multiple rows in the index. Once your records are selected, the Actions Drop-down menu will allow you to select from multiple options to apply to the selected records.
|
More Actions button
Description: When you see three horizontal dots in a row, typically on the top right of any page or the right side of any record row, you can click the More Actions button to access additional options you may choose from.
|
Details Page
Description: After clicking on a record in an Index, you will be taken to the Details Page with more specific information and actions related to one specific record.
|
Card
Description: On the Details Page of a record, the individual section rectangles are referred to as Cards, and enable you to view or edit information about the record.
|
Edit Icon
Description: Commonly seen as a pencil icon in Fleetio, the Edit icon allows you to click and edit record content inline.
|
Details Sidebar
Description: The Details Sidebar is located on any Details Page. By clicking the arrow, you can expand the panel and click on the corresponding icons to view/add comments, photos and documents.
|
Form
Description: A Form can be found on any screen in Fleetio where you are adding a new record for the first time, or editing existing record information.
|
Widget
Description: Widgets are located on the Fleetio Dashboard displaying data and allowing for customization on the dashboard.
|
