I want to make UI where two grid will be shown grid 1 will have all data and grid 2 will be initially empty. In grid 1 we have checkbox where we can select different row and when we click add button then all selected items will be transferred to the second grid and selected item will be deleted from grid 1.
Discussion posts and replies are publicly visible
There is a pattern waiting for you in Interface designer called "Dual Picklist".
you can take references from this Interface pattern Dual pickList.
Just an example of how you can implement the dual picklist pattern in terms of grids.
a!localVariables( local!availableList: { a!map(id: 11, name: "Item 1"), a!map(id: 21, name: "Item 2"), a!map(id: 31, name: "Item 3"), a!map(id: 51, name: "Item 5"), a!map(id: 61, name: "Item 6") }, local!selectedList: {}, local!availableListChoices: {}, local!selectedListChoices: {}, { a!sectionLayout( label: "Items", labelSize: "SMALL", labelColor: "SECONDARY", contents: { a!columnsLayout( columns: { a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { "Available", " ", a!richTextItem( text: "(" & length(local!availableList) & ")", style: "STRONG" ) } ), a!cardLayout( contents: { a!gridField( data: local!availableList, columns: { a!gridColumn( label: "Items", value: fv!row.name, sortField: fv!currentPage ) }, selectable: true, selectionSaveInto: { a!save( local!availableListChoices, if( a!isNotNullOrEmpty(save!value), index( index( local!availableList, save!value, null() ), "id", null() ), null() ) ) }, selectionValue: wherecontains( tointeger(local!availableListChoices), index(local!availableList, "id", tointeger(null())) ) ) }, height: "TALL", marginBelow: "STANDARD" ) }, width: "MEDIUM" ), a!columnLayout( contents: { a!buttonArrayLayout( buttons: { a!buttonWidget( label: "Add Selected", icon: if( a!isPageWidth("PHONE"), "chevron-down", "chevron-right" ), saveInto: { /* Add chosen available items to selected list */ a!save( target: local!selectedList, value: cast( typeof(local!selectedList), todatasubset( arrayToPage: append( local!selectedList, index( local!availableList, wherecontains( local!availableListChoices, local!availableList.id ), {} ) ), pagingConfiguration: a!pagingInfo( startIndex: 1, batchSize: - 1, sort: a!sortInfo(field: "id", ascending: true) ) ).data ) ), /* Remove from available list */ a!save( local!availableList, remove( local!availableList, wherecontains( local!availableListChoices, local!availableList.id ) ) ), /* Clear out choices */ a!save(local!availableListChoices, null) }, width: "FILL", style: "SECONDARY", disabled: or( a!isNullOrEmpty(local!availableListChoices), length(local!availableList) = 0 ) ), a!buttonWidget( label: "Add All", icon: "plus", saveInto: { /* Add all available items to selected list */ a!save( target: local!selectedList, value: cast( typeof(local!selectedList), todatasubset( arrayToPage: append(local!selectedList, local!availableList), pagingConfiguration: a!pagingInfo( startIndex: 1, batchSize: - 1, sort: a!sortInfo(field: "id", ascending: true) ) ).data ) ), /* Clear available list */ a!save(local!availableList, {}), /* Clear out choices */ a!save(local!availableListChoices, null) }, width: "FILL", style: "SECONDARY", disabled: length(local!availableList) = 0 ) }, align: "START", marginBelow: "EVEN_MORE" ), a!buttonArrayLayout( buttons: { a!buttonWidget( label: "Remove Selected", icon: if( a!isPageWidth("PHONE"), "chevron-up", "chevron-left" ), saveInto: { /* Add chosen selected items to available list */ a!save( target: local!availableList, value: cast( typeof(local!availableList), todatasubset( arrayToPage: append( local!availableList, index( local!selectedList, wherecontains( local!selectedListChoices, local!selectedList.id ), {} ) ), pagingConfiguration: a!pagingInfo( startIndex: 1, batchSize: - 1, sort: a!sortInfo(field: "id", ascending: true) ) ).data ) ), /* Remove from selected list */ a!save( local!selectedList, remove( local!selectedList, wherecontains( local!selectedListChoices, local!selectedList.id ) ) ), /* Clear out choices */ a!save(local!selectedListChoices, null) }, width: "FILL", style: "SECONDARY", disabled: or( a!isNullOrEmpty(local!selectedListChoices), length(local!selectedList) = 0 ) ), a!buttonWidget( label: "Remove All", icon: "times", saveInto: { /* Add all selected items to available list */ a!save( target: local!availableList, value: cast( typeof(local!availableList), todatasubset( arrayToPage: append(local!availableList, local!selectedList), pagingConfiguration: a!pagingInfo( startIndex: 1, batchSize: - 1, sort: a!sortInfo(field: "id", ascending: true) ) ).data ) ), /* Clear selected list */ a!save(local!selectedList, {}), /* Clear out choices */ a!save(local!selectedListChoices, null) }, width: "FILL", style: "SECONDARY", disabled: length(local!selectedList) = 0 ) }, align: "START" ) }, width: "NARROW" ), a!columnLayout( contents: { a!richTextDisplayField( labelPosition: "COLLAPSED", value: { "Selected", " ", a!richTextItem( text: "(" & length(local!selectedList) & ")", style: "STRONG" ) } ), a!cardLayout( contents: { a!gridField( data: local!selectedList, columns: { a!gridColumn( label: "Items", value: fv!row.name, sortField: fv!currentPage ) }, selectable: true, selectionSaveInto: { a!save( local!selectedListChoices, if( a!isNotNullOrEmpty(save!value), index( index( local!selectedList, save!value, null() ), "id", null() ), null() ) ) }, selectionValue: wherecontains( tointeger(local!selectedListChoices), index(local!selectedList, "id", tointeger(null())) ) ) }, height: "TALL", marginBelow: "STANDARD" ) }, width: "MEDIUM" ), a!columnLayout(contents: {}) }, alignVertical: "MIDDLE" ) } ) } )
It's really helpful. Thank you so much.