Data Entry Component


The Data Entry Component allows users to enter data for a variety of purposes within the Carrier TMS. 


The component is a drawer that slides out from the right side of the screen.

  • When the component slides out, the background becomes darkened, but remains semi transparent.

  • The drawer goes OVER the contents of the screen. It does not PUSH the contents to the side. 

  • The only way to close the drawer is by clicking on an "X" button at the top, or on one of the action buttons on the bottom. 

    • Clicking away from the drawer does not close it. 

  • The Data Entry component height is 100% of the page. It remains fixed, and is scrollable, independent of any contents outside of the drawer.

Data Entry Component Rules

Required Fields

All required fields should be highlighted with a yellow fill:

Fill color: #fffcdc

Closing the component

The Data Entry Component only closes IF:

  • All required fields are completed, and the user clicks the appropriate action button (save, etc.)

    • The action button is disabled until all required fields are completed; OR

  • The user clicks the cancel button; OR

  • The user clicks the "X" button

Canceling to Close

IF a user wants to close the Data Entry Component by:

  • Clicking the cancel button; OR

  • Clicking the "X" button,


  • There should be a modal with a message letting the user know that their changes will not be saved.

  • The language might need to be altered depending on the data that is being input

    • e.g., for "Load Order" creation, the title of the modal would be "Discard Load Order?""

    • This and body language should be adjusted to fit with the respective section.

Feedback to the User

When the user successfully completes a task in the Data Entry Component, there should be a snackbar at the bottom left that indicates the task was completed successfully. 

This is an angular material component

Source: Snackbar

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Privacy Policy