Add more features to the feature layer

Question

Here is a piece of code to add a polygon, its 'name' (PERMIT_AREA) and description to the feature layer. My problem is the drawn polygon is not applying to the layer. How we can add more details such as name and description to the layer? Can you please correct my code,

view.when(() => {

    const polygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: [207, 34, 171, 0.5],
        outline: {
            // autocasts as new SimpleLineSymbol()
            color: [247, 34, 101, 0.9],
        }
    };

    const sketchViewModel = new SketchViewModel({
        view: view,
        layer: graphicsLayer,
        polygonSymbol: polygonSymbol,
    });

    sketchViewModel.create("polygon", { mode: "hybrid" });

    // Once user is done drawing a rectangle on the map
    // use the rectangle to select features on the map and table
   

    sketchViewModel.on("create", async (event) => {
        if (event.state === "complete") {
            // this polygon will be used to query features that intersect it
            const geometries = graphicsLayer.graphics.map(function (graphic) {
                return graphic.geometry
            });
            const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
            const query = {
                geometry: queryGeometry,
                outFields: ["*"],
                attributes: {
                    PERMIT_AREA:'sample PERMIT_AREA'
                }
            };
            console.log(query);
            lyrpermitAreaUrl.queryFeatures(query).then(function (results) {
                var lyr = results.features;
                selectFeatures(lyr);
            });
        }
    });
});

// This function is called when user completes drawing a rectangle
// on the map. Use the rectangle to select features in the layer and table
function selectFeatures(geometryabc) {
    console.log(geometryabc);
    // create a query and set its geometry parameter to the
    // rectangle that was drawn on the view
        lyrpermitAreaUrl.applyEdits({ addFeatures: [geometryabc] }).then((editsResult) => {
            console.log(editsResult);
            console.log(editsResult.addFeatureResults[0].objectId);
        });
}

I have edited the code like provided below. Now I can apply user entered polygon to feature layer,

    require(["esri/config",
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer",
    "esri/layers/TileLayer",
    "esri/layers/VectorTileLayer",
    "esri/layers/GraphicsLayer",
    "esri/widgets/Search",
    "esri/widgets/Sketch/SketchViewModel",
    "esri/geometry/geometryEngineAsync",
    "esri/Graphic",
],
    function (esriConfig, Map, MapView, FeatureLayer, TileLayer, VectorTileLayer, GraphicsLayer, Search, SketchViewModel, geometryEngineAsync, Graphic) {
        esriConfig.apiKey = "AAPK3f43082c24ae493196786c8b424e9f43HJcMvP1NYaqIN4p63qJnCswIPsyHq8TQHlNtMRLWokqJIWYIJjga9wIEzpy49c9v";

        const graphicsLayer = new GraphicsLayer();

        const streetmapTMLayer = new TileLayer({
            url: streetmapURL
        });

        const streetmapLTMLayer = new VectorTileLayer({
            url: streetmapLebelsURL
        });

        const lyrwholeMeters = new FeatureLayer({
            url: MetersWholeURL,
            outFields: ["*"],
        });

        const lyrMeters = new FeatureLayer({
            url: MetersURL,
            outFields: ["*"],
        });

        const lyrpermitAreaUrl = new FeatureLayer({
            url: PermitAreaURL,
            outFields: ["*"],
        });

        console.log(lyrMeters);

        const map = new Map({
            basemap: "arcgis-topographic", // Basemap layer service
            layers: [streetmapTMLayer, streetmapLTMLayer, lyrMeters, lyrwholeMeters, graphicsLayer]

        });

        const view = new MapView({
            map: map,
            center: [-95.9406, 41.26],
            // center: [-118.80500, 34.02700], //Longitude, latitude
            zoom: 16,
            maxZoom: 21,
            minZoom: 13,
            container: "viewDiv", // Div element
        });

        view.when(() => {

            const polygonSymbol = {
                type: "simple-fill", // autocasts as new SimpleFillSymbol()
                color: [207, 34, 171, 0.5],
                outline: {
                    // autocasts as new SimpleLineSymbol()
                    color: [247, 34, 101, 0.9],
                }
            };
            const sketchViewModel = new SketchViewModel({
                view: view,
                layer: graphicsLayer,
                polygonSymbol: polygonSymbol,
            });

            sketchViewModel.create("polygon", { mode: "hybrid" });
            // Once user is done drawing a rectangle on the map
            // use the rectangle to select features on the map and table
            sketchViewModel.on("create", async (event) => {
                if (event.state === "complete") {
                    // this polygon will be used to query features that intersect it
                    const geometries = graphicsLayer.graphics.map(function (graphic) {
                        return graphic.geometry
                    });
                    const queryGeometry = await geometryEngineAsync.union(geometries.toArray());
                    var rawrings = queryGeometry.rings;
                    var rings = [];
                    console.log('rings here');
                    for (var i = 0; i < rawrings.length; i++) {
                        rings.push(rawrings[i]);
                        // graphics.push(graphic);
                        console.log(rawrings[i]);
                    }

                    console.log(rings[0]);
                    // Create a polygon geometry
                    const polygon = {
                        type: "polygon",
                        spatialReference: {
                            wkid: 102704, //102704,
                        },
                        rings: [rings[0]]
                    };

                    const simpleFillSymbol = {
                        type: "simple-fill",
                        color: [227, 139, 79, 0.8],  // Orange, opacity 80%
                        outline: {
                            color: [255, 255, 255],
                            width: 1
                        }
                    };

                    const polygonGraphic = new Graphic({
                        geometry: polygon,
                        symbol: simpleFillSymbol,
                    });

                    graphicsLayer.add(polygonGraphic);

                    // const addEdits = {
                    //     addFeatures: polygonGraphic
                    // };
                    console.log('here');
                    // console.log(addEdits);
                    // apply the edits to the layer
                    selectFeatures(polygonGraphic);

                }
            });
        });

        // This function is called when user completes drawing a rectangle
        // on the map. Use the rectangle to select features in the layer and table
        function selectFeatures(geometryabc) {
            console.log(geometryabc);
            // create a query and set its geometry parameter to the
            // rectangle that was drawn on the view
            lyrpermitAreaUrl.applyEdits({ addFeatures: [geometryabc] }).then((editsResult) => {
                console.log(editsResult);
                console.log(editsResult.addFeatureResults[0].objectId);
            });
        }

        // search widget
        const searchWidget = new Search({
            view: view,
        });

        view.ui.add(searchWidget, {
            position: "top-left",
            index: 2
        });
    });

I have added the attributes like below,

var attr = {"NETSUITE_USERID":"test user","PERMIT_AREA":"test permit area","COMMENTS":"test comments"};
                    const polygonGraphic = new Graphic({
                        geometry: polygon,
                        symbol: simpleFillSymbol,
                        attributes: attr

                    });

Answer 1

If I understand then, you need a new Graphic with the sketched geometry and the attributes you query. Something like this might work,

sketchViewModel.on("create", async (event) => {
    if (event.state === "complete") {
        // remove the graphic from the layer. Sketch adds
        // the completed graphic to the layer by default.
        graphicsLayer.remove(event.graphic);
        const newGeometry = event.graphic.geometry;
        const query = {
            geometry: newGeometry,
            outFields: ["NAME", "DESCRIPTION"],
            returnGeometry: false
        };
        lyrpermitAreaUrl.queryFeatures(query).then(function (results) {
            if (!results.features) {
                return;
            }
            const data = results.features[0].attributes;
            const newGraphic = new Graphic({
                geometry: newGeometry,
                attributes: {
                    "NAME": data["NAME"],
                    "DESCRIPTION": data["DESCRIPTION"]
                }
            });
            lyrpermitAreaUrl.applyEdits({ addFeatures: [newGraphic] }).then((editsResult) => {
                console.log(editsResult);
            });
        });
    }
});

NAME and DESCRIPTION are sample attributes name, you should use the ones you need.