"Repeat with" paragraph's property with dynamic binding to multiple page variables

Hello,

I have a search page with a suggestion bar, and it opens a product details page with the name of the product selected in the title. I already have a list of products with properties in my app variables. In the product details page, a page variable “selected_product” set from the page parameter “product_id” allows the app to show the name of the product as the title of my product details page.

In this product details page, I also want to show a list of specific details for each of my 400 different products. If I want to always show the same details for the different products, I just have to repeat a paragraph from a source for a list of objects with properties in the app or page variables. I know how to do that from a fixed list of objects with properties. I click on “repeat with” and bind it to the page variable list, and then I set the content of the paragraph to the property of data item in repeat.

But I want to repeat this paragraph from a source which depends on the product selected in the search page. For the title, as I mentioned above, it’s ok, it will show the product selected on the search page, but for my list of details, I want to show the properties of the selected product. But when I click on “repeat with”, I have to bind it to a given product page variable list, I’m not able to use the formula in order to inject the name of the selected product in the binding.

How could I inject the name of the product selected in the search page, in the binding of the “repeat with” paragraph’s property to the different page variables of my 400 products’ details? I prefer to have a general and dynamic product details page, as long as I have 400 products and I don’t want to create 400 different product details pages. My title is already dynamic and I would like to get the product details dynamic too.

Thanks!

Hi,

I’m not sure I completely understand, you have a details page for a single product and within that page you want to show different details depending on what product is chosen?

If you want to display object properties, repeat with won’t work. Repeat with can only be used for a list of objects, not properties of an object. If you want to show the properties, you’ll have to add title and paragraphs for each property you want to display.

Please correct me if I misunderstood something! :slight_smile:

Hi Cecilia,

Thanks for your reply! Yes, I have one product search page and one product details page, and I want my product details page to display the details of the product selected in the search page (among 400 different products).

I think I understand what you say, but I think it’s not exactly related with my concerns, so I will give you more information on my project, which, I hope, will complete the info of my first message.

I have a list of objects with properties as an app variable. Each object of the list is one of my 400 products and it has an id, a name and a category, as properties. This is the list from which my search is done in the first page, and the selected product comes from this list. The name of the product is then displayed on the product details page thanks to a page parameter.

In my product details page, I want to create 400 page variables, each one assigned to one of my 400 products (same products listed as objects in my app variable). So the names of the page variables are the name of my 400 products. And each page variable is a list of objects with 4 properties, an id, a name, a category and a specific value.

I have done exactly what is said in the power-up: Search bar with suggestions. So I have the name of the product selected in the search page as the title of my product details page. But I want to display the properties of the product selected in the search page. The problem is that when I want to select a source of list of objects with the “repeat with” function of the paragraph component, I can’t bind it to the page variable of the product selected in the search page, I just can bind it to a fixed page variable, so just one of my 400 products. I would like to link the “repeat with” source with the product selected, but it looks that’s it’s not possible. I tried with formula, but I can’t inject a variable in a variable, like…

The point is that I don’t want to create 400 product pages (because I guess it would generate issues, but maybe not?), I prefer to create a dynamic page, with a static canvas completed with the properties of the product selected in the search page. But I started to work on the option with 400 product pages. Will it be problematic for an app? I guess it will depend on the complexity of product properties, but each product will have a maximum of 100 items with 4 simple properties (name, id, category and a specific percentage performance). My logic is working, but do I really have to insert 400 “If condition” and “Open page” functions in order to open my 400 different product details pages?

I see! Thanks for giving more context, now I understand better :slight_smile:

I would not recommend creating 400 page variables or 400 different detail pages. It will affect the use of the app and the maintenance of the app will be very complicated. Instead, I would suggest you send the product id as the page parameter to the details page, create a page variable selected_product (or something like that) which is an object with same schema as your products. Then, in the Page focused event in your details page I would add a Set page variable node and use the page param id to find the correct product from the app variable. The formula FIND_BY_KEY would be useful here :slight_smile: Then you can just use the selected_product object and its properties to show all info about the product.

Thanks Cecilia,

  • I understand the issue with 400 pages variables or 400 product details page.
  • I did exactly what you suggested to me and it works :slight_smile:
  • But how can I build my variable structure in order to do the following? Is it possible to do that with just one app variable?

I have a list of 400 products. On the search page, the customer will select 1 product among these 400 products and it will open its product details page. In this opened page, I want to display 50 products (products among the 400 products) that match with the selected product. And I have to associate each matching product with a category (among 10 categories) and a matching strength (which is a percentage), because I want the customer to be able to filter the 50 matching products by category and matching strength.

I guess that’s why I wanted to achieve that with 400 page variables or 400 product details page :wink:

Thanks again for your help.

Hi,

I would check out the formula SELECT for getting the correct 50 products from your 400 product list. Also, here’s a tutorial video on creating a filtering system which I think would be helpful :slight_smile: I don’t think you need to change your variable structure at all to achieve this.

Yes, I’ve already watched and implemented this tutorial in my app, thanks.

1 The problem is that my “selected_product” is an object with 400 properties (keys/values where keys are the name of my matching products, and values are the matching strengths between the selected product and the matching products). It is an object because the formula FIND_BY_KEY finds an object from my list of objects of my app variable. But I have to sort and filter those 400 properties (keys/values) of my object, and only the formulas from the List type can do this (SELECT only works with lists of objects, not object’s properties). How could I convert those object’s properties into list of objects? I would be then able to use the repeat function too. But I think it won’t be possible… I tried with KEYS, VALUES, ZIP and FLATTEN but I didn’t succeed :frowning:

2 In this case, that it’s not possible, if I want to display the 400 properties, I would have to add 400 paragraphs manually, linked to the 400 properties of my “selected_product”, along with 400 paragraphs filled with the static name of my products, and also 400 other paragraphs filled with their static category. But how could I create a sorting and filtering system with those properties? I know how to do this, with a list of objects, but with a mix of static content and bound content, I’m wondering…

3 If I choose this way of building my app, I would have 2 pages (the product details page will have 1 200 paragraphs) + 1 app variable which is a list of 400 objects, each object with 400 properties (which makes 160 000 properties, which are numbers below 100) + 1 page variable which is an object with 400 properties. Will it really affect less the use of my app than having 400 pages or 400 page variables?

4 Is there any way to manage my 160 000 data by adding a data resource (a data resource that I create with airtable from my excel file)?

I really appreciate your support, as long as I want to implement my app with the best strategy :wink:

Hi,

Alright now I understand your case even better! Sorry for being so confused and not very helpful so far.

I would rethink my data structure, an object with 400 properties is not recommended along with 400 pages or 400 page variables. This will affect your app development, size, and performance quite significantly, I’m not sure if Composer will be able to handle that even.

I’m not sure what your data consists of and how the matching works, but I would consider just having one list of objects consisting of all products. When a product is selected and you move to the detail page, the list of products is filtered according to how well the products match with the selected one (maybe according to some properties of the products, whatever your strength criteria is!) Then you should be able to repeat the list of matching products without issues.

Could this approach work for you?

Thanks Cecilia.

I give you all the details concerning my app. My app is named Molecular Food Pairing. I have a list of ~400 ingredients (rice, chicken, avocado,…) divided in ~10 categories (cereal, meat, fruit,…). For each ingredient (rice), I know the ~400 percentages of shared aromatic molecules between this ingredient (rice) and all the other ~399 ingredients. Those ~400 percentages are the “pairing strengths” between the ingredient selected and all the other ~399 ingredients. And I have ~400 other pairing strengths between chicken and all the other ~399 ingredients, ~400 other pairing strengths between avocado and all the other ~399 ingredients,… When the user of my app selects one ingredient from the list (rice), I want to display a sorted (by descending pairing strength) list of the other ~399 ingredients’ name, with their respective pairing strength and category, and I want the user to be able to filter by category or to search by ingredient’s name.

That’s why I would need a list of 400 objects with 400 properties, I would need to be able to list the properties of my selected object, and then I would be able to filter and sort them…

Also, I want to let you know that I connected my app with Airtable and I created 2 data variables. I have one data variable which is the list of my ~400 ingredients with their respective ~400 pairing strengths (collection of data records), and another variable which is the ingredient selected with its ~400 pairing strengths (single data record). I don’t understand why, but Composer only shows 256 properties of my 400 Airtable values… Maybe it’s the maximum? Or maybe I can set this maximum? Working with data variable would be a better option for me I think. I don’t have to enter those values by hand, so the maintenance and update of my app will be greatly improved. I think the size and performance would be greatly improved too. But the problem is the same as mentioned above : in my product details page, once the user has selected his ingredient, I know how to display the ~400 ingredients’ names and their pairing strengths, but I’m not able to play with the properties (sort by pairing strength, filter by category or search by name) of the selected ingredient…

Hmm alright.

The data variables would be good to use, it does in fact help with the maintenance of the app. I have an idea to make this work (but still I highly recommend not showing all data at once, but instead showing only e.g. the top 10 most strength at once or show results according to the user search).

If I understood correctly your single data object would look something like this:

 "Rice":
     "chicken": "X"
     "avocado": "Y"
      ...

where X and Y would be the strengths. In the detail page, you can repeat the original list of objects, and display the strength with the help of a formula, something like LOOKUP(data.selectedProduct, current), depending on your exact schema. So at every object in the list, you check the strength value from the selected product’s properties and display it.

As for the 256 out of 400 properties, what do you mean by Composer only shows 265? Does the data variable only get 256 properties?

OK, but using the LOOKUP formula doesn’t allow me to then work with a list of objects I’ll be able to sort and filter… Actually, I’ll be able to filter my list of properties by playing with VISIBILITY of the rows, but is there any solution for sorting my list of properties by descending pairing strength? The function REPEAT WITH a list of properties (not only with a list of objects) would be a great improvement of AppGyver!

For the 256 out of 400 properties, I fixed the problem (I uploaded a .xls file in Airtable, thats has a maximum of 256 columns ;).

You could sort and filter the list of products, the lookup would only be used to display the strength and not affect the filtering. Maybe a more fit option would be to use the MAP function in the repeat to map the list of products and add a strength property to each item which you can access via LOOKUP. This way you can also order by strength :slight_smile:

good that the 256/400 issue got resolved!

I’m a little bit lost… Could you please help me with this formula, based on the following simple example?

  • data[“Product List”] : a list of 3 objects (“RICE”, “CHICKEN” and “AVOCADO”) with 4 fields (“name”, “rice”, “chicken” and “avocado”)
  • data.product_selected : an object with 4 properties (“name”, “rice”, “chicken” and “avocado”)

I tried this, but “List items are incompatible”…
MAP(data[“Product List”], item.fields.name + LOOKUP(data.product_selected.fields, “name” && “rice” && “chicken” && “avocado”))

I think it would be something like:

MAP(data.ProductList, SET_KEY(item, "strength", LOOKUP(data.product_selected.fields, item.name)))

Here we go through (MAP) the entire product list and add a new property (SET_KEY) “strength” to each product. The strength value is picked from (LOOKUP) the selected product’s properties. You’ll notice better any errors or warnings when you try it out in the formula editor, but it should be close to that! Set this as the repeat-with for your list in the detail page, adn you’ll be able to show the strength property by each item. You can also wrap that function in an ORDER to order it by strength.

OK this formula allows me to add a new “strength” property to all the products in my list, but the LOOKUP picks the selected product’s “name” property only. In my case, I want to display all the strength’s values with all products in my list.

In my example, your formula will display the list of products (“rice”, “chicken”, “avocado”) with the name of the selected product (“rice”) on the right column, not the strengths of each product (X, Y, Z). LOOKUP extracts just one property of an object, not many, no?

Then the item.name in that formula I described should be replaced with something else, item.___ . The idea is that what property (the ___ part) of the objects in the list can be used to get the strength value from the selected products properties. It’s difficult for me to get the formula exactly right without seeing your data, but that’s the general idea. LOOKUP only fetches one property yes, but as I understood the idea was to get only the strength value for each product in the list.

OK I’m not sure that we understand each other, so I will take the simple example above.

  • data[“Product List”] : a list of 3 objects (“RICE”, “CHICKEN” and “AVOCADO”) with 4 fields (“name”, “rice”, “chicken” and “avocado”) where :
    1 : “name” are the 3 names of the 3 products (rice, chicken, avocado)
    2 : “rice” are the 3 pairing strengths between the 3 products and rice (X1, X2, X3)
    3 : “chicken” are the 3 pairing strengths between the 3 products and chicken (Y1, Y2, Y3)
    4 : “avocado” are the 3 pairing strengths between the 3 products and avocado (Z1, Z2, Z3)

  • data.product_selected : an object with 4 properties (“name”, “rice”, “chicken” and “avocado”). An example of selected product could be (rice, X1, Y1, Z1).

Your strategy is to get a list of 3 objects with 5 properties (“name”, “rice”, “chicken”, “avocado”, “strength”). Based on the example of selected product above, this list should be :
[ { “name” : “rice”, “rice” : “X1”, “chicken” : “Y1”, “avocado” : “Z1”, “strength” : “X1” } ,
{ “name” : “rice”, “rice” : “X2”, “chicken” : “Y2”, “avocado” : “Z2”, “strength” : “Y1” } ,
{ “name” : “rice”, “rice” : “X3”, “chicken” : “Y3”, “avocado” : “Z3”, “strength” : “Z1” } ]
Then, by using the current.fields.name and the current.strength, I will be able to display the list of names (rice, chicken, avocado) and strengths (X1, Y1, Z1).

The MAP and SET_KEY formulas work for adding the strength to each product of my list. But, the LOOKUP only fetches 1 property, like X1, Y1 or Z1. So I get a list in which names are rice, chicken and avocado (which is ok), but strengths for each product are all X1, Y1 or Z1 (instead of X1 for rice, Y1 for chicken and Z1 for avocado).

Is it more clear?

PS : actually I want to make a kind of TRANSPOSE, if you visualize it with a table.

I also have two more little questions for you

1 On my product details page, I want to display products clicked by the user from the list, at the top of my page. I duplicated my container of products at the top of the page and hided the rows. Then, when the user click on one product of my list, I used the show component function to display this product from the list duplicated at the top of the page (and used the hide component function if the user click on the product at the top of the page). Is it the best way to do this? I’m afraid of duplicating data and slow the app…

2 I want my app to be in english and french. Should I do 2 apps or a bilingual app? I found this on the forum, is it a good reference? How to develop multilingual capability in apps using Composer - #2 by Matthew_Roberts