Resources

ArticleLinkCard

NavItems

Button

NavItem

PrimaryHeader

PrimaryFooter

MadeInPlasmic

Screen

react-awesome-reveal

vanilla-cookieconsent

plasmic-nav

EXB Hub

[PlasmicKit] Animations

[PlasmicKit] Made in Plasmic Badge

plasmic-basic-components

[Library] Tabler 3.2 Icons

react-aria

plasmic-cms

antd5 hostless

<h3 data-path-to-node="3">Step 1: Register the Core UI Widget</h3>
<ol start="1" data-path-to-node="4">
<li>
Log into your ArcGIS portal.
</li>
<li>
Navigate to the Content tab and select New Item. <img src="https://img.plasmic.app/img-optimizer/v1/img?src=a0aedfb60a0de6cbec57c7df5efd3f2a.png&amp;f=webp&amp;q=75">
</li>
<li>
Choose Application, then select Experience Builder Widget. <img src="https://img.plasmic.app/img-optimizer/v1/img?src=11b7943784321d65bee0d6a81ea78e9c.png&amp;f=webp&amp;q=75">S
</li>
<li>
Enter the following manifest URL:
<code data-path-to-node="4,3,1" data-index-in-node="0">https://portal3.emswebmap.com/exbwidgets/XUSearch/manifest.json</code>
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=1da7d25729df408a0abf0a63fb59d78b.png&amp;f=webp&amp;q=75"></li>
<li>
Click&nbsp;Next, provide a title (e.g., "Core UI"), and choose a save location.
</li>
</ol>
<h3 data-path-to-node="5">Step 2: Create Your Project</h3>
<ol start="1" data-path-to-node="6">
<li>
Select Create App and choose Experience Builder.
</li>
<li>
Select a template. The Jewelry Box template is recommended as it includes a default left-side panel. <img src="https://img.plasmic.app/img-optimizer/v1/img?src=23487a67ceb9b8a2f5db47858c675447.png&amp;f=webp&amp;q=75">
</li>
</ol>
<h3 data-path-to-node="7">Step 3: Deploy the Widget</h3>
<ol start="1" data-path-to-node="8">
<li>
Clear any existing content from the left panel.
</li>
<li>
Click the Insert icon (top-left) and scroll to the Custom section. <img src="https://img.plasmic.app/img-optimizer/v1/img?src=cc38f733252c3f2486b8a607a7eff29d.png&amp;f=webp&amp;q=75">
</li>
<li>
Locate Core UI and drag it into the left panel. <img src="https://img.plasmic.app/img-optimizer/v1/img?src=1909fc8ad03872324f2b00181cc84656.png&amp;f=webp&amp;q=75">
</li>
<li>
Set the widget height to Full Height in the style settings.
</li>
</ol>
<h3 data-path-to-node="9">Step 4: Connect to Map Data</h3>
<ol start="1" data-path-to-node="10">
<li>
On the right-hand configuration panel, find Select Map Widget.
</li>
<li>
Use the dropdown to select your project's Map widget.
</li>
<li>
Once connected, your map layers will automatically populate within the Core UI interface.
</li>
</ol>

Learn how to integrate the Core UI widget into your ArcGIS Experience Builder project using our step-by-step guide for seamless map search and layer management.

EXBHubIcon.svg

Adding Core UI to your Experience Builder Project

<h2>Creating a Relation</h2>
In order to create custom reports for Experience Builder using the xbUI widget, the correct expression needs to be added to the Web Viewer of the Experience Builder project.
Open the Map Viewer, and select the Layer that will have the expression applied to it.&nbsp;In this example, the &ldquo;TaxParcelPrimary&rdquo; layer&nbsp;will be used.&nbsp;
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=6d0b38a0db71ccdfce0df5358d3843f6.png&amp;f=webp&amp;q=75" alt="" width="485" height="338">
Once the layer we would like to use is&nbsp;determined, select the &ldquo;Pop-ups&rdquo; icon on the&nbsp;right (1).
Then, under the Fields list, select &ldquo;Add content&rdquo;&nbsp;(2).&nbsp;Then select &ldquo;Arcade&rdquo; (3).&nbsp;
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=af35d5bce46b98186bf8ceac141f3b68.png&amp;f=webp&amp;q=75" alt="" width="648" height="788">
Once that is selected, we can now add our expression. There will be a default expression within the Map&nbsp;Viewer, we can delete that.&nbsp;
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=1ca0a128c54949c15553ada48e0498ce.png&amp;f=webp&amp;q=75" alt="" width="880" height="434">
First, we need to add the expression that will allow for relatons. The expression will be:&nbsp;
<pre class="language-javascript"><code>{
 "type" : "XBTOOLS",
 "spatial" : {
 "type" : "XBUISpatial",
 "template": "address1",
 "label": "Addresses",
 "sqlsource" : "Address Points",
 "sqlwhere": "1=1"
 }
} 
</code></pre>
Inside the spatial block:
<ul>
<li><code>"type": "XBUISpatial"</code>
<ul>
<li>This sets the type of tool. "XBUISpatial" is a custom tool built for interacting with spaƟal features (e.g., selecting points on a map)</li>
</ul>
</li>
<li><code>"template": "address1"</code>
<ul>
<li>This refers to a predefined layout or format for this tool.</li>
</ul>
</li>
<li><code>"label": "Addresses"</code>
<ul>
<li>This is the UI label for this tool&mdash;how it appears in the app.</li>
</ul>
</li>
<li><code>"sqlsource": "Address Points"</code>
<ul>
<li>This specifies the data source. Which is another feature layer within our map labeled &ldquo;Address Points&rdquo;. It is the source of the spaƟal features the tool interacts&nbsp;with.</li>
</ul>
</li>
<li><code>"sqlwhere": "1=1"</code>
<ul>
<li>This is a basic SQL WHERE clause. "1=1" is a trick to select all records, acƟng like a default catch-all filter (i.e., no filtering applied).</li>
</ul>
</li>
</ul>
Once we have our expression in place, the &ldquo;Done&rdquo; button on the lower right-hand side should be available. If not, there is an error with the expression.&nbsp;
<hr>
Now that we have our expression in place, make sure we save our Map Viewer and now we can jump&nbsp;into our Experience Builder project.
 In this example, we will select multiple parcels under the &ldquo;TaxParcelPrimary&rdquo; layer and populate that selection into the Identify panel. As we expand one of the features selected, we will now notice that&nbsp;there is a related feature attached to our selected feature.
 We told our xbUI tool that, when we select a feature under the &ldquo;TaxParcelPrimary&rdquo; feature layer, we&nbsp;want the &ldquo;AddressPoint&rdquo; feature related to our selected feature to be attached as well. This gives us the ability to view attributes not only of our selected feature, but the related feature as well.&nbsp; <img src="https://img.plasmic.app/img-optimizer/v1/img?src=72e751f0c907f8f64b1ef4f689cc7bba.png&amp;f=webp&amp;q=75">
&nbsp;
<h2>Customizing Export Template&nbsp;</h2>
Now that we have established how to create a relate between two features within our Experience Builder project, we will now go over how to create an Export Template.
 We will go back into our project&rsquo;s Map Viewer and jump back into our Arcade Expression builder. This time, we will delete the last bracket, add a &ldquo;,&rdquo; and add the following:&nbsp;
<pre class="language-javascript"><code>"exporttemplate":[
 {
 "category": "PDF",
 "type": "AVERY",
 "name": "Related Records (Address Points)",
 "outputfile": "Related.pdf",
 "userelated": true,
 "layout": {
 "marginleft": 0.15,
 "margintop": 0.6,
 "fontheight": 12,
 "showborder": true,
 "indent": 0.125,
 "maxcharacters": 35,
 "distinct": true,
 "content": [
 {
 "type": "expression",
 "text": "'Occupant' + TextFormatting.NewLine + $feature.HouseNum + ' ' + $feature.AbbreviatedName 
 + TextFormatting.NewLine + $feature.ZipMunicipality + ', ' + $feature.FIPsState 
 + ' ' + $feature.ZIPCode", "justification": "left"
 }]
 }
 },
 {
 "category": "PDF",
 "type": "ATT",
 "name": "Attributes Only (table)",
 "outpuƞile": "Attributes.pdf",
 "usepopup": true,
 "title": "Map title set in template",
 "layout": {
 "tabledisplay": true,
 "fields": [
 "OBJECTID",
 "PARCELNO"
 ]
 }
 }
 ]
}</code></pre>
<h2 data-path-to-node="2">Section 1: Exporting Avery Labels</h2>
This section establishes the parameters for exporting a PDF document specifically formatted for Avery Label sheets.
<ul data-path-to-node="4">
<li>
<code data-path-to-node="4,0,0" data-index-in-node="0">"category": "PDF"</code>: Instructs the system to generate a PDF document.
</li>
<li>
<code data-path-to-node="4,1,0" data-index-in-node="0">"type": "AVERY"</code>: Sets the layout to a standard Avery label sheet format.
</li>
<li>
<code data-path-to-node="4,2,0" data-index-in-node="0">"userelated": true</code>: Pulls data from related records (e.g., a related table linked to a parcel or feature).
</li>
<li>
<code data-path-to-node="4,3,0" data-index-in-node="0">"outputfile": "Related.pdf"</code>: Defines the name of the generated PDF file.
</li>
</ul>
<h3 data-path-to-node="5">Layout Configuration</h3>
After defining the export type, the layout settings control the physical appearance of the labels:
<ul data-path-to-node="7">
<li>
<code data-path-to-node="7,0,0" data-index-in-node="0">"marginleft": 0.15</code> and <code data-path-to-node="7,0,0" data-index-in-node="23">"margintop": 0.6</code>: Sets the page offsets.
</li>
<li>
<code data-path-to-node="7,1,0" data-index-in-node="0">"fontheight": 12</code>: Sets the text size.
</li>
<li>
<code data-path-to-node="7,2,0" data-index-in-node="0">"showborder": true</code>: Draws a border around each label (useful for testing alignment).
</li>
<li>
<code data-path-to-node="7,3,0" data-index-in-node="0">"indent": 0.125</code>: Adds internal spacing within the label.
</li>
<li>
<code data-path-to-node="7,4,0" data-index-in-node="0">"maxcharacters": 35</code>: Limits text length on each label to prevent clipping.
</li>
<li>
<code data-path-to-node="7,5,0" data-index-in-node="0">"distinct": true</code>: Prevents the generation of duplicate labels.
</li>
<li>
<code data-path-to-node="7,6,0" data-index-in-node="0">"content"</code>: Uses an Arcade expression to dynamically build the label text using attributes like <code data-path-to-node="7,6,0" data-index-in-node="95">HouseNum</code>, <code data-path-to-node="7,6,0" data-index-in-node="105">AbbreviatedName</code>, and <code data-path-to-node="7,6,0" data-index-in-node="126">ZipMunicipality</code>.
</li>
</ul>
<hr data-path-to-node="8">
<h2 data-path-to-node="9">Section 2: Attribute Table Export</h2>
This section provides a template for exporting feature attributes within an Experience Builder project. It creates a simple, tabular PDF without spatial layouts.
<ul data-path-to-node="11">
<li>
<code data-path-to-node="11,0,0" data-index-in-node="0">"category": "PDF"</code>: Target format remains a PDF.
</li>
<li>
<code data-path-to-node="11,1,0" data-index-in-node="0">"type": "ATT"</code>: Specifies an Attributes Only table export.
</li>
<li>
<code data-path-to-node="11,2,0" data-index-in-node="0">"name": "Attributes Only (table)"</code>: The display name for this export option.
</li>
<li>
<code data-path-to-node="11,3,0" data-index-in-node="0">"outputfile": "Attributes.pdf"</code>: The filename for the resulting table.
</li>
<li>
<code data-path-to-node="11,4,0" data-index-in-node="0">"usepopup": true</code>: Inherits the configuration from the Map Viewer popup, honoring the field aliases and formatting you've already defined.
</li>
<li>
<code data-path-to-node="11,5,0" data-index-in-node="0">"title": "Map title set in template"</code>: Sets the header title for the PDF.
</li>
<li>
<code data-path-to-node="11,6,0" data-index-in-node="0">"tabledisplay": true</code>: Confirms the data should be rendered in a grid/table format.
</li>
<li>
<code data-path-to-node="11,7,0" data-index-in-node="0">"fields": ["OBJECTID", "PARCELNO"]</code>: Explicitly defines which fields to include (in this case, Object ID and Parcel Number).
</li>
</ul>
<hr data-path-to-node="12">
<h3 data-path-to-node="13">Next Steps</h3>
Once your expressions and JSON configurations are in place, click the Done button, Save your Map Viewer, and then proceed to Experience Builder to implement the widget.
&nbsp;
If all was done correctly, we can create a selection, populate our Identify panel and this time, we will hit the three dots adjacent to the parent layer we have selected. This is where we will find options to export our selection as either &ldquo;Related&rdquo; or &ldquo;AƩributes Only&rdquo; PDFs.&nbsp;
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=78f4a773dd4f436272a19c4fc67dc6f8.png&amp;f=webp&amp;q=75">
&nbsp;
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=37fad54c2e07e70b1408a4ca202ef3a8.png&amp;f=webp&amp;q=75">
<img src="https://img.plasmic.app/img-optimizer/v1/img?src=c0968d5b91bdd370332c4a914b77b1d8.png&amp;f=webp&amp;q=75">

Leverage the power of Arcade expressions to bridge the gap between map layers and professional-grade outputs. With EXB Hub, you can instantly generate related-record Avery labels or tabular attribute PDFs directly from your sidebar selection.

Screenshot 2026-03-06 225810.png

Creating Custom Reports Using Core UI

The Core UI widget includes powerful selection tools available through the Selection Mode Toolbar, found above the Table of Contents.

EXB Hub Resource Center