Property Report Widget

Brian_McLeer

Property Report Widget for ArcGIS Experience Builder

Overview

This custom widget provides comprehensive property lookup and reporting capabilities for ArcGIS Experience Builder applications. The widget was built on ArcGIS Experience Builder Developer Edition 1.19. The widget supports multiple search methods, configurable data sections with tables and charts, related table queries, nearby feature analysis, and PDF export functionality with WCAG 2.1 AA accessibility compliance.

The reporting tool on PortlandMaps.com served as a major reference for the design and functionality of this widget. While PortlandMaps.com is not an Experience Builder application, its approach to property information display, section organization, and user interaction patterns informed many of the design decisions implemented here.

This widget enables users to search for properties by address, parcel number, or other attributes, then view detailed information from multiple data sources in a unified report format. Results can be exported to PDF for offline use or distribution.

Required Dependencies

Before implementing this widget, install the following npm packages:

npm install recharts @tanstack/react-table

npm install @mantine/dates dayjs

npm install @mantine/charts

npm install @mantine/notifications

npm install html2canvas

npm install jspdf

These dependencies provide chart visualization (recharts), table functionality with sorting, filtering, and pagination (@tanstack/react-table), date handling (@mantine/dates, dayjs), additional chart utilities (@mantine/charts), toast notifications (@mantine/notifications), HTML-to-canvas conversion for PDF chart rendering (html2canvas), and PDF generation (jspdf).

Developer Configuration (setting.tsx)

The setting.tsx file provides developers with a comprehensive configuration interface within Experience Builder. The configuration is organized into multiple collapsible sections that control widget behavior and appearance.

Map Connection

Developers select which map widget the property report widget will interact with using the MapWidgetSelector component. This establishes the connection to the map view where property locations will be displayed and highlighted.

Search Sources Configuration

The widget supports three search source types that can be combined for flexible property lookup.

Geocoder Sources connect to ArcGIS geocoding services for address-based searches. Developers configure the geocoder service URL, source name for display in suggestions, suggestion count limit, and outfields for returned attributes.

Layer Sources query feature layers directly for attribute-based searches. Configuration includes data source selection from map layers or direct URL, search and display field selection, suggestion count limit, where clause filtering, and source name customization.

URL Parameter Sources accept search values from URL query parameters for direct linking to specific properties. Developers specify the parameter name, layer URL, search field, and outfields.

Global search settings include combined maximum suggestions across all sources, source label visibility in dropdowns, and priority ordering via drag-and-drop.

Header Info Configuration

An optional header section displays key property information at the top of results. Developers configure a data source with search field and display fields, where each field supports custom aliases, visibility controls, PDF exclusion, and formatting options. An optional geocoder URL enables reverse geocoding to display addresses in the header title regardless of search method used.

Property Preview Configuration

An optional property preview section displays a static map image centered on the property location. Developers configure image dimensions, basemap selection, and zoom level. Action buttons include zoom to property, copy address, and custom buttons with configurable URLs that support field value tokens like {parcelid}. An optional logo can be displayed with configurable dimensions and position.

Sections Configuration

Sections organize query results from different data sources, with each section containing one or more layers and displaying data as tables, charts, or both.

Section-level settings include section title, PDF exclusion toggle, display options for table and chart visibility, default expanded or collapsed state, and display pane selection for inline or separate pane rendering with configurable threshold.

Rich text configuration allows HTML content with links, phone numbers, and email addresses. Rich text can appear before or after data, include action buttons with customizable labels and URLs, and be excluded from PDF exports.

Chart configuration includes chart type selection (bar, pie, donut, line, area, column), category field for grouping, value field with aggregation method (count, sum, average, min, max), color palette customization, legend options, and PDF exclusion.

Table configuration includes sticky headers, row striping, compact mode, maximum rows, pagination settings, and column resizing and sorting options.

Layer Configuration

Each layer within a section has extensive configuration options.

Data source settings include layer selection from map or direct URL, custom layer title, and query configuration with spatial relationship and where clause options.

Buffer configuration enables buffer queries with configurable distance and units (feet, meters, miles, kilometers) and optional buffer display on the map.

Field configuration includes field selection and ordering, custom aliases, visibility toggles, PDF exclusion per field, and formatting options for numbers (decimal places, thousands separator) and dates.

Row interaction settings configure click behavior (none, zoom, highlight, popup, or combinations), hover highlighting, and zoom scale.

Related tables configuration enables queries against relationship classes. Developers configure the relationship ID, table name, display mode (inline collapsed, inline expanded, or separate pane), field configuration, chart display, sort options, maximum records, and PDF exclusion.

Nearby features configuration enables distance-based feature analysis. Settings include search distance and units, title and subtitle fields, distance format, sort order (nearest or farthest first), maximum features, zoom-on-click behavior, and PDF exclusion.

Highlight Layer Configuration

Highlight layer settings control how selected features appear on the map. Developers configure point symbols (color, size, outline), line symbols (color, width, style), and polygon symbols (fill color, outline). Behavior settings include enable/disable toggle and auto-clear timeout.

PDF Export Configuration

PDF export settings are organized into multiple subsections for comprehensive customization.

Header configuration includes enable/disable toggle, title and subtitle text with field token support, logo image with dimensions and position, and background and text colors.

Footer configuration includes enable/disable toggle, left/center/right text areas, page numbering format, date/time display, colors, and disclaimer text.

Style configuration includes page size (Letter, Legal, A4, Tabloid), orientation, margins, section and table header colors, alternating row colors, font settings, large text mode for accessibility, and section numbering.

Table of contents settings include enable/disable toggle, title customization, layer inclusion, and page break options.

Content options toggle inclusion of tables, charts, related tables, and related table charts, with configurable chart dimensions and maximum table rows.

Accessibility settings include document language, title metadata, and alt text templates for map images, logos, and charts, plus table summary templates.

Default Configurations

Global defaults for chart configuration (type, colors, animation, legend) and table configuration (styling, pagination) apply across all sections unless overridden at the section or layer level.

Coordinate Display Settings

Developers configure coordinate system (map native, WGS84, or Web Mercator), format (decimal degrees or degrees-minutes-seconds), decimal precision, and visibility toggle.

Import/Export Configuration

Settings can be exported to XML format for backup or transfer between Experience Builder applications. Import functionality allows loading previously exported configurations, enabling easy replication of widget setup across multiple applications.

End User Functionality (widget.tsx)

The widget.tsx file implements the runtime functionality that end users interact with in published Experience Builder applications.

Search Interface

Users search for properties through a unified search interface with multiple input methods.

Text search displays type-ahead suggestions as users type, grouped by source with optional labels. Keyboard navigation supports arrow keys to browse suggestions and Enter to select. A clear button resets the search field.

Map selection activates when clicking the map location icon. Users click any map location to search at that point, with visual feedback indicating selection mode is active.

URL parameters allow applications to pre-populate searches via query strings, enabling direct linking to specific properties with automatic search execution on page load.

Search Validation

The widget validates search input before executing queries. Invalid or unrecognized text displays an "Address not found" message. Changed search text forces new geocoding rather than reusing cached results, with case-insensitive comparison to prevent duplicate queries.

Results Display

Search results appear in an organized, hierarchical format.

Header section displays the property address as main title with configurable fields from the header info layer, coordinate display, clear results button, and export to PDF button with loading state.

Property preview (when enabled) shows a static map image with location marker, zoom and copy address buttons, and custom action buttons linking to external resources.

Data sections are collapsible with headers showing title and feature count badge. Users click headers or use keyboard (Enter/Space) to expand or collapse sections.

Table Display

Data tables support column sorting by clicking headers, column resizing by dragging borders, per-column text filtering, sticky headers, alternating row colors, and pagination with configurable page sizes. Row interactions include click actions (zoom, highlight, popup) and hover highlighting on the map.

Chart Display

Charts visualize aggregated data with support for bar, column, pie, donut, line, and area types. Features include interactive legends, hover tooltips, responsive sizing, and smooth animations. Screen reader accessible data tables provide alternative access to chart data.

Related Tables

Related records display within their parent layer in three modes: inline collapsed (accordion-style), inline expanded (always visible), or separate pane (slide-out panel). Each mode shows record counts and supports field formatting, optional charts, and sorting.

Nearby Features

Proximity-based display shows features near the searched location sorted by distance. Each item displays title, subtitle, and formatted distance, with optional click-to-zoom functionality.

Separate Pane View

A dedicated slide-out panel provides expanded viewing for sections configured for separate display, related tables with many records, or when record thresholds are exceeded. The pane includes full table display with pagination, sorting, filtering, zoom controls, and keyboard-accessible close functionality.

PDF Export

Users export results by clicking the Export to PDF button, which shows loading state during client-side generation. The resulting PDF includes header with logo and title, property summary, data tables, charts as images, related data, table of contents (when enabled), page numbers, and footer. Accessibility features include tagged structure, document language, alt text, and marked table headers.

Coordinate Display

Coordinates display in the results header in decimal degrees or degrees-minutes-seconds format, with support for map native, WGS84, or Web Mercator coordinate systems and configurable precision.

Map Integration

The widget highlights query results on the connected map using configured symbols for points, lines, and polygons. Features include zoom to searched location, zoom to individual features, buffer display, and automatic highlight cleanup with configurable timeout.

Error Handling

The widget displays clear error messages for search failures, query errors, and export issues. Error banners are dismissible and announced to screen readers via ARIA live regions.

Keyboard and Screen Reader Support

Full keyboard navigation supports tab movement, Enter/Space activation, arrow key navigation in dropdowns and tables, and Escape to close menus and panes. Screen reader support includes ARIA labels, role attributes, live regions for dynamic updates, and proper heading hierarchy.

Accessibility Compliance (WCAG 2.1 AA)

The widget implements comprehensive accessibility features meeting WCAG 2.1 Level AA requirements. All interactive elements support full keyboard navigation with visible focus indicators. Screen reader users benefit from proper ARIA labels, roles, and live regions that announce dynamic content changes. Text meets minimum contrast ratios, and font sizes use relative units (rem) to support browser zoom and user font preferences. Charts include screen reader accessible data tables as alternatives. The widget respects the prefers-reduced-motion setting for users sensitive to animation. PDF exports include tagged structure, document language declaration, and alt text for images to maintain accessibility in exported documents.

Feedback

Please use the comments section of this blog post to provide feedback on bugs, ideas, questions, or enhancement requests.