Latest Contributions by MayurDodiya

‎01-11-2023

Hi, I am following tutorial Creating a Map app from here Create a mapping app | Calcite Design System | ArcGIS Developers . I want to add collapsible floating panel at bottom of page for AttributeTable/FeatureTable widget like below example. There is calcite-shell-centre-row and not getting where to add in the page to align to the bottom of page. I tried to add inside calcite-shell tag however it is added below view Div, it doesn't fit into the page and added scrollbar to page. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Calcite Demo</title> <style> body { display: flex; } html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #headerDiv { text-align: center; height: 30px; } .calcite-tutorial { --calcite-ui-brand: #0079c1; --calcite-ui-brand-hover: #0079c1; } .calcite-tutorial calcite-chip { --calcite-ui-foreground-2: var(--calcite-ui-brand); --calcite-ui-text-1: white; margin-inline-end: 0.75rem; } .esri-view .esri-view-surface--inset-outline:focus::after { outline: none !important; } </style> <script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.esm.js" ></script> <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.99/calcite.css" /> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.25/"></script> </head> <body> <script> require([ "esri/Map", "esri/WebMap", "esri/views/MapView", "esri/widgets/Bookmarks", "esri/widgets/BasemapGallery", "esri/widgets/LayerList", "esri/widgets/Legend", "esri/widgets/Print", "esri/widgets/Home", "esri/widgets/ScaleBar", "esri/layers/FeatureLayer", "esri/symbols/WebStyleSymbol", "esri/rest/support/TopFeaturesQuery", "esri/rest/support/TopFilter", ], ( Map, WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print, Home, ScaleBar, FeatureLayer, WebStyleSymbol, TopFeaturesQuery, TopFilter ) => (async () => { // const map = new Map({ // basemap: "streets-vector", // Basemap layer service // }); const layer = new FeatureLayer({ url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_National_Parks_Annual_Visitation/FeatureServer/0", outFields: ["*"], renderer: await setRenderer(), popupTemplate: createPopupTemplate(), }); const map = new Map({ basemap: "streets-navigation-vector", layers: [layer], }); // const map = new WebMap({ // portalItem: { // id: "210c5b77056846808c7a5ce93920be81", // }, // }); const view = new MapView({ map: map, //center: [-118.805, 34.027], // Longitude, latitude //zoom: 13, // Zoom level container: "viewDiv", // Div element padding: { left: 49, }, center: [-120, 45], zoom: 3, }); const basemaps = new BasemapGallery({ view, container: "basemaps-container", }); const bookmarks = new Bookmarks({ view, container: "bookmarks-container", editingEnabled: true, }); const layerList = new LayerList({ view, selectionEnabled: true, container: "layers-container", }); const legend = new Legend({ view, container: "legend-container", }); const print = new Print({ view, container: "print-container", }); const scaleBar = new ScaleBar({ view: view, unit: "dual", // The scale bar displays both metric and non-metric units. }); view.ui.add(scaleBar, { position: "bottom-left", }); let homeWidget = new Home({ view: view, }); view.ui.add(homeWidget, "top-left"); view.ui.move("zoom", "top-left"); const layerView = await view.whenLayerView(layer); view.when(() => { // map.when(() => { let activeWidget; const handleActionBarClick = ({ target }) => { if (target.tagName !== "CALCITE-ACTION") { return; } if (activeWidget) { document.querySelector( `[data-action-id=${activeWidget}]` ).active = false; document.querySelector( `[data-panel-id=${activeWidget}]` ).hidden = true; } const nextWidget = target.dataset.actionId; if (nextWidget !== activeWidget) { document.querySelector( `[data-action-id=${nextWidget}]` ).active = true; document.querySelector( `[data-panel-id=${nextWidget}]` ).hidden = false; activeWidget = nextWidget; } else { activeWidget = null; } }; document .querySelector("calcite-action-bar") .addEventListener("click", handleActionBarClick); let actionBarExpanded = false; document.addEventListener("calciteActionBarToggle", (event) => { actionBarExpanded = !actionBarExpanded; view.padding = { left: actionBarExpanded ? 135 : 45, }; }); }); async function setRenderer() { const symbol = new WebStyleSymbol({ name: "park", styleName: "Esri2DPointSymbolsStyle", }); const cimSymbol = await symbol.fetchCIMSymbol(); cimSymbol.data.symbol.symbolLayers[0].size = 24; cimSymbol.data.symbol.symbolLayers[1].size = 0; return { type: "simple", symbol: cimSymbol, }; } function createPopupTemplate() { return { title: "{Park}", content: [ { type: "fields", fieldInfos: [ { fieldName: "TOTAL", label: "Total visits", format: { digitSeparator: true }, }, { fieldName: "F2018", label: "2018", format: { digitSeparator: true }, }, { fieldName: "F2019", label: "2019", format: { digitSeparator: true }, }, { fieldName: "F2020", label: "2020", format: { digitSeparator: true }, }, ], }, ], }; } const controlVisitedTypeEl = document.getElementById( "control-visited-type-el" ); const controlYearEl = document.getElementById("control-year-el"); const controlCountPerStateEl = document.getElementById( "control-count-per-state-el" ); const controlResetEl = document.getElementById("control-reset-el"); controlVisitedTypeEl.addEventListener( "calciteRadioGroupChange", async (event) => { (orderBy = event.target.value), filterItems(); } ); controlYearEl.addEventListener( "calciteSelectChange", async (event) => { (year = event.target.value), filterItems(); } ); controlCountPerStateEl.addEventListener( "calciteSliderChange", async (event) => { (count = event.target.value), filterItems(); } ); controlResetEl.addEventListener("click", async () => resetFilters()); const countDefault = 1; const orderByDefault = "DESC"; const yearDefault = "TOTAL"; let count = countDefault; let orderBy = orderByDefault; let year = yearDefault; async function filterItems() { const query = new TopFeaturesQuery({ topFilter: new TopFilter({ topCount: count, groupByFields: ["State"], orderByFields: `${year} ${orderBy}`, }), orderByFields: `${year} ${orderBy}`, outFields: ["State, TOTAL, F2018, F2019, F2020, Park"], returnGeometry: true, cacheHint: false, }); document.getElementById("result-list").innerHTML = ""; document.getElementById("result-block").open = true; const results = await layer.queryTopFeatures(query); graphics = results.features; graphics.forEach((result, index) => { const attributes = result.attributes; const item = document.createElement("calcite-list-item"); const chip = document.createElement("calcite-chip"); chip.value = attributes.State; chip.slot = "content-end"; chip.scale = "s"; chip.innerText = attributes.State; item.label = attributes.Park; item.value = index; item.description = `${attributes[ yearDefault ].toLocaleString()} visitors`; item.addEventListener("click", () => resultClickHandler(result, index) ); item.appendChild(chip); document.getElementById("result-list").appendChild(item); }); query.orderByFields = [""]; const objectIds = await layer.queryTopObjectIds(query); layerView.filter = { objectIds }; determineResetActionState(); } function resultClickHandler(result, index) { const popup = graphics && graphics[parseInt(index, 10)]; if (popup) { view.popup.open({ features: [popup], location: result.geometry, }); view.goTo( { center: [result.geometry.longitude, result.geometry.latitude], zoom: 4, }, { duration: 400 } ); } } function determineResetActionState() { if ( count !== countDefault || orderBy !== orderByDefault || year !== yearDefault ) { controlResetEl.removeAttribute("disabled"); controlResetEl.indicator = true; } else { controlResetEl.disabled = true; controlResetEl.removeAttribute("indicator"); } } function resetFilters() { count = countDefault; orderBy = orderByDefault; year = yearDefault; const activeRadioGroupItem = document.querySelector( `calcite-radio-group-item[value=${orderByDefault}]` ); activeRadioGroupItem.checked = true; controlYearEl.value = yearDefault; controlCountPerStateEl.value = countDefault; filterItems(); } filterItems(); })()); </script> <calcite-shell content-behind class="calcite-tutorial"> <div id="#headerDiv" slot="header">  <calcite-panel heading="ArcGIS Display Map"></calcite-panel> </div> <calcite-shell-panel slot="panel-start" position="start" detached collapse="true" detachedHeightScale="s" > <calcite-action-bar slot="action-bar"> <calcite-action data-action-id="layers" icon="layers" text="Layers" ></calcite-action> <calcite-action data-action-id="basemaps" icon="basemap" text="Basemaps" ></calcite-action> <calcite-action data-action-id="legend" icon="legend" text="Legend" ></calcite-action> <calcite-action data-action-id="bookmarks" icon="bookmark" text="Bookmarks" ></calcite-action> <calcite-action data-action-id="print" icon="print" text="Print" ></calcite-action> <calcite-action data-action-id="information" icon="filter" text="Filter" > </calcite-action> </calcite-action-bar> <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden > <div id="layers-container"></div> </calcite-panel> <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden > <div id="basemaps-container"></div> </calcite-panel> <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden > <div id="legend-container"></div> </calcite-panel> <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden > <div id="bookmarks-container"></div> </calcite-panel> <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden > <div id="print-container"></div> </calcite-panel> <calcite-panel heading="National Park Visitation" data-panel-id="information" hidden > <calcite-block heading="Filters" open> <div slot="control"> <calcite-action disabled icon="reset" id="control-reset-el" ></calcite-action> <calcite-tooltip label="Reset to defaults" reference-element="control-reset-el" position="bottom" > Reset to defaults </calcite-tooltip> </div> <calcite-label> Data type, per state <calcite-radio-group id="control-visited-type-el" width="full"> <calcite-radio-group-item value="DESC" checked >Most visited</calcite-radio-group-item > <calcite-radio-group-item value="ASC" >Least visited</calcite-radio-group-item > </calcite-radio-group> </calcite-label> <calcite-label> Year data to display <calcite-select id="control-year-el"> <calcite-option label="Total of all time" value="TOTAL" ></calcite-option> <calcite-option label="2018" value="F2018"></calcite-option> <calcite-option label="2019" value="F2019"></calcite-option> <calcite-option label="2020" value="F2020"></calcite-option> </calcite-select> </calcite-label> <calcite-label> Max parks per state <calcite-slider id="control-count-per-state-el" label-ticks ticks="1" min="1" max="5" ></calcite-slider> </calcite-label> </calcite-block> <calcite-block collapsible heading="Results" id="result-block"> <calcite-list id="result-list"></calcite-list> </calcite-block> </calcite-panel> </calcite-shell-panel> <div id="viewDiv"></div> <calcite-shell-center-row></calcite-shell-center-row>  </calcite-shell> </body> </html>

‎06-05-2022

Hi, I have created application using WAB 2.23 Developer Edition Foldable Theme, There are couple of custom widgets has been added to application, as my custom widgets contains 2 textboxes and 2 buttons and default height of widget covers big map area. Tried to inspect elements and played with CSS but none worked, Is there anyway We can set Height to specific widgets ? Thanks, Mayur Dodiya

‎08-04-2021

Hi, How to move LayerToggle widget in headercontroller for foldable theme? Where to add in config.json ? Thanks,

‎02-18-2021

Hi, Looking for Calcite app starter template similar to this https://jsapi-app-calcite-414.surge.sh/ Calcite app Templates has been removed from arcgis-cli and no longer option available to generate the calcite template. Looking for same design concept for app

‎06-30-2020

Hi, I have ordered the feature name in legend as below. I would like to show the same order in the feature list of Info summary widget. I see the option in display settings group feature by renderer but that add the group panel expand/collapse to see the feature name. How to show same order in the info summary feature list configured in legend ? Thanks, Mayur

‎05-10-2020

Hi, I have configured the app using 2.8 developer edition version. I have Info Summary widget as below. Currently it is showing lightgray background color on mouseover, when I mouseout it will remove lightgray background color. When I select feature from list I would like to keep background color selected as it is so user can see the selected project in list. When I select another feature from list I would like to remove previously selected feature item list background color and add background color for new selected feature item list. Any idea has anyone done this before ? Thanks, Mayur Dodiya

‎04-30-2020

Hi, I have app configured Info summary widget on WAB version 2.8 developer edition. I have all the web map layers includes (point, polyline, polygon) configured in widget. I would like to zoom to the feature on map when I click on feature list of Info Summary. Currently, it is highlighting and show the popup, but not zoom In to the feature. Thanks, Mayur

‎01-28-2020

Hi, I have Near Me widget in app created using Web App Builder Developer edition 2.15 with Portal 10.7.1 I have enabled Current Location button in widget, It works great, However when I move on the field with mobile device, it doesn't update my current location and generate buffer of new location. Is it possible to add tracking/stop tracking location in Near Me widget so that when you move on the field it should generate buffer with new location and highlights the features/projects ? Where should I add code to start/stop tracking location ? Is anybody implemented on Near Me Widget? Thanks, Mayur

‎01-22-2020

Hi Robert, That's perfect! Now I can see the buttons in white color. Thank you so much. Thanks, Mayur

‎01-18-2020

Hi Robert, Sorry for confusion, I mean Record Number, Previous - Next , Maximize and close button in Popup title bar. I tried put css in /jimu.js/css but it doesn't change the color popup.css dojo-override.css You have idea where should I change to make those title bar button color in white ? Thanks, Mayur

‎01-16-2020

Hi, I set up Web App Builder Developer Edition 2.14 created app using TabTheme, applied custom color (#88165b) for my application and deployed on IIS server. I am trying to change text color of popup title to white but it doesn't change. I tried inspect using developer tools, made changes to default.css, common.css, dojo-override.css ... Where should I put below css to change the title color of Popup .esriPopup .titlePane { color:white; } Thanks, Mayur

‎01-05-2020

Hi, I have two layers, both layers contains field called "TreesNo". I would like to get SUM of fields from both layers and show in Middle Text of Indicator element. Is it possible to do in Operations Dashboard Indicator element ? Thanks, Mayur

‎12-24-2019

Hi, I have requirement to take multiple photos with lat/long of image, audio note of image and display the multiple image location on map along with photos attachment for the single point survey. For example (single survey with multiple photos at multiple location) : Let's say I am at the survey location A. I then need to take multiple photos with lat/long and audio note for each image.so, take first photo at the survey location A, now for second photo will go to another different location to take photos for the same single point survey location A. I have enabled beginrepeat endrepeat in survey form for multiple photos and audio note for the image to get image lat/long I put pulldata function in the survey form All the photos attachment, lat/long of image and audio note go to related table, I added survey layer to the web map and see the survey location. Now I would like to show Image location also on map along with photos attachment to the single survey? How to do that ? Survey Layer Related table Thanks, Mayur

‎12-13-2019

Hi Tanu, They are coming from different worskspace, Parcel layer from Geodatabase enterprise Oracle 11g and View from SQL Server (Non-Spatial) database. Thanks, Mayur

‎12-10-2019

Hi Thomas, Support Advanced Queries : false in rest directory. The Data Source is ArcGIS Enterprise Geodatabase Oracle 11g. Layer "Parcel" is join with "View " based on "PIN" field and published on ArcGIS Server. Thanks, Mayur

Online Status	Offline
Date Last Visited	‎08-21-2025 10:50 AM

My Ideas

Latest Contributions by MayurDodiya

Add collapsible Floating Panel at bottom for FeatureTable widget ?

Foldable Theme set Widgets Height ?

Re: Opened Widget(eSearch) is closed when I toggle map layer using Layer Toggle Button Widget.

Calcite App Starter Template Application ?

Info Summary widget show feature list in order set in legend ?

Info Summary widget feature item list selection background color ?

Info summary zoom to feature by clicking on list ?

Near Me Widget Tracking location ?

Re: Popup title text Color ?

Re: Popup title text Color ?

Popup title text Color ?

Indicator Element - How to get Sum of fields from two different layer ?

How to show multiple photos location on map with points related to a single survey ?

Re: Support Distinct : false ? how to enable in map service ?

Re: Support Distinct : false ? how to enable in map service ?

Add collapsible Floating Panel at bottom for Featu...

Indicator Element - How to get Sum of fields from ...

Re: Portal for ArcGIS - Enterprise Group ?

Portal for ArcGIS - Enterprise Group ?

Re: ArcGIS Desktop 10.4 - The search window has di...