Skip to main content
judew0004
January 13, 2024
Solved

Interface to create record and related records

  • January 13, 2024
  • 4 replies
  • 0 views

I was reading this article, creating records and related records using a process model, and I wondered if the code for the form interface, Case, referred to in the article is available on the Appian Community for reference.

I'm working on a form (proof-of-concept) which has a similar structure as the Case form, i.e. a base record type and an editable grid of related record type on the form.

    Best answer by konduruc733182

    Hello judew0004,

    I am not sure if the exact same interface is available anywhere. But you can take a look at SAIL Recipes. and also you can look at how an editable grid is created.
    Add, Edit, and Remove Data in an Inline Editable Grid.

    Here instead of using the local variable with map, you can use the variable with your record type. in the items for looping use the same variable with indexing your related record type.

    {
      a!sectionLayout(
        label: " Employee Details",
        labelIcon: "users",
        labelSize: "MEDIUM_PLUS",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Employee Name",
                    labelPosition: if(ri!readonly, "JUSTIFIED", "ABOVE"),
                    instructions: "",
                    placeholder: " Enter Full Name",
                    value: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{086c3aa9-4707-428c-8f67-0cd649fca333}name'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{086c3aa9-4707-428c-8f67-0cd649fca333}name'],
                    refreshAfter: "UNFOCUS",
                    characterLimit: 50,
                    required: true,
                    readOnly: ri!readonly,
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!dateField(
                    label: "Date of Birth",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{5f924543-87a9-45e9-b329-c1fff1c9d303}dateOfBirth'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{5f924543-87a9-45e9-b329-c1fff1c9d303}dateOfBirth'],
                    required: true,
                    readOnly:ri!readonly,
                    validations: {
                      rule!VEMS_DobValidation(
                        ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{5f924543-87a9-45e9-b329-c1fff1c9d303}dateOfBirth']
                      )
                    }
                  )
                }
              )
            }
          ),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    choiceLabels: { "Male", "Female", "Other" },
                    choiceValues: { "Male", "Female", "Other" },
                    label: "Gender",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    placeholder: "--- Select  ---",
                    value: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{437d777c-e268-42a0-a969-f854da6edd96}gender'],
                    saveInto: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{437d777c-e268-42a0-a969-f854da6edd96}gender'],
                    searchDisplay: "AUTO",
                    required: true,
                    disabled: ri!readonly,
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    choiceLabels: cons!VEMS_LIST_OF_DEPARTMENT,
                    choiceValues: cons!VEMS_LIST_OF_DEPARTMENT,
                    label: "Department",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    placeholder: "--- Select a Department ---",
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{4f2067da-2429-43a9-a8ad-90635b741a73}department'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{4f2067da-2429-43a9-a8ad-90635b741a73}department'],
                    searchDisplay: "AUTO",
                    required: true,
                    disabled: ri!readonly,
                    validations: {}
                  )
                }
              )
            }
          ),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Phone Number",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{ce855515-439c-48c3-9258-d25980637291}phonenumber'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{ce855515-439c-48c3-9258-d25980637291}phonenumber'],
                    refreshAfter: "UNFOCUS",
                    required: true,
                    readOnly: ri!readonly
    
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Email Address",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    placeholder: "Eg: xyz@gmail.com",
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{352a9a98-23cd-49c3-abdb-462550659cff}emailaddress'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{352a9a98-23cd-49c3-abdb-462550659cff}emailaddress'],
                    refreshAfter: "UNFOCUS",
                    required: true,
                    readOnly: ri!readonly,
                    validations: {}
                  )
                }
              )
            }
          )
        },
        divider: "ABOVE"
      ),
      a!sectionLayout(
        label: " Employee Skills",
        labelIcon: "users",
        labelSize: "MEDIUM_PLUS",
        contents: {
          a!gridLayout(
            labelPosition: "COLLAPSED",
            headerCells: {
              a!gridLayoutHeaderCell(label: "Sl.No"),
              a!gridLayoutHeaderCell(label: "Skill"),
              a!gridLayoutHeaderCell(label: "Experience(add in months)"),
              a!gridLayoutHeaderCell(label: " ")
            },
            columnConfigs: {
              a!gridLayoutColumnConfig(width: "NARROW"),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
              a!gridLayoutColumnConfig(width: "ICON")
            },
            rows: {
              a!forEach(
                items: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'],
                expression: {
                  a!gridRowLayout(
                    id: fv!index,
                    contents: {
                      a!integerField(
                        value: fv!index,
                        saveInto: fv!item,
                        readOnly: true,
                        align: "CENTER"
                      ),
                      a!dropdownField(
                        placeholder: "-------Select-------",
                        choiceLabels: cons!VEMS_LIST_OF_SKILLS,
                        choiceValues: cons!VEMS_LIST_OF_SKILLS,
                        value: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{2360764d-6046-4dbd-bc85-ff4ce49d3a26}employeeSkill'],
                        saveInto: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{2360764d-6046-4dbd-bc85-ff4ce49d3a26}employeeSkill'],
                        disabled: ri!readOnly
                      ),
                      a!textField(
                        value: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{0e38da01-e723-49d8-9b7e-baa5a6938437}empExperience'],
                        saveInto: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{0e38da01-e723-49d8-9b7e-baa5a6938437}empExperience'],
                        readOnly: ri!readOnly
                      ),
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: "times",
                            link: a!dynamicLink(
                              /*value: fv!index,*/
                              saveInto: {
                                a!save(
                                  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'],
                                  remove(ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'], fv!index)
                                )
                              }
                            ),
                            linkStyle: "STANDALONE",
                            color: "NEGATIVE"
                          )
                        }
                      )
                    }
                  )
                }
              )
            },
            selectionSaveInto: {},
            addRowLink: a!dynamicLink(
              label: "Add",
              value: {
                'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details'(
                  'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{ce6373c1-e93c-4658-bd0d-804a271880e1}isActive': true(),
                  'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{dc6dd852-bcfd-4ce0-8a6a-2079f7289d3b}createdBy': loggedInUser(),
                  'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{320a3b2b-5c06-4c57-a318-755ddec13d6b}createdOn': now()
                )
              },
              saveInto: {
                a!save(
                  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'],
                  append(ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'], save!value)
                )
              }
            ),
            validations: {},
            shadeAlternateRows: true
          )
        },
        divider: "ABOVE"
      )
    }
     

    You can replace the rule input with your record type which has a one to many relationship and try modifying the above code a little.

    4 replies

    konduruc733182
    January 13, 2024

    Hello judew0004,

    I am not sure if the exact same interface is available anywhere. But you can take a look at SAIL Recipes. and also you can look at how an editable grid is created.
    Add, Edit, and Remove Data in an Inline Editable Grid.

    Here instead of using the local variable with map, you can use the variable with your record type. in the items for looping use the same variable with indexing your related record type.

    {
      a!sectionLayout(
        label: " Employee Details",
        labelIcon: "users",
        labelSize: "MEDIUM_PLUS",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Employee Name",
                    labelPosition: if(ri!readonly, "JUSTIFIED", "ABOVE"),
                    instructions: "",
                    placeholder: " Enter Full Name",
                    value: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{086c3aa9-4707-428c-8f67-0cd649fca333}name'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{086c3aa9-4707-428c-8f67-0cd649fca333}name'],
                    refreshAfter: "UNFOCUS",
                    characterLimit: 50,
                    required: true,
                    readOnly: ri!readonly,
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!dateField(
                    label: "Date of Birth",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{5f924543-87a9-45e9-b329-c1fff1c9d303}dateOfBirth'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{5f924543-87a9-45e9-b329-c1fff1c9d303}dateOfBirth'],
                    required: true,
                    readOnly:ri!readonly,
                    validations: {
                      rule!VEMS_DobValidation(
                        ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{5f924543-87a9-45e9-b329-c1fff1c9d303}dateOfBirth']
                      )
                    }
                  )
                }
              )
            }
          ),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    choiceLabels: { "Male", "Female", "Other" },
                    choiceValues: { "Male", "Female", "Other" },
                    label: "Gender",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    placeholder: "--- Select  ---",
                    value: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{437d777c-e268-42a0-a969-f854da6edd96}gender'],
                    saveInto: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{437d777c-e268-42a0-a969-f854da6edd96}gender'],
                    searchDisplay: "AUTO",
                    required: true,
                    disabled: ri!readonly,
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    choiceLabels: cons!VEMS_LIST_OF_DEPARTMENT,
                    choiceValues: cons!VEMS_LIST_OF_DEPARTMENT,
                    label: "Department",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    placeholder: "--- Select a Department ---",
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{4f2067da-2429-43a9-a8ad-90635b741a73}department'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{4f2067da-2429-43a9-a8ad-90635b741a73}department'],
                    searchDisplay: "AUTO",
                    required: true,
                    disabled: ri!readonly,
                    validations: {}
                  )
                }
              )
            }
          ),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Phone Number",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{ce855515-439c-48c3-9258-d25980637291}phonenumber'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{ce855515-439c-48c3-9258-d25980637291}phonenumber'],
                    refreshAfter: "UNFOCUS",
                    required: true,
                    readOnly: ri!readonly
    
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Email Address",
                    labelPosition: if(ri!readOnly, "JUSTIFIED", "ABOVE"),
                    placeholder: "Eg: xyz@gmail.com",
                    value:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{352a9a98-23cd-49c3-abdb-462550659cff}emailaddress'],
                    saveInto:  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.fields.{352a9a98-23cd-49c3-abdb-462550659cff}emailaddress'],
                    refreshAfter: "UNFOCUS",
                    required: true,
                    readOnly: ri!readonly,
                    validations: {}
                  )
                }
              )
            }
          )
        },
        divider: "ABOVE"
      ),
      a!sectionLayout(
        label: " Employee Skills",
        labelIcon: "users",
        labelSize: "MEDIUM_PLUS",
        contents: {
          a!gridLayout(
            labelPosition: "COLLAPSED",
            headerCells: {
              a!gridLayoutHeaderCell(label: "Sl.No"),
              a!gridLayoutHeaderCell(label: "Skill"),
              a!gridLayoutHeaderCell(label: "Experience(add in months)"),
              a!gridLayoutHeaderCell(label: " ")
            },
            columnConfigs: {
              a!gridLayoutColumnConfig(width: "NARROW"),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
              a!gridLayoutColumnConfig(width: "DISTRIBUTE"),
              a!gridLayoutColumnConfig(width: "ICON")
            },
            rows: {
              a!forEach(
                items: ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'],
                expression: {
                  a!gridRowLayout(
                    id: fv!index,
                    contents: {
                      a!integerField(
                        value: fv!index,
                        saveInto: fv!item,
                        readOnly: true,
                        align: "CENTER"
                      ),
                      a!dropdownField(
                        placeholder: "-------Select-------",
                        choiceLabels: cons!VEMS_LIST_OF_SKILLS,
                        choiceValues: cons!VEMS_LIST_OF_SKILLS,
                        value: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{2360764d-6046-4dbd-bc85-ff4ce49d3a26}employeeSkill'],
                        saveInto: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{2360764d-6046-4dbd-bc85-ff4ce49d3a26}employeeSkill'],
                        disabled: ri!readOnly
                      ),
                      a!textField(
                        value: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{0e38da01-e723-49d8-9b7e-baa5a6938437}empExperience'],
                        saveInto: fv!item['recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{0e38da01-e723-49d8-9b7e-baa5a6938437}empExperience'],
                        readOnly: ri!readOnly
                      ),
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: "times",
                            link: a!dynamicLink(
                              /*value: fv!index,*/
                              saveInto: {
                                a!save(
                                  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'],
                                  remove(ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'], fv!index)
                                )
                              }
                            ),
                            linkStyle: "STANDALONE",
                            color: "NEGATIVE"
                          )
                        }
                      )
                    }
                  )
                }
              )
            },
            selectionSaveInto: {},
            addRowLink: a!dynamicLink(
              label: "Add",
              value: {
                'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details'(
                  'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{ce6373c1-e93c-4658-bd0d-804a271880e1}isActive': true(),
                  'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{dc6dd852-bcfd-4ce0-8a6a-2079f7289d3b}createdBy': loggedInUser(),
                  'recordType!{526c0399-5164-4501-8111-19fca15d53d6}VEMS Skill Details.fields.{320a3b2b-5c06-4c57-a318-755ddec13d6b}createdOn': now()
                )
              },
              saveInto: {
                a!save(
                  ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'],
                  append(ri!employeeDetails['recordType!{5580bdda-1ba5-4e31-a93d-684ad83c953b}VEMS Employee Details.relationships.{66ed5f3e-7088-481e-a6f1-2b3990358659}skillDetails'], save!value)
                )
              }
            ),
            validations: {},
            shadeAlternateRows: true
          )
        },
        divider: "ABOVE"
      )
    }
     

    You can replace the rule input with your record type which has a one to many relationship and try modifying the above code a little.

    judew0004
    judew0004Author
    January 13, 2024

    Thanks, [mention:2df2892a4df7486f9775b4d2f0e405fd:e9ed411860ed4f2ba0265705b8793d05], for the sample interface.  I was having issues placing the related record type fields correctly in the grid.  Your sample helped.  Much appreciated.

    konduruc733182
    January 15, 2024

    Great [mention:cc1e26a3dc0740c98c9d80cae7227f1d:e9ed411860ed4f2ba0265705b8793d05] . If my answer helped you please verify the above answer. Thanks

    stefanhelzle0001
    January 13, 2024

    Building such a form is one of the most basic things you can do in Appian. Browse Interface Recipes and the patterns palette in the UI designer to get started.