nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Adding a row to a table using JS 4.x

Mr_Kirkwood

I was using JS 3.x to add and update data. I am working on convert my applications to JS 4.x. I had a script that used "dojo/Deferred". Here is the code:

function _applyAdds (featureLayer, propertiesArr)
{
    var defer;
    require (['esri/graphic', "dojo/Deferred"], function (Graphic, Deferred)
    {
        defer = new Deferred ();
        var graphicsArr = [];
        propertiesArr.forEach (function (properties)
        {
            graphicsArr.push (new Graphic (null, null, properties));
        });
        featureLayer.applyEdits (
                graphicsArr, null, null,
                function (a, u, d)
                {
                    console.log (a, u, d);
                    defer.resolve ();
                }, // callback
                function (error)
                {
                    console.log ('ERROR!', error);
                }// errorback
        );
    });
    return defer.promise;
}

//begin adding new employee assignment
function assignEmployee ()
{
    var addEmployee = {};
    addEmployee.SPACEKEY = document.getElementById ('EmployeeSpaceID').value;
    addEmployee.EMPLOYEEKEY = document.getElementById ('EmployeeID').value;
    console.log (addEmployee);
    _applyAdds (roomAssinmentTable, [addEmployee]).then (function ()
    {
        console.log ("Add Employee");
    });
}

How do i make this work in JS 4.x?

Thank you in advance for any help on this.

Finde mehr Beiträge mit dem Tag

Accepted answers

JoelBennett

Hmm...well, not sure what's going on, but here's a few things to look into:

1) Determine the format of date values passed between your server and the client, so you can determine the value to post back during edits. To do so, use your browser's developer tools to look at the contents of a query to the same layer, and look at the date value for a returned record. Make sure your edit request uses the same type of value (here we see this example using the numeric format I mentioned earlier):

2) Make sure you're using the correct field name. Note that field names are case sensitive.

3) Make sure it's not a read-only field. For example, if you look at the information for this service used by one of the editing samples, you'll see many of the entries in the "Fields" section have an "editable" value of false.

4) If you have access to ArcGIS Server Manager, log in and check the logs for the service and time frame of your edits for any error messages.

JoelBennett

It looks like "roomEditData" is an array of objectIDs. In that case, you'd want something like this instead of what you presently have on lines 4-10:

const updates = [];
roomEditData.forEach(function(oid) {
	updates.push ({
		attributes: {
			OBJECTID: oid,
			PHYSICALCAPACITY: document.getElementById ('editroomDetails-PHYSICALCAPACITY').value
		}
	});
});

That assumes that the OID field name for the layer is actually "OBJECTID". If it isn't, you'll need to change the field name on line 5.

JoelBennett

To edit features, you would use:

featureLayer.applyEdits({updateFeatures:graphicsArr})

To delete features, you would use:

featureLayer.applyEdits({deleteFeatures:graphicsArr})

JoelBennett

I thought you were asking specifically about the replacement for dojo's Deferred module. To migrate the whole function, you'll also need to update the use of FeatureLayer and Graphic for compatibility with 4.x:

function _applyAdds (featureLayer, propertiesArr)
{
    return new Promise(function(resolve, reject) {
        require (['esri/Graphic'], function (Graphic)
        {
            var graphicsArr = [];
            propertiesArr.forEach (function (properties)
            {
                graphicsArr.push (new Graphic ({attributes:properties}));
            });
            featureLayer.applyEdits({addFeatures:graphicsArr}).then(
                    function (results)
                    {
                        console.log (results);
                        resolve();
                    }, // callback
                    function (error)
                    {
                        console.log ('ERROR!', error);
                        reject(error);
                    }// errorback
            );
        });
    });
}

All comments

JoelBennett

Hmm...well, not sure what's going on, but here's a few things to look into:

2) Make sure you're using the correct field name. Note that field names are case sensitive.

4) If you have access to ArcGIS Server Manager, log in and check the logs for the service and time frame of your edits for any error messages.

Mr_Kirkwood

I also tested it in a row that had a null value for a date and that does not work either.

Mr_Kirkwood

Joel,

I am using an SQL database. The columns looks like this in SQL, LastConfirmedUpdate - datetime2(7)

This might be why. I may try and add a column that is jst date. I tried the aboveand it did not work by the way.

JoelBennett

This could depend on the underlying data type defined for that column in the database table. If it's a string/text field, then I don't see any problem with what you have. Otherwise, I'm most familiar with Oracle databases, which also support DATE and TIMESTAMP data types. In these cases, the correct thing to do is pass the numeric value of the date, for which you would instead have something like this:

editBEAPProps.LastConfirmedUpdate = document.getElementById('BEAP_Details-LastConfirmedUpdate').valueAsNumber;

Mr_Kirkwood

I am trying to use the above method to pass dates to the database from a date field. when i apply the edits it looks like it worked but nothing is getting changed in the database. here is the code:

function editBEAP ()
{
    var editBEAPProps = {};
    beapObjectID = Number (beapargs.BEAP_OBJECTID);
    editBEAPProps.OBJECTID = beapObjectID;
function _formatDate (dateString)
    {
        var date = new Date (dateString)
        return (date.getUTCMonth () + 1) + "/" + date.getUTCDate () + "/" + date.getUTCFullYear ();
    }
    
editBEAPProps.LastConfirmedUpdate = _formatDate(document.getElementById ('BEAP_Details-LastConfirmedUpdate').value);
    console.log (beapObjectID);
    console.log (editBEAPProps);
    _applyEdits (beapTableEdit, [editBEAPProps]).then (function ()
    {
        beapTableQuery ();
        $ ('#edit-BEAP_Details').jqxWindow ('close');
        $ ("#beapTableGrid").jqxGrid ('clearSelection');
        console.log ("Edit BEAP");
    });
}

The HTML looks like this:

<input id="BEAP_Details-LastConfirmedUpdate" type="date" />

The dates in the database field look like this format: 9/11/2025. When i format the date to pass to the database it looks like this: {LastConfirmedUpdate: '5/21/2024'} in the console window.

Is there some sort of formatting i need to do before passing the date to the database?

JoelBennett

It looks like "roomEditData" is an array of objectIDs. In that case, you'd want something like this instead of what you presently have on lines 4-10:

const updates = [];
roomEditData.forEach(function(oid) {
	updates.push ({
		attributes: {
			OBJECTID: oid,
			PHYSICALCAPACITY: document.getElementById ('editroomDetails-PHYSICALCAPACITY').value
		}
	});
});

That assumes that the OID field name for the layer is actually "OBJECTID". If it isn't, you'll need to change the field name on line 5.

Mr_Kirkwood

Joel,

Howdy. I seem to have gotten a little farther with this. I am not getting the netowrk error. I can see the Payload tab. However, the data doesnt update in the database. I have tried your method of code and it looks like it works. see screenshot network6.png.

I also tried this code:

function batchEditRoomData ()
{
    console.log (roomEditData);
    const updates = [];
    updates.push ({
        attributes: {
            objectIds:  Number (roomEditData),
            PHYSICALCAPACITY: document.getElementById ('editroomDetails-PHYSICALCAPACITY').value
        }
    });
    console.log (updates);
    roomsUseLayer.applyEdits ({
        updateFeatures: updates
    }).then (function (editsResult)
    {
        // Check if edits were applied successfully
        if (editsResult.updateFeatureResults.length > 0) {
            console.log ("Features updated successfully.");
             $ ('#editMuiltipleRoomsWindow').jqxWindow ('close');
        } else {
            console.error ("Error updating features:", editsResult);
        }
    });

}

It looks like it works as well but also data is not updated even though it looks like it did. See attachment network5.png

Do you see anything i may be missing here?

network5.PNG

network6.PNG

JoelBennett

Maybe if you can post a screenshot of the payload tab for a request that works (single) and a request that fails (multiple) it might help reveal if the problem is on the application side.

Mr_Kirkwood

Thanks i see the Payload for the request above the applyEdits (query). When i click on the request for applyEdits that goes away.

very strange it works for a single row using the original fucntion. I cannot get the new fucntion from above to just do a single row or single OBJECTID.

JoelBennett

If you double-click on a request in the Network log, you'll see an additional set of tabs with information about the request...the Payload tab is in there.

Mr_Kirkwood

Joel,

I am not seeing the "payload" tab.

Mr_Kirkwood

How would i be able to pass multiple OBJECTIDS to edit in batch with the code above?

here is what i am using to grab information from a popup window:

function editRoomData ()
{
    roomObjectID = attributes.OBJECTID
    console.log (roomObjectID);
    var editRoom = {};
    editRoom.OBJECTID = Number (roomObjectID)
    editRoom.ADA = document.getElementById ('roomDetails-ADA').value;
    editRoom.CAPACITY = document.getElementById ('roomDetails-CAPACITY').value;
    editRoom.SPACETYPECAT1KEY = document.getElementById ('roomDetails-SPACETYPECAT1KEY').value;
    editRoom.SPACETYPECAT2KEY = document.getElementById ('roomDetails-SPACETYPECAT2KEY').value;
    editRoom.SPACEUSECAT1KEY = document.getElementById ('roomDetails-SPACEUSECAT1KEY').value;
    editRoom.SPACEUSECAT2KEY = document.getElementById ('roomDetails-SPACEUSECAT2KEY').value;
    editRoom.DESCRIPTION = document.getElementById ('roomDetails-DESCRIPTION').value;
    editRoom.CAPACITY = document.getElementById ('roomDetails-CAPACITY').value;
    editRoom.ASSIGNABLE = document.getElementById ('roomDetails-ASSIGNABLE').value;
    editRoom.NOTES = document.getElementById ('roomDetails-NOTES').value;
    editRoom.USABLE = document.getElementById ('roomDetails-USABLE').value;

    _applyEdits (roomsTable, [editRoom]).then (function ()
    {
        $ ('#customWindow').jqxWindow ('close');
        $ ('#typeUseCategoryWindow').jqxWindow ('close');
        view.popup.close ()
    });
}

Mr_Kirkwood

Joel,

If i want to delete or just edit do i change this line:

featureLayer.applyEdits({addFeatures:graphicsArr})

to deleteaFeatures and editFeatures?

Mr_Kirkwood

Thank you! That works. I really appreciate your help.

JoelBennett

function _applyAdds (featureLayer, propertiesArr)
{
    return new Promise(function(resolve, reject) {
        require (['esri/Graphic'], function (Graphic)
        {
            var graphicsArr = [];
            propertiesArr.forEach (function (properties)
            {
                graphicsArr.push (new Graphic ({attributes:properties}));
            });
            featureLayer.applyEdits({addFeatures:graphicsArr}).then(
                    function (results)
                    {
                        console.log (results);
                        resolve();
                    }, // callback
                    function (error)
                    {
                        console.log ('ERROR!', error);
                        reject(error);
                    }// errorback
            );
        });
    });
}

Mr_Kirkwood

Thank you, Joel, for helping. I am now getting this error message:

4.30/:31 Error: scriptError: https://js.arcgis.com/4.30/esri/graphic.js

src: dojoLoader

info: (2) ['https://js.arcgis.com/4.30/esri/graphic.js', Event]

Thanks in advance!

JoelBennett

You should use the native Promise object instead. Here is what the above code would look like using it:

function _applyAdds (featureLayer, propertiesArr)
{
    return new Promise(function(resolve, reject) {
        require (['esri/graphic'], function (Graphic)
        {
            var graphicsArr = [];
            propertiesArr.forEach (function (properties)
            {
                graphicsArr.push (new Graphic (null, null, properties));
            });
            featureLayer.applyEdits (
                    graphicsArr, null, null,
                    function (a, u, d)
                    {
                        console.log (a, u, d);
                        resolve();
                    }, // callback
                    function (error)
                    {
                        console.log ('ERROR!', error);
                        reject(error);
                    }// errorback
            );
        });
    });
}

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.