Columns Layout features in 17.2

RE: Columns Layout features in 17.2

harshav — Tue, 13 Jun 2017 12:03:04 GMT

Agreed :) and THank you :)

RE: Columns Layout features in 17.2

aloks0189 — Tue, 13 Jun 2017 11:53:15 GMT

I think we cannot do anything to that space, because when we use columnsLayout() then each column of them shares the equal space. However 17.2 UI is far better than the look and feel what we had til 17.1 v.

RE: Columns Layout features in 17.2

harshav — Tue, 13 Jun 2017 10:29:07 GMT

It is not the concept of working out Alok,i can easily place the grid in place of the link but it is not looking good in the real time for me. it is only that I am thinking about the space which comes into picture, what I understood is the space will be there and the look and feel is not coming good for me

RE: Columns Layout features in 17.2

aloks0189 — Tue, 13 Jun 2017 10:27:00 GMT

Why don't you replacing the Link with Grid in above code? I think that should work out

RE: Columns Layout features in 17.2

harshav — Tue, 13 Jun 2017 09:57:10 GMT

Thanks for the reply alok and that was great but what I was expecting is not this, we already tried this like calling the grid down of the links, but I am having the links in the full page of the form so when I call the grid down of those links it is looking odd, it would be perfect if we can get that grid in the place of "Click to show grid and further sections"

Thanks for the code any ways :)

RE: Columns Layout features in 17.2

aloks0189 — Tue, 13 Jun 2017 07:59:28 GMT

if i understood your design idea properly, then i think this might work for you.

load(
  local!grid: false(),
  local!secondLink: false(),
  local!items: {
    {
      "fName": "A",
      "lName": "A1"
    },
    {
      "fName": "B",
      "lName": "B1"
    }
  },
  a!formLayout(
    label: "Demo Form",
    contents: {
      a!sectionLayout(
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!columnsLayout(
                    columns: {
                      a!columnLayout(
                        contents: {
                          a!linkField(
                            links: a!dynamicLink(
                              label: "Link1",
                              value: true(),
                              saveInto: local!secondLink
                            )
                          ),
                          a!linkField(
                            links: a!dynamicLink(
                              label: "Link2",
                              value: true(),
                              saveInto: local!secondLink
                            )
                          ),
                          a!linkField(
                            links: a!dynamicLink(
                              label: "Link3",
                              value: true(),
                              saveInto: local!secondLink
                            )
                          ),
                          a!linkField(
                            links: a!dynamicLink(
                              label: "Link4",
                              value: true(),
                              saveInto: local!secondLink
                            )
                          )
                        }
                      ),
                      a!columnLayout(
                        contents: {
                          a!linkField(
                            links: a!dynamicLink(
                              label: "Click to Show grid and Further Sections",
                              value: true(),
                              saveInto: local!grid
                            )
                          )
                        },
                        showWhen: local!secondLink
                      ),
                      a!columnLayout(
                        contents: {
                          a!textField(
                            label: "Some Other Stuff"
                          )
                        },
                        showWhen: local!secondLink
                      )
                    }
                  )
                }
              )
            }
          )
        }
      ),
      a!sectionLayout(
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                    contents: {
                      a!gridLayout(
                        headerCells: {
                          a!gridLayoutHeaderCell(label: "First Name"),
                          a!gridLayoutHeaderCell(label: "Last Name")
                        },
                        rows: a!forEach(
                          items: local!items,
                          expression: a!gridRowLayout(
                            contents: {
                              a!textField(
                                value: fv!item.fName
                              ),
                              a!textField(
                                value: fv!item.lName
                              )
                            }
                          )
                        )
                      )
                    },
                    showWhen: local!grid
                  )
            }
          )
        }
      ),
      a!sectionLayout(
        label: "My Section",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "First Column"
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "First Column"
                  )
                }
              )
            }
          )
        },
        showWhen: local!grid
      )
    }
  )
)

RE: Columns Layout features in 17.2

aloks0189 — Mon, 12 Jun 2017 13:26:40 GMT

Can you attach the code so that it will be easy to debug

RE: Columns Layout features in 17.2

harshav — Mon, 12 Jun 2017 13:01:52 GMT

Hi Alok, we have tried using it, but what is exactly happening is , when I wrote a columnslayout and in which one column layout contains the links,
and the second column contains the remaining stuff
Due to which the section inside the second column layout and the grid are looking very small and the scroll bar is popping up which is making a space issues.

Can we design it without having any space issue.?

RE: Columns Layout features in 17.2

aloks0189 — Mon, 12 Jun 2017 07:01:34 GMT

Here you need to use a!columnsLayout() as well as a!columnLayout() in an efficient way. yes we can achieve this by calling multiple a!columnLayout() inside a!columnsLayout() where again the a!columnLayout() will contain the a!columnsLayout() as it's contents{}.

If you can prepare an interface and attach here, that will be easy to convert as per your desired one.