How to add an item to a list

Hi, I have an an app variable with variable value type List. When user click a button, I want to add an item to the variable list, how do I do this? I have googled and looked around, but can’t find any solution.


Add item to list

Returns new list which contains the given item at the end of the list. The item must match the schema of the list.

list = WITH_ITEM(list, item)


Hate to revive an old thread, @JOHN_WORSHAM, but this sounds like exactly what I’ve been struggling with for the past nine hours.

TLDR: Does the WITH_ITEM formula actually allow for the generation of new list components on the fly, including new variable sets where data can be stored? If so, where do you actually plug the formula in? Much obliged.

More context: I’m working to build an in-app editor page where multiple pre-created components such as paragraph fields, image URL fields, toggles, etc., can be “generated” into view by the end-users. That is to say, these components don’t exist until a specific trigger button is clicked from a sidebar – in much the same way as it works in Composer, sans the drag-and-drop element. Think of it like clearly-defined sections.

Each interactable component stores the user-created data in variables for eventual storage in the backend. Overall, it’s a workaround for the fact that one cannot directly embed images and links in text, so I’m providing a way to do it manually.

Just imagine four of these boxes, each with different functions set into a holding container:

The trouble I’m having is generating (or “spawning”, if you like) said components to stack neatly one on top of the other in whatever order they were called.

I’ve got four of these components stacked in a master holding container. I need to:
A. Generate the overall holding container.
B. Set the three unused components to hidden so that only the intended one (input field, for example) is shown.
C. Then, should the user choose to add more, generate additional overall holding containers with whatever sub-component visibility value is set to stack neatly under the first.
D: Limit the number of overall components to 10.

I’ve considered three different approaches, including:

  1. “Naked” Boolean controls where there are, literally, 10 holding containers, initially invisible, and formulas/variables control each’s visibility depending on user choice. Sub-values control the visibility of the child components.

  2. Some convoluted method that theoretically should’ve worked involving AG’s new approach to repeated composite components, then connected via their properties to variables controlled by the sidebar buttons of the editor. Didn’t work, time probably wasted, bad taste in mouth.

  3. Current experimental method of using a non-composite repeated list with, as before, a master holding container with the four child components. Anytime in the app the button is clicked to generate an input field, for example, it does work. Problem is, when I then click the button I’ve set up to generate, say, an image upload interface below the first component, it outright replaces the input field.

So is there a way to just stack each new component container in a list one after the other up until the 10-count limit, while also not, well, repeating any compatible text typed in one input in another input altogether? Are repeated lists even the way to go on that front?

Much obliged to anyone who wants to jump in the muck with me! :slight_smile:
Good night.

If you have a list of objects then It adds a new object (same schema) to the end of that list. You would just use a Set App/Page Variable flow function to do that.

So if you have a list of objects variable named HoldContainer which contains a list of objects named SubContainer then to add more SubContainers you would just set the variable like this: HoldContainer = WITH_ITEM(HoldContainer.SubContainer, newSubContainer).

@JOHN_WORSHAM John, I really do appreciate the response. All the same, if you would, kindly explain like I’m 8.

Every time you used HoldContainer or SubContainer in the formula, that requires the appropriate page variable in full, yes? So based on my own variables in the picture below, that would’ve been your formula, HoldContainer = WITH_ITEM(HoldContainer.SubContainer, newSubContainer),
becoming my own, pageVars.nodeList == WITH_ITEM(pageVars.nodeList, ???)

(It was automatically invalid with one equal sign, thus, I added two which let the formula be saved.)
But then, what is the last ??? part? It sounds like I have to specify a number, but can’t I just have the number increase incrementally with each button press to add a component to the list?

Could you write the formula code out a little more directly and with preformatted text, and then specify what that last part was?
Thank you.

Use a Set Page Variable flow function to set nodeList to = the formula: WITH_ITEM(nodeList, newnodeObject)

1 Like