Photos in object-table

General Q&A
#1

Can I put a display-photo in an object-table? I have a list of objects that contain a photo and a “where” description and I’d like to list them out on a page, but I’m struggling to find a syntax that will work. This was my best guess:

<object-table controls=“none” query=“photos” empty-message=“There are no items”>

            <column heading="Where">{whereat}</column>

            <column heading="Photo">

                {photo}

                <display-photo bind="photo" downloadable="false" />                    

            </column>

            <column fit="shrink" icon="fa-trash"><action on-press="$:deletePhoto($selection)" /></column>

        </object-table>

Result:

image

The bottom one does have a photo uploaded as you can see by the ID string, but the display-photo doesn’t work. I tried bind="{photo}", bind="$object.photo", and bind="{$object.photo}", but none of those work either. Is this doable?

#2

At the time of writing this, it is not current possible to display a photo directly in an object-table. When binding directly to the {photo}, the photo id is displayed and the display-photo component is not supported within an object-table.

There may be a few different options that could work for you. One could be to include an additional “info” column, similar to your delete column, that opens a dialog that includes a display-photo component. Another could be to use list rather than an object-table to view the photo.

#3

Thanks Jaimie, I’m happy with swapping out object-table for a list-item component and I have my photos showing successfully now. However I’m running into an issue with having two different actions for a list item. I’d like to make the left portion link to another page and then on the right have a trash icon to delete it (as pictured in my original post). Is there any way to make this work or can you recommend some workaround? From what I can tell each list item is only allowed one action. I was not allowed to assign a separate action to a pill:

image

#4

@fthomas That is correct - the list item can only have one action defined.

You could potentially make use of the optionList (docs), which would pop up a list of actions that the user can select.

The actionSheet (docs) may provide the best experience for your user as it is similar to the optionList, just smaller and will pop-up from the bottom of the screen on mobile for easier selection.