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
Hi, to suit your requirement use cardlayout() with height as "MEDIUM"/"SHORT" as you desire and place the fields inside the content. This way the space will be fixed and scroll bar will be available .
Hope it helps.
Sample code for your reference.
= load( local!guests: { "" }, a!formLayout( label: "Example: Add Text Components Dynamically", contents: { a!cardLayout( height: "MEDIUM", contents: a!forEach( items: local!guests, expression: a!textField( label: if( fv!isFirst, "Guest Names", "" ), value: fv!item, saveInto: { fv!item, if( fv!isLast, a!save( local!guests, append( local!guests, "" ) ), {} ) }, refreshAfter: "KEYPRESS" ) ) ) }, buttons: a!buttonLayout( primaryButtons: a!buttonWidget( label: "Submit", submit: true ) ) ) )
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" ) } ) )
Thank you so much Harsha!
Thank you very much Chaitanya!
Glad it helped.
As an extension of this requirement, we have to provide ability to select any one result. Is there any we can provide ability to have radiobuttons for each result and user can select?
Yes I think there should not be any problem in implementing this. But it depends on how the code is designed currently. If it is similar to what has mentioned below, then adding one more field that can store the radio button value to the local!data dictionary type can help you.
Then you can add validation in section to restrict selection of one result as Yes and all others as No.
If your design is different than this then we will need to current code implementation to help better.
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