Custom JS examples

Forums Modern DFFS Custom JS examples

Viewing 1 reply thread
  • Author
    Posts
    • #36150
      Alexander Bautz
      Keymaster

      To use these examples you must have v0.9.0.13


      Updated September 29: Fixed missing example for setting a field readonly.


      Please note that you can do most of this with rules. Using Custom JS is an option for advanced users.

      Do something before the form is saved

      You can use a function like this to run your own custom code before save. The function must return true to allow save, or false to stop the save. If you use this function it will run before the rules triggering on “Before save of the form” and “After save of the form”. If your function returns false the rules described will not run.

      function dffs_PreSaveAction() {
        // This example will prevent save if the title field value is not "test"
        if (getFieldValue("Title") !== "test") {
          alert("Nope, you cannot save!");
          return false;
        }
        // Allow save
        return true;
      }
      

      Show a modal dialog

      To show a modal dialog with a custom message you can use this code. Please note that this will be a non-blocking dialog so it will not prevent other code from running when the dialog is shown (like the default browser “alert” function does).

      dffs_showModal({
        "title": "A message to you",
        "body": "Add your message body here. You can use plain text or HTML",
        "isBlocking": true,
        "showClose": true,
        "closeCallbackFn": () => {
          // Add your custom code that runs when the dialog has been dismissed
        },
        "cancelBtnLabel": "Cancel button",
        "cancelBtnFn": () => {
          // Add your custom code to run when clicking the cancel button
        },
        "okBtnLabel": "OK Button",
        "okBtnFn": () => {
          // Add your custom code to run when clicking the OK button
        },
      });
      

      If you don’t include the “cancelBtnFn”, the Cancel button is not shown. The OK button will always show and will by default close the dialog.

      Attach a custom onchange to a text field

      To attach a custom onchange you must have the ID of the field placeholder – you find this by openinghte field property panel for the field in edit mode. Plase note that if you use the same field in your NewForm and your EditForm (or you use the same field in multiple tabs in the same form, this ID will be different. In that case you can use the other selector show below.

      // This will format an US 10 digit phone number in a field with internal name PhoneNumber
      // This example requires that you toggle the Load jQuery option above the Custom JS textarea to ON
      jQuery("#7663586659705095_PhoneNumber input").on("change", function () {
        var s = getFieldValue("Title");
        s = s.replace(/[^\d]/g, '');
        if (s.length !== 10) { alert("Phone Number must be 10 digits") }
        else s = s.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
        setFieldValue("Title", s);
      });
      

      Alternatively you can use this selector in the first line

      jQuery("div[data-fin='Title'] input").on(...
      

      Toggle readonly on a field

      Toggling readonly can be easily done in rules, but if you want to do it using custom js you can do it like this:

      // Set as readonly
      dffs_doReadonly(["Status", "Title", "AssignedTo"]);
      // Undo readonly
      dffs_undoReadonly(["Status", "Title", "AssignedTo"]);
      

      Toggle the visiblity on individual options in a choice field

      dffs_choice_option_hidden["31838417512562245_DropdownChoice"] = { "Enter Choice #1": true, "Enter Choice #3": true };
      

      The id (31838417512562245_DropdownChoice) for your field can be found in the field property panel. Add the label of the options you want to hide and set the value to true. Reversing the action and make them visible again by setting the value as false. You only have to address the options you want to hide or show.

      Detect change in a field

      Use this in for example dffs_PreSaveAction to detect change in the title field:

      if(dffs_beforeProperties["Title"] !== getFieldValue("Title")){
          alert("Title has changed!");
        }
      

      Post any question below.

      Best regards,
      Alexander

    • #36169
      SteveE
      Participant

      Hi Alexander,

      I’m just getting to play around with this and I think you might have missed some of your instructions. You mention setting something as read only but then your code is for hiding a choice.

      Anyway, I’m trying the hide option and I can’t get it to work. I wrapped it in a ready function that I know works. I tried adding # to the beginning of the field reference also.

      Here’s what I’m using:
      jQuery(document).ready(function($) {
      dffs_choice_option_hidden[“8506407795472748_DropdownField”] = {“Enter Choice #3”: true };
      });

      I’m on version 0.9.0.14. Thanks.

      • #36173
        Alexander Bautz
        Keymaster

        Sorry about that – the example has been updated to add the readonly example.

        Not sure why your options are not hiding – can you add some screenshots (or email it to me)?

        Alexander

Viewing 1 reply thread
  • You must be logged in to reply to this topic.