• State Verified Answer
  • +1 person also asked this people also asked this
  • Replies 7 replies
  • Answers 1 answer
  • Subscribers 9 subscribers
  • Views 8186 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

How to design dynamic form ?

prais1852

Hi Community,

 

I am very new to Appian tool and i am building a form but i want the form to be dynamic i.e. i want to change the options based on previous selection.

Please see the below image.

 

 

If user selects PECVD from dropdown menu then the checkbox just below it must have some values and user selects SABRE from dropdown list then it must show some different set of values for checkbox.

Similary if user selects a value from Checkbox a new dynamic checkbox should come saying Node affected C4 or Node affected SOLA etc. (Note here i want the label to be dynamic as well) based on upper checkbox list value. How should i do it? Where i should write rules for this ?

  Discussion posts and replies are publicly visible

  • 0
    Certified Lead Developer
    You can make the use of if() function over choiceLabels and choiceValues of Checkbox and use the same if() to show or hide an another checkbox, when the value gets selected from previous checkbox.


    For better explanation, if you can share the SAIL code of these components, so that practitioner can easily modify that and attach the same here.
  • 0 in reply to aloks0189

    I have used Application builder to build the application.

    Below are generated code for Tools Affected and Nodes Affected fields.

     

    if(
  ri!readOnly,
  a!textField(
    label: "Tools Affected",
    labelPosition: "ADJACENT",
    value: if(
      or(isnull(ri!record.toolsAffected), count(ri!record.toolsAffected.value)=0),
      "",
      joinarray(ri!record.toolsAffected.value, ", ")
    ),
    readOnly: true
  ),
  a!checkboxField(
    label: "Tools Affected",
    labelPosition: "ABOVE",
    instructions: "",
    helpTooltip: "",
    choiceLabels: local!toolsAffectedOptions.value,
    choiceValues: local!toolsAffectedOptions,
    value: ri!record.toolsAffected,
    saveInto: ri!record.toolsAffected,
    required: false
  )
)
    if(
  ri!readOnly,
  a!textField(
    label: "Nodes Affected",
    labelPosition: "ADJACENT",
    value: if(
      or(isnull(ri!record.nodesAffected), count(ri!record.nodesAffected.value)=0),
      "",
      joinarray(ri!record.nodesAffected.value, ", ")
    ),
    readOnly: true
  ),
  a!checkboxField(
    label: "Tools Affected",
    labelPosition: "ABOVE",
    instructions: "",
    helpTooltip: "",
    choiceLabels: local!nodesAffectedOptions.value,
    choiceValues: local!nodesAffectedOptions,
    value: ri!record.nodesAffected,
    saveInto: ri!record.nodesAffected,
    required: false
  )
)

     

    Can you help me with this ?

  • 0
    Certified Lead Developer
     in reply to prais1852
    I think you'd be better off learning the basics by creating a small test interface that you can play around with and see how the different pieces interact. Someone might be able to provide you a snippet of code that you can paste into a blank interface designer window - i might at some point if I get a little more time. But in the mean time you might try doing so yourself.
  • 0 in reply to prais1852
    It looks like you're already using an if() statement to dynamically control what SAIL components are displayed. In your code snippet you're using the if(ri!readOnly, a!textField(), a!checkboxField) to show a text field if readonly and a checkbox field otherwise.
    You can use the same design pattern to conditionally show a subsequent checkbox field or an empty value to hide the field. It might look something like if(contains(ri!record.nodesAffected, "C4"), a!checkboxField(), {})
  • 0
    Certified Lead Developer

    Hi  you can follow the below code for your requirement, I tried making it less complex, by simply making use of multiple if(), so as per your requirement you can enhance this code in future, once you get  the good hands on SAIL.

     

    load(
  local!dropdownValue: {"PECVD","SABRE"},
  local!checkbox1Value: {"PECVD1","PECVD2","PECVD3"},
  local!checkbox2Value: {"SABRE1","SABRE2","SABRE3"},
  local!typeInput,
  local!checkbox1Input,
  local!checkbox2Input,
  local!nodeCheckbox,
  with(
    local!nodeValue: if(
      isnull(local!checkbox1Input),
      local!checkbox2Input,
      local!checkbox1Input
    ),
    a!formLayout(
      label: "Basic Form",
      contents: {
        a!dropdownField(
          label: "Type",
          placeholderLabel: "-- select --",
          choiceLabels: local!dropdownValue,
          choiceValues: local!dropdownValue,
          value: local!typeInput,
          saveInto: {
            local!typeInput,
            a!save(local!nodeValue,null())
          },
          required: true()
        ),
        if(
          local!typeInput = "PECVD",
          a!checkboxField(
            label: "Options",
            choiceLabels: local!checkbox1Value,
            choiceValues: local!checkbox1Value,
            value: local!checkbox1Input,
            saveInto: {
              local!checkbox1Input,
              a!save(local!checkbox2Input,null())
            }
          ),
          {}
        ),
        if(
          local!typeInput = "SABRE",
          a!checkboxField(
            label: "Options",
            choiceLabels: local!checkbox2Value,
            choiceValues: local!checkbox2Value,
            value: local!checkbox2Input,
            saveInto: {
              local!checkbox2Input,
              a!save(local!checkbox1Input,null())
            }
          ),
          {}
        ),
        if(
          and(
            isnull(local!checkbox1Input),
            isnull(local!checkbox2Input)
          ),
          {},
          a!checkboxField(
            label: "Node effected " & local!nodeValue,
            choiceLabels: {"Node1", "Node2", "Node3"},
            choiceValues: {"Node1", "Node2", "Node3"},
            value: local!nodeCheckbox,
            saveInto: local!nodeCheckbox
          )
        )
      }
    )
  )
)

     

    Hope this will help you.. 

  • +1
    Certified Senior Developer

    I recommend taking a look through the SAIL Recipes in the documentation - they do a good job at going through many different interface use-cases, and explaining how to build them.

© 2024 Appian. All rights reserved.