Rich text, details and embedded content elements

The storm dashboard with no story. Picture the morning after a windstorm. Your outage dashboard is on the big screen in the operations center, and it shows 38,000 customers without power, 214 open outages, and a map full of red dots. Then the director walks in and asks three questions. What's our restoration plan? What do we know about the substation fire? Is the traffic camera on Route 1 showing downed lines? The counts and the map can't answer any of that. The answers live in text, in feature details, and in outside content like camera feeds and documents. This lesson covers the three dashboard elements that bring that context onto the same screen, so people stop switching between six browser tabs during an emergency.

What you will learn. By the end of this lesson you'll be able to do three things. First, you'll use the rich text element for titles, instructions and sentences that contain live numbers. Second, you'll use the details element to show the full record of whatever feature someone clicks on the map. Third, you'll use the embedded content element to pull in images, PDF documents, videos and web pages, including content that changes for each feature. Each one takes only a few minutes to set up, and together they turn a wall of indicators into something a manager can actually read and act on.

Three content elements, three jobs. Think of these three elements as three different voices on the screen. The rich text element is the dashboard talking to the reader: a title, a short briefing, a phone number, a link to the incident plan. The details element is the data talking: it shows every attribute of one feature, like a single water main break with its address, pipe size and crew notes. The embedded content element brings in material that lives somewhere else, such as a traffic camera image or a PDF of the storm response procedure. You add all three the same way you add a gauge or a list, from the Add element menu in the dashboard editor.

Rich text with live numbers. The rich text element works like a small word processor. You can set fonts and colors, insert your utility's logo, and add links to the emergency operations plan. The powerful part is dynamic content. When you connect the element to a data source, you pick statistics, such as the count of open outages and the sum of customers affected, and insert them into a sentence as placeholders. On screen it reads as a normal sentence: 214 open outages affecting 38,000 customers. When the layer refreshes, the numbers in that sentence update too. Executives often prefer this to a row of indicators, because a sentence explains itself.

Worked example: the storm briefing panel. Let's build a briefing panel for the storm. The first line is a bold title, windstorm response, day two. The second line is dynamic. Connect the element to the outages layer, add a count statistic and a sum of the customers field, filtered to status equals open, then write: there are, placeholder, open outages affecting, placeholder, customers. The third line is plain text: next briefing at 2 PM, incident lead Maria Chen. The last line is a link to the restoration plan PDF. Keep the panel short, four lines at most, so it can be read from across the room. Anything longer belongs in a document you link to.

The details element follows selection. The details element shows the full record for features, one at a time, and it borrows its layout from the layer's pop-up. So the effort you put into the pop-up in the web map pays off here. If your pop-up uses Arcade expressions to say how many hours a water main has been leaking, that text appears in the details panel too. The usual pattern is to add a selection action on the map or on a list. When someone clicks a break, the details element filters to that feature and shows its address, pipe material, crew assigned and latest notes, with no pop-up covering the map.

Setting up details that help. A few settings make the details element much more useful. First, fix the pop-up before you blame the dashboard. If the pop-up shows object IDs and global IDs, so will your panel, so hide technical fields in the web map. Second, set a maximum number of features. When a user selects ten service requests at once, the element lets them page through them, and a sensible limit keeps it quick. Third, turn on render only when filtered. Without it, the element shows records from the whole layer before anyone has clicked anything, and people read a random break as if it were the one they care about. Fourth, write the message the panel shows until a map selection filters it, something like: select a break on the map to see crew notes. Now the panel waits for a click and tells people what to do.

Embedded content: bring in outside material. The embedded content element displays something that lives at a web address. You choose the content type: a web page, an image, a video, or a document such as a PDF. There are two ways to set the address. URL means one fixed address that always shows the same thing, for example the county's storm response procedure. Features means the address is built from each feature's fields, so every traffic camera or every substation gets its own page. Two technical rules apply. The address must use HTTPS, and the other website must allow itself to be shown inside another page, which is called framing. Some sites block it on purpose, and then the element stays blank.

Worked example: one URL per camera. Here's how the Features option works for traffic cameras. Each camera in the cameras layer has a field called CAM underscore ID, for example I95 dash 12 on I-95 North and RT1 dash 04 on Route 1. You type one URL template with that field name in curly braces. For each camera, the placeholder is replaced by the camera's own value, which gives two addresses, one ending in I95 dash 12 dot jpg and one ending in RT1 dash 04 dot jpg. Both start with HTTPS, so they will load. In the embedded content settings you set the content type to Image, choose Features, pick the cameras layer, and paste the template. Then add a selection action on the map that filters this element. Now a click on any camera switches the image, and you haven't written a line of code.

Common mistake: typing numbers into text. Here's the trap that catches almost every new dashboard author. A manager asks for a plain sentence with the totals, and someone types 38,000 customers without power straight into the rich text element. It looks great at the morning briefing. By noon crews have restored power to about half the customers, the indicators say 19,000, and the sentence still says 38,000 on the big screen. Now people don't know which number to trust, and trust is the whole point of a dashboard. The fix is simple: any figure that comes from data goes in as dynamic content connected to the layer. Hand-typed text is only for things that don't change, like names, times and links.

Recap. Let's pull it together. The rich text element is the dashboard's voice: titles, short briefings, links, and sentences with live statistics that refresh with the data. The details element shows everything about the features someone selects, and it's only as good as the pop-up behind it, so clean that up first. The embedded content element brings in outside material, either one fixed URL or a URL built from each feature's fields, as long as it uses HTTPS and the site allows framing. With these three, your dashboard can answer the director's questions, not just show the counts.

Exercise. Now it's your turn. Open a dashboard that uses a service request or outage layer, one of your own or a public layer from Living Atlas. Add a rich text panel with a title, one live sentence built from a count statistic, and a link to a relevant document. Then add a details element, set a map selection action to drive it, turn on render only when filtered, and write a helpful message for when nothing is selected. For a bonus, add an embedded content element that shows a PDF or an image, ideally built from a feature field. In the next lesson we'll look at statistics and filters, and what happens behind the scenes when the server does the counting.