DataTables Populating Data Weird from POST

DataTables Populating Data Weird from POST

zgoforthzgoforth Posts: 493Questions: 98Answers: 2

I have been working on a project for quite some time now.

Functionality:

  • Read in SharePoint list items from 8 different subsites with a GET request.
  • Populate those items in an orderly(grouped) fashion in a DataTable on a single landing page.
  • DataTable has collapsible/expandable rows grouped by program, followed by deliverable.
  • Dropdown menu with buttons to print/excel/PDF/Update the table.
  • Update Table has a HTML form that sends data back to the SharePoint List correlated with the FORM input.

I am currently using 8 different subsites where all of the lists are located. I want to send the new item to the correct list based off of its "Program" value because each of the different lists are a different program. I know I would have to use an if/else statement, but how would I go about that with an AJAX call?

Here is my JS "POST" Code:

$("#btn").click(function(e) {
                PostItem();
            });
        });
        
            function PostItem() {
                return getFormDigest("https://baseurl.sharepoint.com/sites/Projects/USMC/AMMO/Lists/AMMODeliverables/").then(function(digestData) {
                    console.log(digestData.d.GetContextWebInformation.FormDigestValue);
                    var item = {
                        "__metadata": { "type": "SP.Data.AMMODeliverablesListItem" },
                        "Title": "updated title",
                        "Program": $("#dProgram").val(),
                        "Deliverable": $("#dDeliverable").val(),
                        "To": $("#dTo").val(),
                        "Date": $("#dDate").val(),
                        "Approved": $("#dApproved").val(),
                        "Notes": $("#dNotes").val()
                    };
    
                    
                    $.ajax({
                        async: true, // Async by default is set to “true” load the script asynchronously  
                        // URL to post data into sharepoint list  or your own url
                        url: "https://baseurl.sharepoint.com/sites/Projects/USMC/AMMO/_api/web/lists/getbytitle('AMMO Deliverables')/items",
                        method: "POST", //Specifies the operation to create the list item  
                        data: JSON.stringify(item),
                        headers: {
                            "content-type": "application/json;odata=verbose",
                            "X-RequestDigest": digestData.d.GetContextWebInformation.FormDigestValue,
                            "Accept": "application/json;odata=verbose",
                            "If-Match": "*"
                        },
                        success: function(data) {
                            alert('Success'); // Used sweet alert for success message
                              console.log(data + " success in updating item");
                        },
                        error: function(data) {
                            alert(JSON.stringify(item));
                            console.log(data);
        
                        }
        
                    });
                })
            }
                function getItemTypeForListName(listName) {
                    var itemType = "SP.Data." + listName.charAt(0).toUpperCase() + listName.slice(1) + "ListName";
                    var encItemType = itemType.replace(/\s/g,'_x0020_');
                    return(encItemType);
        }       
            function getFormDigest(baseurl) {
        
                return $.ajax({
        
                    url: "https://baseurl.sharepoint.com/sites/Projects/USMC/AMMO/_api/contextInfo",
        
                    method: 'POST',
        
                    headers: {
                        'Accept': 'application/json; odata=verbose'
                    }
        
                });
                }   

The ISSUES I am facing:
- the Date column is formatted yyyy/mm/dd instead of mm/dd/yyyy, and the Approved column is returning True/False instead of Yes/No. Is there any easy way to go about fixing that.
- How do I use a render through the different options that are available for the Program field, to send them to the corresponding list?

Would it be something like:

function PostItem() {
            return getFormDigest("https://gemini3group.sharepoint.com/sites/Projects/USMC/AMMO/Lists/AMMODeliverables/").then(function(digestData) {
                console.log(digestData.d.GetContextWebInformation.FormDigestValue);
                var item = {
                    "__metadata": { "type": "SP.Data.AMMODeliverablesListItem" },
                    "Title": "updated title",
                    "Program": $("#dProgram").val(),
                    "Deliverable": $("#dDeliverable").val(),
                    "To": $("#dTo").val(),
                    "Date": $("#dDate").val(),
                    "Approved": $("#dApproved").val(),
                    "Notes": $("#dNotes").val()
                };

                if (dProgram == "AMMO"){
                    $.ajax({
                        async: true, // Async by default is set to “true” load the script asynchronously  
                        // URL to post data into sharepoint list  or your own url
                        url: "https://siteurl.sharepoint.com/sites/Projects/USMC/AMMO/_api/web/lists/getbytitle('AMMO Deliverables')/items",
                        method: "POST", //Specifies the operation to create the list item  
                        data: JSON.stringify(item),
                        headers: {
                            "content-type": "application/json;odata=verbose",
                            "X-RequestDigest": digestData.d.GetContextWebInformation.FormDigestValue,
                            "Accept": "application/json;odata=verbose",
                            "If-Match": "*"
                        },
                        success: function(data) {
                            alert('Success'); // Used sweet alert for success message
                            console.log(data + " success in updating item");
                        },
                        error: function(data) {
                            alert(JSON.stringify(item));
                            console.log(data);
    
                    }
    
                });
                }
                else if (dProgram == "AHR"){
                    $.ajax({
                        async: true, // Async by default is set to “true” load the script asynchronously  
                        // URL to post data into sharepoint list  or your own url
                        url: "https://siteurl.sharepoint.com/sites/Projects/USMC/AMMO/_api/web/lists/getbytitle('AMMO Deliverables')/items",
                        method: "POST", //Specifies the operation to create the list item  
                        data: JSON.stringify(item),
                        headers: {
                            "content-type": "application/json;odata=verbose",
                            "X-RequestDigest": digestData.d.GetContextWebInformation.FormDigestValue,
                            "Accept": "application/json;odata=verbose",
                            "If-Match": "*"
                        },
                        success: function(data) {
                            alert('Success'); // Used sweet alert for success message
                            console.log(data + " success in updating item");
                        },
                        error: function(data) {
                            alert(JSON.stringify(item));
                            console.log(data);
    
                    }

Replies

  • kthorngrenkthorngren Posts: 21,184Questions: 26Answers: 4,925

    the Date column is formatted yyyy/mm/dd instead of mm/dd/yyyy, and the Approved column is returning True/False instead of Yes/No. Is there any easy way to go about fixing that.

    The date conversion is easily done with moment.js.

    You can use an if statement:

    var myApproval = Approved ? "Yes" : "No";
    

    How do I use a render through the different options that are available for the Program field, to send them to the corresponding list?

    More details are need to understand what you mean. Are you referring to columns.render?

    Kevin

This discussion has been closed.