gridRowLayout conditionl contents

Hi,

Is there any way to display textField/radioButtonField 's in gridRowLayout based on satisfying given condition ? I have a column, it can be of either dropdown or text field or radiobutton. Type of row has to be decided based on column header selection (column header selection happens dynamically). I have tried using required option but its not working. 

 a!gridRowLayout(
contents: {
a!dropdownField(
labelPosition: "COLLAPSED",
placeholder: "Please select one",
choiceLabels: {"A","B","C","D"},
choiceValues: {"A","B","C","D"},
value:"",
saveInto: a!save(ri!answerList.answerValue,save!value),
required: exact(fv!item.type = "grid",true(),false()),
disabled: rule!APN_isTrue(ri!isReadOnly)
),

a!radioButtonField(
value: "",
choiceLabels: {"False", "True"},
choiceValues: {false, true},
saveInto: a!save(local!gridQuestionsList.defaultAnswer,save!value),
required: if(fv!item.type = "radio button",true(),false())

)

}

)

  Discussion posts and replies are publicly visible

  • the 'required' attribute simply forces the user to enter a value. If you want the component to be invisible based upon some criteria then you should use the 'showWhen' attribute which takes a Boolean value.

    Note also that you do not need to construct your code as:

    if(fv!item.type = "radio button",true(),false())

    ...since just having:

    fv!item.type = "radio button"

    will return either "true" or "false".

  • Thanks .
    When I modify as per your suggestion, am getting below error.

    Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!gridLayout [line 13]: A grid layout component [label=""] has an invalid value for "rows". Every row layout must have the same number of components and it must match the number of header cells. The row at index 1 has 3 component(s). Expected: 4 component(s).

  • Yes. If you want to hide/show a component in a row you need to ensure the set of header cells matches the number of components in your row. So the same rule could be used on the 'showWhen' attribute on the relevant header cell.

  • I got your point. What I meant to say is that, after modifying radiobutton component to 

    showWhen: fv!item.type = "radio button"  

    am getting that error even though the condition is true.

  • The error message is clear in telling you what's wrong. You have to dine how many columns you're expecting in your table (using the headercells attribute) and every row you generate using your data needs to have the same number of components to lay them across the defined table. So if you want to hide a specific component, that'll mean one less component for the defined table, so you either replace it with, say, an empty, rad-only text field, or you reduce the number of headerCells using the same technique, by setting one headerCell's 'showWhen' to false

  • If you still aren't getting it to work, can you post the full code for your grid?

  • a!localVariables(
      local!questionID: {"230108"},
      local!gridQuestionsList:rule!GPO_quesDetailsInput(questionInputID: local!questionID),
      local!program:"test",
     
     /* local!answerIndex:if(rule!GPO_APN_isEmpty(ri!answerList),null,wherecontains(ri!question.questionID, tointeger(ri!answerList.question.questionID))),
      local!questionType:lower(ri!question.type),
      local!columnscount:count(split(ri!question.defaultValue,";")),
      local!gridQuestions:split(ri!question.defaultValue, ";"),*/
      
      
      a!gridLayout(
        headerCells: {
             a!forEach(
              items: local!gridQuestionsList.questionID,
              expression: 
                a!localVariables(
                  local!list: rule!GPO_questionDetails(questionID: fv!item),
                  a!gridLayoutHeaderCell(label: local!list.label)
                )),
            if(not(rule!APN_isTrue(ri!isReadOnly)),a!gridLayoutHeaderCell(label: ""),{})
         },
        rows: a!forEach(
          items: local!gridQuestionsList,
          expression:
            
          a!gridRowLayout(
            contents: {
              a!dropdownField(
                labelPosition: "COLLAPSED",
                placeholder: "Please select one",
                choiceLabels: {"Consumer Credit","Consumer Debit","Prepaid","Ecommerece"},
                choiceValues: {"Consumer Credit","Consumer Debit","Prepaid","Ecommerece"},
                value:"",
                saveInto: a!save(ri!answerList.answerValue,save!value),
                showWhen: fv!item.type = "grid",
                disabled: rule!APN_isTrue(ri!isReadOnly)
              ),
              a!textField(
                labelPosition: "COLLAPSED",
                value: "",
                saveInto: a!save(ri!answerList.answerValue,save!value),
                required: not(rule!APN_isTrue(ri!isReadOnly)),
                readOnly: rule!APN_isTrue(ri!isReadOnly),
                showWhen: fv!item.type = "text box"
     
              ),
             
              a!radioButtonField(
                value: "",
                choiceLabels: {"False", "True"},
                choiceValues: {false, true},
                saveInto: a!save(local!gridQuestionsList.defaultAnswer,save!value),
                showWhen: fv!item.type = "radio button"
              
              ),
              a!checkboxField(
                value:"",
                choiceLabels: {"worst Appian", "No Support"},
                choiceValues: {"worst Appian", "No Support"},
                saveInto: a!save(local!gridQuestionsList.defaultAnswer,save!value),
                showWhen: fv!item.type = "checkbox"
              ),
             a!imageField(
                label: "delete " & fv!index,
                images: a!documentImage(
                  document: a!iconIndicator("REMOVE"),
                  altText: "Remove Row",
                  link: a!dynamicLink(
                    value: fv!index,
                    saveInto: {
                      a!save(local!program, remove(local!program, save!value))
                    }
                  )
                ),
                size: "ICON"
              )
            }
          )  
          
        ),
        addRowlink: if(
          not(rule!APN_isTrue(ri!isReadOnly)),
          a!dynamicLink(
            label: "Add",
            value: (
              startDate: today() + 1
            ),
            saveInto: {
              a!save(local!program, append(local!program, save!value))
            }
          ),
          {}
        ),
        rowHeader: 1
      )
    )
    


    Thanks @Peter Lewis. Here is my code, am still stuck :(

    What I want to achieve - Columns can be of any number (2 col sometimes/3 sometimes/4sometimes) and of any type (radio/textbox/dropdown), both of their selection happens dynamically by client. So accordingly rows shows up. 

  • 0
    Certified Lead Developer
    in reply to mounikam0001

    Mounika, 

    If you are looking for a way to show an interface to capture responses for a list of question, I would recommend interface "Option A"

    Interface - Option A:

    Sample code

     

    a!localVariables(
      local!gridQuestionsList: {
        a!map(
          questionID: 1,
          type: "text box",
          label: "Question 1"
        ),
        a!map(
          questionID: 1,
          type: "radio button",
          label: "Question 2"
        ),
        a!map(
          questionID: 1,
          type: "dropdown",
          label: "Question 3"
        )
      },
      {
        a!gridLayout(
          labelPosition: "ABOVE",
          headerCells: {
            a!gridLayoutHeaderCell(label: "Question"),
            a!gridLayoutHeaderCell(label: "Answer"),
            if(
              ri!isReadOnly = false(),
              a!gridLayoutHeaderCell(label: ""),
              {}
            )
          },
          columnConfigs: {
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: "3"),
            a!gridLayoutColumnConfig(width: "DISTRIBUTE", weight: "2"),
            a!gridLayoutColumnConfig(width: "NARROW")
          },
          rows: {
            a!forEach(
              items: local!gridQuestionsList,
              expression: {
                a!gridRowLayout(contents:{
                a!richTextDisplayField(
                  value: a!richTextItem(text: fv!item.label)
                ),
               choose(
                 lookup({"text box", "radio button", "dropdown"},fv!item.type,1),
                 a!textField(
                   labelPosition: "COLLAPSED",
                   value: "",
                   /*saveInto: a!save(ri!answerList.answerValue, save!value),*/
                   showWhen: fv!item.type = "text box"
                 ),
                 a!radioButtonField(
                   value: "",
                   choiceLabels: { "False", "True" },
                   choiceValues: { false, true },
                   /*saveInto: a!save(*/
                     /*local!gridQuestionsList.defaultAnswer,*/
                     /*save!value*/
                   /*),*/
                   showWhen: fv!item.type = "radio button"
                 ),
                 a!dropdownField(
                   labelPosition: "COLLAPSED",
                   placeholder: "Please select one",
                   choiceLabels: {
                     "Consumer Credit",
                     "Consumer Debit",
                     "Prepaid",
                     "Ecommerece"
                   },
                   choiceValues: {
                     "Consumer Credit",
                     "Consumer Debit",
                     "Prepaid",
                     "Ecommerece"
                   },
                   value: "",
                   /*saveInto: a!save(ri!answerList.answerValue, save!value),*/
                   showWhen: fv!item.type = "dropdown",
                   disabled: ri!isReadOnly=false()
                 )
                 
               ),
               if(
                 ri!isReadOnly = false(),
                 a!imageField(
                   label: "delete " ,
                   images: a!documentImage(
                     document: a!iconIndicator("REMOVE"),
                     altText: "Remove Row",
                     link: a!dynamicLink(
                       value: fv!index,
                       saveInto: {
                         a!save(
                           local!program,
                           remove(local!program, save!value)
                         )
                       }
                     )
                   ),
                   size: "ICON"
                 ),
                 {}
               )
              })}
            )
          },
          selectionSaveInto: {},
          validations: {},
          shadeAlternateRows: true
        )
      }
    )


    Interface Option B:

    Sample code

    a!localVariables(
      local!questionID: { "230108" },
      local!gridQuestionsList: {
        a!map(
          questionID: 1,
          type: "text box",
          label: "Question 1"
        ),
        a!map(
          questionID: 1,
          type: "radio button",
          label: "Question 2"
        ),
        a!map(
          questionID: 1,
          type: "dropdown",
          label: "Question 3"
        )
      },
      local!program: "test",
      /* local!answerIndex:if(rule!GPO_APN_isEmpty(ri!answerList),null,wherecontains(ri!question.questionID, tointeger(ri!answerList.question.questionID))),
      local!questionType:lower(ri!question.type),
      local!columnscount:count(split(ri!question.defaultValue,";")),
      local!gridQuestions:split(ri!question.defaultValue, ";"),*/
      a!gridLayout(
        headerCells: {
          a!forEach(
            items: local!gridQuestionsList,
            expression: a!gridLayoutHeaderCell(label: fv!item.label)
          )
        },
        rows: a!gridRowLayout(
          contents: {
            a!forEach(
              items: local!gridQuestionsList,
              expression: {
                a!dropdownField(
                  labelPosition: "COLLAPSED",
                  placeholder: "Please select one",
                  choiceLabels: {
                    "Consumer Credit",
                    "Consumer Debit",
                    "Prepaid",
                    "Ecommerece"
                  },
                  choiceValues: {
                    "Consumer Credit",
                    "Consumer Debit",
                    "Prepaid",
                    "Ecommerece"
                  },
                  value: "",
                  saveInto: a!save(ri!answerList.answerValue, save!value),
                  showWhen: fv!item.type = "dropdown",
                  disabled: ri!isReadOnly=false()
                ),
                a!textField(
                  labelPosition: "COLLAPSED",
                  value: "",
                  saveInto: a!save(ri!answerList.answerValue, save!value),
                  showWhen: fv!item.type = "text box"
                ),
                a!radioButtonField(
                  value: "",
                  choiceLabels: { "False", "True" },
                  choiceValues: { false, true },
                  saveInto: a!save(
                    local!gridQuestionsList.defaultAnswer,
                    save!value
                  ),
                  showWhen: fv!item.type = "radio button"
                ),
                a!checkboxField(
                  value: "",
                  choiceLabels: { "worst Appian", "No Support" },
                  choiceValues: { "worst Appian", "No Support" },
                  saveInto: a!save(
                    local!gridQuestionsList.defaultAnswer,
                    save!value
                  ),
                  showWhen: fv!item.type = "checkbox"
                )
              }
    
            )
          }
        ),
        addRowlink: if(
          ri!isReadOnly = false(),
          a!dynamicLink(
            label: "Add",
            value: (startDate: today() + 1),
            saveInto: {
              a!save(
                local!program,
                append(local!program, save!value)
              )
            }
          ),
          {}
        ),
        rowHeader: 1
      )
    )

    Ensure you update the above-shared code with necessary best practices

  • I'd suggest moving what you currently have in your contents to a separate rule. Then, I'd run a!forEach() across that rule to generate the correct number of columns in the grid. Since you use a!forEach() for both the configs and the contents, you should always end up with the same number of columns.

    Something like this:

    contents: {
      a!forEach(
        items: local!gridQuestionsList.questionID,
        expression: rule!EX_SelectComponent(
          id: fv!item,
        )
      ),
      ...
    }

    This is similar to option 2 from the poster above, but I think having this in a separate rule can help you to more easily test the results and ensure it will work for each type of component.

  • Thank you so much  for providing sample codes. Option B is exactly what I am in need of. I have modified it according and got my result.