Layout

This lesson is all about the layout of Office Puzzle and the different parts of it.

Top bar

At the top of the screen you can find a bar containing the logo of your agency in the left corner followed by its name.

On the right corner, there’s a flag indicating the language you have your application on. A USA flag represents English and a Spain flag represents Spanish. By clicking on it, you can switch the language of your application from one to the other.

User profile’s Icon

Following the language flag, there’s a User Profile icon. Upon clicking it, it’ll deploy a menu as seen in this picture:

From here you can access your dashboard in “My profile”, access the previously mentioned “Change password screen” or log out of the system.

Mobile version

The layout of our application might not look practical for a mobile screen. But don’t worry, if you’re using the app from a mobile device, the screen will adapt to it and will be mobile friendly. This is especially useful for collecting on site data, starting sessions on-site, capturing signatures and other features that will be discussed later into this course.

Breadcrumbs

As you navigate through the application, you will move from one screen to another. For example, from a client’s dashboard to its documents to a specific type of document. To keep track of this navigation and allow you to go back at any given time, the app uses breadcrumbs, a navigation feature that works similar to how your navigation bar on a file explorer would.

By clicking the “Back” button, you’ll immediately return to the previous page. By clicking any of the breadcrumbs, you’ll return to that specific part of the application. For example, here you can go “back” to the client’s Documents page, or you can return directly to the client’s Dashboard by clicking “CLIENT John Doe” instead.