Save item with fd.save() then POST Flow API call

Forms
1

I have added a button to my top menu bar to submit a form. The functionality I want to achieve with this is, when clicked, it sets a status field to "Submitted", saves changes made to the form, and sends a POST call to Flow to start a submission process. I have other forms that I required users to save the form and then submit from the Display screen, but they are not the best at following directions and we struggle with constantly having loads of these documents stuck in Saved/Open status that they constantly forget to submit. Asking to click twice is too much for them to handle. I have tried putting the POST call after the fd.save() function in the click property of the button, putting the call in the fd.saved() function, and in the fd.beforeSave() function, but no matter which way I try the Status field updates, the item saves all the changes, and then that's it. It doesn't call the API. If I remove the fd.save() function, it will call the API but not save the changes first.

2

Dear @tmoreno,
There are different ways to handle it. The events are async, so if you're running the API call inside beforeSave(), you can return a promise, which will get resolved only when the API call returns success.

Another way to handle it might be - call API with button, but only trigger fd.save() once the API call return success.

3

Hi @Nikita_Kurguzov,

I have got this working beautifully for my edit form. However I am still stuck on ideas for my New form. The issue is with the new form that I can't call the API to process the submission because the form hasn't been saved yet and, therefore, doesn't yet have an Item ID. Is there a method that I can use on click to a) Save the form item, b) return the itemID of the newly created list item, and then c) make the API call to start the submission process?

Saving and submitting are two different processes because this form needs to have the functionality of sometimes saving your progress to return, complete, and submit later.

Thanks!

4

Dear @tmoreno,
Find an example here - Spsaved - update same list item - #7 by Nikita_Kurguzov

This will allow you to stop redirect from New Form, and after submit perform API call, then redirect manually. If in panel, similar code can be applied, but instead to prevent closing, and then to close manually.

5

Not sure what I'm doing wrong here.

This is my code where I add a Submit button to the toolbar and ask it to save then submit via API:

fd.toolbar.buttons.push({
        icon: 'PublishContent',
        class: 'btn-outline-primary',
        text: 'Submit',
        click: function() {
            
            fd.save();
            
            //This URL to be updated
            var url = 'https://prod-00.australiasoutheast.logic.azure.com/workflows/....;

            //current item ID
            var itemIds = parseInt(fd.itemId);
            
            alert('ItemID = ' + itemIds);

            //console.log(JSON.stringify({ids: itemIds}));
            fetch(url, {
                method: 'POST',
                body: JSON.stringify({ids: itemIds}),
                headers:{
                'Content-Type': 'application/json'
                }
            })
            .then(function(response) {
                if (response.status !== 202) {
                alert('Looks like there was a problem. Status Code: ' + response.status);
                }
            })
        }
    })

When I click the button I get an alert telling me "ItemID = NaN", indicating that the item hasn't yet been given an ID number by the system.

I added your code:
fd.spSaved(function(result) {
var redirect = result.RedirectUrl;
result.RedirectUrl = null;
var siteURL = 'https://....sharepoint.com/sites/HR';
let web = new Web(siteURL);
const i = web.lists.getByTitle('PerfSA').items.getById(result.Id).update({
ProjectID: "PROJ" + result.Id
}).then(function(){
console.log("Updated!");
window.location.href = redirect;
});
});

And the save isn't dumping me straight out, but I'm still getting the same result.

Thanks

6

Dear @tmoreno,
The fd.itemId is not available for New Form, the ID is only available inside of fd.spSaved(function(result){ ... }); and only as result.Id;

It would look something like this:

fd.spSaved(function(result) {
        var redirect = result.RedirectUrl;
        result.RedirectUrl = null;
        //This URL to be updated
        var url = 'https://prod-00.australiasoutheast.logic.azure.com/workflows/....;

        //current item ID
        var itemIds = parseInt(result.Id);
        
        alert('ItemID = ' + itemIds);

        //console.log(JSON.stringify({ids: itemIds}));
        fetch(url, {
            method: 'POST',
            body: JSON.stringify({ids: itemIds}),
            headers:{
            'Content-Type': 'application/json'
            }
        })
        .then(function(response) {
            if (response.status !== 202) {
              alert('Looks like there was a problem. Status Code: ' + response.status);
              window.location.href = redirect;
            }
        })
});

This code is only for full page! It will need to be adjusted for a panel.

This code will automatically only run on save, if you place it inside of JS editor, no need to adjust the button specifically.