3.4 KiB
USER INTERFACE
Overview
Responsive display
The AyaNova interface is designed to be "responsive" which means it will adapt what is displayed to accomodate to the size of the device being used. This means that on smaller screens items will be displayed in a vertical manner and on larger screens they will flow outwards horizontally to make the best use of screen space.
In addition some elements are customized to be easiser to use with specific sizes of devices. For example a data table list of records will show as a traditional horizontal table with columns on a larger display to take advantage of the horizontal space and on a smaller device the same list will appear as a series of vertical boxes containing each record. This avoids the need to scroll sideways on any screen size.
The responsive display is dynamic which means it will adapt on the fly to the screen size even if it changes, so, for example if you rotate a narrow screen sideways the display will change to take advantage of the wider display area.
Main user interface components
The overall AyaNova user interface consists of three main components:
- App Bar at the top
- Navigation drawer to the side
- View displayed in the main largest area of the screen
App bar
The purpose of the app bar is to show which part of AyaNova is currently open by displaying a text title and often an icon corresponding to the form being displayed in the main view area.
A blue app bar indicates the current view is a main area of AyaNova and not a specific record being edited. A green app bar indicates a specific record is being edited in an edit form.
The app bar also hosts the context menu which appears as three dots stacked on top of each other and the "hamburger" icon which looks like three horizontal bars stacked on top of each other and is used to show or hide the navigation drawer
Navigation drawer
The navigation drawer shows all the areas of AyaNova the currently logged in user has rights to access. Clicking on an item in the navigation drawer will cause that view to be displayed in the view area of AyaNova.
The navigation drawer can be displayed or hidden by clicking on the "hamburger" icon in the app bar.
On smaller screens such as smart phones the navigation drawer is by default not shown until the user clicks on the hamburger icon. On larger screens the navigation drawer is displayed by default.
View area forms
The main View area is where the currently selected form is displayed and worked with.
Form context menu
The context menu is located in the app bar above every form in AyaNova and looks like 3 dots stacked vertically. It is called the "context" menu because the options in it will change based on the particular form in use, the rights the currently logged in user has to make changes or the state of an object being edited.
On larger screens the most commonly used options will move from inside the context menu to the main app bar to save a click.
While the top options in the context menu will change depending on the context, all context menus will have the following options at the bottom: