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. 

[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? 

[JoelBennett · Accepted solution]

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,

You are amazing and a genius! That worked perfectly. That was one of the last pieces of the puzzle. Thank you! 

[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]

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]

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. 

[Mr_Kirkwood]

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