gridRowLayout conditionl contents

RE: gridRowLayout conditionl contents

mounikam0001 — Tue, 21 Sep 2021 11:46:11 GMT

I have given 'showWhen' to all rows and added choose function to select only rows and it worked. Thank you !!

RE: gridRowLayout conditionl contents

Stewart Burchell — Tue, 21 Sep 2021 11:26:03 GMT

As mentioned previously - if you're conditionally hiding a component in a row using the 'showWhen' attribute you need to a) hide it for ALL rows and b) hide the corresponding header cell. If you're trying to hide for one row and then not for another this will not work as ALL rows need to have the same number of components as there are header cells. An alternative is to simply conditionally replace the component you want to hide with, say, an empty, read-only a!textField()

RE: gridRowLayout conditionl contents

mounikam0001 — Tue, 21 Sep 2021 10:55:17 GMT

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

RE: gridRowLayout conditionl contents

Peter Lewis — Mon, 20 Sep 2021 22:19:33 GMT

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.

RE: gridRowLayout conditionl contents

vimalkumars — Mon, 20 Sep 2021 18:55:06 GMT

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

RE: gridRowLayout conditionl contents

mounikam0001 — Mon, 20 Sep 2021 17:56:14 GMT

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.

RE: gridRowLayout conditionl contents

Peter Lewis — Mon, 20 Sep 2021 17:17:00 GMT

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

RE: gridRowLayout conditionl contents

Stewart Burchell — Mon, 20 Sep 2021 13:11:10 GMT

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

RE: gridRowLayout conditionl contents

mounikam0001 — Mon, 20 Sep 2021 13:05:44 GMT

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.

RE: gridRowLayout conditionl contents

Stewart Burchell — Mon, 20 Sep 2021 12:59:26 GMT

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.

RE: gridRowLayout conditionl contents

mounikam0001 — Mon, 20 Sep 2021 12:17:23 GMT

Thanks Stewart Burchell.
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).

RE: gridRowLayout conditionl contents

Stewart Burchell — Mon, 20 Sep 2021 11:42:07 GMT

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".