How do I make all the text show up in a list item when it is long?

Hi!

Sorry for taking so long to respond! Are you still having the issue with authentication and login?

As for favoriting items in lists, there’s not a built-in feature for this in Composer, but you can do it easily in a couple of ways. Here’s a couple of suggestions if you’re still looking for ways to do this.

  1. Add a property favorite that’s a true/false type to the items. It would be false by default, and when the user chooses it as a favorite, the property would turn true.
  2. Create a Client-side storage resource in which you add all items that are marked as favorites. This use case is device-specific, so if a user uses your app on a different phone it won’t know the favorite items.

In either case you would have to add some sort of button by the items in the list to be able to add them as favorites. In case 1 you would have to update the list item when the button is clicked, and in case 2 you would have to create a record of the item into the client-side storage resource.

Let me know if you need any more help!

Hi Cecilia (smiling at you),
Thank you so much for the help and suggestions! And no apologies needed!

But I definitely need more help. I apologize. I’m a newbie at this. (I know html coding and wordpress but not other coding.)

I created a container around my first list item. I added, instead of a button, a heart icon that is empty. What i want to do is when someone presses the heart button, the item in that container is favorited AND the heart button turns to a full heart (icon). And I added a big left margin to move the icon to the right.

To make the empty heart turn into a full heart, I tried (I think this might not be right) to make it a page variable. I made a page variable “FullHeart” with the variable value type “icon name”, and then the example value chose the full heart icon. Then in the logic I linked the icon component tap to set page variable, and selected “FullHeart.” This makes the heart clickable, but it doesn’t turn from an empty heart to a full heart. I also tried adding the “assigned value” the heart icon (full heart icon), but that didn’t work, either.

And I don’t understand how to add a property “favorite” that’s a true/false type. When i look at the container’s properties i don’t see a place to add a property? I did see “create a new view component” which i tried but didn’t work (maybe i missed a step)?

And then how would I update the list item when the button is clicked (your case 1)?

If I do case 1, does that mean that the individual user/client won’t have the list of favorites? If so then I need to do case 2 which i also don’t know how to do. I’m guessing for case 2 i would add “create record” to the component tap, but i don’t know anything beyond that.

I’m sorry if these questions are really basic. I’m trying to understand.

Also yes, I am still having trouble with the authentication. I had to remove it because when I add it the app no longer works. I started trying to add authentication using firebase, but I’m following a course that leaves out a bunch of steps, so I haven’t yet figured it out. (I write novels in the day and often evening, so my work on this is on weekends and some evenings.)

Also all my “large image icon lists” images suddenly turned big today, as you’ll see in the image above. (They were perfect before.) I have no idea why or how to fix it; it’s on all my pages of lists. I have made a separate post about that…

Thank you,
Cheryl

Hi!

No worries about the questions, great that you have found AppGyver and are eager to learn! :slightly_smiling_face:

As for the favorite property, what kind are the items you are showing in the list? Are the individually written paragraph by paragraph, or are they stored in some list variable that you are repeating?

As for filling the heart when it gets tapped, here’s a tutorial about how to make a similar functionality. However, that power-up may be a bit advanced for a beginner, so I would recommend glancing through our Academy material, especially the App Programming 101 series this should help in figuring out the basics of using Composer and app development in general!

Thank you for not minding my questions; I so appreciate it, Cecelia. And thank you for the tutorial! I started watching the App Programming 101 series last night, which was what made me use variables. I will go over the tutorial today.

Each item in the list is an individually written paragraph.

Thank you,
Cheryl

Hi Cecelia (smiling at you),
So, I followed the tutorial 1 for the star rating, and was able to create a single empty heart that turns to a full heart when clicked. Yay! But I don’t think I did it correctly, since I did it the way the tutorial showed, with a rating, the heart clicked giving it an assignment value of 1. Does that make sense for favoriting, when it’s not exactly a rating? Or should it be true and false?

Also how do I make the full heart turn back to an empty heart if it is clicked again, someone unfavoriting it?

In the tutorial, it is bound to “property of data item in repeat,” Mine doesn’t show a repeated item (I added each list item separately in its own large image list item), so I bound it to data and variables, page variable, FavoriteButtonHeart.

So then I added another. I put each of my heart buttons (that are in their own containers), in a container with the list item.

BUT when I click on one heart, both of the hearts get filled, so I’ve done something wrong. They’re not individually waiting to be tapped, but somehow joined.

Please help.

Thank you,
Cheryl

Also, how do I then allow users to see each of their favorited items? (I’ve written each list item uniquely in its own paragraph large image list.) I have the heart in its own container, and then within the container of the list item.

Hi!

Great that you’ve been able to progress! So what I would suggest for you to do in order to achieve your app idea, is a bit of restructuring your data. All variables (except for data variables) get erased when the app closes, so if you want to save what favorites a user picks, you’ll need to use a backend to store them. So here’s the “best practice” way to do this:

  1. Instead of writing each list item into its own paragraph, I would suggest you create a list of objects type variable for the items, and then use repeat-with to display them in the app. The objects would have whatever properties it needs, by looking at your screenshots I would guess at least title and description. Here’s 2 options:
    a) Creating a page or app variable for this, and use the Add Value to write your items (id can just be 1, 2, 3…). This is not a very scalable option, but I think it would suit your testing and learning needs!

    b) Create a Data Resource for this (e.g. AppGyver Cloud Storage). In this case, you’ll need a way to create items into the database from your app. Here’s a tutorial of creating a form to add items into your database

  2. Now you’ll need a place to save the favorite items. Here I would use a data resource Client Side Storage. This means each favorite gets saved into the specific device, so users will only see the favorites that are saved in their own phone and not each other’s favorites. So you would: Create a Favourites database with the same data structure as the items. When the user favorites an item, you use Create Record to add an identical item into the Favourites database. If your user want to view their favourite items, you can use this database to access them and repeat them similar to the original list of items!

  3. So now you have a storage for all the items and favorite items. Now let’s look at the heart function. You can use the same logic as in the star rating system with some minor changes. As you are repeating all items in your app page, you can add a heart icon to the repeating component. When it gets tapped, you either create the current item into the Favorites database using Create Record, or remove it from Favorites by using Delete Record. To determine which one to use, you can set a IF function after the Component Tap event to check if the item already exists in the Favorites database or not. Here the formula IS_IN_ARRAY_BY_KEY can be helpful.

  4. As for filled or unfilled hearts, similar to checking if an item should be created or deleted in the Favorites database, you can use the IS_IN_ARRAY_BY_KEY to detemine if the item is already favorited or not.

Now this was quite a lot of information, please let me know if you have any questions! The reason to use list of objects instead of writing items by hand into paragraphs is that with repeat with you can tie the heart icon to each item, so when the icon gets tapped you’ll easier know what item should be saved into favorites. This would be very complex to do without a list of objects and repeat with.

Thank you so much for all of this help, and also the encouragement, Cecillia; I so appreciate it! (smiling at you) I will start doing this soon. And I probably will have more questions; thank you, thank you for being patient and willing to help and to answer them!

2 Likes

Hi Cecillia (smiling at you),
Thank you for your encouragement and all the detail! And…I am stuck already.

I’m using your 1a option because it looks easier for me for now. So I created page variable “DistractYourselfList” list of objects, adding Title and Description as the variables, with ID already there. Then I added my first 3 list items using id, title, and description for the initial values. (Is that correct? Is that how I add each of my list items?)

Then in the app view, I added a container, then a large image list item inside it, and then “by me” favorite button inside the same container. I then bound the title to the current.title, description to the current.decription. And each individual item I created in showing up in the app itself. BUT the favorite heart button only shows up at the bottom of all three items. How do I get the favorite button to repeat with each list and description item?

Does it need to be in a row? I tried that, and I created a row, made the layout horizontal, put the “large item list” in the left cell row and made it 90% using a:b so that it would take up most of the room, then added the “by me” favorite button into the right cell of the row, made it 10%. BUT the favorite button takes up 90% of the room in app view even though it says it’s only taking up 10%. And then if I look at the actual app, the list (title and description) still show up fully, but favorite button doesn’t show up at all. I don’t know what I did wrong?

Hello!

Seems like you’ve made great progress! Using initial values in the app variable is absolutely right.

It seems you have made the Large image list item as the repeating component, and added the FavouriteButton after the repeating component. This means that the icon won’t get repeated, only the Large image list item will repeat.

To get multiple components to repeat, I would suggest you set the repeat with to Container 5. That way everything inside it, the list items and the favourite buttons, will repeat and you can still use current.__ to bind your title and description to the list item. Moving forward, this will also allow you to set the current item as a favourite item.

As for layouting, I think you’re on the right track. Instead of using rows which can be a hassle to deal with sometimes, you can set the Container 5 layout to horizontal, and set the Large image list item width as 90% and the FavouriteButton width to 10% and get the effect you’re looking for. Here’s a tutorial on creating a grid layout if you want to know more.

Hi Cecilia (smiling at you),
Thank you, thank you, thank you! Repeating with the container 5 worked! Now I see the favorite heart repeated. Yayyyy!

To create the individual items, I chose your 1a option which was creating a page variable with a description and title and id, all text items. I created a User side data FavoriteListItems that has description, title, and id. I added the FavoriteListItems to the Data Variables for the page, but when I went to bind heart favorite button, component tap, create record and then record properties on the right, with Data and Variables, Data Variables, FavoriteListItems it tells me it’s incompatible? It said: The type "list of objects with 3 properties is not assignable to the type object with 2 properties.

Also, what am I adding for IS_IN_ARRAY_BY_KEY and where to figure out whether a component tap creates the record or deletes it, and a heart is unfilled or filled? To start a heart as unfilled but make it filled on tap, I tried to follow this tutorial you gave me Power-up: Create a Star Rating Component - Composer I got it filled on tap, and I’m guessing I add the IS_IN_ARRAY_BY_KEY in the formula, but then what do i add to determine if the item is already favorited or not? And does it make sense that i set it as rating, and 1 for the heart to be filled? Should I be doing something else?

Hi!

Everything sounds good so far, the issue seems to be in your data variable FavoriteListItems. What I think you have done, is that you have created a data variable of the type Collection of records, so the data variable is a list of all favourite items. That’s why when you are trying to create one new object into the resource, the editor complains that you cannot put a list of objects as the properties. Instead, you can use this data variable to display all the user’s favourite items in a list when you get to that point.

image

Instead, you do not have to create any data variables to represent the new favourite list item. When the heart gets tapped, you can add the Create Record node, set the properties as Custom object, and then use current.title, current.description, and current.id to set the properties of the new favourite item.

As for the star, I don’t think you need to set any rating or anything, since you only want to know if the item is favorited or not. Here we can use the IS_IN_ARRAY_BY_KEY formula, because we can check if the ID of the current item can be found in the Favorites resource. If it can be found, that means we have previously added it as a favorite, and the heart should be filled. The formula for the icon name would be something like:

IF(IS_IN_ARRAY_BY_KEY(data.FavoriteListItems, "id", current.id), "heart", "heart-o")

Now for each item in your repeated list, the formula checks if the item can be found in the favorites list, and therefore should have a filled in heart. The same principle goes for determining what to do when you tap the icon, you can add in IF node with the IS_IN_ARRAY_BY_KEY formula to check if you should favorite (= create a favorite list item) or unfavorite (= delete the item from the resource) the item.

Thank you, thank you, thank you! That IS what I did.

But–I’m sorry; I’m still a bit stuck. I made the FavoriteListItems client side database so that users can store their favorites on their device. Then I added Create Record to the heart on tap function, and the record properties are custom object, but how do I use/add current.title, current.decription, and current.id? What do I bind the “custom object” to to add current.title etc? Am I binding it to a formula, adding in IF(IS_IN_ARRAY_BY_KEY(data.FavoriteListItems, “id”, current.id), “heart”, “heart-o”) and then also somehow the current.title etc?

Hi!

binding the record properties to a custom object in Create Record should look like this:

Then, you can change the binding of each property from static text to property of item in repeat, and there you can access the current title and description.

The IF part becomes before creating the record. So when the icon is tapped, you should first determine if the item is already favorited or not, and then either create the record or delete it from the favorites resource. Like this:

In case the favorited item can already be found in the resource and that IF comes out as true, we go ahead and delete it, i.e. unfavorite it. If it cannot be found and the IF comes out as false, we create it, i.e. favorite it :slight_smile: the filled and unfilled hearts should also update according to the creation and deletion of items.

This formula: IF(IS_IN_ARRAY_BY_KEY(data.FavoriteListItems, “id”, current.id), “heart”, “heart-o”) is only to choose what icon to display, by binding the icon name to formula instead of static icon

image

Hi Cecilia (smiling at you),
Thank you SO much for all of your patience and help. I’m sorry I’m finding this so confusing!

So earlier you said I shouldn’t make a rating for the heart, and that I think the formula should be this:

So I’m not sure if I put it in the right place, but I changed the formula that I had used from the star video that was a rating, that tied to the heart icon name, to the formula you told me above.

But now the heart doesn’t go solid when I click on it in the app. And I think I have it confused because I Thought that the formula was also supposed to go with the create records button, but it wouldn’t be the exact same formula there, right? I’m sorry I find this so confusing.

What I had before that had a rating, and allowed the heart to go solid, but I think wasn’t right, is:

What I have now, what I was trying to do based on what I quoted from you above:


But I still have the variables, set internal property, set rating to 1, and i think that shouldn’t be a rating?

And then I tried to do the new thing you said, after I removed the rating number, and made it static text, I added the utility if condition, then the delete record and create record. But it’s the same formula as I bound to the icon, so that doesn’t make sense, right? And is it correct that I made the create record link up to the favoritelistitems? For the record properties, custom object, it is showing the title, description, and id because I have the favoritelistitems, but is that correct? Your image is different. And should I still be adding current.title etc somewhere? I’m sorry for my confusion in all this!


I was at least able to bind the create record, custom object, object with properties, each to the right thing–current.description, current.id, and current.title.

Also, when I tried to do this:

and I set the container 5 layout to horizontal, and the large Image list Item width to 90% and the FavoriteButton width to 10%, then the favorite button completely disappeared on the app, and on the appgyver page it went way outside of the work area…? If I put container5 back to vertical, with List 90% and button 10%, at least the line below the list stops earlier. But I wish i could get it completely working. (Though the other things are more important.)

Strangely, now the If condition nodes for the FavoriteButton won’t connect, and won’t allow me to draw them, to the create record and delete record. I think it changed after I played with the horizontal/vertical and 90% sizing? I put them back to how they were, but still can’t connect the nodes…

Hi,

no worries about finding this confusing, I’m sure my explanations are not that clear either! :grin:

The reason to not use rating in this case is that then each list item should have a property rating. But since the list items are in an app variable, the values would get erased every time the app gets closed. So if a user favorites an item and closes the app, the app won’t remember it when it gets opened again. Even if you would use a database for the list items, then the rating property would be the same for every user. So if one user favorites an item, it will be seen as a favorite for every user. This is the reason we don’t put any favorite or rating info into the list item itself, they will remain unchanged throughout the use of the app. Instead we use a client side storage for the favorites which we can modify without it affecting the original item list.

So you won’t need the set internal property rating for the icon. You can just remove it since we won’t be using it for anything. Otherwise your second screenshot looks good!

And yes the formulas for the icon and creation/deletion of favorites is very similar, since they check the same thing. If the item is already favorited, display a filled heart. Also, if the item is already favorited when you tap the heart, delete it from favorites. So it’s the same check, just with different outcomes. For the creation or deletion it would be:

IF(IS_IN_ARRAY_BY_KEY(data.FavoriteListItems, "id", current.id), true, false)
Or to make it even simpler, simply: IS_IN_ARRAY_BY_KEY(data.FavoriteListItems, "id", current.id) which by itself comes out as true or false.

The record properties look correct, in my example I don’t think I had the same properties as in your list item so it showed only two fields instead of three. And binding those properties to current.description, current.id, and current.title is right!

Hmm as for the layouting, I think the issue might be with the FavoriteButtons styling. If you double click it and enter isolation mode, make sure that the icon’s width is set as 100%. You can also just use a regular icon instead of the FavoriteButton component, I think that might solve the issues with setting the nodes and styling.

Thank you SO much, Cecilia! (smiling at you) I so appreciate your help. I’ve deleted the set internal property rating for the icon.

And I’ve changed the formula for heart component tap, If condition, to be IS_IN_ARRAY_BY_KEY(data.FavoriteListItems, "id", current.id). I think that’s the right place?

Once you said that about the layout, I realized that the problem was likely that I had changed the margin of the heart icon so that it would be all the way on the right, which is where I want it to be. So I removed that, then went through the steps again (container 5 layout to horizontal, list item 90%, icon 10%) and it WORKED! Thank you, thank you for solving this for me, even though I didn’t give you all the info because I didn’t know/realize all the info. Thank you!!!

Also, just so you know, the connections between the nodes appeared to be missing from the If condition to the delete record and create record, and no matter how many times I tried to redraw them they wouldn’t. i was thinking about deleting them all and redoing them, but then I moved the If condition, and suddenly the connections reappeared/became visible. I was so relieved. I don’t know if that’s a glitch or not?

But, er, something I’ve done is still not right, because the hearts don’t go to solid any more when tapped.

And I definitely want the users’ favorites to appear only in the client-side storage. But have I done that? With the client-side storage FavoriteLIstItems will it go there now? I can’t see that on my app when I press the a heart button, BUT I think I still need to fix two things. One is login (which I am trying to do with firebase, since I think there will be a lot of users who need this app but I don’t have the money for a big service so I need free. A friend is trying to help me with firebase, but I haven’t been able to get it working yet and keep getting frustrated), and one is that the hearts don’t go solid when I tap them, so something isn’t quite right yet, i think.

Thank you for helping me through this! I so appreciate it. There are a lot of people who I think need this app, and I’ll be giving it to them for free once it’s ready.

Great to hear that you’ve made progress! As for the nodes disappearing and being wonky, that’s an occasional glitch we’ve noticed but should be fixed by just moving some of the nodes. It’s weird! :grin:

The formula in your IF looks right, but you can check if the creation of the favorite items is actually working by putting alerts after the Create Record node, like this:

The first node of the Create record is triggered if the creation succeeds, and the second one is triggered when it fails. By putting alerts you’ll see which one happens if you try tapping a heart. This way we can determine if the creation of favorites succeeds and the issue is in the formula displaying the filled or unfilled heart, or if the whole creation of favorite items fails.

I have little experience in firebase authentication, but I’m sure there’s threads about it in the forum in case they’d be helpful :slight_smile:

Thank you, Cecilia! (smiling at you)

So…I put those alerts in, tapped a heart in the app…and i got creation failed. So…something is wrong then with the formula, but oh, I don’t know where! I’m hoping you can help me figure it out.

On a more positive note, I was able to use the technique you taught me with a container and horizontal layout and percentages to change how buttons and images looked on another page, so thank you!

And congratulations to all of Appgyver for selling to SAP–and I am SO glad Appgyver will still be free! Thank you!

1 Like

Alright, so the issue is in the Create Record node! Can you show me the properties of the Create record node, i.e. the information you have on the sidebar to the right, especially the Record Properties?

And thank you! We are very excited about the opportunity to join forces with SAP and make Composer the best no-code tool it can be :blush:

It sounds very positive!

Okay, I’ve attached two screenshots. I think/hope it’s what you’re asking for.