• State Suggested Answer
  • Replies 9 replies
  • Answers 2 answers
  • Subscribers 8 subscribers
  • Views 5792 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

How to show the results in fixed box

kirankumard0001

I have a requirement that in a screen, I have to populate around 20 to 30 results(example shown in the end how to show the data in each box) each in a box / layouts. 

When I populated the data in the UI for 20 results, the screen is expanding Vertically till the last results. what we need is to have fixed components (layout / section / anything) to show all the results in one BOX and user can scroll only that box to see all the results instead of scrolling the entire screen. Also the UI looks very bad as the other parts of the screen is adjusted according to the results.

1.

Name: XXX

Age: XX

Gender: XXX

City: XXX

State: XXX

2. 

Name:

Age:

Gender:

City:

State

  Discussion posts and replies are publicly visible

Parents
  • 0
    A Score Level 2
     

    load(
local!data: {
{
Name: "ABC",
Age: 20,
Gender: "Male",
City: "City",
State: "State",

},
{
Name: "XYZ",
Age: 25,
Gender: "Male",
City: "City",
State: "State",

},
{
Name: "MNO",
Age: 30,
Gender: "Male",
City: "City",
State: "State",

}
},
a!sectionLayout(
label: "",
contents: {
a!cardLayout(
contents: {
a!forEach(
items: local!data,
expression: a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(
text: concat(
"User Details ",
fv!index
),
style: "STRONG",
color: "ACCENT"
)
),
a!textField(
label: "Name",
value: fv!item.Name,
readOnly: true(),
labelPosition: "ADJACENT"
),
a!textField(
label: "Age",
value: fv!item.Age,
readOnly: true(),
labelPosition: "ADJACENT"
),
a!textField(
label: "Gender",
value: fv!item.Gender,
readOnly: true(),
labelPosition: "ADJACENT"
),
a!textField(
label: "City",
value: fv!item.City,
readOnly: true(),
labelPosition: "ADJACENT"
),
a!textField(
label: "State",
value: fv!item.State,
readOnly: true(),
labelPosition: "ADJACENT"
)
}
)
}
)
)
},
height: "MEDIUM"
)
}
)
)

  • 0
    A Score Level 1
     in reply to kirankumard0001

    Hope below code will be helpful to you.

    load(
  local!data: {
    {
      Name: "ABC",
      Age: 20,
      Gender: "Male",
      City: "City",
      State: "State",
      
    },
    {
      Name: "XYZ",
      Age: 25,
      Gender: "Male",
      City: "City",
      State: "State",
      
    },
    {
      Name: "MNO",
      Age: 30,
      Gender: "Male",
      City: "City",
      State: "State",
      
    }
  },
  a!sectionLayout(
    label: "",
    contents: {
      a!cardLayout(
        contents: {
          a!forEach(
            items: local!data,
            expression: a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!sideBySideLayout(
                      items: {
                        a!sideBySideItem(
                          item: a!radioButtonField(
                            choiceLabels: {
                              ""
                            },
                            choiceValues: {
                              true
                            }
                          ),
                          width: "MINIMIZE"
                        ),
                        a!sideBySideItem(
                          item: a!richTextDisplayField(
                            value: {
                              a!richTextItem(
                                text: concat(
                                  "Name : ",
                                  fv!item.Name
                                )
                              ),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "Age : ",
                                  fv!item.Name
                                )
                              ),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "Gender: ",
                                  fv!item.Gender
                                )                              ),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "City :",
                                  fv!item.City
                                )),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "State:",
                                  fv!item.City
                                ))
                              
                            }
                          )
                        )
                      }
                    )
                  }
                )
              }
            )
          )
        },
        height: "MEDIUM"
      )
    }
  )
)

    Thanks

    Madhu

Reply
  • 0
    A Score Level 1
     in reply to kirankumard0001

    Hope below code will be helpful to you.

    load(
  local!data: {
    {
      Name: "ABC",
      Age: 20,
      Gender: "Male",
      City: "City",
      State: "State",
      
    },
    {
      Name: "XYZ",
      Age: 25,
      Gender: "Male",
      City: "City",
      State: "State",
      
    },
    {
      Name: "MNO",
      Age: 30,
      Gender: "Male",
      City: "City",
      State: "State",
      
    }
  },
  a!sectionLayout(
    label: "",
    contents: {
      a!cardLayout(
        contents: {
          a!forEach(
            items: local!data,
            expression: a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!sideBySideLayout(
                      items: {
                        a!sideBySideItem(
                          item: a!radioButtonField(
                            choiceLabels: {
                              ""
                            },
                            choiceValues: {
                              true
                            }
                          ),
                          width: "MINIMIZE"
                        ),
                        a!sideBySideItem(
                          item: a!richTextDisplayField(
                            value: {
                              a!richTextItem(
                                text: concat(
                                  "Name : ",
                                  fv!item.Name
                                )
                              ),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "Age : ",
                                  fv!item.Name
                                )
                              ),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "Gender: ",
                                  fv!item.Gender
                                )                              ),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "City :",
                                  fv!item.City
                                )),
                              char(
                                10
                              ),
                              a!richTextItem(
                                text: concat(
                                  "State:",
                                  fv!item.City
                                ))
                              
                            }
                          )
                        )
                      }
                    )
                  }
                )
              }
            )
          )
        },
        height: "MEDIUM"
      )
    }
  )
)

    Thanks

    Madhu

Children
No Data

© 2024 Appian. All rights reserved.