• State Suggested Answer
  • Replies 5 replies
  • Answers 1 answer
  • Subscribers 9 subscribers
  • Views 1662 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

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

Sameer Ul Haq

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.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • 0 in reply to Geetha Satya Sree

    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.

  • 0 in reply to Sameer Ul Haq

    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"
        )
      }
    )
  )
)

  • 0 in reply to Geetha Satya Sree

    When I change action from approve to reject and click on submit comment required message appears and then when i change the action from reject to terminate the error message for comment is retained without clicking on submit button with the above suggested changes. What I observed is form remains in validate state once submit button is clicked and whenever required fields appears, on action dropdown change the requiredness messages automatically appears without clicking on submit button. Our requirement is form should validate the fields only after submit button clicked. Suggest us an approach for the same.

  • 0 in reply to Sameer Ul Haq

    I have the same problem, I need another complete solution   

    word hurdle

© 2024 Appian. All rights reserved.
We want to hear from you! Submit a review on Gartner or G2.