Forms¶
AyaNova is a web application meaning that it runs inside your web browser and when you navigate to each area of AyaNova it's just like navigating to a web page.
This means you can use all the standard features in your web browswer with AyaNova such as the forward and back navigation buttons, zooming in or out, saving bookmarks to any area you visit frequently etc.
All areas you can navigate to in the AyaNova web application are described as "forms" in the documentation.
It is our goal that, AyaNova displays and acts as similarly as possible on every supported web browser, platform and operating system.
A user should have the same experience on Chrome in Linux, Safari in iOS or FireFox in Windows (for example) and we support each release against the most recent two releases of all major browsers at the time of release.
Responsive display¶
The AyaNova interface is designed to be "responsive" which means it will adapt what is displayed to accomodate to the size of your device be it an iPhone, Android tablet, desktop PC or big screen TV.
On narrow screen devices such as smart phones and smaller tablets the form will be displayed vertically as a single column of fields:
On wider screen devices form fields will flow outwards horizontally to make the best use of screen space:
In addition to the layout changing, 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 wider 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.
Some browsers and devices may not recognize a change of width and it may be necessary to refresh the page for the view to fully adapt in some cases. If you have to scroll a data table sideways hit refresh / reload in the browser.
Customizable labels¶
Nearly all static text displayed in AyaNova is customizable via the Translation feature
Main user interface components¶
The overall AyaNova user interface consists of four main components:
- Browser web address the URL or location in your web browser
- App Bar at the top
- Navigation drawer to the side
- View displayed in the main largest area of the screen
Web address¶
You don't need to know about the Web address URL to use AyaNova and can skip this section if you wish but it helps to know the system behind URL's in AyaNova as they display some potentially useful information.
The image above shows a new empty work order being created.
At the top of the image you can see the web browser's current address which always shows where you currently are in AyaNova.
Let's break down an example, your Host portion will be different, but the component parts are the same:
https://example.onayanova.com/svc-workorders/0
Host¶
The first part of the URL shows the host server that is hosting your AyaNova instance, in our example this is the example.onayanova.com portion of the address.
You don't need to know this to use AyaNova unless you are working on multiple different servers and want to confirm you are on the correct one. Note that some browsers may hide this part of the address but you can usually reveal it by clicking on the address bar if it's hidden and you want to see it.
Depending on where your server is located this could take many forms.
It could show as a network address, for example
https://192.168.1.56:7575/svc-workorders/0
or a path (after) a domain name registered to your company
https://example.com/ayanova/svc-workorders/0
or a subdomain (in front) of a domain name registered to your company
https://ayanova.example.com/svc-workorders/0
or even in multiple ways depending on whether you are accessing it from inside your office or outside your office via the internet.
Route¶
The second part of the address is the web application "route" or area of AyaNova being used. Generally the route is named by taking the main navigation area a dash character then the particular navigation item selected.
In our example here, for service work orders the route portion is svc-workorders indicating that the user is in an area they got to via the "Service" section of the navigation menu and specifically the "Work orders" item.
If they were creating a quote it would be svc-quotes instead.
All routes in AyaNova use this system.
Record id number¶
When opening a particular record the end portion of the address will be the Ayanova generated internal ID number of the record being displayed. AyaNova assigns and uses it's own internal ID numbers for every record.
For some items such as work orders that have a "Serial number" the serial number is generated separately from the internal ID number and while the Serial number and the record id may be the same (particularly at first when starting using AyaNova) they will often differ over time and represent two different things.
If the user were looking at a list of work orders in a data table the route would end with the /svc-workorders fragment indicating a list of multiple work orders, however in this case the user is creating a new work order and new records always show with id number of 0 until they are first saved and the server assigns a record ID number to them.
For example, once this new work order is saved it may change to display https://example.onayanova.com/svc-workorders/1234 indicating it has been assigned record id 1234 as that was the next available un-used internal id number for work orders.
Bookmarks¶
You can save a browser bookmark directly to any object in AyaNova by bookmarking the form you want to open again later because the full address is a direct link to that record.
App bar¶
The App bar is a form of tool bar and it's purpose is to show where you are in AyaNova, provide links to move to other places in AyaNova and tools to interact with the current view.
A blue app bar indicates the current view is in a main area of AyaNova, either a data list or some other form not a specific record being edited.
A green app bar indicates a specific record is being edited in an edit form.
Navigation button¶
The far left side of the App bar shows the button to open the navigation drawer as a "hamburger" icon which looks like three horizontal bars stacked on top of each other and is used to show or hide the navigation drawer which is used to move around in AyaNova.
The center part of the App bar shows an icon and information pertaining to which record or area of AyaNova is currently open.
The right side shows a bell icon which indicates if any unviewed notifications have arrived and is also a shortcut to open the user's notifications form to view notifications.
Finally, to the far right is the context menu which appears as three dots stacked on top of each other. On wider screen devices some commonly used context menu items will be "surfaced" between the notifcation bell icon and the context menu icon to save a click.
Navigation drawer¶
The navigation drawer shows all the areas of AyaNova the currently logged in user has rights to access.
It's called a 'drawer' because is slides in and out as required to save screen space.
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.
Main view area¶
The main View area is where the currently selected data table / edit form is displayed and used.
Form context menu¶
The context menu icon button is located in the app bar above every form in AyaNova and looks like 3 dots stacked vertically.
When you click on the context menu icon button a context menu will open with options relevant to the particular area of AyaNova you are in.
It is called the "context" menu because the options in it will change based on the context of the particular form in use, User rights and the current 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:
- Search option for searching the AyaNova database
- Help option for viewing help about the specific form being displayed (this manual)
Main forms that are not related to editing a single object also have the following options:
- About option for viewing version information and technical support information.
- View on map forms for objects with address controls will have a "View on map" menu item which when clicked will attempt to display the current objects location on a map provided there is enough information for the online map provider chosen to determine the location. The most accurate location is had by entering the latitude and longitude into the fields provided in the "Street" address section however most map providers can match to a postal code or street address when required.
For items that are mobile or may not have a street address such as a Customer unit in remote locations the latitude and longitude are available for location.
The default map provider is Google Maps but you can select from many other options or add your own under User settings map url template setting.
Data table forms¶
All the main AyaNova list forms are "data table forms" and documented in detail in the data table forms documentation page.
Edit forms¶
Individual business object editing forms have a common set of features and are documented in detail in the edit form documentation page.
Form controls¶
AyaNova forms consist of a common set of controls which are documented in detail including tips for faster data entry and special features they might have in the common controls documentation page.