web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
🚀 Season of Sharing Community Challenge Launch!
Ask A Community Pro - Series II
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Return thumbnail of fi...
Power Apps
Answered

Return thumbnail of first attachment per listitem

(0) ShareShare
ReportReport
Posted on by Kootsj 16

Dear all,

 

I created a list where people can add attachments to a project, fill in the problem and how we solved the project. I named it 'VIBE'. When my co-workers add a new project to the list, the attachments are transferred to another list (Import Vibe) so that I have a picturegallery per projectnumber. In the projectlist (VIBE) I would like to see the thumbnail of the first attachment per project in the list. This worked for the first project, but the other projects that we added after the first one also return the same image of the first project. Please have a look at the attached printscreens. 
Which formula should I use for gallery4? Or how am I able to show the thumbnail of the first attachment per project like it does in the projectoverview in the app? 


Thanks in advance!

Projectfiche.png
Import Vibe.png
Thumbnails displaying like it should in list too.png
Categories:
Building Power Apps
I have the same question (0)
  • WarrenBelz Profile Picture
    WarrenBelz 155,640 Most Valuable Professional on at

    Hi @Kootsj 

    Please have a read of this blog of mine which should assist,

     

    Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

  • WarrenBelz Profile Picture
    WarrenBelz 155,640 Most Valuable Professional on at

    Hi @Kootsj ,

    Just checking if you got the result you were looking for on this thread. Happy to help further if not.

    Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

  • Kootsj Profile Picture
    Kootsj 16 on at

    Dear Warren

     

    Thanks for your clear blog. Although the information provided in the blog doesn't solve my problem it is a usefull resource for further powerapps.

    The problem in fact is that I don't know which 'code' to use for returning the thumbnail of the first attachment uploaded to the project in the sharepointlist. In the powerapp I get the result I want but I have a thumbnailcolumn in the sharepointlist and it doesn't resturn the image. I would be thankfull if you can solve my issue. 

    Thanks in advance!

    Schermafbeelding 2021-05-04 093025.png
    Schermafbeelding 2021-05-04 092722.png
    Schermafbeelding 2021-05-04 092935.png
  • Verified answer
    WarrenBelz Profile Picture
    WarrenBelz 155,640 Most Valuable Professional on at

    Hi @Kootsj ,

    These are not attachments, they are files in a Document Library (which is a good thing). Just so I am sure I understand what I am looking at, the below Library 'Import Vibe' contains your photos

    Import Vibe.png

    and in this list you have a cross-reference "common value" field with VIBE. Assuming for the moment it is ITEMID (and assuming the same name in VIBE), and you wanted to show the first image matching this, if you put an Image Control in a Form (on a Custom Card)  or in a Gallery, you should be able to see it with 

    LookUp(
 'Import Vibe',
 ITEMID = ThisItem.ITEMID
).'{Thumbnail}'.Large

    Have I assume the structure correctly here?

     

    Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

  • WarrenBelz Profile Picture
    WarrenBelz 155,640 Most Valuable Professional on at

    Hi @Kootsj ,

    Just checking if you got the result you were looking for on this thread. Happy to help further if not.

    Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

  • Kootsj Profile Picture
    Kootsj 16 on at

    Hi @WarrenBelz 

    Sorry for the late answer but i completely forgot about this post. Your solution helped to get the thumbnail in the formview. Thanks! Although it's just not complete what I wanted it to be. In galleryview I still don't get the thumbnail on top as you can see on the printscreen. Do you have a quickfix for this? 
    Already a big thanks for helping me out, good day!

    Thumbnail galleryview.jpg
  • WarrenBelz Profile Picture
    WarrenBelz 155,640 Most Valuable Professional on at

    Hi @Kootsj ,

    What are the Items of the gallery and the Image of the image control in it?

  • Kootsj Profile Picture
    Kootsj 16 on at

    Hi, I guess they the same as mentioned above? The thumbnail is the first uploaded picture from the corresponding jobnumber. I added a screenshot as an example. I get the thumbnail when I open the item but it is not showed in the sharepointlist. I hope I explained this problem well enough for you to understand. As always, thanks in advance!

    no thumbnail in galleryview sharepoint.png
  • WarrenBelz Profile Picture
    WarrenBelz 155,640 Most Valuable Professional on at

    Hi @Kootsj ,

    If you give me the two items of code requested, I may be able to assist you with this.

  • Kootsj Profile Picture
    Kootsj 16 on at
    Dear
     
    Hereby the code of Tilelayout:

    {
    "height": 608,
    "width": 254,
    "hideSelection": false,
    "fillHorizontally": true,
    "formatter": {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-container"
    },
    "children": [
    {
    "elmType": "button",
    "attributes": {
    "class": "sp-card-defaultClickButton",
    "role": "presentation"
    },
    "customRowAction": {
    "action": "defaultClick"
    }
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
    },
    "children": [
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Thumbnail.DisplayName]"
    },
    {
    "elmType": "a",
    "attributes": {
    "title": "[$Thumbnail]",
    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-highlightedContent sp-card-keyboard-focusable",
    "href": "[$Thumbnail]",
    "target": "=if ([$Thumbnail] == '', '', '_blank')"
    },
    "style": {
    "pointer-events": "=if ([$Thumbnail] == '', 'none', 'auto')",
    "text-decoration": "=if ([$Thumbnail] == '', 'none', 'auto')"
    },
    "txtContent": "=if ([$Thumbnail.desc] == '', '–', [$Thumbnail.desc])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Title.DisplayName]"
    },
    {
    "elmType": "p",
    "attributes": {
    "title": "[$Title]",
    "class": "ms-fontColor-neutralPrimary sp-card-content "
    },
    "txtContent": "=if ([$Title] == '', '–', [$Title])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!gmfr.DisplayName]"
    },
    {
    "elmType": "p",
    "attributes": {
    "title": "[$gmfr]",
    "class": "ms-fontColor-neutralPrimary sp-card-content "
    },
    "txtContent": "=if ([$gmfr] == '', '–', [$gmfr])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Activiteit.DisplayName]"
    },
    {
    "elmType": "p",
    "attributes": {
    "title": "[$Activiteit]",
    "class": "ms-fontColor-neutralPrimary sp-card-content "
    },
    "txtContent": "=if ([$Activiteit] == '', '–', [$Activiteit])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!wv5r.DisplayName]"
    },
    {
    "elmType": "p",
    "attributes": {
    "title": "[$wv5r]",
    "class": "ms-fontColor-neutralPrimary sp-card-content "
    },
    "txtContent": "=if ([$wv5r] == '', '–', [$wv5r])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!nbpc.DisplayName]"
    },
    {
    "elmType": "p",
    "attributes": {
    "title": "[$nbpc]",
    "class": "ms-fontColor-neutralPrimary sp-card-content "
    },
    "txtContent": "=if ([$nbpc] == '', '–', [$nbpc])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Attachments.DisplayName]"
    },
    {
    "elmType": "p",
    "attributes": {
    "title": "[$Attachments]",
    "class": "ms-fontColor-neutralPrimary sp-card-content "
    },
    "txtContent": "=if ([$Attachments] == '', '–', [$Attachments])"
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-previewColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!_x0066_027.DisplayName]"
    },
    {
    "elmType": "div",
    "style": {
    "display": "flex"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "sp-card-userEmptyText"
    },
    "txtContent": "=if(length([$_x0066_027]) == 0, '–', '')"
    },
    {
    "forEach": "personIterator in [$_x0066_027]",
    "elmType": "a",
    "attributes": {
    "class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
    },
    "style": {
    "display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
    },
    "children": [
    {
    "elmType": "img",
    "defaultHoverField": "[$personIterator]",
    "attributes": {
    "src": "=getUserImage([$personIterator.email], 'S')",
    "title": "[$personIterator.title]",
    "class": "sp-card-userThumbnail"
    },
    "style": {
    "display": "=if(length([$_x0066_027]) > 5 && loopIndex('personIterator') >= 4, 'none', '')"
    }
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
    },
    "style": {
    "display": "=if(length([$_x0066_027]) > 5 && loopIndex('personIterator') == 4, '', 'none')"
    },
    "customCardProps": {
    "formatter": {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-personCallout"
    },
    "children": [
    {
    "forEach": "personIterator in [$_x0066_027]",
    "elmType": "div",
    "attributes": {
    "class": "sp-card-userContainer sp-card-userCustomCard"
    },
    "style": {
    "display": "=if(loopIndex('personIterator') < 4, 'none', '')"
    },
    "children": [
    {
    "elmType": "img",
    "defaultHoverField": "[$personIterator]",
    "attributes": {
    "src": "=getUserImage([$personIterator.email], 'S')",
    "title": "[$personIterator.title]",
    "class": "sp-card-userThumbnail"
    }
    }
    ]
    }
    ]
    },
    "openOnEvent": "hover"
    },
    "children": [
    {
    "elmType": "span",
    "txtContent": "='+' + toString(length([$_x0066_027]) - (4))"
    }
    ]
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-userTitle"
    },
    "style": {
    "display": "=if(length([$_x0066_027]) == 1, '', 'none')"
    },
    "defaultHoverField": "[$personIterator]",
    "txtContent": "[$_x0066_027.title]"
    }
    ]
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Author.DisplayName]"
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "ms-fontColor-neutralPrimary sp-card-userContent ",
    "title": "[$Author.title]"
    },
    "children": [
    {
    "elmType": "p",
    "txtContent": "=if(length([$Author]) == 0, '–', '')"
    },
    {
    "forEach": "personIterator in [$Author]",
    "elmType": "p",
    "defaultHoverField": "[$personIterator]",
    "style": {
    "display": "=if(loopIndex('personIterator') >= 1, 'none', '')"
    },
    "txtContent": "[$personIterator.title]"
    },
    {
    "elmType": "p",
    "txtContent": "=if(length([$Author]) > 1, ', +' + (length([$Author]) - 1) , '')"
    }
    ]
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-displayColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Gepost_x003f_.DisplayName]"
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-content sp-card-formatterRef"
    },
    "children": [
    {
    "columnFormatterReference": "[$Gepost_x003f_]"
    }
    ]
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "sp-card-lastTextColumnContainer"
    },
    "children": [
    {
    "elmType": "p",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary sp-card-label"
    },
    "txtContent": "[!Miniatuur.DisplayName]"
    },
    {
    "elmType": "a",
    "attributes": {
    "title": "[$Miniatuur]",
    "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-urlContent sp-card-keyboard-focusable",
    "href": "[$Miniatuur]",
    "target": "=if ([$Miniatuur] == '', '', '_blank')"
    },
    "style": {
    "pointer-events": "=if ([$Miniatuur] == '', 'none', 'auto')",
    "text-decoration": "=if ([$Miniatuur] == '', 'none', 'auto')"
    },
    "txtContent": "=if ([$Miniatuur.desc] == '', '–', [$Miniatuur.desc])"
    }
    ]
    }
    ]
    }
    ]
    }
    }

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
🚀 Season of Sharing Community Challenge Launch!
Ask A Community Pro - Series II

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
Valantis Profile Picture

Valantis 426

#2
WarrenBelz Profile Picture

WarrenBelz 381 Most Valuable Professional

#3
Kalathiya Profile Picture

Kalathiya 315 Super User 2026 Season 1

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans