Quick Tip: Widgets in EsriJS 4 UI
Some of you might still be digging into the new ArcGIS API 4 for JavaScript.
One of the really cool new features in this version is the introduction of a layout UI for the views. You can read a little more about the View UI here.
What the View UI gives you is a built-in way to add your widgets to your application without having to put too much work into how those widgets will be positioned. The UI container even manages max-heights for the UI elements and is responsive.
A really great feature of this UI is that you can either place the out-of-the-box widgets in here or your own custom built widgets.
For example, let’s say that I wanted to display the Legend widget in my view, but I wanted to be able to turn it on and off.
There’s a few ways you could handle this, after all the Legend widget has a visible property that you can just set as needed.
So I’m thinking, maybe have a button displayed in my UI that when clicked will display the widget.
Simple
Ok, so all we’re doing here is creating a simple container for our widget with a button. I’m even borrowing some of the default API class names for my button so it looks like other buttons and widgets in the API. I just apply a couple of custom styles to adjust the width of the button to match the Legend widget size.
You can see this widget in action below.
As you can see, it’s pretty easy to create not only custom widgets, but pretty simple widget containers. You can even reuse existing class names in the API so that your widgets look similar to the built-in widgets.
If you want to learn more about widgets and much more about the ArcGIS API 4 for JavaScript, check out this training seminar and you can also get my book here.