Popup utils and display issue

src/components/crowdsource-manager/crowdsource-manager.css

@@ -110,7 +110,6 @@
   height: calc(100% - 50px);
 }
 
-
 .display-none {
   display: none;
 }
@@ -175,3 +174,7 @@
   visibility: hidden;
   height: 0px;
 }
+
+.position-fixed {
+  position: fixed;
+}

src/components/crowdsource-manager/crowdsource-manager.tsx

@@ -573,7 +573,7 @@ export class CrowdsourceManager {
     let sizeClass = "";
     switch (layoutMode) {
       case ELayoutMode.HORIZONTAL:
-        sizeClass = `${this._isMobile && this._hideTable ? "height-full" : panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+        sizeClass = `${this._isMobile && this.hideMap ? "height-0 " : panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
         break;
       case ELayoutMode.GRID:
         sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
@@ -741,8 +741,9 @@ export class CrowdsourceManager {
     const popupNodeClass = !this._expandPopup ? "height-full" : this.mapInfos?.length === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
     const headerClass = this._isMobile ? "display-none height-0" : "";
     const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
+    const containerClass = this._isMobile && this._hideTable && this.hideMap ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
     return (
-      <div class={`${headerTheme} ${popupNodeClass}`}>
+      <div class={`${headerTheme} ${popupNodeClass} ${containerClass}`}>
         <calcite-panel>
           {
             !this._isMobile ? (

src/components/edit-card/edit-card.tsx

@@ -334,8 +334,7 @@ export class EditCard {
         view: this.mapView,
         layerInfos,
         visibleElements: {
-          snappingControls: false,
-          sketchTooltipControls: false
+          snappingControls: false
         },
         container
       });

src/components/info-card/info-card.tsx

@@ -18,6 +18,8 @@ import { Component, Element, Event, EventEmitter, Host, h, Listen, Method, Prop,
 import InfoCard_T9n from "../../assets/t9n/info-card/resources.json";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
+import { PopupUtils } from "../../utils/popupUtils";
+import { IPopupUtils } from "../../utils/interfaces";
 
 @Component({
   tag: "info-card",
@@ -126,6 +128,11 @@ export class InfoCard {
    */
   protected _features: __esri.Features;
 
+  /**
+   * IPopupUtils: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions
+   */
+  protected _popupUtils: IPopupUtils;
+
   /**
    * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
    */
@@ -148,6 +155,7 @@ export class InfoCard {
     if (this.graphics.length > 0) {
       const featureLayer = (this.graphics[0]?.layer as __esri.FeatureLayer);
       this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
+      this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
       this._features.open({
         features: this.graphics
       });
@@ -241,6 +249,7 @@ export class InfoCard {
   async componentWillLoad(): Promise<void> {
     await this._initModules();
     await this._getTranslations();
+    this._popupUtils = new PopupUtils();
   }
 
   /**
@@ -435,12 +444,6 @@ export class InfoCard {
             }
           });
 
-        this.reactiveUtils.watch(
-          () => this._features.viewModel.title,
-          (title) => {
-            this._mobileTitle = title;
-          });
-
         if (this.zoomAndScrollToSelected) {
           this.reactiveUtils.watch(
             () => this._features.selectedFeatureIndex,

src/components/layer-table/layer-table.css

@@ -129,3 +129,7 @@ html[dir="rtl"] .share-action {
 .border-top {
   border-top: 1px solid var(--calcite-color-border-2);
 }
+
+.modal {
+  --calcite-modal-content-padding: 0;
+}

src/components/layer-table/layer-table.tsx

@@ -1666,6 +1666,7 @@ export class LayerTable {
     return (
       <calcite-modal
         aria-labelledby="modal-title"
+        class="modal"
         kind="brand"
         onCalciteModalClose={async () => this._closeFilter()}
         open={this._filterOpen}
@@ -1897,12 +1898,19 @@ export class LayerTable {
       ids,
       layer: this._layer
     }
+    const fields = this._table.columns.toArray().reduce((prev, cur) => {
+      if (!(cur as any).hidden) {
+        prev.push((cur as any).name.toLocaleLowerCase());
+      }
+      return prev;
+    }, []);
     void downloadUtils.downloadCSV(
       null,//???
       exportInfos,
       false, // formatUsingLayerPopup
       false, // removeDuplicates
       true, // addColumnTitle
+      fields
     );
   }
 

src/utils/downloadUtils.ts

@@ -125,14 +125,15 @@ export async function consolidateLabels(
   exportInfos: IExportInfos,
   formatUsingLayerPopup = true,
   includeHeaderNames = false,
-  isCSVExport = false
+  isCSVExport = false,
+  fields = []
 ): Promise<string[][]> {
   const labelRequests = [];
 
   Object.keys(exportInfos).forEach(k => {
     const labelInfo: IExportInfo = exportInfos[k];
     labelRequests.push(
-      _prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames)
+      _prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames, fields)
     );
     if (isCSVExport) {
       // add the layer id as a temp value separator that we can use to split values for CSV export
@@ -160,9 +161,10 @@ export async function downloadCSV(
   exportInfos: IExportInfos,
   formatUsingLayerPopup: boolean,
   removeDuplicates = false,
-  addColumnTitle = false
+  addColumnTitle = false,
+  fields = []
 ): Promise<void> {
-  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true, fields);
   labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
 
   const layerIds = Object.keys(exportInfos);
@@ -838,7 +840,8 @@ export async function _prepareLabels(
   layer: __esri.FeatureLayer,
   ids: number[],
   formatUsingLayerPopup = true,
-  includeHeaderNames = false
+  includeHeaderNames = false,
+  fields = []
 ): Promise<string[][]> {
   // Get the label formatting, if any
   const labelFormatProps: ILabelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
@@ -909,7 +912,8 @@ export async function _prepareLabels(
 
   } else {
     // Get the features to export
-    featureSet = await queryFeaturesByID(ids, featureLayer, [], false);
+    const outFields = fields.length > 0 ? fields : undefined;
+    featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
   }
 
   // Get field data types. Do we have any domain-based fields?
@@ -920,18 +924,22 @@ export async function _prepareLabels(
   if (featureLayer.fields) {
     featureLayer.fields.forEach(
       field => {
-        const lowercaseFieldname = field.name.toLowerCase();
-        attributeOrigNames[lowercaseFieldname] = field.name;
-        attributeDomains[lowercaseFieldname] = field.domain;
-        attributeTypes[lowercaseFieldname] = field.type;
+        if (fields.indexOf(field.name.toLowerCase()) > -1) {
+          const lowercaseFieldname = field.name.toLowerCase();
+          attributeOrigNames[lowercaseFieldname] = field.name;
+          attributeDomains[lowercaseFieldname] = field.domain;
+          attributeTypes[lowercaseFieldname] = field.type;
+        }
       }
     );
   } else {
     // Feature layer is missing fields, so get info from first feature
     Object.keys(featureSet[0]).forEach(
       fieldName => {
-        const lowercaseFieldname = fieldName.toLowerCase();
-        attributeOrigNames[lowercaseFieldname] = fieldName;
+        if (fields.indexOf(fieldName.toLowerCase()) > -1) {
+          const lowercaseFieldname = fieldName.toLowerCase();
+          attributeOrigNames[lowercaseFieldname] = fieldName;
+        }
       }
     )
   }

src/utils/interfaces.ts

@@ -539,3 +539,8 @@ export interface ILayerAndTableIds {
   layerIds: string[];
   tableIds: string[];
 }
+
+export interface IPopupUtils {
+  arcade: typeof import("esri/arcade");
+  getPopupTitle(graphic: __esri.Graphic): Promise<string>;
+}

src/utils/popupUtils.ts

@@ -0,0 +1,104 @@
+/** @license
+ * Copyright 2022 Esri
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { loadModules } from "./loadModules";
+
+export class PopupUtils {
+
+	/**
+	 * esri/arcade: https://developers.arcgis.com/javascript/latest/api-reference/esri-arcade.html
+	 */
+	arcade: typeof import("esri/arcade");
+
+  /**
+   * Get the popup title that honors arcade expressions
+   *
+   * @returns Promise resolving with the popup title
+   *
+   * @protected
+   */
+	public async getPopupTitle(
+		graphic: __esri.Graphic
+	): Promise<string> {
+		if (!this.arcade) {
+			await this._initModules()
+		}
+		let attributes = {};
+		for (const [key, value] of Object.entries(graphic.attributes)) {
+			attributes = {
+				...attributes,
+				[`{${key.toUpperCase()}}`]: value
+			};
+		}
+		const layer = graphic.layer as __esri.FeatureLayer;
+		const popupTitle = this._removeTags(layer?.popupTemplate?.title as string);
+		if (popupTitle.includes("{expression/expr") && layer?.popupTemplate?.expressionInfos != null) {
+			for (let i = 0; i < layer.popupTemplate?.expressionInfos.length; i++) {
+				const info = layer.popupTemplate.expressionInfos[i];
+				const profile = {
+					variables: [
+						{
+							name: "$feature",
+							type: "feature"
+						}
+					]
+				} as __esri.Profile;
+				try {
+					const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
+					const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+					if (arcadeTitle != null || arcadeTitle !== "") {
+						attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
+					}
+				} catch {
+					continue;
+				}
+			}
+		}
+
+		return popupTitle?.replace(/{.*?}/g, (placeholder: string) => {
+			return attributes[placeholder.toUpperCase()] != null ? (attributes[placeholder.toUpperCase()] as string) : "";
+		});
+	}
+
+  /**
+   * Remove any tags from the title
+   *
+   * @returns title string without tags
+   *
+   * @protected
+   */
+	protected _removeTags(str: string): string {
+		if (str == null || str === "") {
+			return "";
+		}
+		return str.toString().replace(/(<([^>]+)>)/gi, "");
+	}
+
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+	protected async _initModules(): Promise<void> {
+		const [arcade] = await loadModules([
+			"esri/arcade"
+		]);
+		this.arcade = arcade;
+	}
+
+}

src/utils/queryUtils.ts

@@ -126,7 +126,8 @@ export async function queryFeaturesByID(
   layer: __esri.FeatureLayer,
   graphics: __esri.Graphic[],
   returnGeometry: boolean,
-  outSpatialReference?: __esri.SpatialReference
+  outSpatialReference?: __esri.SpatialReference,
+  fields?: string[]
 ): Promise<__esri.Graphic[]> {
   const num = layer.capabilities?.query.maxRecordCount;
   const start = 0;
@@ -141,6 +142,9 @@ export async function queryFeaturesByID(
   if (outSpatialReference) {
     q.outSpatialReference = outSpatialReference;
   }
+  if (fields) {
+    q.outFields = fields;
+  }
 
   const result = await layer.queryFeatures(q);