Check required fields on html Button click event

[Vidya]

Hi Alex,

I need to have custom HTML button’s which update a choice field in the list and then save the data and then call an API. How can I do that?

Thanks,
Vidya

Attachments:

1. DFFS_Question.txt

[Alexander Bautz]

Hi,
Setting a field value is done like this from Custom JS in DFFS:

setFieldValue("Internal_name_of_field", "The value you want to set");

You can also use the set field value section of a DFFS rule to do the setting of field values.

I don’t know the JBPM workflow api so I cannot really help you there, but in your SaveAsDraftButtonClicked you must NOT call $(“input[id$=’SaveItem’]:first”).trigger(“click”); but trigger your send function and in it’s callback run the $(“input[id$=’SaveItem’]:first”).trigger(“click”);. If you do it the other way around (like you have it now) the form will save and redirect – cancelling your request in the send function.

Alexander

[Vidya]

Hi Alex,

Here is my code to call an API, I get a valid response from the browser but this call from Custom JS is not working. I am not sure what is wrong. send () is the function called on clicking a HTML button, The required fields should be validated , a field shud be set and an API call should be made.

function send()
{
alert(‘Inside Send function’)

var urlvariable;

urlvariable = “URL goes here”;

var ItemJSON;

URL = urlvariable;

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = callbackFunction(xmlhttp);
xmlhttp.open(“POST”, URL, false);
xmlhttp.setRequestHeader(“Content-Type”, “application/json”);
xmlhttp.setRequestHeader(‘Authorization’, ‘Basic ‘ + window.btoa(‘username:pwd’)); //in prod, you should encrypt user name and password and provide encrypted keys here instead
xmlhttp.onreadystatechange = callbackFunction(xmlhttp);

xmlhttp.send();
alert( “Response Text : ” + xmlhttp.responseText);
// document.getElementById(“div”).innerHTML = xmlhttp.statusText + “:” + xmlhttp.status + “<BR><textarea rows=’100′ cols=’100′>” + xmlhttp.responseText + “</textarea>”;
}

function callbackFunction(xmlhttp)
{
alert(“Response Text : ” + xmlhttp.responseXML);
$(“input[id$=’SaveItem’]:first”).trigger(“click”);
}

[Alexander Bautz]

I cannot help you with the API call, but basically you should have a button that calls a function like this:

<input style="margin-left:0;" type="button" onclick="send();return false;" value="The Save Button">

Then you have a function like this in your Custom JS:

function send() {
    setFieldValue("Name_of_your_field", "The value you want to set");
    var allReqFieldsFilled = spjs.dffs.check_Mandatory();
    if (!allReqFieldsFilled) {
        spjs.dffs.alert({
            "title": "Missing required fields",
            "msg": "You must fill in all required fields",
            "ok": function(){
                // Close dlg
            }
        });
        // Exit send fn
        return false;
    }
    // add the rest of your send fn here
}

Alexander

[Vidya]

Hi Alex,

Below is my custom code, I have a HTML button called Save as draft and on click of it i am calling an API which, after the API call is done the page is submitting itself and refreshing. How can i stop the page from doing it? I am not even using the default save button.

$(“input[id$=’diidIOSaveItem’]”).hide();
$(“input[id$=’diidIOGoBack’]”).hide();

$(“button[id$=’btnSave’]”).click(function(){
alert(“Save Draft Button clicked”);
});

function SaveAsDraftButtonClicked()
{

var auth = btoa(‘username:pwd’);
alert(” Inside Button Click”+auth);
$.ajax({
type: ‘GET’,
url: ‘SomeURL’,
headers: {
“Authorization”: “Basic ” + auth
},

success : function(data) {
console.log(data);

alert(data.id);

},
});
alert(“After calling the API”);

return false;
}

[Vidya]

Hi Alex,

We are calling a custom Workflow on click of buttons on the form, i have 5 buttons amogng two tabs. When a button is clicked a dropdown value of status need to be updated and an API needs to be called.

How can I set a field which is of type Choice – Drop Down, Can you please help me with the syntax. I saw syntax for Radio Button but couldnt find for DropDown in the manual.

ALso any tips on debugging the custom JS in Chrome? Had a hard time finidng control/scripts on the newform.aspx page. Had to use alerts to debug.

Thanks,
Vidya

[Alexander Bautz]

I thought you planned to save the item after the api was called – the code snippet you had earlier:

$("input[id$='SaveItem']:first").trigger("click");

Is triggering the standard SharePoint save function and if you don’t want this to happen you must remove that line.

If you don’t have this line at all, it is most likely the custom buttons you use. Don’t make them as button elements, but use input type=”button” like this (the return false part is important):

<input type="button" onclick="your_onclickFn();return false;" value="Button label">

This is necessary because clicking a button element inside a form tag will auto-postback the form.

Alexander

[Paul Lynch]

Hi Alexander,

Your posts above are great, and I used them to create the button that checks required fields first, and then emails and saves the form.

Could you tell me how to tweak it so that instead of saving the form, it saves and redirects back to edit form. I set this in MISC tab of DFFS Settings but that only applies to the SAVE button which is now hidden.

Guessing I need to somehow incorporate this

onclick="if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ4')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl33$g_6ec32bfa_1664_4f8c_8627_2f5fa1bf19d6$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem", "", true, "", "", false, true))"

into my custom send function

function send() {
    setFieldValue("Name_of_your_field", "The value you want to set");
    var allReqFieldsFilled = spjs.dffs.check_Mandatory();
    if (!allReqFieldsFilled) {
        spjs.dffs.alert({
            "title": "Missing required fields",
            "msg": "You must fill in all required fields",
            "ok": function(){
                // Close dlg
            }
        });
        // Exit send fn
        return false;
    }
    // add the rest of your send fn here
}

• This reply was modified 4 years, 1 month ago by Paul Lynch.

[Alexander Bautz]

If you look at the help icon on the Save and redirect in the Misc tab you see that you can use this:

spjs.dffs.redirect("TheRedirectURL",false);

If you change it like this and adds it to your send function it should work:

spjs.dffs.redirect(location.href,false);

Alexander

[Author]

Posts