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&#237;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&#237;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"
)

Dave Lewis · Answer

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.

Duplicate an interface when user click button.

Top Replies