Columns Layout features in 17.2

Question

Hi All, 
 In the image below, we have a screen like the first image, where 
 1.the first column is having all the links from link 1 to link 11, on which when we click on the link, we will be getting a screen next to those links in other colum 
 2. Upon clicking the link the screen again will have 2 columns(3 columns in the whole screen including the links) 
 3. Upon clicking the link2 I need a grid and after that below I need a section with 2 columns. 
 
 Can this be achieved if so could you please let me know, I am using 17.2. I am little confused on the screen when we click on link 2(how to get the grid and columns below)

aloks0189 · Answer

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