Answered

(I'm a beginner) How do I, when I click on an item in the list, highlight it on the shelf?

(0) Share

Report

Posted on by LucasOtavio

I'm doing a very simple inventory addressing, just for the location of each object on the shelf. The only thing I want is that when clicking on the list item, the object in question is pointed out/highlighted on the shelf. 🙂

Categories:

Building Power Apps

I have the same question (0)

All responses (6)

Answers (2)

Verified answer

DennisPreatto 39 on at

Like (1)

Report

Hello @LucasOtavio,

Thank you for your question, this idea is just really nice and I love the User Interface you are creating.

Coming to your question, I understand that you would like a certain part of your image highlighted when the corresponding item is selected in a gallery.

To achieve this there are many ways and as usual the only limit is your imagination. Let me suggest a easier solution first: you could create a square or a label or a button, name it accordingly to keep track of it, carefully place it to cover the item on the image, then you can play with the border properties.

On the OnSelect event of the gallery you can set a variable to contain the name or ID of the selected entry, for example Set(selectedItem, ThisItem.ID) (here I am supposing your object comes from a database table and has a field named ID in this case but could be anything you like, like "item1" instead of ThisItem.ID );

Then set the border property of the item you created before (and placed over your shelf) to examine the variable selectedItem with an IF statement, set the border colour for example to red if the value is "Item1" or transparent otherwise. You can also set the borderWidth property or anything else you might like to toggle in order to highlight the item.

This way you can create as many objects as you want and set for example their borders to visible when the corresponding element id is inside a variable.

This is one way; if I were to do this project I would push it a little bit more, I would personally create many copies of the image of the shelves you have there and in Photoshop I would draw a nice highlight effect for every item that could be selected from the list. I would then save a different image for every highlighted item, load them all into PowerApps. Then, using the same logic as above, I would place an image control and change the images based on the selected item. This way you will have a very cool effect but it's more time consuming so it's your choice.

I think it will come out nice anyway and for the purpose of keeping track of items' positions in a storage room there is no need for super cool looking UI.

Hope I gave you some inputs to work on and keep your project going. Let me know if I can help more.

Have a nice day!

Was this reply helpful? Yes No
LucasOtavio 2 on at

Like (0)

Report

Hello @DennisPreatto

Your excellent help made me open up a huge range of possibilities that I can do here. However, as I'm still quite a beginner, I had some difficulty with the IF statement. I still haven't been able to concatenate so that the border appears on click. Thank you very much in advance for your help!

Was this reply helpful? Yes No
Rusk 1,369 Super User 2024 Season 1 on at

Like (1)

Report
In the example @DennisPreatto provided, you'd be setting a variable in your gallery with the item ID. So your If statement for your border color would be something like
If(varID = ThisItem.ID, Red, Transparent)

Was this reply helpful? Yes No
Verified answer

DennisPreatto 39 on at

Like (1)

Report
Hello @LucasOtavio, I am really glad that my inputs provided you with more ideas!

Exactly, as @Rusk said, you have to insert the IF statement in the BorderColor property of the label you placed over the item. In PowerApps the IF statement works like this:
IF ( condition , trueValue , falseValue );
Let's say for example that the items in your gallery are contained in a Table (the table's source is not important, you can write it yourself like I did here), you can create a Table like this:

Table( {id: 1}, {id: 2}, {id: 3} )

As you can see, I created the same exact Gallery and I then set the Items property to my Table (you might have a different source of data but that is not important since you can apply the same logic), then I created a label inside the gallery in order to visualize the id property of the item. In the second image you can see the Text property of that label:

Then once you've done this, in the OnSelect property of the Gallery you have to Set a variable to the ThisItem.id (or also to ThisItem itself like I did here, if you need all its properties for later) of the selected gallery entry, like this:
Finally, you will have to set the BorderColor property of the label you placed over your item like we've seen before, like in the following image:

In this case, since I selected the first element of the Gallery with ID 1, the selectedItem variable will contain the first row of the table, the condition of the IF statement in the BorderColor property will result to true and the red color will be applied to the border. As soon as I select another row, the selectedItem variable will contain the corresponding Table record, with another id which is different from 1, so the false outcome of the IF statement will be applied and the borderColor will be transparent.

You can create as many labels as you want and apply the same logic to create unlimited items (you could also duplicate the first label, change the position and then just change the id inside the IF statement).

If you need any more help please let me know,

have a nice day!

Was this reply helpful? Yes No
LucasOtavio 2 on at

Like (0)

Report

Once again, I want to say that I am extremely grateful for your help. I managed to leave it as I wanted, and I learned a lot from it. I'm loving it here!

Was this reply helpful? Yes No
DennisPreatto 39 on at

Like (0)

Report

You are very welcome, if you need any more help let us know,

Have a lovely day!

Was this reply helpful? Yes No