• State Verified Answer
  • +2 person also asked this people also asked this
  • Replies 6 replies
  • Answers 1 answer
  • Subscribers 10 subscribers
  • Views 9345 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Collapsible sections

Srinivas Thota
Certified Lead Developer

Hi

Here is my scenario,

I am having section layouts in a interface both were collapsible initially,

When I select the one section it has to expand as usual, Same manner when I select the second section it should expand and other section should go back to collapsible state,

I looking for suggestions to done my task

  Discussion posts and replies are publicly visible

  • 0
    A Score Level 2
    Hi Srinivas, As far as I know there is not out of box functionality to do this, its default Appian behavior.
  • 0
    A Score Level 1
    Hi Srinivas,

    You can use the mentioned condition in the showWhen field inside the section layout component to acheive your requirement, for example:
    load(
    local!sectionvalue,
    with( a!formLayout(
    label:"Check Collapsiable Section Layout",
    contents: {
    a!sectionLayout(
    label:"Section 1",
    showWhen:if(tointeger(local!sectionvalue)=1,true,false())
    ),
    a!buttonLayout(
    secondaryButtons:a!buttonWidget(
    label:"expand section 1",
    saveInto:a!save(local!sectionvalue,1)
    )
    ),
    a!sectionLayout(
    label:"Section 2",
    showWhen:if(tointeger(local!sectionvalue)=2,true,false())
    ),
    a!buttonLayout(
    secondaryButtons:
    a!buttonWidget(
    label:"expand section 1",
    saveInto:a!save(local!sectionvalue,2)
    )
    )
    }
    )
    )
    )
  • 0
    Certified Senior Developer

    Hi, Please check the attached code sample. Just showed the idea using button with style as link. Use another flag/button to to shrink (-) the sections.

    Fullscreen Collapse Sample.txt Download 
    load(
  local!test: "first",
  a!formLayout(
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!sectionLayout(
                contents: {
                  a!buttonLayout(
                    a!buttonWidget(
                      label: "(+)",
                      style: "LINK",
                      value: "first",
                      saveInto: local!test
                    )
                  )
                }
              ),
              a!sectionLayout(
                label: "Section1",
                showWhen: local!test = "first",
                contents: {
                  a!textField(
                    label: "test1",
                    labelPosition: "ABOVE",
                    saveInto: {},
                    refreshAfter: "UNFOCUS",
                    validations: {}
                  )
                }
              ),
              a!sectionLayout(
                contents: {
                  a!buttonLayout(
                    a!buttonWidget(
                      label: "(+)",
                      style: "LINK",
                      value: "second",
                      saveInto: local!test
                    )
                  )
                }
              ),
              a!sectionLayout(
                label: "Section2",
                showWhen: local!test = "second",
                contents: {
                  a!textField(
                    label: "test2",
                    labelPosition: "ABOVE",
                    saveInto: {},
                    refreshAfter: "UNFOCUS",
                    validations: {}
                  )
                }
              )
            }
          ),
          
        }
      )
    }
  )
)

  • 0 in reply to Jayapriya Muthu
    Hi,
    We have inbuilt parameter called isCollapsible.enable that field is true.




    a!formLayout(
    contents: {
    a!columnsLayout(
    columns: {
    a!columnLayout(
    contents: {
    a!sectionLayout(
    label: "abc",
    contents: {
    a!textField(),
    },
    isCollapsible: true()
    )
    }
    ),

    }
    )
    }
    )


    Hope this will help.
    Thanks,
    Sudha.P
  • 0
    A Score Level 2
    Hey srinivas.

    There is no built in functionality for this. I would recommend pushing back against the requirement if possible, because any work-around you do will contrast with any other collapsible sections in your app.

    If that is not an option, I think that the best way to do this would be to use a!dynamicLink within an a!richTextItem to make a fake section header. You can set the style of the richTextItem to "HEADER_MEDIUM" or "HEADER_LARGE" to get something similar to a section header. The saveIntos should be similar to Rakesh's example. I think having a Link replace the section header would look a bit better, and be a bit more intuitive than having buttons near the section headers.

    I don't recommend doing this, but if you have to fulfill the requirement it should work.

    Thanks,
    Jake
  • 0 in reply to jacobm579
    Srinivas,

    I agree with Jake that pushing back on the requirement is the best course of action. If you need additional fodder to push back with, one of the biggest drawbacks to the dynamicLink approach is that if you have any validations within the sections, the user would be able to submit the form despite a failed validation if they hide the section in error, whereas the isCollapsible parameter of Appian would ensure that all validations are mitigated before submission. For this reason, the dynamicLink option is possible, but not scalable or in adherence to best practices. There are ways around this, by creating a separate validation framework within a with() statement, but it is over-engineering and is not very maintainable.

    With all of that being said, if you must move forward with the requirement, I agree with Jake's idea of the HEADER_MEDIUM richTextItem.

    Best,
    Ashvin

© 2024 Appian. All rights reserved.