|
POST
|
@Sage_Wall . The current attribution default in 5.0 is padded a bit from the bottom, where in the past it was hugging it. So now, with the lower slots and the attribution, they can overlap each other. It is shrinking the space to design by doing this.
... View more
03-05-2026
09:12 AM
|
1
|
4
|
606
|
|
POST
|
Try this in your javascript. It worked for me. // ESRI attribution bar
const shadowRootAttr = mapElement.shadowRoot;
const attrStyle = document.createElement("style");
attrStyle.textContent = `
.esri-attribution {
width: auto !important;
max-width: 50% !important;
border-radius: 8px 8px 0 0 !important;
right: 0 !important;
left: auto !important;
background: rgba(0, 0, 0, 0.35) !important;
opacity: 0.7 !important;
}
`;
shadowRootAttr.appendChild(attrStyle); * I did a bit more digging. If you are using arcgis-map I don't think it can be reached in the shadow DOM through Calcite. I think it is because the Esri attribution is legally required, so be careful not to make it invisible.
... View more
03-05-2026
08:55 AM
|
1
|
2
|
607
|
|
POST
|
Things I have observed that might help. Change the Calcite in the css where you can instead of fighting the dom. :root,
.calcite-mode-dark {
/* Typography */
--calcite-font-family: "Arial", system-ui, sans-serif;
--calcite-font-size--1: 12px;
--calcite-font-size--2: 13px;
} A lot of the shadow root is accessible, AI helps me a lot with this. // Shadow DOM styling
if (cc.shadowRoot) {
try {
const ccStyle = document.createElement("style");
ccStyle.textContent = `
:host {
border-radius: 8px !important;
overflow: hidden !important;
}
.root {
border-radius: 8px !important;
overflow: hidden !important;
}
.conversions-view {
padding: 6px !important;
}
.arcgis-coordinate-conversion__conversion-list,
.arcgis-coordinate-conversion__conversion-row {
width: 200px !important;
max-width: 200px !important;
}
.arcgis-coordinate-conversion {
background: #121826;
border-radius: 10px;
padding: 0px 0px;
width: 250px !important;
}
`;
cc.shadowRoot.appendChild(ccStyle);
} catch(e) {
console.warn("CC shadow style failed:", e);
}
}
... View more
03-04-2026
09:10 AM
|
1
|
0
|
640
|
|
IDEA
|
@Noah-Sager In 5.0 setting the scale="s" for the sketch component does not work now. It is always bigger then the others. When you have time please look into it.
... View more
02-25-2026
12:38 PM
|
0
|
0
|
418
|
|
POST
|
Idea thread found here. Solution: // Configure only your parcel layer sources
// Custom getSuggestions bypasses Esri's 5.0 prefix-only behavior
// and restores the old LIKE '%value%' contains search
quickSearch.sources = [
{
layer: parcelLayer,
searchFields: ["PartyName_1"],
displayField: "PartyName_1",
name: "Search by Owner",
outFields: ["PartyName_1"],
exactMatch: false,
suggestionsEnabled: true,
getSuggestions: (params) => {
const query = parcelLayer.createQuery();
query.where = `PartyName_1 LIKE '%${params.suggestTerm.replace(/'/g, "''")}%'`;
query.outFields = ["PartyName_1"];
query.returnGeometry = false;
query.returnDistinctValues = true;
query.orderByFields = ["PartyName_1"];
query.num = 6;
return parcelLayer.queryFeatures(query).then(results => {
return results.features.map(f => ({
key: f.attributes.PartyName_1,
text: f.attributes.PartyName_1,
sourceIndex: params.sourceIndex
}));
});
}
},
{
layer: parcelLayer,
searchFields: ["PropertyAddress"],
displayField: "PropertyAddress",
name: "Search by Address",
outFields: ["PropertyAddress"],
exactMatch: false,
suggestionsEnabled: true,
getSuggestions: (params) => {
const query = parcelLayer.createQuery();
query.where = `PropertyAddress LIKE '%${params.suggestTerm.replace(/'/g, "''")}%'`;
query.outFields = ["PropertyAddress"];
query.returnGeometry = false;
query.returnDistinctValues = true;
query.orderByFields = ["PropertyAddress"];
query.num = 6;
return parcelLayer.queryFeatures(query).then(results => {
return results.features.map(f => ({
key: f.attributes.PropertyAddress,
text: f.attributes.PropertyAddress,
sourceIndex: params.sourceIndex
}));
});
}
},
{
layer: parcelLayer,
searchFields: ["QuickRefID_1"],
displayField: "QuickRefID_1",
name: "Search by Quick Reference ID",
outFields: ["QuickRefID_1"],
exactMatch: false,
suggestionsEnabled: true,
getSuggestions: (params) => {
const query = parcelLayer.createQuery();
query.where = `QuickRefID_1 LIKE '%${params.suggestTerm.replace(/'/g, "''")}%'`;
query.outFields = ["QuickRefID_1"];
query.returnGeometry = false;
query.returnDistinctValues = true;
query.orderByFields = ["QuickRefID_1"];
query.num = 6;
return parcelLayer.queryFeatures(query).then(results => {
return results.features.map(f => ({
key: f.attributes.QuickRefID_1,
text: f.attributes.QuickRefID_1,
sourceIndex: params.sourceIndex
}));
});
}
}
];
... View more
02-23-2026
09:28 AM
|
0
|
0
|
424
|
|
IDEA
|
In 4.34 & 5.0 the exactMatch: false → prefix only. In 4.21 it's like: LIKE '%ris%' This is a know behavior. See this thread.
... View more
02-23-2026
09:26 AM
|
1
|
0
|
174
|
|
POST
|
Is there a known fix or do I go create my own? Seems like it makes this component pretty useless for anything other then location. @NZGIS this is directly related to your problem, it is prefix only now.
... View more
02-23-2026
09:17 AM
|
1
|
1
|
432
|
|
POST
|
The search component in 4.34 does not seem to honor exactMatch:False. It will only honor it if the search is in the first characters. Say I am looking for "Driscoll" if I search 'ris' it will not come up, but if I do 'Dri' it will. In 4.34 the exactMatch: false → prefix only. Where in 4.21 it's like: LIKE '%ris%' // Wait for your view to be ready
const quickSearch = document.getElementById("quickSearch");
await quickSearch.componentOnReady();
// Assign the map view
quickSearch.view = view;
// Configure only your parcel layer sources
quickSearch.sources = [
{
layer: parcelLayer,
searchFields: ["PartyName_1"],
name: "Search by Owner",
exactMatch: false,
outFields: ["PartyName_1"],
displayField: "PartyName_1",
suggestionsEnabled: true,
},
{
layer: parcelLayer,
searchFields: ["PropertyAddress"],
name: "Search by Address",
outFields: ["PropertyAddress"],
displayField: "PropertyAddress",
exactMatch: false,
},
{
layer: parcelLayer,
searchFields: ["QuickRefID_1"],
name: "Search by Quick Reference ID",
outFields: ["QuickRefID_1"],
displayField: "QuickRefID_1",
exactMatch: false,
}
];
... View more
02-20-2026
01:00 PM
|
0
|
5
|
486
|
|
POST
|
Updated solution for 4.34 // Create the button
const exportBtn = document.createElement("button");
exportBtn.id = "export-feature-menu-btn";
exportBtn.innerHTML = `<span class="esri-icon-download"></span> Export`;
exportBtn.title = "Export all features in menu";
// Append directly to body
document.body.appendChild(exportBtn);
// Click handler - CSV export
exportBtn.addEventListener("click", () => {
const features = view.popup.features || [];
if (!features.length) return;
// Fields to export from popup
const popupFields = [
"PartyName_1",
"PropertyAddress",
"PropertyNumber",
"RP_AprTot"
];
// Optional: user-friendly headers
const headerNames = [
"Owner Name",
"Property Address",
"Parcel ID",
"Appraised Total"
];
let csv = headerNames.join(",") + "\n";
features.forEach(feature => {
//console.log(feature.attributes)
const attrs = feature.attributes || {};
console.log("Parcel attrs →", attrs);
const row = allFields.map(field => {
let val = attrs[field] ?? "";
console.log(val)
return `"${val}"`;
});
csv += row.join(",") + "\n";
});
const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "Search_Results.csv";
a.click();
URL.revokeObjectURL(url);
});
... View more
02-17-2026
11:09 AM
|
1
|
0
|
317
|
|
POST
|
Here is how I got past the shadow root and change the font-family and other things. // Wait until the component and its view are ready
await mapElement.componentOnReady();
// 3Access the shadow root of the component
const shadowRootPop = mapElement.shadowRoot;
// Create a style element
const stylePop = document.createElement("style");
stylePop.textContent = `
/* Popup header text */
.esri-popup__main-container.esri-widget{
font-family: 'Courier New', Courier, monospace !important;
}
.esri-ui .esri-popup .esri-widget__heading {
font-weight: 300 !important;
font-size: 12.5px !important;
line-height: 1.3 !important;
}
.esri-popup__main-container{
width: 340px !important;}
/* Optional: move the popup up from bottom if needed */
.esri-popup__main-container.esri-widget {
bottom: 80px !important;
}
`;
// Append the style into the component shadow root
shadowRootPop.appendChild(stylePop);
... View more
02-05-2026
07:47 AM
|
1
|
0
|
983
|
|
IDEA
|
@Noah-Sager , I did figure out the scale(scale="s"). Once I set them all to the same it was all good. I know that, if you don't set the scale properties, the sketch component default width is noticeably wider then the compass, home, and zoom components. It just looks goofy. It would be nice for them all to have the same default styles when possible. I was fighting the shadow dom before I saw the scale property. Feel free to mark this as already offered. Using Version 4.34. No scale property added: If they all have the scale="s" property.
... View more
01-29-2026
11:38 AM
|
0
|
0
|
473
|
|
POST
|
I am running into this headache. We unfortunately have a few users who cannot upgrade just yet and it is handicapping us. We are even running into newer versions of Pro not being able to see older datasets. If we create a dataset in 2.9.5 it cannot read the attribute table, or sometimes open it at all, in Pro version 3.5.2, and vice versa. So until we can upgrade the rest we have to produce two different version of the same data. It's frustrating.
... View more
01-29-2026
06:39 AM
|
0
|
0
|
800
|
|
POST
|
This question is more for the ESRI team. In this blog it states "To customize the style, you can use the documented design tokens and component css variables to style components". Where does one find the documentation for both the tokens and css variables? Is there any available training, resources, blogs, ect, that can help us learn and navigate the Shadow DOM of these new components?
... View more
12-23-2025
07:43 AM
|
3
|
13
|
1308
|
|
POST
|
I think I may have gotten it, or at least a working solution, by using the LocalBasemapsSources? However the format/look is different. So I am not sure. Would still like to know if the actual basemap gallery component is a direction I can take. let basemapGallery = new BasemapGallery({
source: new LocalBasemapsSource({
basemaps: [
myBasemap//Basemap.fromId("topo-vector"), // create a basemap from a well known id basemap
]
}),
view: view
});
view.ui.add(basemapGallery, 'top-right');
... View more
12-19-2025
03:23 PM
|
0
|
0
|
954
|
|
POST
|
No, not through online. Using the SDK code. Add the component in HTML and put it in a slot, then customize it in JS. This the way the new format is supposed to go, no? <!--Basemap Gallery-->
<arcgis-basemap-gallery
id="baseMapGal"
slot="top-right">
</arcgis-basemap-gallery> const basemapGallery = document.getElementById("baseMapGal");
... View more
12-19-2025
01:27 PM
|
0
|
0
|
968
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 4 weeks ago | |
| 1 | 03-23-2026 08:11 AM | |
| 1 | 03-23-2026 07:55 AM | |
| 7 | 03-18-2026 12:15 PM | |
| 1 | 03-11-2026 07:51 AM |
| Online Status |
Offline
|
| Date Last Visited |
16 hours ago
|