How to display two separate collections data in 1 simple or custom list?

Dear Adalo Support/Community, please assist, I’ve been stuck for over week now… :cold_sweat: :cold_sweat:

I have duplicated what I’m trying to achieve in my own App into a smaller simple app to seek assistance from the experts:

In my use case, I have two simple collections:

  1. “Ever Changing” Collection (Products) that contains basic information about a product (Product Code, Product Name, Product Price, Product Quantity on Hand and Product Description). This info comes into the Product Collection on a daily basis via a .csv File upload and doesn’t contain the same Products every day, although some of the same Products might still be on the import the next day depending on Sales of the previous day. Good sellers will be removed, and slow movers will stay on the list for the next day. NO Product Image Files comes in with the .csv File.

  2. “Constant” Collection (Product Images) that holds the Product Images, loaded and saved into this collection via a Modal with the same Product Code retrieved from the Product details screen.
    Users builds this collection based on what Products are on the list for that day.

The idea behind this App is that the customer opens my App every morning and finds a fresh list of available Products on the Home screen. Some Products might contain an Image as previously loaded and saved by the users (Referenced to the Constant Collection)… others will only have a place holder “No Image Available” as the Image, and the User will have the opportunity to load an Image for this Product accordingly.

I have to use two collections because the Products Collections gets deleted every morning and a fresh .csv File gets Imported without Product Image Files.

The Product Images Collections stays untouched with all the Product Images indexed with the corresponding Product Code. Theoretically speaking, the Product Images Collection could consist of Thousands of records while the Imported Products records for the day might only be 5… it is at this point where I want to Marry the Product Code from the Product Images Collection with that of the Imported Products Collection and display only those 5 Images in the Product List (Home Screen) and Product Image (Product Details Screen) together with the other Data. If none of the newly Imported Products “Codes” relates to any of the available Product Codes in the Product Images Collection, It simply means that such a Record doesn’t exist and the Users needs to individually Upload the 5 Product Images into the Product Images Collection accordingly… resulting that should any of the 5 Products make their way into future Imports, the Record already exists and an Image will already be waiting to be Rendered based on the already available Product Code in the Product Image Collection!

Everything works perfectly(Except the Images), I can see the Products on the Home Screen, my Product List renders without any issues (Except the Images), if I click on any of the Products in the List it takes me to the Product Details Screen (Except the Images), passing the “Current Product Data” onto the next screen, if I click the Camera Icon I’m able to Add an Image for the current Product via Modal into the Product Images Collection with the corresponding Product Code…



ProductImages
Products

I’ve tried many to one, one to may, many to many relationships between the Collections…
I’ve tried custom Lists…
I’ve tried List within a List…
I’ve tried Filters where the one List is only visible if the “Product Codes” match (My closest attempt by the way…)
I’ve watched Youtube video after Youtube video…

It has to be something with the Collections and the “Available Data” that gets passed from one screen to the next… that’s where my heads at!

I am really mind boggled at this point in time and would like for someone to just nudge me in the right direction as this really hinders me from moving forward in my App building process…

I just want the Product Image to be available/visible anywhere in the App where a Product is selected, that’s it…

Can someone please clone the below App, fix it and send it back to me so that I too can learn the error of my ways:

Regards, Hennie Smith.

I would think rather than a relationship, each image should reference the product code in a text field.

Then you can have a list of product images where current product image>product code = current product > code

So there is a text reference to the product instead of a relationship.

1 Like

Dear theadaloguy,

Thank you for the reply, could you Clone the App in my initial Post and show me how to apply your Solution?

I tried your Solution myself by making the Image a List of “Product Images” and applying a Custom Filter where Product Image>Code “is equal to” Current Product>Code, it works if you only have 1 Image in your Collection to display Product 1, as soon as you add a Second Image to display Product 2, the 1st Product Image shows blank and the 2nd Product Image shows and so on…

Like I said, please Clone the sample App and show me how to get all 10 Images referenced and showing up in the List together with their corresponding Data.

Thank you in advance!

Regards,
Hennie.

Personally, I would keep it simple. I would delete the Product Images collection, and simply add a property in the Products collection where I can host images or their URLs. In this case, you should have no problems. Good luck.

Please check out here:

1 Like

Boa tarde entre em contato comigo posso te ajudar!
E-mail: reactinc.suporte@gmail.com

Dear theadaloguy,

Thank you once more, you have been most helpful in solving my problem, however, your Clone still only shows the last added Product Image…

But shows ALL the correct Product Images on the Product Details Screens based on Product Image>
Code “Is equal to” Current Product>Code:


So I only made one change to this setting, on the List “Maximum Number of Items”:

And changed it to this:

And now I have this on my Home Screen… Yipeeeeeeeee…! :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning: :grinning:

The downside if this however is if the user adds a second and/or a third Image to the Collection by mistake with the same Code, the following is displayed, because the List of that specific Code is growing: This would be perfect if you wish to have multiple Images per Product, but I only want 1!

And without being able to restrict the “Maximum Number of Items” to display 1 Image… I’m not sure how to overcome this issue… maybe to make the “Add Image” Button invisible if an Image already exists so no user can Add a second and third Image… maybe you have advise in this regard??

Regards, Hennie. :nerd_face:

Yeah the way it seems to bug when you limit it to max one item is strange. You could have a property on product called ‘main image’. Then the product image collection would be for the secondary images. That way each list item would just display current product > main image - no need for list within a list.

I thought you wanted there to be multiple images though? Did I understand wrong?

Dear theadaloguy,

I’m only trying to display 1 x Image per Product, your Solution works fine for what I want, I only need to find a way to prevent the user from either intentionally or unintentionally adding a second or third Image…

The only way I see it is to hide the “Add Image” Camera Icon if an Image already exists… and I can’t seem to get that right with the available options as it stands… any ideas?

Regards, Hennie. :nerd_face:

Hi Hennie,

Then there’s no need for a separate product image collection. You can just have one image property on the product collection. You can clone this updated app:

I didn’t delete the product image collection, but it’s not needed. You just need to upload the product images to the product collection itself in the image fields, and then it’s all good.

Dear theadaloguy, appreciate the assistance, but did you forget about my initial post in which I stated that the Product Collection gets deleted everyday and a New .scv gets imported making either New or Old Products available to the Users, depending on what Sales happened the previous day!

If I don’t have the Product Images in a separate Collection, they will also be deleted when the Product Collection gets deleted.

By keeping them separate, the Users will only have to upload a Product Image once and it’s stored until that Product (Code) ever shows up in any future .csv imports, so there would already be an Image waiting to be rendered for that Product based on the previously saved Code.

Essentially, the Users build the Product Image Library (Collection) on a daily basis as the Products are available in the Products Collection after the .csv Import…

Unrelated to the Images issue… would you perhaps know how I could “export” or “create” a pdf that contains the data of my complete Home Page List of Products(Image, Title & Description):

I can’t seem to find a Tutorial that clarifies an easy way to do this.
It must be a true 1:1 data .pdf file that’s downloadable, whether it contains 10 x Products or 100’s of Products based on however much records there are in the Products Collection???

Thank you once more!

Regards, Hennie. :nerd_face:

Hi Hennie,

Correct? : Image Test App Clone - Hennie

Thank you

Dear dilon_perera,

Thank you for the reply, but what I need is for the User to be able to click on a Button to 1.“Create” the .pdf File and 2.“Download” the .pdf File, either for viewing or printing purposes.

Yes I’ve tried: PDF Generator API, Eledo, Pdf Monkey and even PdfCo … and I just cant find a proper step by step Tutorial as to how to connect the Adalo Data to the Templates and display my List of Products with their Images, Descriptions etc etc…

For example, with this below Solution from PDF Generator API (Which I’m happy to pay for by the way):

How to integrate with Adalo? | PDF Generator API.

shows no steps as to the Template Creation and how to actually connect the Adalo Data to the Template.

I’m following along step by step but end up with blank pages because I can only assume that my Data isn’t connected to the Template?

Any suggestions?

Regards, Hennie. :nerd_face:

The images issue solved?

About PDF could you share some info of what you have tried so far?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.