Duplicate an interface when user click button.

Question

Hello, everyone!I'm trying to make an interface where you can select two dropdowns and attach a file, all these components are in another interface and I'm calling it into another interface (Main interface).
In the main interface I have three buttons, one in special has to duplicate the child interface that I mentioned before, I achieved to duplicated the child interface, but when I select an option on the different dropdowns, all the interfaces duplicated are deleted. Both interfaces have a rule input, but Interface Designer shows me an error if I select array option on the rule input, this happens in any of the interfaces.
a!localVariables(
  local!prefijo: {'type!{urn:com:appian:types:EMI}EMI_SUBIR_ARCHIVOS_DATA'()},
  local!dataLenght: 0,
  {
    rule!EMI_banner("Captura y EnvÃ%ADo"),
    rule!EMI_TituloReutilizable("Analista Independiente"),
    a!forEach(
      items: local!prefijo,
      expression: rule!EMI_BoxReutilizableAnalistaIndependiente(local!prefijo),
    ),
    a!buttonArrayLayout(
      buttons: {
        a!buttonWidget(
          label: "Limpiar",
          icon: "eraser",
          saveInto: {},
          submit: true,
          style: "DESTRUCTIVE",
          validate: false
        ),
        a!buttonWidget( style: "LINK", disabled: true ),
        a!buttonWidget(
          label: "Agregar otro archivo",
          icon: "plus",
          value: {
            prefijo: null,
            claveDeEmisora: null,
            archivoAdjuntado: null,
            trimestre: null
          },
          saveInto: a!save(local!prefijo, insert(local!prefijo, save!value, local!dataLenght + 1)),
          style: "SECONDARY",
          showWhen: {}
        ),
        a!buttonWidget( style: "LINK", disabled: true ),
        a!buttonWidget(
          label: "Enviar",
          icon: "send",
          saveInto: {},
          submit: true,
          style: "PRIMARY",
          validate: true
        )
      },
      align: "CENTER"
    )
  }
)
My child interface is this:
a!boxLayout(
  label: "EnvÃ%ADo de prefijo:",
  contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!dropdownField(
              label: "Prefijo:",
              labelPosition: "JUSTIFIED",
              placeholder: "-- Seleccione un prefijo --",
              choiceLabels: {"indopfn", "indrpfn", "indopin"},
              choiceValues: {"indopfn", "indrpfn", "indopin"},
              value: ri!prefijo_cdt.prefijo,
              saveInto: ri!prefijo_cdt.prefijo,
              required: true,
              requiredMessage: "Es necesario que seleccione un prefijo."
            ),

}
        ),
        a!columnLayout(contents: {}),
        a!columnLayout(width: "NARROW")
      }
    ),
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!dropdownField(
              label: "Emisora:",
              labelPosition: "JUSTIFIED",
              placeholder: "-- Seleccione una emisora --",
              choiceLabels: { "ACCELSA" },
              choiceValues: { "ACCELSA" },
              value: ri!prefijo_cdt.claveDeEmisora,
              saveInto: ri!prefijo_cdt.claveDeEmisora,
              required: true,
              requiredMessage: "Es necesario que seleccione una emisora."
            ),
            a!fileUploadField(
              label: "Cargar archivo:",
              labelPosition: "JUSTIFIED",
              required: true,
              value:ri!prefijo_cdt.archivoAdjunto,
              saveInto: ri!prefijo_cdt.archivoAdjunto,
              requiredMessage: "Es necesario que adjunte un archivo."
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!dropdownField(
              label: "Trimestre:",
              labelPosition: "JUSTIFIED",
              placeholder: "-- Seleccione un trimestre --",
              choiceLabels: { "2019-03 25/10/2019" },
              choiceValues: { "2019-03 25/10/2019" },
              required: true,
              value: ri!prefijo_cdt.trimestre,
              saveInto: ri!prefijo_cdt.trimestre,
              requiredMessage: "Es necesario que seleccione un trimestre.",
              showWhen: if(
                or(
                  ri!prefijo_cdt.prefijo = "indopin",
                  a!isNullOrEmpty(ri!prefijo_cdt.prefijo)
                ),
                false,
                true
              )
            )
          }
        ),
        a!columnLayout(width: "NARROW")
      }
    )
  },
  style: cons!ARQ_HEX_AZUL_BMV,
  showShadow: true,
  marginBelow: "MORE"
)

davel001150 · Answer

Super simple way is something like following:

local!interfaceTimes: 1,
local!dataArray: {}
a!sectionLayout(
contents: {
    a!buttonWidget(
    ...
    saveInto: {
        a!save(local!interfaceTimes, local!interfaceTimes + 1),
        /*This part is key, you have to append a new set of data to be the inputs
        and outputs of the second copy of the childInterface*/
        a!save(local!dataArray, append(local!dataArray, )
    }
    ),
    a!forEach(
        items: enumerate(local!interfaceTimes),
        expression: rule!myChildInterface(
            parameter1: index(local!dataArray, fv!index, {}),
            ...
        )
    )
}
)

You make judicious use of fv!index function variable to keep the inputs/outputs of each copy of the child interface straight. Without it, all of them might be displaying and editing the same value. I think that's the problem you're seeing in your case.

Sign up

Login with SSO

Login to the community

Login with SSO