The Application Window

Almost everything you do happens inside the same frame: a bar across the top, a navigation area that lists the parts of the application you are allowed to open, and the page itself in the middle. This chapter explains that frame — what each control does, what changes when the window gets narrow, and why your colleague's window may not look like yours.

What This Is

The application window has three fixed parts:

1. The top bar — always visible, always in the same place. It carries the logo, the title of the page you are on, the buttons that belong to that page, and a cluster of personal controls on the right.
2. The navigation — the list of the areas ("modules") you can open. Depending on how your application is set up this is either a sidebar down the left, or a grid of tiles that drops down from the top bar.
3. The content area — everything below the top bar. This is the only part that changes when you move around.

Everything else you see — which entries the navigation contains, what they are called, which buttons sit next to the page title — is decided by the person who set up your application. Two people signed in to the same application can see genuinely different windows, and that is normal. See Why Your Screen Differs.

Why It Matters

The frame is the part of the application you never think about until something is missing. Knowing what belongs to the frame and what belongs to the page tells you where to look: a missing column is a list problem, a missing menu entry is a permission problem, and a page that seems frozen is usually just a request still running with a thin progress bar at the very top of the window.

The Top Bar

The top bar is sticky: it stays put while the page scrolls, and it never scrolls away.

A Walkthrough, Left To Right

• The navigation button. A hamburger icon (three stacked lines) when your application uses a left sidebar, or a grid icon when it uses tiles. It opens the navigation. It is not shown at all if your account is not allowed to use the navigation, and it disappears while the sidebar is pinned open (there is nothing to open).
• The logo. Your application's own logo. Clicking it takes you to your starting screen. While the sidebar is pinned, the logo moves into the top of the sidebar instead.
• The page's own buttons. Anything the current page contributes: most often a chevron-down button labeled Actions that opens the list of things you can do with the record you are looking at. The same Actions button appears on a dashboard you are allowed to edit, with an Edit entry inside it. Many pages contribute nothing here.
• The page title. The name of what you are looking at — a module name, a record's title, a screen name. It is text only, not a link. On narrow screens it is hidden entirely (see On A Phone Or Tablet).
• Search. A magnifying-glass button on the right-hand side, labeled Search, with a ⌘K hint next to it on wider screens. Covered in Finding Things And Search.
• Notifications. A bell icon with a small dot when you have unread items. Covered in Notifications And Alerts.
• Jobs. An inbox icon. This is where long-running work such as an export reports its progress and hands you the finished file. Covered in Notifications And Alerts.
• A gear icon. Only for accounts that can reach the administration area, and only when your application uses the tile navigation. It opens a drawer from the right with the administrative entries in it.
• Your avatar. Your picture if you have uploaded one, otherwise your initials. It opens your personal menu.

Search, the bell and the gear are each conditional. If your account does not have the matching permission, the control is simply not there — there is no grayed-out button and no explanation.

Example Petra in accounts payable sees the search button, the bell, the inbox and her avatar. Marek, a warehouse operator whose role was set up for scanning deliveries only, sees the inbox and his avatar and nothing else. Neither of them has done anything wrong; their roles differ.

The Logo And Your Starting Screen

"Your starting screen" is not always the dashboard. Your administrator can set a landing area per person or per user group, in which case the logo — and the first entry in the sidebar — takes you to that area instead. If your account is not allowed to have a personal dashboard, the logo takes you to a page of module tiles headed Module selection instead.

Example Everyone in the support team has their landing area set to the Tickets module, so clicking the logo from anywhere in the application drops them back into the open-tickets list rather than onto a dashboard they never use.

Your Avatar Menu

Clicking the avatar opens a small panel containing, from top to bottom:

The identity line is worth a glance whenever something behaves unexpectedly. If you share a computer, or if you have two accounts, this is the fastest way to confirm which one you are actually using.

User settings is missing for accounts that are not allowed to view their own profile. Sign out is always there.

Exit Login as appears only when the session is an assisted one — that is, when an administrator has signed in as you in order to reproduce a problem. It carries a countdown of the minutes remaining and leaves the assisted session when clicked. The sign-in flows and what an assisted session looks like are covered in Signing In.

Two Styles Of Navigation

Your application uses one of two navigation styles. Which one is a single setting chosen by your administrator for the whole application, so everybody in your organization gets the same style. You cannot switch between them yourself.

Style One: The Left Sidebar

The sidebar slides in from the left.

Opening and closing it. Click the hamburger button in the top bar to open it; click the x at its top-left corner, press Esc, or click anywhere on the page behind it to close it again. Cmd+M (Ctrl+M on Windows) does the same as clicking the hamburger.

Pinning it open. Next to the close button there is a pin icon. Clicking it pins the sidebar: it stays open, the dimming behind it goes away, and the page content is pushed to the right instead of being covered. The pin button is only available from tablet width upward.

While the sidebar is pinned:

• the hamburger button and the logo disappear from the top bar (the logo is at the top of the sidebar instead);
• Cmd/Ctrl+M does nothing, because there is nothing to toggle;
• moving to another page no longer closes the sidebar.

Click the pin again to unpin.

Resizing it. Drag the right-hand edge of the sidebar to make it wider or narrower. It will not go narrower than roughly 240 pixels or wider than roughly 520 pixels, and never wider than a bit over half your window. Double-click the same edge to snap it back to its normal width.

Both the pin and the width are remembered in the browser you are using, not on your account. Pin the sidebar on your office desktop and it will still be unpinned when you sign in from a laptop at home, and clearing your browsing data resets both.

Example Jana works on a wide monitor and pins the sidebar so she can jump between Projects and Timesheets without reaching for the hamburger every time. She then drags it wider, because several of her module names are long and were being cut off. Next morning, on the same computer, it is still pinned and still that width.

Nested groups. Modules can contain other modules. Clicking the icon of a module that has children opens and closes the group without leaving the page you are on, while clicking the name itself navigates. Top-level entries keep their own icon; inside a group, an entry that opens a further group shows a chevron in place of its icon — pointing right when that group is closed, down when it is open. Some entries are not links at all — they are plain uppercase headings used to break a long list into sections, and a heading that has entries under it can be clicked to collapse them.

The area you are currently in is highlighted, and its parent group is opened automatically. Note that this happens fresh on every page you open: a group you expanded by hand, but that has nothing to do with the page you just opened, will be collapsed again.

Style Two: The Tile Launcher

In the other arrangement there is no sidebar. The button at the far left of the top bar is a grid icon, and clicking it drops a panel of large tiles down from under the top bar — one tile per module, with its icon on a colored header and its name underneath. Child modules are listed as small links inside the parent's tile. An entry that is only a section heading is not given a tile; it appears as a heading with its entries listed beneath it.

Pick a tile and the panel closes. There is nothing to pin and nothing to resize; the panel is either open or closed.

Accounts that can reach the administration area get a separate gear button in the top bar that opens those entries in a drawer from the right.

The same tile grid is also used as a full page — headed Module selection — for accounts that do not have a personal dashboard. Those users land there when they sign in and whenever they click the logo.

When There Is No Navigation At All

Some accounts are deliberately set up with no navigation. There is no hamburger and no grid button — just the logo, the page, and the controls on the right of the top bar. This is a normal configuration for people who only ever work inside one screen, for example a kiosk or a single intake form. If you believe you should have a navigation and do not, that is a request for your administrator rather than a fault.

Your Modules

The entries in the navigation are called modules. A module is one area of the application: Invoices, Projects, Applicants, Fleet. Each one usually opens a list screen or a purpose-built page.

Things worth knowing about them:

• Your administrator names them. The names, icons, order and nesting are all configured. They are chosen to match your organization's vocabulary, so nothing in this guide can tell you what your modules are called.
• Some icons are emoji. If an administrator has used an emoji rather than an icon, you see the emoji character. This is normal.
• You only see the modules your roles allow. A module that is not offered to your roles simply does not appear. There is no locked entry and no message.
• The first entry is often labeled Dashboard and takes you to your starting screen. Note that if your administrator has given you a landing module, this entry opens that module even though it still reads "Dashboard".

If you have no modules at all, the module selection page says No modules available, followed by "There are currently no modules available for use. Please check your permissions or contact your system administrator." That message is accurate advice: nothing is broken, your account has simply not been given access to anything yet.

The Administration Area

Some accounts see an extra section headed Administration, with entries such as Users, User groups, Tags, Trash or File repository. With the left sidebar it sits below your modules; with the tile launcher it lives in the drawer behind the gear button. A smaller number of accounts see a second technical section below that, used by the people who build and maintain the application.

Most users see neither, and that is the intended state. The presence or absence of that section tells you nothing about whether your account is working correctly. Two further points that regularly cause confusion:

• Entries in that section are individually permission-controlled, so two administrators can see different subsets of it.
• Some entries only exist if the corresponding capability is licensed for your application. When it is not, the entry is absent — there is no upsell and no explanation.

Banners Above The Content

A banner is a colored strip that appears between the top bar and the page content and pushes the content down. It is used for announcements that should stay on screen: a planned maintenance window, a month-end freeze, a warning that a data import is running.

• A banner stays until you dismiss it with its x, or until you move to another page.
• Dismissing it only hides it for now. If whatever produced it is still producing it, it comes back on the next page you open. There is no "do not show again".
• Banners are colored by intent — neutral, informational, success, warning, or red for something serious.

This is different from a toast: the small message that slides in at the bottom-right after you save something and disappears by itself after a few seconds. A toast confirms an action you just took and is gone; a banner is a standing notice from the application. Both are covered in more detail in Notifications And Alerts.

Example On the first working day of the month, Finance turns on a banner reading "Period 03 is closed — new invoices will post to period 04". Everyone sees it above every page until it is switched off. Dismissing it clears it from the current page, but it is back the next time they open a list.

How Pages Load

The Thin Progress Bar

When the application is fetching something, a thin colored bar sweeps across the very top of the window. That bar is the loading indicator — there is no large spinner in normal use. If the bar is moving, the application is working; if it is gone and nothing changed, the request has finished.

When the request belongs to a pop-up window rather than to the page, the bar is drawn across the top of that pop-up instead, and the pop-up is briefly blocked so you cannot click twice. See Pop-Up Windows.

Most Navigation Does Not Reload The Page

Clicking a module or a menu entry usually swaps the content in place rather than reloading the whole browser page. You will notice that:

• the top bar and navigation never flash white;
• the view jumps to the top of the page each time;
• navigation groups you expanded manually collapse back to match the new page;
• an unpinned sidebar closes itself, while a pinned one stays open;
• any panel you had open — search, notifications, jobs, your avatar menu — closes.

Some pages cannot be swapped in place — typically pages built with a custom layout, and public pages. Those do a normal full browser reload, so you see the usual brief flash. Nothing is wrong when this happens.

Back And Forward Still Work

The browser's back and forward buttons behave as you would expect. Back also closes a pop-up window that you opened, one at a time, and forward re-opens it. Sorting, filtering and paging a list each add a step to the browser history, so pressing back after several filter changes walks back through them one at a time rather than leaving the screen.

Opening Something As A Normal Page Or In A New Tab

Hold Ctrl (or Cmd on a Mac) while clicking a link, or middle-click it, and the application steps out of the way: your browser opens that item in a new tab as an ordinary full page. If the link would normally have opened a pop-up window, the address is tidied up first, so what you get is a clean address for that item. This is the reliable route when you want a record open in its own tab, or want something to paste into an email.

Holding Shift or Alt bypasses in-place loading in the same way; what happens next is whatever your browser normally does with that combination, which for Shift is usually a new window. The full list of modifiers is in Keyboard Shortcuts.

Sharing Where You Are

The address in your browser's address bar keeps up with the important parts of what you are looking at. It is updated when you move to another module or screen, when you change a list's sort, filter, page or saved view, and when you open or close a pop-up window — the open pop-ups are encoded on the end of the address, so pasting that address to a colleague reproduces them, one after another, as far as their own permissions allow.

Two honest limits:

• Not every click updates the address. Clicks inside page content that are not proper navigation leave the address unchanged, so the address you copy may describe slightly less than what is on your screen.
• The standard window has no dedicated Share button. Copying the address bar, or Ctrl/Cmd- clicking the item to open it as a clean full page first, are the supported ways to hand someone a link. Your application may add its own sharing button on particular screens.

For a permanent link to one record, use the record's own "open on a separate view" action — see Record Detail Screens.

Example Tomáš filters the Orders list to "status = on hold" and "warehouse = Brno", opens one order in a pop-up, then copies the address out of the address bar into a chat message. His colleague opens it and lands on the same filtered list with the same order open, provided she is allowed to see that order.

Light, Dark And System Theme

The three buttons under Light/dark mode in your avatar menu are:

Until you choose, the application follows your device. Picking the half-circle keeps it that way, so it switches with your device — dark in the evening if that is how your device is configured — without you touching anything.

Your choice is remembered in the browser you made it in, not on your account. Signing in from a different computer, a different browser, or a private window starts again from "follow the system". Your administrator cannot force everyone to light or dark; both are always available.

Your application's logo usually has a light and a dark version, and the correct one is swapped in when the theme changes.

Interface Language

The interface language is set once for the whole application, not per person. There is no language switcher in the window and none on your profile page. If your application is in Czech, it is in Czech for everyone; if it is in English, likewise.

If you need the interface in a different language, that is a request for your administrator — see What To Ask Your Administrator For.

Note that this is separate from the content: record names, module names, field captions and option labels are your organization's own wording and can be maintained in more than one language independently of the interface.

Formats that look like language — how dates and numbers are written, which day starts the week, 12-hour versus 24-hour time — are also application-wide settings, not personal ones. Your time zone is the exception; it lives on your user record and is covered in Your Profile And Account.

Terms Of Service And Privacy Policy

The standard application window does not carry terms-of-service or privacy-policy links in the top bar or in the navigation. Where those documents appear depends on your organization:

• On the registration form, if your application allows people to register themselves, there is a checkbox confirming that you agree to the terms of service and acknowledge how personal data is handled. You must check it to register.
• Anywhere else, they are wherever your administrator has put them — commonly a module or a page built for the purpose, or a link in a page your organization maintains outside the application.

If you cannot find them and you need them, ask your administrator for the location rather than hunting through the interface.

On A Phone Or Tablet

The window rearranges below roughly the width of a small tablet:

Narrower still — phone widths rather than tablet widths — the search control also shrinks to a plain magnifying-glass button, and the word Search and the ⌘K hint disappear.

A useful detail if you move between a laptop and a narrow window: narrowing the browser window unpins the sidebar, and widening it again restores your pin. Your setting is not lost, it is only suspended while there is no room for it.

Because the page title is hidden on a phone, it is easy to lose track of which record you are looking at. The record's own screen normally repeats its title inside the content, and the browser tab always shows it.

Worked Example

Klára joins a company whose Jetstack application manages service contracts. Her first hour looks like this.

1. She signs in and lands on a page of tiles headed Module selection — her account has no dashboard, so the tiles are her home.
2. She picks the Contracts tile. The content swaps in place, the browser address changes, and the top bar now reads "Contracts". Nothing appears to the left of that title: a module's list screen contributes no top-bar buttons of its own.
3. Her application uses the left sidebar, so she opens the hamburger, then clicks the pin icon so the sidebar stays put, and drags its edge a little wider so "Contracts – renewals due" stops being cut off.
4. She notices a colleague's window lists several modules she does not have at all, plus an Administration section. That is expected; her colleague administers users.
5. A yellow banner appears above the content: "Year-end freeze from 20.12." She dismisses it, and it reappears the next time she opens a list — it is a standing notice, not a message to her.
6. She opens a contract, exports the list to a spreadsheet, and watches the inbox icon in the top bar report the export until the file downloads.
7. At the end of the day she opens her avatar menu, switches the theme to the moon icon, and signs out. The next morning, on the same computer, the application is still dark and the sidebar is still pinned at the width she chose. On her phone that evening, it is neither.

Tips And Gotchas

• A missing control is almost always a permission, not a fault. Search, notifications, the profile entry, the navigation itself and every administration entry can each be withheld from a role, and when they are they vanish silently.
• The pin and the sidebar width live in the browser. So does your theme. None of the three follow you to another device, and clearing browsing data resets all of them.
• The page title is not shown on phones. If you are helping someone over the phone, ask what the browser tab says rather than what the top of the screen says.
• Expanded navigation groups do not stay expanded. Every page you open rebuilds the navigation and re-opens only the branch you are actually in.
• The "Dashboard" entry may not open a dashboard. If your account has a landing module, that entry opens the module.
• Dismissing a banner is not permanent. If it is still being published, it comes back.
• Nothing on screen refreshes itself. Lists and record screens show what was loaded when you opened them; only notifications and background jobs update on their own. Use the list's refresh control to pull current data — see List Screens.
• If icons turn into empty boxes and date pickers look plain, your network is probably blocking the places some visual components are loaded from. It is not a data problem. Report it as described in When Something Goes Wrong.
• The application can be restyled. Your organization can apply its own colors, logo and even custom styling, so screenshots from elsewhere may not match your window exactly.

What To Ask Your Administrator For

Ready-made requests, in the wording that will get you the fastest answer:

• "Please add me to the roles that can see the Contracts module — it is not in my navigation."
• "Please set my landing area to Tickets so the logo takes me straight there."
• "Please turn on search for my role; I do not have the search button."
• "Please rename the module currently called Objects to Assets — the current name confuses new starters."
• "Please change the interface language of the application to Czech." (This is application-wide and affects everyone, so it needs a decision, not just a switch.)
• "Where are our terms of service and privacy policy published for this application?"

More of these, with what to expect, are collected in What To Ask Your Administrator For.

Related Chapters

• Finding Things And Search
• Notifications And Alerts
• Your Profile And Account
• Why Your Screen Differs
• Keyboard Shortcuts