Skip to main content
M
man0001
February 23, 2023
Solved

Grid and Flexbox layout

  • February 23, 2023
  • 4 replies
  • 0 views

Hello:

I am trying to create an interface - similar to the Maintenance Request example in Appian but I would like to add a "Select" checkbox that is (vertically) aligned in the center with the text (in this case, 2019 Lexus E350).  Also, is there a way to include a check box without providing an option name since I would like the "Select Product" to be the column header.  I am creating a set of card layouts using a 'forEach() function.

Is there a way to implement Flexbox layout - I went through the SAIL document but the search yielded no results.

Thank you for your help.

Ma

    Best answer by nareshs945

    Try with this code It might helpful.

    Option 1

    a!localVariables(
  local!isSelected: false,
  a!sectionLayout(
    label: "Select a Product",
    isCollapsible: true,
    contents: {
      a!cardLayout(
        contents: {
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  value: {
                    a!richTextIcon(
                      showWhen: not(local!isSelected),
                      icon: "square-o",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    ),
                    a!richTextIcon(
                      showWhen: local!isSelected,
                      icon: "check-square-o-alt",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    ),
                    char(9),
                    a!richTextItem(
                      text: "2019 Lexus ES350",
                      style: "STRONG",
                      size: "MEDIUM"
                    ),
                    char(10),
                    a!richTextItem(
                      text: "Time for tire rotation"
                    )
                  }
                )
              )
            }
          )
        },
        height: "AUTO",
        style: "ACCENT",
        marginBelow: "STANDARD"
      )
    }
  )
)

    Option 2

    a!localVariables(
  local!isSelected: false,
  a!sectionLayout(
    label: "Select a Product",
    isCollapsible: true,
    contents: {
      a!cardLayout(
        contents: {
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "LEFT",
                  value: {
                    a!richTextIcon(
                      showWhen: not(local!isSelected),
                      icon: "square-o",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    ),
                    a!richTextIcon(
                      showWhen: local!isSelected,
                      icon: "check-square-o-alt",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    )
                  }
                )
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  value: {
                    a!richTextItem(
                      text: "2019 Lexus ES350",
                      style: "STRONG",
                      size: "MEDIUM"
                    ),
                    char(10),
                    a!richTextItem(
                      text: "Time for tire rotation"
                    )
                  }
                )
              )
            }
          )
        },
        height: "AUTO",
        style: "ACCENT",
        marginBelow: "STANDARD"
      )
    }
  )
)

    4 replies

    amans0009
    amans0009
    February 23, 2023

    try this

    {
  a!cardLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              /*this will work as margin*/
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: { repeat(1, char(10)) },
                marginBelow: "NONE"
              ),
              a!checkboxField(
                labelPosition: "ABOVE",
                choiceLabels: { "" },
                choiceValues: { 1 },
                saveInto: {},
                validations: {}
              )
            }
          ),
          a!columnLayout(contents: {}),
          a!columnLayout(
            contents: {
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  a!richTextItem(
                    text: { "2019 Lexus OP" },
                    size: "LARGE",
                    style: { "STRONG" }
                  ),
                  char(10),
                  a!richTextItem(
                    text: { "Lorem Ipsum Random text" },
                    size: "MEDIUM"
                  )
                },
                align: "CENTER"
              )
            }
          )
        }
      )
    },
    height: "AUTO",
    style: "ACCENT",
    padding: "EVEN_LESS",
    marginBelow: "STANDARD"
  )
}

    N
    nareshs945Answer
    February 23, 2023

    Try with this code It might helpful.

    Option 1

    a!localVariables(
  local!isSelected: false,
  a!sectionLayout(
    label: "Select a Product",
    isCollapsible: true,
    contents: {
      a!cardLayout(
        contents: {
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  value: {
                    a!richTextIcon(
                      showWhen: not(local!isSelected),
                      icon: "square-o",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    ),
                    a!richTextIcon(
                      showWhen: local!isSelected,
                      icon: "check-square-o-alt",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    ),
                    char(9),
                    a!richTextItem(
                      text: "2019 Lexus ES350",
                      style: "STRONG",
                      size: "MEDIUM"
                    ),
                    char(10),
                    a!richTextItem(
                      text: "Time for tire rotation"
                    )
                  }
                )
              )
            }
          )
        },
        height: "AUTO",
        style: "ACCENT",
        marginBelow: "STANDARD"
      )
    }
  )
)

    Option 2

    a!localVariables(
  local!isSelected: false,
  a!sectionLayout(
    label: "Select a Product",
    isCollapsible: true,
    contents: {
      a!cardLayout(
        contents: {
          a!sideBySideLayout(
            alignVertical: "MIDDLE",
            items: {
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "LEFT",
                  value: {
                    a!richTextIcon(
                      showWhen: not(local!isSelected),
                      icon: "square-o",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    ),
                    a!richTextIcon(
                      showWhen: local!isSelected,
                      icon: "check-square-o-alt",
                      size: "MEDIUM",
                      linkStyle: "STANDALONE",
                      link: a!dynamicLink(
                        saveInto: {
                          a!save(local!isSelected, not(local!isSelected))
                        }
                      )
                    )
                  }
                )
              ),
              a!sideBySideItem(
                item: a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "RIGHT",
                  value: {
                    a!richTextItem(
                      text: "2019 Lexus ES350",
                      style: "STRONG",
                      size: "MEDIUM"
                    ),
                    char(10),
                    a!richTextItem(
                      text: "Time for tire rotation"
                    )
                  }
                )
              )
            }
          )
        },
        height: "AUTO",
        style: "ACCENT",
        marginBelow: "STANDARD"
      )
    }
  )
)

      M
      man0001Author
      February 23, 2023

      Thank you, Aman and Naresh!! The solution that I was looking for is Naresh's Option 2.  Aman's worked for alignment of the components but the checkbox value disappeared when the component lost focus - I realize that is a simple fix but for a newbie it took time.

      amans0009
      amans0009
      February 23, 2023

      [emoticon:6f61a5a028b641cb925f8551a1059cc2]

      Terms & ConditionsAccessibility statement