Duplicate an interface when user click button.

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ío"),
    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ío 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"
)
 

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer
    3 days ago

    Super simple way is something like following:

    local!interfaceTimes: 1,
    local!dataArray: {<insertDataHere>}
    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, <insertDataHere>)
        }
        ),
        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.

Reply
  • 0
    Certified Lead Developer
    3 days ago

    Super simple way is something like following:

    local!interfaceTimes: 1,
    local!dataArray: {<insertDataHere>}
    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, <insertDataHere>)
        }
        ),
        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.

Children
No Data