Check required fields on html Button click event

Forums Dynamic Forms for SharePoint Check required fields on html Button click event

Viewing 8 reply threads
  • Author
    Posts
    • #29681
      Vidya
      Participant

      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
    • #29684
      Alexander Bautz
      Keymaster

      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

    • #29694
      Vidya
      Participant

      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”);
      }

    • #29722
      Alexander Bautz
      Keymaster

      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

    • #29776
      Vidya
      Participant

      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;
      }

    • #29778
      Vidya
      Participant

      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

    • #29780
      Alexander Bautz
      Keymaster

      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

    • #30521
      Paul Lynch
      Participant

      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 3 weeks, 4 days ago by Paul Lynch.
    • #30572
      Alexander Bautz
      Keymaster

      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

Viewing 8 reply threads
  • You must be logged in to reply to this topic.