Creating a dashboard: layout grid, header and theme

One screen on a stormy night. Picture a utility operations room at two in the morning. A winter storm has frozen the ground, and water main break reports are coming in from every side of the city. The duty manager needs to know where the breaks are, how many crews are out, and how many customers have no water. The executive on the phone wants the same answers in ten seconds. If those answers live in five different tabs, someone gets the wrong number. An ArcGIS Online dashboard puts them all on one screen that updates by itself. Before you can add a single map or count, though, you need a well planned canvas. That canvas is what we build in this lesson.

What you will learn. By the end of this lesson you'll be able to do three things. First, create a new, empty dashboard in ArcGIS Online and give it a sensible title and tags. Second, plan the layout grid, which is simply how the screen is divided into areas where your maps and numbers will sit, and add a header across the top. Third, choose a theme, meaning the colours and background of the whole dashboard, and check that people can actually read it on a control room wall or a phone. We'll use a water main break dashboard as our running example throughout.

Where dashboards live. ArcGIS Dashboards is one of the apps built into ArcGIS Online, so there's nothing to install. Sign in, open the app launcher, the grid of squares at the top of the page, and choose Dashboards. Then click Create dashboard. You'll be asked for a title, tags and a summary. Take thirty seconds here. A title like Water Main Breaks, Live Operations is far easier to find later than Test Dashboard Two. Tags such as water, outages and storm help colleagues search for it. When you click create, ArcGIS saves a new dashboard item in your content, just like a web map or a feature layer.

From sign in to empty canvas. Here's the whole path in one picture. You sign in, open the Dashboards app, choose create dashboard, fill in the title and tags, and land on an empty canvas. That canvas is the editing view, with a toolbar down the left side for adding elements, arranging the layout, and changing the theme and settings. The last step matters more than it looks: save right away, even though the dashboard is empty. The editor doesn't save for you as you work, so if your browser tab closes, unsaved changes are gone. Get into the habit of saving after every change you're happy with.

The layout grid. A dashboard has no free floating boxes. Every element you add, whether a map, an indicator or a chart, snaps into place beside or below the others, forming a grid of rows and columns. Think of it like cabinets in a kitchen: they fit against each other with no gaps. You resize an element by dragging its edge and move it by dragging it to a new spot. Sizes are relative, so a map that takes two thirds of the width on your laptop still takes two thirds on a big wall screen. Around the main body there are two optional areas: a header across the top and a sidebar down the left.

Worked example: plan on paper first. Let's slow down and plan our water main break dashboard before touching the editor. Sketch a rectangle on paper. Across the top goes a header with the title, the utility's logo, and a link to the public outage page. Below it, the left two thirds of the screen is the map, because location is the first question anyone asks. The right third is one column with three numbers stacked on top of each other: open breaks, crews assigned, and customers without water. This sketch takes a minute, and it saves you from dragging elements around for half an hour. In the next lessons we'll fill each area in.

Adding the header. The header is the strip across the top of the dashboard. You add it from the layout options in the left toolbar. It holds the title, a logo image, and links, for example to your incident reporting form or your outage page. Later in this course you'll see that the header can also hold selectors, which are drop down filters like choose a district. Resist the urge to write a paragraph here. A header is a label, not a report. Something like City Water, Main Breaks, updated live is plenty, and it leaves more screen space for the map and the numbers people came for.

Choosing a theme. The theme is the colour scheme for the whole dashboard, and you set it once in the theme options rather than on each element. You start from Light or Dark, then you can customise the background colour, the text colour, the colour behind each element, and an accent colour used for highlights. So which should you pick? Think about where the screen lives. A dark theme is easier on the eyes in a dim emergency operations centre during a night shift. A light theme reads better in a bright office and prints cleanly. Whatever you choose, use your accent colour sparingly, so it still means pay attention here.

Worked example: can people read it?. Custom colours can go wrong, so let's check them with numbers. Contrast ratio compares how bright the text is against its background, from 1 to 1, which is invisible, up to 21 to 1, which is black on white. The web accessibility guideline asks for at least 4.5 to 1 for normal text. You don't need any code to check this. Open a free online contrast checker, such as the WebAIM contrast checker, paste the hex code of your text colour and of your background, and read the ratio. We tested white text and a stylish mid grey text on a dark charcoal background, with the hex codes shown on screen. White scores about 16.7 to 1, a clear pass. The grey scores about 3.7 to 1, which fails, even though it looked fine on your monitor. On a wall screen across the room, it would be hard to read.

Optional: the same check in Python. If you use Python, here is the same check as a short script. You can run it in an ArcGIS Notebook in ArcGIS Online, or in any Python on your own computer. It works out the brightness of each colour, then divides the brighter by the darker, with a small offset added to each. The two lines it prints are the results you just saw: white at 16.7, a pass, and grey at 3.7, a fail. If you don't use Python, skip this slide. The online checker gives you the same numbers.

Common mistake: building before planning. The most common mistake is jumping straight in and adding elements one after another, planning to tidy up later. Each new element squeezes the others, so you end up with a map the size of a postage stamp and indicators whose numbers are too small to read from the back of the room. Then you spend longer dragging edges than you spent building. The second mistake is picking pretty, low contrast colours, like grey on charcoal, that fail on a projector. The fix is the order we followed today: sketch the grid on paper, choose and check the theme, and only then start adding elements.

Recap. Let's pull it together. A dashboard is an item in your ArcGIS Online content, created from the Dashboards app with a clear title, tags and summary, and you save it early and often. The layout grid decides where everything goes, so plan it on paper first, with a short header across the top, the map taking most of the space, and your key numbers beside it. Finally, choose a light or dark theme based on where people will look at the screen, and check that your text colours have enough contrast to be read from across the room.

Your exercise. Now it's your turn. In your ArcGIS Online account, create a new dashboard called Storm Response, Service Requests. Add at least three tags and a one sentence summary. Add a header with a short title and one link, for example to your organisation's website. Choose a light or dark theme to suit where the dashboard would be shown. If you customise the colours, paste your text and background hex codes into a free online contrast checker, or run the script from this lesson if you use Python, and make sure your text scores at least 4.5 to 1. Save the dashboard. Then sketch on paper where the map and three indicators will go. In the next lesson, we'll add the map.