Skip to main content
sameeru0003
sameeru0003
Known Participant
November 25, 2022
Question

Conditional requiredness of fields on variable change in an interface section Appian.

  • November 25, 2022
  • 5 replies
  • 1 view

Hi Everyone,

I have a requirement like. Action dropdown with value

  1. Approve
  2. Reject
  3. Terminate
  4. Comment paragraph filed

Use Case 1 – If user select Approve from action dropdown, Comment field should be optional.(non-required)

Use Case 2 – If user select Reject or Terminate from action dropdown, Comment field should be become mandatory (*Required field)

We have below code,

a!localVariables(
local!selectedaction,
local!comment,
local!submitClick,
local!isActionChanged,
local!previousSelection,
a!formLayout(
label: "Form",
contents: {
a!sectionLayout(
label: "Section",
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!dropdownField(
label: "Action",
labelPosition: "ABOVE",
placeholder: "--- Select a Value ---",
choiceLabels: { "Approve", "Reject", "Terminate" },
choiceValues: { 1, 2, 3 },
value: local!selectedaction,
saveInto: {
a!save(local!comment, null),
a!save(local!submitClick, false),
a!save(local!isActionChanged, true),
a!save(
local!previousSelection,
local!selectedaction
),
a!save(local!selectedaction, save!value)
},
searchDisplay: "AUTO",
required: true,
requiredMessage: "Please select action",
validations: {}
)
}
),
a!columnLayout(
contents: {
a!paragraphField(
label: "Comment",
labelPosition: "ABOVE",
value: local!comment,
saveInto: local!comment,
refreshAfter: "UNFOCUS",
height: "MEDIUM",
required: if(
and(
a!isNotNullOrEmpty(local!selectedaction),
local!selectedaction <> 1
),
true,
false
),
requiredMessage: "Comment is required."
)
}
)
}
)
}
)
},
buttons: a!buttonLayout(
primaryButtons: {
a!buttonWidget(
label: "Submit",
submit: true,
validate: true,
value: local!submitClick,
saveInto: { a!save(local!submitClick, true) },
style: "PRIMARY",
validationGroup: "Comment"
)
}
)
)
)

The issue what we are facing here is

Required filed error message is not getting cleared post user click submit upon action dropdown change.

Steps:

  1. Select Reject, and click on submit button, Comment filed is becoming required and we get the required message which is expected.
  2. Then change the drop down action back to Terminate, error message is not getting cleared on comment field. It retains the previous error message.
  3. Excepted result : on change of each drop down value , error message should clear for comment field and on submit button click it should validate and make the comment filed required.

Can someone help us here.

5 replies

G
geethas0002
November 25, 2022

Use Refresh variable function to refresh after  selected value changes a!refreshVariable() Function - Appian 22.3


a!localVariables(
    local!selectedaction,
    local!comment: a!refreshVariable(
      refreshOnVarChange:local!selectedaction,
      
    ),

sameeru0003
sameeru0003Author
Known Participant
November 25, 2022

On change of dropdown error message for comment field is not getting cleared. I select approve from dropdown and comment is not required and hit submit button then form submits but when i change dropdown from approve to reject the comment becomes required and without clicking on submit button error message appears at field which should not happen unless i hit submit button.

G
geethas0002
November 26, 2022

Try this one I made few changes only I have added new local variable with require comment and setting it value in while saving selected action only and given that variable in the required filed of comment

a!localVariables(
  local!selectedaction,
  local!comment,
  local!requireComment,
  
  local!submitClick,
  local!isActionChanged,
  local!previousSelection,
  a!formLayout(
    label: "Form",
    contents: {
      a!sectionLayout(
        label: "Section",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    label: "Action",
                    labelPosition: "ABOVE",
                    placeholder: "--- Select a Value ---",
                    choiceLabels: { "Approve", "Reject", "Terminate" },
                    choiceValues: { 1, 2, 3 },
                    value: local!selectedaction,
                    saveInto: {
                      a!save(local!comment, null),
                      a!save(local!submitClick, false),
                      a!save(local!isActionChanged, true),
                      a!save(
                        local!previousSelection,
                        local!selectedaction
                      ),
                      a!save(local!selectedaction, save!value),
                      a!save(local!requireComment,if(local!selectedaction=1,false,true))
                    },
                    searchDisplay: "AUTO",
                    required: true,
                    requiredMessage: "Please select action",
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!paragraphField(
                    label: "Comment",
                    labelPosition: "ABOVE",
                    value: local!comment,
                    saveInto: local!comment,
                    refreshAfter: "UNFOCUS",
                    height: "MEDIUM",
                    required:local!requireComment,
                    /*if(*/
                      /*and(*/
                        /*a!isNotNullOrEmpty(local!selectedaction),*/
                        /*local!selectedaction <> 1*/
                      /*),*/
                      /*true,*/
                      /*false*/
                    /*),*/
                    requiredMessage: "Comment is required."
                  )
                }
              )
            }
          )
        }
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          submit: true,
          validate: true,
          value: local!submitClick,
          saveInto: { a!save(local!submitClick, true) },
          style: "PRIMARY",
          validationGroup: "Comment"
        )
      }
    )
  )
)

Terms & ConditionsAccessibility statement