Step-by-Step #10: Reusable interface Expression Error (Column Layout vs Form Layout)

As is implied by the error message, a Form Layout component cannot be nested under any other component.  It seems like your "Vehicle Details View" interface has a FormLayout in it, yet you're trying to add it to a column.

Thanks Mike for quick reply. 

Yes I got that point (as mentioned in subject that its form layout vs Column (not supporting). However, since the reusable 'Vehicle Details VIew' interface was created as per the instructions from the previous step by Step exercise and in this Step by Step10, following the same template as suggest in the guide. Now struggling on how to fix it ? Do I select a different form template OR do I got back to reusable component/ (i.e.  "Vehicle Details View" interface to change it to change ---still learning if I can do that but assuming that could be a option)

Can you check and share the code you have in the vehicle details interface. If its a reusable interface it should not have the formLayout() in it

Can you check and share the code you have in the vehicle details interface. If its a reusable interface it should not have the formLayout() in it

Yes, you are right, it does have 'formLayout" (which I don't know why it does have it as "all I did was to follow the steps per guide"). Here is the code of reusable Vehicle details view:

a!formLayout(
contents: {
a!sectionLayout(
label: "",
contents: {
a!columnsLayout(
columns: {
a!columnLayout(
contents: {
a!textField(
label: "Make",
labelPosition: "ADJACENT",
value: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{7ab43035-9685-4ca5-806e-a6d591118654}make'],
saveInto: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{7ab43035-9685-4ca5-806e-a6d591118654}make'],
refreshAfter: "UNFOCUS",
validations: {},
readOnly: true
),
a!textField(
label: "Model",
labelPosition: "ADJACENT",
value: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{cb4240be-c39d-4fa7-a89f-59d97c8ddb44}model'],
saveInto: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{cb4240be-c39d-4fa7-a89f-59d97c8ddb44}model'],
refreshAfter: "UNFOCUS",
validations: {},
readOnly: true
),
a!textField(
label: "VIN",
labelPosition: "ADJACENT",
value: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{7ca57414-b924-4fc1-b689-425d4d43f131}vin'],
saveInto: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{7ca57414-b924-4fc1-b689-425d4d43f131}vin'],
refreshAfter: "UNFOCUS",
validations: {},
readOnly: true
),
a!integerField(
label: "Year",
labelPosition: "ADJACENT",
value: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{ffbd7cb6-c720-43ca-a33f-7b432558487a}year'],
saveInto: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{ffbd7cb6-c720-43ca-a33f-7b432558487a}year'],
refreshAfter: "UNFOCUS",
validations: {},
readOnly: true
),
a!integerField(
label: "Mileage",
labelPosition: "ADJACENT",
value: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{dd38d984-9041-4c65-b6bb-18d5d0081f3e}mileage'],
saveInto: ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{dd38d984-9041-4c65-b6bb-18d5d0081f3e}mileage'],
refreshAfter: "UNFOCUS",
validations: {},
readOnly: true
)
}
),
a!columnLayout(
contents: {
a!imageField(
label: "",
labelPosition: "ABOVE",
images: {
a!documentImage(
document: if(
a!isNullOrEmpty(
ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{54c34516-81ec-4357-8bf5-a623e974a7b2}image']
),
a!EXAMPLE_DOCUMENT_IMAGE(),
ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{54c34516-81ec-4357-8bf5-a623e974a7b2}image']
)
)
},
size: "MEDIUM",
style: "STANDARD",
isThumbnail: false
)
}
)
}
)
}
)
},
buttons: a!buttonLayout(
primaryButtons: {
a!buttonWidget(
label: "Approve",
saveInto: {
a!save(
ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{37adb28a-1a3c-48b9-a288-fddaa0520e7b}modifiedBy'],
loggedInUser()
),
a!save(
ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{a01a39c3-351d-48b9-a9c7-67f294d603e7}modifiedOn'],
today()
),
a!save(
/*ri!vehicle['recordType!{99b0bb09-e2c0-4f75-a70b-26f247e2d095-w0617aa}W0617AA Vehicle.fields.{56280f30-c682-425b-8b0f-367b116df7ee-w0617aa}aaVehicleStatusId']*/
ri!vehicle['recordType!{bff7d6f8-d62c-4600-b2a3-d120636b1ebf}W0617AKP_SA Vehicle.fields.{59766e22-16bf-4d17-a826-0064b434287f}statusId'],
1
),
a!save(
ri!approvalDecision,
true()
)

},
submit: true,
loadingIndicator: true,
style: "SOLID"
)
},
secondaryButtons: {
a!buttonWidget(
label: "Reject",
value: false,
saveInto: ri!approvalDecision,
validate: false,
submit: true,
style: "OUTLINE"
)
}
),
titleBar: a!headerTemplateFull(
title: " Review Vehicle",
secondaryText: "",
secondaryTextColor: "SECONDARY",
backgroundColor: "ACCENT"
),
contentsWidth: "MEDIUM",
showTitleBarDivider: false
)

FWIW, please insert code such as the above into a "code box" in comments here - it prevents it from making the thread unreadable due to length, and preserves formatting (make sure you paste in freshly-copied still-indented code).  If you click the "more" link at the bottom of your existing comment, you'll be able to edit it and switch it around, if you're willing.

Regarding your FormLayout - judging by the code you pasted, it looks as if it should be using FormLayout due to containing a "buttons" parameter (which only FormLayout has built-in); it makes me wonder whether the form you're supposed to be adding it to intends it to be a top-level interface or something else.  I haven't personally done the step-by-step instructions in question so I'm not really sure where those chips fall.

Remove the a!formLayout() wrapper from your reusable component. Keep only the a!sectionLayout() and its contents.
Your reusable component (WFSA_VehicleDetailsView) should start with a!sectionLayout(), not a!formLayout().

Thanks Mike , I will try this. 

Thanks Shubham Aware , I will try this 

Shubham Aware said:

Remove the a!formLayout() wrapper from your reusable component

Though structurally that won't really work if he requires the existing "Approve" and "Reject" buttons as currently seen on the form in question.  That's why I'm curious whether this isn't some larger structural issue, mix-up, and/or misunderstanding.