Open another sort-able table from a sort-able table

Question

Hi all, 
 This is my design: 
 1. the 1st screen display only table A which is able to sort. 
 2. By clicking a link in a column, table B which shows other details of the previous selection, and is able to sort, would be displayed. 
 
 Requirements: 
 1. table A and Table B should be 2 UI objects and be put together in a Master UI 
 
 Here are my codes 
 1. Master page: 
 load(
 a!formLayout(
 label: "Master Table,
 contents: {
 
 a!columnLayout(
 contents:{
 
 /*Section A*/
 rule!uiSectionA(
 viewObj : ri!viewObj
 ),
 
 with(
 /*Section B*/
 rule!uiSectionB(
 viewObj : ri!viewObj
 )
 )
 }
 )
 }
 )
 ) 
 2. Section A 
 load(
 local!objGrp: rule!APP_queryViewObjGrpbyIsActive(
 isActive: 1
 ),
 local!selObj,
 local!objGrpGridSel: a!gridSelection(
 pagingInfo: a!pagingInfo(
 startIndex: 1,
 batchSize: 5
 ),
 selected:local!selObj
 ),
 a!sectionLayout(
 label: "Obj",
 contents: {
 /*Obj Grid*/
 with(
 local!pagedobjGrp: todatasubset(
 local!objGrp,
 local!objGrpGridSel.pagingInfo
 ),
 local!pagedobjGrpData: local!pagedobjGrp.data,
 {
 a!gridField(
 label: " Obj List",
 labelPosition: "ABOVE",
 totalCount: length(
 local!objGrp
 ),
 columns: {
 a!gridTextColumn(
 label: "Obj Id",
 field: "ObjDspid",
 data: index(local!pagedobjGrpData,"ObjDspid",{})
 ),
 a!gridTextColumn(
 label: "Obj Abbreviation",
 field: "ObjAbbv",
 data: index(local!pagedobjGrpData,"ObjAbbv",{}),
 links: apply(
 a!dynamicLink(
 value: _,
 saveInto: ri!viewObj
 ),
 local!pagedobjGrpData
 )
 )
 },
 identifiers: data: index(local!pagedobjGrpData,"id",{}),
 value: local!objGrpGridSel,
 saveInto: local!objGrpGridSel,
 selection:ri!isselObj,
 validations: {},
 shadealternaterows: true,
 spacing: "STANDARD",
 borderstyle: "STANDARD"
 )
 }
 )
 }
 )
) 
 
 3. Section B 
 
 load(
 local!SubObj: if(
 rule!COM_isBlank(ri!viewObj),
 {},
 rule!APP_queryRulesbyPolicyIdnIsActive(isActive: 1,policyId : index(ri!viewObj,"id",{}))
 ),
 local!SubObjGridSel: a!gridSelection(pagingInfo: a!pagingInfo(1,10)),
 a!sectionLayout(
 label: "Rules",
 showWhen: not(rule!COM_isBlank(ri!viewObj)),
 contents: {
 with(
 
 local!pagedSubObj: todatasubset(
 local!SubObj,
 local!SubObjGridSel.pagingInfo
 ),
 local!pagedSubObjData: local!pagedSubObj.data,
 local!pagedSubObjDataCatImg: a!forEach(
 items: index(
 local!pagedSubObjData,
 "ruleCat",
 {}
 ),
 expression: rule!COM_getSubObjCatIconAndColorByRuleCat(
 boolean: fv!item
 )
 ),
 {
 a!gridField(
 label: "Sub Obj List",
 labelPosition: "ABOVE",
 totalCount: length(
 local!SubObj
 ),
 columns: {
 a!gridTextColumn(
 label: "Rule ID",
 field: "ruleDspId",
 data: index(local!pagedSubObjData,"ruleDspId",{})
 ),
 a!gridImageColumn(
 label: "Rule Category",
 field: "ruleCat",
 data: apply(
 a!documentImage(
 document: _
 ),
 merge(
 apply(
 a!iconIndicator,
 local!pagedSubObjDataCatImg
 )
 )
 )
 ),
 a!gridTextColumn(
 label: "Rule Name",
 field: "ruleName",
 data: index(local!pagedSubObjData,"ruleName",{})
 ),
 a!gridTextColumn(
 label: "Rule Description",
 field: "ruleDesc",
 data: index(local!pagedSubObjData,"ruleDesc",{})
 ),
 
 },
 identifiers: index(local!pagedSubObj.data,"id",{}),
 value: local!SubObjGridSel,
 saveInto: local!SubObjGridSel,
 validations: {},
 shadealternaterows: true,
 spacing: "STANDARD",
 borderstyle: "STANDARD"
 )
 }
 )
 }
 )
 )

I have read the following case but it is still a bit confuse to me: 
 https://community.appian.com/discussions/f/user-interface/11603/load-and-with-function-difference 
 
 Any response would be appreciated. Thanks in advance.

Jayapriya Muthu · Accepted Answer

Hi, Please change your master rule like below sample 
 load( 
local!objGrpGridSel: a!gridSelection(
pagingInfo: a!pagingInfo(
startIndex: 1,
batchSize: 5
),
selected:local!selObj
),
local!SubObjGridSel: a!gridSelection(pagingInfo: a!pagingInfo(1,10)),
a!formLayout(
label: "Test Form",
contents: {
/*Section A*/
rule!uiSectionA(
viewObj: ri!viewObj
),
if(
isnull(index(local!objGrpGridSel,"selected",null),
{},
/*Section B*/
rule!uiSectionB(
viewObj: ri!viewObj
)
)
}
) 
 Keep both the gridSelection declarations in master rule. So that whenever any row is selected in section A grid the identifier will be saved in gridSelection.selected. We can use that value in master rule, based on that display section B rule. 
 
 Small hint for load and with function 
 Load() function= Expression evaluation will be done only on the first time With() function= Every time the expressions will be re-evaluated

joanneh · Answer

Thank you so much for your suggestion. 
 
 Although unfortunately that the codes do not fully work for me...but your explanation has made me clearer about the items and inspires me to come up with a solution later. :) 
 
 The solution I finally came up with is 
 1. Master 
 a!formLayout(
...
rule!SectionA(),
rule!SectionB()
) 
 2. Section A/B 
 load(
local!gridSel: a!gridSelection(pagingInfo: a!pagingInfo(1,10)),
with(
 local!gridData:ABC_querySthFromDB(ri!selObj),
 ...
 a!gridField(
 ...
 value:local!gridSel,
 saveInto:local!gridSel
 )
 )
 )

Thanks again for your help!!!