Ams design - gpdoud/ams-client GitHub Wiki

AMS Design

The design of AMS follows a standard that makes it easy for users to adapt to any new assets added to the system.

All the database functions of a component are done through a service. The service provides getting a list of all the data, getting a single data item by primary key, creating a new data item, changing an existing data item, and removing an existing data item.

Menu

All AMS pages display a menu of available options for the user. Besides the capability of logging off, there is a menu item to display the list component for all authorized data item

Listing data (list component)

The listing component is activated by a menu selection. It is the primary navigation to all the other operations on a data item. It must contain a link near the top that navigates to the create component.

The list component for data displays a subset of properties for the data while including all the rows in the database. The particular properties displayed in the list should be the most important properties to the user. Usually, about five or six properties are displayed. This is usually done using a tabular format where all the column data is aligned. At the end of each row are a set of actions. The typical actions are detail and edit. Detail navigates to the detail component for that row and the edit navigates to the edit component for the row. The availability of these actions can be based on the security of the logged in user.

At the present time, the list component does not do paging, but this may be added in the future.

Displays a single data item (detail component)

The detail component displays all the properties of a data item in a read-only mode. the format of the display has one property on each line with the property name on the left and the data on the right. No modification is allowed. Numeric data should be formatted appropriately for the user (e.g. currencies with a dollar sign and thousands separator and dates in MM/DD/YYYY).

This component may include a link to return to the list but it is not required since the menu also provides that capability.

The detail component is also responsible for deleting a data item. There is a button for Remove at the bottom of all the data. This forces the user to view all the data to be deleted before actually deleting it. Clicking the Remove button should display another hidden button named Verify Remove which when clicked will actually remove the data item from the database.

Creating a new data item (create component)

The create component allows creating a new data item. The display contains all form controls for the user to interact with. The typical form control for each data item type should be:

  • string - <input type='text'>
  • number - <input type='number'>
  • boolean - <input type='checkbox'>
  • datetime - <input type='date'> or specialized date control
  • foreign key - <select><option>

Defaults should be provided when it appropriate. For example, if a boolean is typically true, the checkbox should be automatically checked.

All data should be checked for validity as quickly as possible after entered and an appropriate message provided to the user indicating the problem and a recommended correction.

Changing an existing data item (edit component)

The edit component works almost identically to the create component except the data item to change must be pre-filled on the page. When the data item has a foreign key, the selected item in a drop-down list should pre-select the appropriate item.

Removing an existing data item (included in detail component)

The detail component provides the ability to remove a data item. See the detail component.

⚠️ **GitHub.com Fallback** ⚠️