• State Not Answered
  • Replies 4 replies
  • Subscribers 8 subscribers
  • Views 4593 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Sections under sections

Sunil Zacharia
Certified Lead Developer

Hi,

I have 9 section components spread across 3 rows and displayed in 3 adjacent columns.

Something like:

section1 | section2 | section3

section4 | section5 | section6

section7 | section8 | section9

All three are collapsible. Now, the user has to open each section one-by-one to view the data under the respective section.

Is there a way I can place each row under one main section and make only the main section collapsible so that the user has to only click once to see the sub-sections?

SectionA (collapsible)

section1 | section2 | section3

SectionB (collapsible)

section4 | section5 | section6

 

Please feel free to suggest alternatives (if any) to suffice this requirement.

 

Regards,

Sunil Zacharia

  Discussion posts and replies are publicly visible

Parents
  • 0
    A Score Level 2
    Hi Sunil Zacharia,

    I think below code useful for you and one more thing is not possible of section layout inside section layout....
    load(
    local!sectionnum:{1,2,3,4,5,6},
    {
    a!sectionLayout(
    label: "Section A",
    contents: {
    a!forEach(
    items: local!sectionnum,
    expression: with(
    local!LastIndex:fv!isLast,
    local!data1: fv!index - 1,
    a!columnsLayout(

    columns: {
    a!forEach(
    items: ldrop(
    local!sectionnum,
    (
    local!data1 * 3
    )
    ),
    expression: if(
    not(
    fv!index > 3
    ),
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    label: "",
    labelPosition: "ABOVE",

    value: {
    a!richTextItem(
    text: "section"&fv!index
    )

    }
    )
    },
    width: "NARROW"
    ),
    {}
    )
    )
    }

    )
    )

    )
    },
    isCollapsible: true(),
    isInitiallyCollapsed: true()
    ),
    a!sectionLayout(
    label: "Section B",
    contents: {
    a!forEach(
    items: local!sectionnum,
    expression: with(

    local!data1: fv!index - 1,
    a!columnsLayout(

    columns: {
    a!forEach(
    items: ldrop(
    local!sectionnum,
    (
    local!data1 * 3
    )
    ),
    expression: if(
    not(
    fv!index > 4
    ),
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    label: "",
    labelPosition: "ABOVE",

    value: {
    a!richTextItem(
    text: "section"&fv!itemCount+fv!index
    )

    }
    )
    },
    width: "NARROW"
    ),
    {}
    )
    )
    }

    )
    )

    )
    },
    isCollapsible: true(),
    isInitiallyCollapsed: true()
    )

    }

    )
Reply
  • 0
    A Score Level 2
    Hi Sunil Zacharia,

    I think below code useful for you and one more thing is not possible of section layout inside section layout....
    load(
    local!sectionnum:{1,2,3,4,5,6},
    {
    a!sectionLayout(
    label: "Section A",
    contents: {
    a!forEach(
    items: local!sectionnum,
    expression: with(
    local!LastIndex:fv!isLast,
    local!data1: fv!index - 1,
    a!columnsLayout(

    columns: {
    a!forEach(
    items: ldrop(
    local!sectionnum,
    (
    local!data1 * 3
    )
    ),
    expression: if(
    not(
    fv!index > 3
    ),
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    label: "",
    labelPosition: "ABOVE",

    value: {
    a!richTextItem(
    text: "section"&fv!index
    )

    }
    )
    },
    width: "NARROW"
    ),
    {}
    )
    )
    }

    )
    )

    )
    },
    isCollapsible: true(),
    isInitiallyCollapsed: true()
    ),
    a!sectionLayout(
    label: "Section B",
    contents: {
    a!forEach(
    items: local!sectionnum,
    expression: with(

    local!data1: fv!index - 1,
    a!columnsLayout(

    columns: {
    a!forEach(
    items: ldrop(
    local!sectionnum,
    (
    local!data1 * 3
    )
    ),
    expression: if(
    not(
    fv!index > 4
    ),
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    label: "",
    labelPosition: "ABOVE",

    value: {
    a!richTextItem(
    text: "section"&fv!itemCount+fv!index
    )

    }
    )
    },
    width: "NARROW"
    ),
    {}
    )
    )
    }

    )
    )

    )
    },
    isCollapsible: true(),
    isInitiallyCollapsed: true()
    )

    }

    )
Children
No Data

© 2024 Appian. All rights reserved.