@esri/solutions-components 0.10.11 → 0.10.13

package/dist/collection/components/feature-list/feature-list.js

@@ -37,6 +37,9 @@ export class FeatureList {
         this.showInitialLoading = true;
         this.showErrorWhenNoFeatures = true;
         this.showUserImageInList = false;
+        this.showFeatureSymbol = false;
+        this.applyLayerViewFilter = false;
+        this.reportingOptions = undefined;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -63,6 +66,11 @@ export class FeatureList {
      * Esri config
      */
     esriConfig;
+    /**
+     * "esri/symbols/support/symbolUtils": https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-support-symbolUtils.html
+     * Symbol utils
+     */
+    symbolUtils;
     /**
      * IPopupUtils: To fetch the list label using popup titles
      */
@@ -79,6 +87,18 @@ export class FeatureList {
      * HTMLCalcitePaginationElement: Calcite pagination element instance
      */
     _pagination;
+    /**
+     * string[]: Valid field types for like
+     */
+    _validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
+    /**
+     * string: Abbrivated like count of the feature
+     */
+    _abbreviatedLikeCount;
+    /**
+     * boolean: When true configured like field is available in selected layer
+     */
+    _likeFieldAvailable = false;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -152,9 +172,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: 'ace7bcabf497e9a61d261fd7ea29dc664ee0a526', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '675c7f5be7f8456954acdf353f357bac6145c390', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: 'b2e6537acdec801ef066a74c78a2c4a13dbbc44b', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '7697470234b396a904906b80e4fc8df3a0cc732b', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'd2b40c9a5e1bf009cb78d640351a16b24711ff59', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '15b0dae0fb914faf053a4b0cbea6e35ef7abc038', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '04f8eb02535f8cff8de0c111ac2d4bfa883ac128', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: 'b84cbd9d8c0f4d9d84fe7a49d149b67e88e46c53', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '91ee86a3223b55141206be0d3f20bca1b777e4db', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '3c3b4a35c45715a86bd17630e8f3f9b566592c27', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '63a35389ac64f66c706fa05e92fb8f1af8dd0b69', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'a237f97a0d286af17cce837bfbdd3c0d868ea023', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '9cb166b5095167a2004e93217240bea6789e9039', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'a413b26dd30fdc89be1d65ef06995604f1430a18', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -162,23 +182,25 @@ export class FeatureList {
     //
     //--------------------------------------------------------------------------
     /**
-   * Load esri javascript api modules
-   * @returns Promise resolving when function is done
-   * @protected
-   */
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
     async initModules() {
-        const [Color, esriConfig] = await loadModules([
+        const [Color, esriConfig, symbolUtils] = await loadModules([
             "esri/Color",
             "esri/config",
+            "esri/symbols/support/symbolUtils"
         ]);
         this.Color = Color;
         this.esriConfig = esriConfig;
+        this.symbolUtils = symbolUtils;
     }
     /**
      * Return the where condition string considering the defined where clause and layer's definition expression
      * @protected
      */
-    getWhereCondition() {
+    async getWhereCondition() {
         //By Default load all the features
         let whereClause = '1=1';
         //if where clause is defined use it
@@ -189,6 +211,13 @@ export class FeatureList {
         if (this._selectedLayer?.definitionExpression) {
             whereClause = whereClause + ' AND ' + this._selectedLayer.definitionExpression;
         }
+        // if layerview has any applied filter, use it
+        if (this.applyLayerViewFilter) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            if (selectedLayerView?.filter?.where) {
+                whereClause = whereClause + ' AND ' + selectedLayerView.filter.where;
+            }
+        }
         return whereClause;
     }
     /**
@@ -200,8 +229,9 @@ export class FeatureList {
             void this._pagination?.goTo("start");
             this._isLoading = this.showInitialLoading;
             this._featureItems = await this.queryPage(0);
+            const whereCondition = await this.getWhereCondition();
             const query = {
-                where: this.getWhereCondition()
+                where: whereCondition
             };
             this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
             this._isLoading = false;
@@ -287,12 +317,13 @@ export class FeatureList {
         const featureLayer = this._selectedLayer;
         const sortField = this.sortingInfo?.field ? this.sortingInfo.field : featureLayer.objectIdField;
         const sortOrder = this.sortingInfo?.order ? this.sortingInfo.order : 'desc';
+        const whereCondition = await this.getWhereCondition();
         const query = {
             start: page,
             num: this.pageSize,
             outFields: ["*"],
             returnGeometry: true,
-            where: this.getWhereCondition(),
+            where: whereCondition,
             outSpatialReference: this.mapView.spatialReference.toJSON()
         };
         //sort only when sort field and order is valid
@@ -310,10 +341,12 @@ export class FeatureList {
      */
     async createFeatureItem(featureSet) {
         const currentFeatures = featureSet?.features;
+        const showLikeCount = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like;
         const items = currentFeatures.map(async (feature) => {
             const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
             //fetch the feature creator user info to show the creator user image
             let userInfo;
+            let featureSymbol;
             if (this.showUserImageInList) {
                 const creatorField = this._selectedLayer.editFieldsInfo?.creatorField.toLowerCase();
                 // if feature's creator field is present then only we can fetch the information of user
@@ -321,10 +354,37 @@ export class FeatureList {
                     userInfo = await this.getUserInformation(feature, creatorField);
                 }
             }
-            return this.getFeatureItem(feature, popupTitle, userInfo);
+            if (this.showFeatureSymbol) {
+                featureSymbol = await this.getFeatureSymbol(feature);
+            }
+            if (showLikeCount) {
+                void this.getAbbreviatedLikeCount(feature);
+            }
+            return this.getFeatureItem(feature, popupTitle, featureSymbol, userInfo);
         });
         return Promise.all(items);
     }
+    /**
+     * Displays the abbrivated like count on the feature list
+     * @param feature feature of the layer
+     * @protected
+     */
+    getAbbreviatedLikeCount(feature) {
+        const selectedLayer = this._selectedLayer;
+        const likeField = this.reportingOptions[selectedLayer.id].likeField;
+        selectedLayer.fields.forEach((eachField) => {
+            if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
+                    this._likeFieldAvailable = true;
+                    let likes = feature.attributes[likeField] || 0;
+                    if (likes > 999) {
+                        likes = likes > 999999 ? this._translations.millionsAbbreviation.replace("{{abbreviated_value}}", Math.floor(likes / 1000000).toString()) : this._translations.thousandsAbbreviation.replace("{{abbreviated_value}}", Math.floor(likes / 1000).toString());
+                    }
+                    this._abbreviatedLikeCount = likes;
+                }
+            }
+        });
+    }
     /**
      * Get each feature item
      * @param selectedFeature Each individual feature instance to be listed
@@ -332,15 +392,19 @@ export class FeatureList {
      * @returns individual feature item to be rendered
      * @protected
      */
-    getFeatureItem(selectedFeature, popupTitle, userInfo) {
+    getFeatureItem(selectedFeature, popupTitle, featureSymbol, userInfo) {
         //get the object id value of the feature
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle ?? oId;
+        // get the formatted like count
+        const formattedLikeCount = Number(selectedFeature.attributes[this.reportingOptions?.[this._selectedLayer.id].likeField]).toLocaleString();
         const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
-        const popupTitlePaddingClass = this.showUserImageInList ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
+        const popupTitlePaddingClass = this.showUserImageInList || this.showFeatureSymbol ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
         return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
-            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, username: userInfo?.username }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
+            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, username: userInfo?.username }), this.showFeatureSymbol &&
+            h("div", { class: 'feature-symbol', ref: (el) => el && el.appendChild(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, h("span", null, this._abbreviatedLikeCount), h("calcite-icon", { icon: "thumbs-up", scale: 's' }), h("calcite-tooltip", { "reference-element": oId.concat("like") }, formattedLikeCount)), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      *
@@ -367,6 +431,35 @@ export class FeatureList {
         userInfo.userProfileUrl = userProfileUrl;
         return userInfo;
     }
+    /**
+     * Creates a feature symbology
+     * @param feature Each individual feature
+     * @returns Feature symbology
+     * @protected
+     */
+    async getFeatureSymbol(feature) {
+        const nodeHtml = document.createElement('div');
+        await this.symbolUtils.getDisplayedSymbol(feature).then(async (symbol) => {
+            symbol && await this.symbolUtils?.renderPreviewHTML(symbol, {
+                node: nodeHtml
+            });
+            if (nodeHtml.children?.length) {
+                const imgOrSvgElm = nodeHtml.children[0];
+                if (imgOrSvgElm) {
+                    const height = Number(imgOrSvgElm.getAttribute('height'));
+                    const width = Number(imgOrSvgElm.getAttribute('width'));
+                    if (width > 30) {
+                        imgOrSvgElm.setAttribute('width', '30');
+                    }
+                    else if (width < 19) {
+                        imgOrSvgElm.setAttribute('width', '20');
+                    }
+                    imgOrSvgElm.setAttribute('viewBox', `0 0 ${width} ${height}`);
+                }
+            }
+        });
+        return nodeHtml;
+    }
     /**
      * Fetches the component's translations
      * @returns Promise when complete
@@ -606,6 +699,63 @@ export class FeatureList {
                 "attribute": "show-user-image-in-list",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showFeatureSymbol": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true display's feature symbol on each feature item"
+                },
+                "attribute": "show-feature-symbol",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "applyLayerViewFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true will consider the FeatureFilter applied on the layerview"
+                },
+                "attribute": "apply-layer-view-filter",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "reportingOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IReportingOptions",
+                    "resolved": "IReportingOptions",
+                    "references": {
+                        "IReportingOptions": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::IReportingOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IReportingOptions: Key options for reporting"
+                }
             }
         };
     }

package/dist/collection/components/layer-list/layer-list.js

@@ -19,7 +19,7 @@
  * limitations under the License.
  */
 import { h, Fragment } from "@stencil/core";
-import { getAllLayers, getMapLayerHash } from "../../utils/mapViewUtils";
+import { getAllLayers, getFeatureLayerView, getMapLayerHash } from "../../utils/mapViewUtils";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { formatNumber } from "../../utils/languageUtil";
 export class LayerList {
@@ -28,6 +28,7 @@ export class LayerList {
         this.layers = undefined;
         this.showFeatureCount = true;
         this.showNextIcon = false;
+        this.applyLayerViewFilter = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -103,9 +104,9 @@ export class LayerList {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '709c1b8edd5710a2476ecef638199c2f929b4165', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: '19f68b9a5d0b6c85832544e4281e1c4a1707ba86' }, this._isLoading && h("calcite-loader", { key: 'c908f311165f8f520f267a0dcde0bd954863ba6b', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: '56dfb252f998333ed6a671cccddd5683f08ad63d', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'a27ad45ac2b1984152af5a80da36583f7c375be6', slot: "title" }, this._translations.error), h("div", { key: 'a9466cb560b6ee2c72ebd18130ce21371f9e7cdf', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: '40e54ba92d2f48a97dd0987808f4b7fdefd266bb', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -132,10 +133,20 @@ export class LayerList {
         this._layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        allMapLayers.forEach(async (eachLayer) => {
+        for (const eachLayer of allMapLayers) {
             if (eachLayer?.type === "feature") {
                 if (this.showFeatureCount) {
                     const q = eachLayer.createQuery();
+                    //if layer has definitionExpression append it to the where clause
+                    if (eachLayer?.definitionExpression) {
+                        q.where = q.where + ' AND ' + eachLayer.definitionExpression;
+                    }
+                    if (this.applyLayerViewFilter) {
+                        const featureLayerView = await getFeatureLayerView(this.mapView, eachLayer.id);
+                        if (featureLayerView?.filter?.where) {
+                            q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
+                        }
+                    }
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -148,7 +159,7 @@ export class LayerList {
                     });
                 }
             }
-        });
+        }
         await Promise.all(def).then(() => {
             const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
             this._mapLayerIds = editableLayerIds.reverse();
@@ -302,6 +313,24 @@ export class LayerList {
                 "attribute": "show-next-icon",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "applyLayerViewFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: If true will consider the FeatureFilter applied on the layerview"
+                },
+                "attribute": "apply-layer-view-filter",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -20,7 +20,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getLayerOrTable, getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
+import { getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 export class MapLayerPicker {
     constructor() {
@@ -135,8 +135,10 @@ export class MapLayerPicker {
      */
     async componentWillRender() {
         if (this.ids.length > 0 || this.selectedIds.length === 1) {
-            const layer = await getLayerOrTable(this.mapView, this.selectedIds[0]);
-            this.selectedName = layer?.title;
+            const id = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];
+            if (id !== this.selectedIds[0]) {
+                this._setSelectedLayer(id);
+            }
         }
     }
     /**
@@ -146,7 +148,7 @@ export class MapLayerPicker {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = { ...style, "display": this.display };
-        return (h(Host, { key: 'ac897da6f14eb06e332fd99c29eff339488e37a4' }, h("div", { key: '3d6f53faf1f9a1ac3a7e1469e88f6a74b3b4af20', class: "map-layer-picker-container", style: style }, h("div", { key: '6919f38519caefa15aa0f826b51e50aef30e6c21', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: 'd575e7f5ef535d37466d8dc7b0c3d3de35e9b3fd' }, h("div", { key: '18010837a120b62adce243097d428ca424180c2c', class: "map-layer-picker-container", style: style }, h("div", { key: 'e9b625ab31cd069c2442f24ad81d747902a72ded', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -731,7 +731,8 @@ export class MapSelectTools {
             this._graphics = [];
             await this._drawTools.clear();
         }
-        this.selectionSetChange.emit(this._selectedIds.length);
+        this._numSelected = this._selectedIds.length;
+        this.selectionSetChange.emit(this._numSelected);
     }
     /**
      * Clear all the search widget and any stored search result

package/dist/collection/demos/crowdsource-reporter.html

@@ -315,6 +315,8 @@
         //listen to togglePanel event
         demo.addEventListener('togglePanel', togglePanel);
         demo.showUserImageInCommentsList = true;
+        demo.showFeatureSymbol = true;
+        demo.showMyReportsOnly = false;
       });
 
     function togglePanel(evt) {

package/dist/collection/utils/popupUtils.js

@@ -71,7 +71,7 @@ export class PopupUtils {
             }
         }
         //Format field values
-        if (layer.popupTemplate.fieldInfos) {
+        if (layer.popupTemplate?.fieldInfos) {
             layer.fields.forEach((field) => {
                 const attributeValue = graphic.attributes[field.name];
                 //get the field info from popupTemplate

package/dist/collection/utils/popupUtils.ts

@@ -73,7 +73,7 @@ export class PopupUtils {
 			}
 		}
 		//Format field values
-		if (layer.popupTemplate.fieldInfos) {
+		if (layer.popupTemplate?.fieldInfos) {
 			layer.fields.forEach((field) => {
 				const attributeValue = graphic.attributes[field.name];
 				//get the field info from popupTemplate

package/dist/components/create-feature2.js

@@ -26,6 +26,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.customizeSubmit = false;
         this.searchConfiguration = undefined;
         this.isMobile = undefined;
+        this.floorLevel = undefined;
+        this.formElements = undefined;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
     }
@@ -40,6 +42,20 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * The Editor constructor
      */
     Editor;
+    /**
+     * esri/form/ExpressionInfo: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-ExpressionInfo.html
+     * The ExpressionInfo constructor
+     */
+    ExpressionInfo;
+    /**
+     * esri/form/elements/FieldElement: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-FieldElement.html
+     * The FieldElement constructor
+     */
+    FieldElement;
+    /**
+     * esri/form/FormTemplate: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html
+     */
+    FormTemplate;
     /**
      * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
      * The Editor instance
@@ -145,6 +161,15 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             this._editor.viewModel.featureFormViewModel.submit();
         }
     }
+    /**
+     * refresh the feature form
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh(floorLevel) {
+        if (this._editor) {
+            void this._setFloorLevel(floorLevel);
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -200,7 +225,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        return (h(Fragment, { key: '8adaa70257dfef9632f82be75dbdff572e2c39b3' }, h("calcite-loader", { key: 'e1a1aba8613d9cea1033513748dd21b7f27f9806', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'e1089ffe60d079f345d358aac7ae1a6bd59a55df', class: featureFormClass, id: "feature-form" }), h("div", { key: '52274b6cd4c9f6886293f858caac9e572697da25', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '64108cfa3bb57f9739bfb4951352c5523c194761', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '47d29e529402482acf3811c37c0cd5a426ed40ed' }, h("calcite-loader", { key: '283b2c6a0f1722c9a8d955e11390e65e6041b247', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'bb596467d5da22882932259db6a9e8029717850b', class: featureFormClass, id: "feature-form" }), h("div", { key: 'c3887f5c5aa92efdcf588da4918933dadb87937f', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '566069a6202053468a3cf7a221feb071491eabb4', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -223,15 +248,21 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils, Search, MapView] = await loadModules([
+        const [Editor, reactiveUtils, Search, ExpressionInfo, FieldElement, FormTemplate, MapView] = await loadModules([
             "esri/widgets/Editor",
             "esri/core/reactiveUtils",
             "esri/widgets/Search",
+            "esri/form/ExpressionInfo",
+            "esri/form/elements/FieldElement",
+            "esri/form/FormTemplate",
             "esri/views/MapView"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
         this.Search = Search;
+        this.ExpressionInfo = ExpressionInfo;
+        this.FieldElement = FieldElement;
+        this.FormTemplate = FormTemplate;
         this.MapView = MapView;
     }
     /**
@@ -322,6 +353,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
             if (state === 'ready') {
                 this._mapViewContainer?.classList?.replace("show-map", "hide-map");
+                void this._setFloorLevel(this.floorLevel);
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
@@ -466,6 +498,59 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         }
         return searchConfiguration;
     }
+    /**
+     * Add the floor level value to form
+     * @param level selected floor level
+     *
+     * @protected
+     */
+    async _setFloorLevel(level) {
+        if (!level) {
+            return;
+        }
+        const layer = await getLayerOrTable(this._updatedMapView, this.selectedLayerId);
+        if (layer?.floorInfo?.floorField) {
+            const layerField = layer.fields.find((field) => field.name === layer.floorInfo.floorField);
+            // if layer field is present and form template is not present only then we can set value of floorfield into feature form otherwise create a mannual formtemplate to add the floorfeild element
+            if (layerField && !layer?.formTemplate) {
+                this._editor.viewModel.featureFormViewModel.setValue(layerField.name, level);
+                layerField.editable = false;
+            }
+            else if (layer.formTemplate && this.formElements) {
+                const floorInfoExpression = new this.ExpressionInfo({
+                    expression: `"${level}"`,
+                    name: "floor-info-test",
+                    title: "Floor Info",
+                    returnType: "string"
+                });
+                const levelIdFieldElement = new this.FieldElement({
+                    label: layer.floorInfo.floorField,
+                    editableExpression: 'false',
+                    fieldName: layer.floorInfo.floorField,
+                    input: {
+                        type: "text-box",
+                        maxLength: 50,
+                        minLength: 0
+                    },
+                    valueExpression: floorInfoExpression.name
+                });
+                this._updatedMapView.map.editableLayers.forEach((layer) => {
+                    const orgElements = this.formElements.orgElements;
+                    const orgExpressionInfos = this.formElements.orgExpressionInfos;
+                    const elements = [...orgElements];
+                    elements.push(levelIdFieldElement);
+                    // Creating formtemplate
+                    const floorInfoTemplate = new this.FormTemplate({
+                        title: layer.formTemplate.title,
+                        description: layer.formTemplate.description,
+                        elements,
+                        expressionInfos: [floorInfoExpression].concat(orgExpressionInfos)
+                    });
+                    layer.formTemplate = floorInfoTemplate;
+                });
+            }
+        }
+    }
     /**
      * Hides the elements of editor widget
      * @protected
@@ -537,10 +622,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "customizeSubmit": [4, "customize-submit"],
         "searchConfiguration": [16],
         "isMobile": [4, "is-mobile"],
+        "floorLevel": [1, "floor-level"],
+        "formElements": [8, "form-elements"],
         "_editorLoading": [32],
         "_showSearchWidget": [32],
         "close": [64],
-        "submit": [64]
+        "submit": [64],
+        "refresh": [64]
     }, undefined, {
         "mapView": ["mapViewWatchHandler"],
         "isMobile": ["isMobileHandler"],