Grid and Flexbox layout

RE: Grid and Flexbox layout

Amaan Shekh — Thu, 23 Feb 2023 17:18:01 GMT

😭

RE: Grid and Flexbox layout

MaNa — Thu, 23 Feb 2023 17:12:53 GMT

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.

RE: Grid and Flexbox layout

Naresh — Thu, 23 Feb 2023 16:55:15 GMT

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

RE: Grid and Flexbox layout

Amaan Shekh — Thu, 23 Feb 2023 16:44:44 GMT

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