I want to call a Grid which is another interface into the main interface under SEARCH button. How do I achieve this?

Question

Main Interface:

load(
 local!DisplayGrid,
 local!Search,
 with(
 local!ShowWhen: not(
 or(
 rule!CFS_CheckIsNull(
 ri!CreditApplicationDetails.AccountName
 )
 )
 ),
 a!cardLayout(
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: {
 a!richTextIcon(
 icon: "user",
 size: "MEDIUM"
 ),
 " Account Details"
 },
 linkStyle: "STANDALONE",
 color: "STANDARD",
 style: "STRONG"
 )
 }
 ),
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!sideBySideLayout(
 items: {
 a!sideBySideItem(
 item: a!textField(
 label: "Name of Account",
 labelPosition: "ABOVE",
 value: ri!CreditApplicationDetails.AccountName,
 saveInto: ri!CreditApplicationDetails.AccountName,
 refreshAfter: "UNFOCUS",
 validations: {}
 )
 ),
 a!sideBySideItem(
 item: a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "Search",
 saveInto: {
 a!save(
 local!DisplayGrid,
 true()
 ),
 a!save(
 ri!Search,
 ri!CreditApplicationDetails.AccountName
 )
 },
 showWhen: local!ShowWhen,
 size: "SMALL",
 style: "NORMAL"
 )
 },
 align: "START"
 )
 )
 }
 )
 }
 )
 }
 )
 },
 marginbelow: "STANDARD"
 )
 )
) Child Interface:

load(
 local!SelectedItem,
 local!GridSelection: a!gridSelection(
 pagingInfo: a!pagingInfo(
 startIndex: 1,
 batchSize: - 1,
 sort: a!sortInfo(
 field: "CustomerId",
 ascending: true
 )
 )
 ),
 local!DisplayGrid,
 local!AccountGrid,
 local!datasubset: a!queryEntity(
 entity: cons!CFS_ALL_DS[7],
 query: a!query(
 selection: a!querySelection(
 columns: {
 /* Alias can be used to remane field*/
 a!queryColumn(
 field: "CustomerId"
 ),
 a!queryColumn(
 field: "AccountNo"
 ),
 a!queryColumn(
 field: "AccountName"
 ),
 a!queryColumn(
 field: "CreditRiskStatus"
 ),
 a!queryColumn(
 field: "Income"
 ),
 a!queryColumn(
 field: "Expenditure"
 ),
 a!queryColumn(
 field: "PreferredRepaymentMethod"
 )
 }
 ),
 pagingInfo: local!GridSelection.pagingInfo
 )
 ),
 with(
 a!cardLayout(
 showWhen: local!DisplayGrid,
 marginBelow: "STANDARD",
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: {
 a!richTextIcon(
 icon: "home",
 size: "MEDIUM"
 ),
 " Account Details"
 },
 linkStyle: "STANDALONE",
 color: cons!CFS_SECTION_HEADER_COLOUR,
 style: "STRONG"
 )
 }
 ),
 a!gridField(
 totalCount: local!datasubset.totalCount,
 emptyGridMessage: "No Security Present",
 columns: {
 a!gridTextColumn(
 label: "Client Id",
 data: index(
 local!datasubset.data,
 "CustomerId"
 )
 ),
 a!gridTextColumn(
 label: "Account Number",
 data: index(
 local!datasubset.data,
 "AccountNo",
 {}
 )
 ),
 a!gridTextColumn(
 label: "Account Name",
 data: index(
 local!datasubset.data,
 "AccountName",
 {}
 )
 ),
 a!gridTextColumn(
 label: "Risk Profile",
 data: index(
 local!datasubset.data,
 "CreditRiskStatus",
 {}
 )
 ),
 a!gridTextColumn(
 label: "Income",
 data: a!forEach(
 items: index(
 local!datasubset.data,
 "Income",
 {}
 ),
 expression: rule!CFS_FormatAmount(
 Amount: fv!item,
 Currency: local!datasubset.data.Currency
 )
 )
 ),
 a!gridTextColumn(
 label: "Expenditure",
 data: a!forEach(
 items: index(
 local!datasubset.data,
 "Expenditure",
 {}
 ),
 expression: rule!CFS_FormatAmount(
 Amount: fv!item,
 Currency: local!datasubset.data.Currency
 )
 )
 ),
 a!gridTextColumn(
 label: "Preferred Repayment Method",
 data: index(
 local!datasubset.data,
 "PreferredRepaymentMethod",
 {}
 )
 )
 },
 identifiers: local!datasubset.identifiers,
 validations: if(
 count(
 local!GridSelection.selected
 ) > 1,
 "You may only select one employee",
 null
 ),
 value: local!GridSelection,
 saveInto: {
 local!GridSelection,
 if(
 count(
 local!GridSelection.selected
 ) > 1,
 {},
 a!save(
 local!SelectedItem,
 index(
 save!value,
 "selected",
 null
 )
 )
 )
 },
 selection: true
 ),
 a!buttonLayout(
 /*secondaryButtons: {*/
 /*a!buttonWidget(*/
 /*label: "Close",*/
 /*showWhen: ri!ShowCancel,*/
 /*saveInto: {*/
 /*a!save(*/
 /*ri!BtnAction,*/
 /*null()*/
 /*)*/
 /*},*/
 /*style: "NORMAL"*/
 /*)*/
 /*},*/
 primaryButtons: {
 a!buttonWidget(
 label: "Submit",
 saveInto: {
 local!SelectedItem,
 a!save(
 ri!BtnAction,
 local!GridSelection.selected
 ),
 a!save(
 local!DisplayGrid,
 local!AccountGrid
 )
 },
 style: "NORMAL",
 submit: true,
 validate: true()
 )
 },
 align: "START"
 )
 }
 )
 )
) 
 I want to call a Grid which is another interface into the main interface under the SEARCH button. How do I achieve this? If someone can help.

erikm192 · Accepted Answer

Shobhit, 
 I didn't find any reference to rule input in your child interface. You have local!DisplayGrid in child but it is not set anywhere. 
 You have to do something like this: 
 CHILD INTERFACE 
 You have to create rule input of type boolean for incoming info if cardLayout should be displayed or not and set showWhen of cardLayout to this rule input 
 a!cardLayout(
 showWhen: ri!showWhen,
 contents: {
 a!richTextDisplayField(
 value: a!richTextItem(
 text: "This cardLayout is displayed when you click on search in main interface"
 )
 )
 }
) 
 MAIN INTERFACE 
 You have to call child here and pass to him local variable where you store info if grid should be displayed or not 
 load(
 local!showGrid: false,
 a!sectionLayout(
 contents: {
 a!buttonArrayLayout(
 buttons: a!buttonWidget(
 label: "SEARCH",
 value:true,
 saveInto: local!showGrid
 )
 ),
 rule!childInterface(
 showWhen: local!showGrid
 )
 }
 )
)