Custom widgets

EEA Legend

Customizable Legend used to give experience owner some flexibility in customizing the legend because the out-of-the-box one is not customizable.

The version of this widget is: 1.7, 1.10

Features

  • Inherits Advanced Options from the original widget (Font color and Background color)
  • Customizable from settings panel from Super Advanced Customization section as follows:
  • webMapentry contains customization options for WebMap as follows:
    • show: used to show/hide title
    • color: used to select the appropriate title color
    • titleReplacement: used in case you'd like to change the title
    • and more can be added like font size, etc.
  • maps: entry contains the set of maps (map services) within the web map, each map has set of layers as follows:
    • layers: entry contains the layers within each map service, customization options:
    • showInLegend: used to show/hide the entire layer in legend
    • layer > show: used to show/hide layer title
    • layer > titleReplacement: used in case you'd like to change the layer title
    • legend > show: used to show/hide legend title, which is the alias of the field used in defining the color ranges
    • legend > titleReplacement: used in case you'd like to change the legend title
    • legend > reverse: used to reverse the color ranges of the legend

EEA Matomo Analytics

Widget used to track statistics & metrics into the EEA Matomo software. Additional info for developers: https://developer.matomo.org/guides/tracking-introduction

The version of this widget is: 1.14

Settings

The parameter necessary for use this widget it's:

Additional info for developers

Additional info for developers: https://developer.matomo.org/guides/tracking-introduction

Non-interactive Map Widget

The Non-interactive Map widget provides the ability to include a static map in the application that cannot be modified by the user. The map center and scale shall remain unchanged during usage, unless changed through other widgets (i.e., interaction with data lists). The user is not able to pan the map using the mouse or touch events, or zoom in/out using the scroll button or pinch gestures.

The version of this widget is: 1.11

Usage notes

You can show a single map or include the option to switch between two maps. You can include multiple maps in an app by adding more Map widgets. The Map widget requires a data source, including web maps and web scenes. When you include tools, they are automatically positioned on the map based on the size of the widget in both design mode and the final app.

This widget can be configured similar to the out-of-the-box Map widget. Please refer to the Map widget documentation for more information.

Tip:

  • Zoom buttons can be enabled/disabled using widget configuration. Which can allow limited interactivity with the map.
  • Feature pop-up can be enabled/disabled using widget configuration.

Warning:

  • Scroll zooming is always disabled, even if enabled in widget configuration.

EEA Popup filter

EEA Popup filter is an Experience Builder widget where Map popup appears on map click, popup will contain list of features comes from webmap data source. On click on any item in the list appeared in the popup, the dataframe got filtered as well.

The version of this widget is: 1.11

Usage notes

Widget works exactly like ESRI's Table widget. It needs a datasource and it can filter the dataframe, it has visual list, it has UI controls to trigger clear filter.

To use the widget, drag it and configure the settings as follows...

  1. Select map from map selector dropdown. Selected webmap's datasource will be the data sources.
  2. Select New sheet exactly like in Table widget.
  3. Configure message Action/Trigger.

How does it work

  1. Using the webmap that has been set in setting widget, enable click on map and select clicked feature.
  2. Get the map service behind the webmap.
  3. Add invisible feature layer using the same URL of the map service.
  4. Add graphics layer to map.
  5. Define hittest function to allow users to select feature from the newly created feature layer.

  6. Draw the selected feature on the graphics layer.

  7. On Map feature selection via map click, filter list with the table.

  8. After clicking on map get the selected feature geometry, and filter the table with it.
  9. Once table records are filtered, the dataframe will also be filtered (given that Action/Trigger defined previously).

EEA URL Filter

The URL Filter widget provides the ability to interact with multiple datasources using URL parameters. The user can provide custom values to perform the following operations:

  • Filter one or more datasources using a preconfigured field for each datasource
  • Zoom to a subset of features
  • Filter datasources and zoom to features

The version of this widget is: 1.0. Working on Experience Builder 1.14

Usage notes

To configure the widget, the user can introduce multiple datasources, set a reference name for each datasource, and select the field to be used for filter. Once configured, the URL parameters can be set as follows application_url/?url-filter=<datasource_name>;<values_list>;<operation>. The operation parameter value can be:

  • filter
  • filterZoom
  • zoom

Multiple datasources configurations can be separated by double semicolon ;;, as seen here.

Tip:

The widget can publish two messages that can be used to configure actions in ExB:

  • Data filtering changes
  • Extent changes

Warning:

It is recommended to apply the zoom operation to a single datasource to avoid publishing multiple extent changes messages, which may lead to unexpected behaviour.

Multilevel Layer Filter

The Multilevel Layer Filter widget provides the ability to list the available values for predefined feature layer fields in order to select a subset of features for further processing. This widget affects the record selection across the app, so that other widgets can use the selected data.

The version of this widget is: 1.0. Working on Experience Builder 1.14

Usage notes

Multiple filters can be configured using different feature layer datasources. A new tab is introduced for each filter. The tab color and text can be configured. A filter can contain multiple fields, noting that the available values for each field will be affected by the selected values for all preceding fields. Changing the selected value for any field can be configured to trigger a record selection change or an extent change or both.

Tip:

The widget can publish two messages that can be used to configure actions in ExB:

  • Record selection changes
  • Extent changes

Warning:

  • In case of using multiple instances of this widget, note that the active tab and selected values will be synchronized across all instances, and that multiple instances are meant to be used in tandem.
  • Only "Single selection" is currently supported for filter type. "Multiple selection" is unsupported.

EEA TimeLine

The Timeline widget allows you to view temporal data from web maps, feature layers, and map service layers to see how data changes over time. Using this widget, you can animate data with play and pause buttons and manually view changes using a slider, and zoom in and out on a timeline.

The version of this widget is: 1.10, Working on Experience Builder 1.14

Usage notes

This widget requires a data source that includes temporal and time-enabled data. The data source can be a web map, one or multiple map services, or one or multiple feature layers. The Timeline widget updates the data source universally, meaning it affects other widgets using the same data. For example, you can connect a Timeline, Map, List, and Table widget to the same feature layer and use the Timeline widget to filter the others. The data source may include a time offset. An offset allows you to display time-enabled data using time values that are offset from the time values recorded in the data. Applying a time offset does not affect the date and time information stored in the source data. For example, you can use an offset of one year to make data for a hurricane display as if it occurred at the same time as a different hurricane from the previous year. If a data source includes an offset, the Timeline widget honors the offset.

Note:

Notes necessary for understanding the widget.

Tip:

To enable time settings on a layer, the layer must be published to ArcGIS Online with a date field.

When you include this widget in an app, the widget provides users with the following options:

  • Overall time extent—Click the information button to display the entire extent of time represented by the timeline and view the following setting:
  • Timeline filtering applied—When this option is turned on, the Timeline widget filters the connected data source at the framework level, meaning it affects any other widgets using the same data source.
  • Zoom in and Zoom out—Zoom in or zoom out on the slider.
  • Previous and Next—Move the slider one step forward or backward.
  • Play and Pause—Play or pause the time animation.
  • Speed—Choose a play speed from five levels: Slowest, Slow, Medium, Fast, or Fastest.

Settings

The Timeline widget includes the following settings:

  • Source—Select data source with temporal data to analyze with the widget.
  • Time settings—Configure the timeline's settings. Time settings include start time, end time, length of time steps, and more.
  • Synchronize with the time settings in the web map (Only available for web maps)—Synchronize the widget's time settings with settings configured in Map Viewer.
  • Configure time—Modify the timeline's start time, end time, length of time steps, and more.
    • Time span—Set the length of time represented by the timeline. The layer bar or bars show the total amount of time represented in the connected layers. You can drag both ends of the Overall time extent bar to set the timeline's time span relative to the layer bar or bars.
    • Start time and End time—Set the lower and upper limits for the widget. You can define the start and end times in the following four ways:
    • Minimum of all and Maximum of all—Use the minimum and maximum points from the selected data for the start and end time.
    • Today—Anchor the start or end time to the current date. Optionally, add an offset number of years, months, or days. For example, if you choose Today for the start time and provide an offset of -6 days, the start time will always be 6 days before the current date. If you provide an offset of 6 days, the start time will always be 6 days after the current date.
    • Now—Anchor the start or end time to the current minute. This option is the same as Today, except the offset adds hours and minutes as available units.
    • Custom—Choose a specific date and time from a calendar interface.
    • Set the minimum time accuracy—Provide the minimum interval between notches on the timeline. Each unit is only provided in the drop-down menu when the Time span value is long enough to contain at least one of them.
  • Date format—Type of date format in which it is displayed in the widget.
    • Default
    • Seasons—Format sss
    • July 2015—Format MMMM YYYY
    • Jul 2015—Format MMM YYYY
    • Jul 21, 2015—Format MMMM D, YYYY
    • Tue Jul 21, 2015—Format dddd MMM DD, YYYY
    • 7/21/2015—Format M/DD/YYYY
    • 2015/7/21—Format YYYY/M/DD
    • 7/21/15—Format M/DD/YY
    • 2015—Format YYYY
    • 7/21/2015 8:00 am—Format M/DD/YYYY h:mm a
    • Tue Jul 21 8:00 am—Format ddd MMM DD h:mm a
    • Custom—Any date format that supports the library link: momentjs
  • Shows one timestep—If enabled, only one date will be displayed.
  • Configure play rate—Controls the speed of play by default.

  • Time step—Select one of two modes for dividing the timeline into steps:

    • Length of one step—Use natural time units, such as months or days, to define the steps. You can only choose units that are the same or greater than the unit you provide for the minimum time accuracy. If you choose this mode, the user can use the Previous and Next buttons to move the slider one step at a time based on the minimum time accuracy you provide.
    • Total time divided into equal steps—Divide the time extent into an equal number of steps. If you choose this mode and provide 5 as the number of equal steps, the user can move the slider 1/5 of the total length at a time using the Previous and Next buttons. For example, if you choose this mode and provide 5 as the number of equal steps, the user can move the slider one-fifth of the total length at a time.

    Note:

    Users can click and hold the time slider to drag it freely forward and backward.

  • Time display—Choose a method for visualizing data:

    • Show current window—Only show data associated with each step. For example, you can show a hurricane's position every day for one month.
    • Show data cumulatively—Add data to the display cumulatively. Data from previous steps stays when the widget moves to the next step. For example, you can show a hurricane's path over one month by adding its daily positions together chronologically.
  • Style—Choose a layout style for the widget, either Classic or Modern.
  • Appearance—Customize the widget's foreground, background, and slider colors.
  • Display options—Choose to include play control and autoplay.
  • Enable play control—Include the Play, Pause, and Speed buttons.
  • Autoplay—Play the time animation automatically when the widget loads.

Layer List

The Layer List widget provides a list of the layers added to a map. It allows users to manage the visibility and order of layers interactively.

The version of this widget is: 1.14, working on Experience Builder 1.14

Usage notes

The Layer List widget enhances user interaction with the map layers by providing several convenient features. Users can easily reorder layers, adjust transparency, toggle visibility, zoom to specific layers, and remove layers as needed.

Features:

  • Change drawing order: Change the drawing order of the layers.
  • Transparency: Adjust the transparency of each layer using a slider or by typing a number (percentage).
  • Toggle Visibility: Switch on/off the visibility of each layer.
  • Zoom to Layer: Quickly zoom to the extent of a specific layer.
  • Remove Layer: Remove a layer from the map using the red trash can button.

Use tips

  • Interactivity: Utilize the drag and drop feature to reorder layers easily, making the most important layers visible on top.

Add Group Content

The Add Group Content widget shows a list of layers that are shared with a specific group in ArcGIS Portal, allowing users to add them to the map.

The version of this widget is: 1.14. Working on Experience Builder 1.14

Usage notes

This widget is essential for adding layers from a predefined group within ArcGIS Portal to your map. It is designed to be user-friendly and configurable through the Experience Builder interface or by importing/exporting a CSV file for advanced users.

Features:

  • List of Layers: Displays layers shared with a specific group.
  • Add to Map: Allows users to add layers to the map.
  • Categorization: Supports categories displayed as an accordion menu for better organization.
  • Layer Details: Configure layer details such as category, temporal coverage, SDI link, download link, and service URL.

Settings

The Add Group Content widget includes the following settings:

  • Map Selection: Choose the map to which the widget will be applied.
  • Group ID: Enter the Group ID to pull the layers from the specific ArcGIS Portal group.
  • Import/Export: Advanced layer configuration by importing/exporting a CSV file.

Layer Configuration

Each layer added through the widget can be configured with the following fields:

  • Category: Assign a category to the layer to organize it within the accordion menu.
  • Temporal Coverage: Specify the temporal range for the data, e.g., 1995-2012.
  • SDI URL: Provide a SDI link for the layer.
  • Hide SDI Link: Option to hide the SDI link if not needed.
  • Download URL: Provide a download link for the layer data.
  • Hide Download Link: Option to hide the download link if not needed.
  • Service URL: Paste the service URL if necessary.

Important Notes

  • Public Accessibility: If the application is intended to be public, ensure that all layers are shared with everyone and the group is configured to be visible by everyone.