Hi,
I have a editable grid where I have to show/hide icons as shown in below image based on some condition.
Code :
a!localVariables( local!users: { "User-1", "User-2", "User-3","User-4","User-5","User-6", "User-7", "User-8","User-9","User-10" }, local!timeValues : {"3:00 AM","3:30 AM","4:00 AM","4:30 AM","5:00 AM","5:30 AM","6:00 AM","6:30 AM","7:00 AM","7:30 AM","8:00 AM","8:30 AM","9:00 AM","9:30 AM","10:00 AM","10:30 AM","11:00 AM","11:30 AM","12:00 PM","12:30 PM","1:00 PM","1:30 PM","2:00 PM","2:30 PM","3:00 PM","3:30 PM","4:00 PM","4:30 PM","5:00 PM","5:30 PM","6:00 PM","6:30 PM","7:00 PM","7:30 PM","8:00 PM","8:30 PM","9:00 PM","9:30 PM","10:00 PM","10:30 PM","11:00 PM","11:30 PM","12:00 AM","12:30 AM","1:00 AM","1:30 AM","2:00 AM","2:30 AM"}, local!showHide: timevalue("5:00 AM")>totime("4:00 AM"), { a!gridLayout( labelPosition: "COLLAPSED", headerCells: { a!gridLayoutHeaderCell(label: "Time", align: "CENTER"), a!forEach( items: local!users, expression: a!gridLayoutHeaderCell(label: fv!item, align: "CENTER") ) }, columnConfigs: {}, rows: { a!forEach( items: local!timeValues, expression: { a!gridRowLayout( contents: { a!richTextDisplayField( label: "Time", labelPosition: "COLLAPSED", value: fv!item, align: "CENTER" ), a!localVariables( local!zoneTime: fv!item, a!forEach( items: local!users, expression: { a!localVariables( local!showHide: and(timevalue(local!zoneTime)>totime("4:00 AM"),timevalue(local!zoneTime)<totime("7:00 AM")), if(local!showHide, a!richTextDisplayField( labelPosition: "COLLAPSED", value: a!richTextIcon( icon: "check-circle-o", caption: "Test", color: "#800000", size: "STANDARD" ), align: "CENTER" ), a!textField(readOnly: true) ) ) } ) ) } ) } ) }, height: "TALL", validations: {}, shadeAlternateRows: true ) } )
The issue with this grid is as many RichTextIcons gets inserted based on condition the page loading time is increasing.
Please help me manage the page loading time.
Discussion posts and replies are publicly visible
I was able to reduce loading time from around 1300 ms to 600 ms range here is the code
a!localVariables( local!users: { "User-1", "User-2", "User-3","User-4","User-5","User-6", "User-7", "User-8","User-9","User-10" }, local!timeValues : {"3:00 AM","3:30 AM","4:00 AM","4:30 AM","5:00 AM","5:30 AM","6:00 AM","6:30 AM","7:00 AM","7:30 AM","8:00 AM","8:30 AM","9:00 AM","9:30 AM","10:00 AM","10:30 AM","11:00 AM","11:30 AM","12:00 PM","12:30 PM","1:00 PM","1:30 PM","2:00 PM","2:30 PM","3:00 PM","3:30 PM","4:00 PM","4:30 PM","5:00 PM","5:30 PM","6:00 PM","6:30 PM","7:00 PM","7:30 PM","8:00 PM","8:30 PM","9:00 PM","9:30 PM","10:00 PM","10:30 PM","11:00 PM","11:30 PM","12:00 AM","12:30 AM","1:00 AM","1:30 AM","2:00 AM","2:30 AM"}, local!lowerLimit:totime("4:00 AM"), local!upperLimit: totime("7:00 AM"), { a!gridLayout( labelPosition: "COLLAPSED", headerCells: { a!gridLayoutHeaderCell(label: "Time", align: "CENTER"), a!forEach( items: local!users, expression: a!gridLayoutHeaderCell(label: fv!item, align: "CENTER") ) }, columnConfigs: {}, rows: { a!forEach( items: local!timeValues, expression: { a!gridRowLayout( contents: { a!richTextDisplayField( label: "Time", labelPosition: "COLLAPSED", value: fv!item, align: "CENTER" ), a!localVariables( local!zoneTime: fv!item, a!forEach( items: local!users, expression: { a!localVariables( local!showHide: and(timevalue(local!zoneTime)>local!lowerLimit,timevalue(local!zoneTime)<local!upperLimit), if(local!showHide, a!richTextDisplayField( labelPosition: "COLLAPSED", value: a!richTextIcon( icon: "check-circle-o", caption: "Test", color: "#800000", size: "STANDARD" ), align: "CENTER" ), a!textField(readOnly: true) ) ) } ) ) } ) } ) }, height: "TALL", validations: {}, shadeAlternateRows: true ) } )