Skip to main content
christianm8939
Participating Frequently
January 24, 2023
Question

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Ã%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"
)
 

    1 reply

    davel001150
    davel001150
    Inspiring
    January 24, 2023

    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.

      Terms & ConditionsAccessibility statement