Question

Does JavaScript in the Modern Form Designer support show/hide radio buttons in a single radio button list/field based on the value selected in a drop-down list?

Forms

Updated March 2

asked on February 23 • Show version history

I'm trying to convert an old form built in the Classic Form Designer to a new form built in the Modern Form Designer. The original form has a drop-down list of Departments and a radio button list of Types of Payment Requests (APG-Acct, APG-Wire-Xfr, and 5 other types). The purpose of hiding some of the Types of Payment Requests is that some departments are not allowed to use certain Types of Payment Requests.

JavaScript in Classic Form Designer that works:

$('.ddDept select').change(function () {
    if ($(this).val() == "Human Resources"){
      // if Human Resources is selected in the Department drop down...
      $("input[type=radio][value=\"APG-Acct\"]").parent().hide();
      $("input[type=radio][value=\"APG-Wire-Xfr\"]").parent().show();
    } else if ($(this).val() == "Housing Agency"){
      // if Housing Agency is selected in the Department drop down...
      $("input[type=radio][value=\"APG-Acct\"]").parent().hide();
      $("input[type=radio][value=\"APG-Wire-Xfr\"]").parent().show();
    } else if ($(this).val() == "Planning Department"){
      // if Planning Department is selected in the Department drop down...
      $("input[type=radio][value=\"APG-Wire-Xfr\"]").parent().show();
    } else {
      // if any other department is selected, hide these request types
      $("input[type=radio][value=\"APG-Acct\"]").parent().hide();
      $("input[type=radio][value=\"APG-Wire-Xfr\"]").parent().hide();
    }

I'm sure this code can be consolidated into fewer lines of code, but it grew over time and I didn't take the time to narrow it down each time a change was requested.

I tried using the following in the Modern Form Designer, but I realize the hideFields with index is meant to be used with table and collection fields.

const formFields = {
  RequestTypeFieldId: { fieldId: 7 },
  ddDeptFieldId: { fieldId: 72 }
};

const updateRequestCheckboxes = async (formFields) => {

if (formFields.ddDeptFieldId == "Human Resources") {
    // hide APG-Acct radio button
    await LFForm.hideFields([{fieldId: 7, index: 5}]); 
  } else if (formFields.ddDeptFieldId == "Housing Agency") {
    await LFForm.hideFields([{fieldId: 7, index: 5}]); 
  } else {
    // hide APG-Acct and APG-Wire-Xfr radio buttons
    await LFForm.hideFields([{fieldId: 7, index: 5}, {fieldId: 7, index: 6}]); 
  }
}
LFForm.onFieldBlur(function() {updateRequestCheckboxes();}, formFields.ddDeptFieldId);

I suppose one way around this is to display an error message in an HTML field if a department selects a Type of Payment Request they are not allowed to submit. However, I'd rather not display options they aren't allowed to select.

0 0

Answer

SELECTED ANSWER

replied on February 24

Wild thought, but can you put an await keyword on line 11 like you have on 34/39? LFForm won't remove an option if it doesn't exist. It might be an order of operations thing.

2 0

Replies

replied on February 23

I was able to accomplish this (with some minor issues, which I couldn't figure out).

const formFields = {
  RequestTypeFieldId: { fieldId: 7 },
  ddDeptFieldId: { fieldId: 72 }
};

const updateRequestChoices = async () => {

  let Dept = LFForm.getFieldValues({variableName: "Dept_Initiating"});
  
  // Reset the Request_Type choices, in case a Dept selection was changed which removed options
  LFForm.changeFieldOptions(formFields.RequestTypeFieldId, 
       [{label: "Blanket Purchase Order (BPO)", value: "BPO"},
        {label: "Purchase Order", value: "PO"},
        {label: "AP Group (Voucher Edit)", value: "AP Group"},
        {label: "AP Group (C####, old encumbrance)", value: "APG-C"},
        {label: "AP Group (non-pCard Travel Reimbursement)", value: "APG-T"},
        {label: "AP Group (Accounting team BPO/PO batch)", value: "APG-Acct"},
        {label: "AP Group (Wire or ACH cash transfers processed by HR Payroll, Treasury or MVR)", value: "APG-Wire-Xfr"}], 
                            "replace" );
  
  switch (Dept) {
    case "Finance Accounting":
    case "Finance Administration":
    case "Finance IT":
    case "Finance RPC":
    case "Finance MVR":
    case "Finance Purchasing":
      // Don't remove anything
      break;
    case "Finance Treasury":
    case "Housing Agency":
    case "Human Resources":
      // Remove APG-Acct for these departments
      await LFForm.changeFieldOptions(formFields.RequestTypeFieldId, ["APG-Acct"], "remove");
      break;
    
    default:
      // Remove both APG-Acct and APG-Wire-Xfr for all other departments
      await LFForm.changeFieldOptions(formFields.RequestTypeFieldId, ["APG-Acct","APG-Wire-Xfr"], "remove");
      break;
  }
}
LFForm.onFieldBlur(() => updateRequestChoices(), formFields.ddDeptFieldId);

The issue I'm seeing if that when I select a department where both APG-Acct and APG-Wire-Xfr are removed, and then select Finance Treasury or Housing Agency or Human Resources, the APG-Wire-Xfr is still missing. I expected that option to reappear from the LFForm.changeFieldOptions(..., "replace"); line. When I select Finance Accounting, ... Administration, ... IT, ... RPC, ... MVR, ... Purchasing, I see all 7 options. Is there another command I can use besides "replace" to replace all the original options?

0 0

SELECTED ANSWER

replied on February 24

Wild thought, but can you put an await keyword on line 11 like you have on 34/39? LFForm won't remove an option if it doesn't exist. It might be an order of operations thing.

2 0

replied on February 24

That worked! Thank you so much!

1 0

You are not allowed to follow up in this post.

Question

Question

Does JavaScript in the Modern Form Designer support show/hide radio buttons in a single radio button list/field based on the value selected in a drop-down list?

Answer

Replies

Sign in to reply to this post.