An Overview of the Layout and Layout Adjacent Widgets

JeffreyThompson2 · ‎10-14-2024

On this blog, we've mostly discussed how to make stuff work, but Experience Builder is a web application and in web development making stuff pretty is often equally, some might say even more, important than functionality. If you want stuff to be pretty in Experience Builder, you should be using Layout Widgets. Seriously, you should be using Layout Widgets. I see your stuff from time to time and it is instantly clear whether or not you are using a Layout Widget. It's subtle, but it makes a huge difference in the overall professionalism of your site.

So let's run down what each of the Layout Widget does and maybe some sneaky ways you can use them that they weren't really meant for. I will cover a few widgets on this list that aren't strictly in the Layout Widget category, but serve an appearance focused function. I'll start with the Technically-Not-A-Layout-Widget Layout Widgets.

Not Actually Layout Widgets But They Totally Are Layout Widgets

Card Widget

Gives you a little box with a some pre-designed layout templates or clear out the pre-built design and make your own. The intended use is to make information boxes like these.

Alternative Use: The design options built into the Button Widget are fairly limited. If you want to design your own button, a Card is your best choice.

Divider Widget

There's really nothing to say here. It's a vertical or horizontal line. Do you need a vertical or horizontal line? Here, it's a vertical or horizontal line.

Seriously, many designs can be improved by visual section dividers and that's all this is. As for the styling options, stick to the single line. Just don't touch any of the other options.

I just want to hit them with a rolled up newspaper and say "Bad options. Bad, bad options."

Menu Widget

Makes a set of links to every Page in your project. Don't want a link to every Page in this Menu? Tough luck, you're linking to every Page whether you want to or not. If you want more control, you can use a number of other widgets (Button, Card, Text, Image, or List) that allow you to build a link instead.

Edit: See the correction by @JenniferAcunto in the comments. Thank you, but you ruined the set-up for the callback joke ahead.

Widget Controller Widget

Are your widgets getting out of control? Then, you need a Widget Controller Widget. It takes an ordinary widget and crams it down into a little button that will pop out to full size when you need it. Get to know all the options of the Widget Controller, they are all useful in some configuration or another.

Note for people using custom widgets: Widgets in a Widget Controller do not have their code read until they are first opened and don't stop if they are closed, unless that behavior was specifically programed in.

Fun Fact: If you put a Table Widget in a Widget Controller and then use the Add To Table Action, the Table will automatically open itself. I don't know if the developers meant to do that, but I hope they don't patch it out.

Section Widget

The Section Widget is like a mini-page inside your Page. These mini-pages are called Views. It allows you to put multiple things in one spot and swap out stuff as it becomes relevant to/useful to/desired by the user. It is super hackable and has made a starring role in these previous posts:

Views Navigation Widget

Makes a set of links to every View in a Section Widget. Don't want a link to every Section Widget in this Views Navigation? Tough luck... Wait...I'm being told that's an option now, but if you still want more options see the note about the Menu Widget above.

Officially Called Layout Widgets

Column Widget

A few weeks ago, I posted this screenshot.

Take a look at that grey bar under the Filter Widget and the widget itself appears to be slightly offset from the rest of the column. Sloppy, ugly, bad. Now, I put the stuff in that column into a Column Widget and give the Column a white background color.

Neater, acceptable, ok. I'd prefer to get rid of the border around the filter, at least that vertical border on the right, but it's a definite improvement.

A Column Widget neatly manages the spacing between widgets placed in a vertical arrangement. It also deals with widgets that change size.

Filter Widget collapsed, still looks fine.

Personal note: A few months ago, I was asked to stop using city data for ESRI Community stuff, so I started getting my data from an ESRI testing server I have bookmarked as Silly ESRI Data. Ok, that's not a great name for the bookmark as that server has data on everything on stuff around Jerry Seinfeld's apartment to natural disasters and homicide rates, but I'd much rather look at the more lighthearted end of the spectrum. So, that's why I have suddenly become obsessed with Bigfoot and UFOs.

Row Widget

A Column Widget for horizontal stuff. If you are making a Scrolling Page, all your stuff will be arranged into Row Widgets. Unless...

Fixed Panel Widget

The primary purpose of the Fixed Panel Widget is to break the row structure of a Scrolling Page Layout. You may want to use this if you have some information or tool that is taller than a Row(s) you are using for other widgets. You can also pin a Fixed Panel Widget to make a box that follows the user up and down the screen.

Sidebar Widget

My old friend, the Sidebar Widget. I can't build anything without you. It's the place you put stuff that the user might not want to see all the time. It can also be used as a Dropdown menu or to hide a Near Me Widget or two. You can use multiple Sidebar Widgets all around a map as long as you don't forget about The Sidebar ... Put stuff in it and then use the Open Sidebar Action to pop it open when it becomes useful.

Grid Widget

ArcGIS Dashboards is so much better than Experience Builder. Everything in Dashboards is on a grid and you can just lay it out by moving stuff around on the grid. Why does everything in Experience Builder have to be so complicated? Why can't I just use a grid? Oh, there is a grid. I can use a Grid Widget and lay stuff out on a grid. Why can't Dashboards be as flexible as Experience Builder, where I can lay stuff out on a grid or just stick stuff in random places?

(Be nice to ESRI developers. They do a lot. And ESRI customers are a highly demanding bunch that all think whatever they are doing is the most important thing in the world and that everyone cares about every tiny compliant they have as much as they do. We're kind of the worst.)

Historically, my favorite Template when I start a project has been Blank Fullscreen, but I think I'm going to start using Blank Fullscreen and covering it with a fullscreen Grid Widget. "Why not use the Blank Grid Template?," you ask. The Blank Grid Template does not give you the control over the spacing between widgets that the Grid Widget does. For most layouts, I am going to make my grid invisible by using a 0px gap or at least matching the colors, options I get from the Grid Widget, but not the Grid Template.

Pay attention to these cut box symbols as they allow you to split one box into two boxes, either horizontally or vertically. Or you can just drag in a new widget to whatever part of a grid box you like and the grid will split for you. By splitting and deleting boxes, you can build any arrangement possible. Put Grids inside your Grids, there's nothing stopping you.

Drop two or more widgets into the center of a Grid Widget to automatically turn a grid box into a set of tabs. Better than a Section and Views Navigation combo in many situations.

Look out for these hidden Distribute Space Vertically/Horizontally on the Grid Columns/Rows to quickly and neatly make the spacing even.

The Grid Widget also has these Allow Resize and Allow Expansion options that give the user control over the size of the widget within. With the Allow Expansion option being controllable on the box-by-box basis.

In short, Grids good.

Placeholder Widget

Do you see all those little plus signs everywhere in the Grid Widget section? Those are Placeholder Widgets. In the build mode, clicking that plus sign will allow you to place an new widget in that spot. In the real application, they have no appearance or functionality at all. Reminder: The Sidebar Problem™ is actually an every widget problem, including ones that have no appearance or function, like the Placeholder Widget.

There are two reasons you might want to use one of these things:

You aren't actually building an application. You are building a Template and you want your teammate to know where they should actually put the widgets.
You want to put some space between your other widgets, but you don't want anything visible in-between them. (An empty Text Widget would arguably do this job better.)

That's it. Those are all the Layout and Not-Exactly-Layout Widgets. Please use them. They exist for a reason.

The Didn't Exist When I First Wrote This Layout Widgets

Accordion Widget

In web design, an accordion refers to a collapsible panel or set of panels used to allow the user to open or close content as they need it. They look something like this.

Spoiler

This isn't important. You don't have to see this.

Accordions serve a useful purpose, but they aren't well liked by design experts because users can miss something important hidden within them and they don't do well with screen-readers and other accessibility tools. The main rule of thumb is if your user needs to see it, it shouldn't be in an accordion.

Flow Row

An alternative version of a Row Widget. The other Row Widget is based on a 12 column layout that used to be a very common web standard. This 12 column system has largely been replaced by flexbox. Flexbox is a more intuitive, easier-to-use system for most purposes. Flow Row is flexbox based. You probably want to use this Row instead of that other Row.