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

Hi,

I am using Community Edition and  following the Appian Developer path. In for Step-By-Step # 10 I am getting expression error while adding the reusable component on a interface/form. 

I followed all the steps till this section and all works good. As per Step by Step #10, Guide I am trying to complete the following steps.

as soon as I click ok, above expression error message displayed. 

Any suggestions to fix this ? 

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    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)

  • 0
    Certified Lead Developer
    in reply to Devi Ram

    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

  • 0
    Certified Lead Developer
    in reply to Devi Ram

    Yeah, your "reusable interface" would either need to not contain an *a!formLayout()* component, or it would need to be the top-level component in any parent interface you utilize it in.  Unfortunately the screenshots you've provided here don't really clarify as to what the issue most likely is (though i'm betting it's the first one).

  • 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
    )

Reply
  • 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
    )

Children
  • 0
    Certified Lead Developer
    in reply to Devi Ram

    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.