cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ThaiAn_Vu
Regular Visitor

Open attachment in browser

Hi all,

 

I have a form showing list attachments from SharePoint List. When I click on the attachment, it saved to my computer. My tasks required me to open alot of attachment and i could not save them all to my computer and delete them at the end of the day, Are there anyway to click on the attachment and it opens on the new tab of the browser or display them in Sharepoint ? 

18 REPLIES 18

@soraiataipa - What do you mean the "preview image"?

@LynetteJH - I know it was a bit ago, but I'm guessing the spacing is in part to the use of the flexible height gallery.

 

For anyone - Seeing my own question above I should've come back after figuring out how to do this. You can insert an image control in the gallery and reference Microsoft's UI fabric icons for the file types. 

 

First, add this fabric UI component to your app and then you can use the SVG code as your image Image property. Example of what we're using for the image property:

//Excel file types
If(".xls" in htmlAttachments.HtmlText,
    	"data:image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM261 624h189q2 4 12.5 23t24.5 45t29.5 55t29 53.5t23 41l9.5 16.5q27 -59 60.5 -118t64.5 -116h187l-209 339l205 333h-179q-31 -57 -60.5 -114t-62.5 -112q-29 57 -57 113t-57 113h-191l199 -335zM640 128h1280v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256zM1280 1152v128h512v-128h-512zM1280 896v128h512v-128h-512zM1280 640v128h512v-128h-512z' />
	  </g>
	
	</svg>"
),
//Word file types
If(".doc" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM320 624h161q2 8 9.5 43t17.5 83.5t21.5 103t21.5 100.5t16.5 76t7.5 31l7 -30.5t17.5 -76.5t22.5 -100.5t23 -103t19 -84t10 -42.5h160l148 672h-148l-80 -438l-100 438h-152l-96 -440l-86 440h-150zM640 128h1280v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256zM1280 1152v128h512v-128h-512zM1280 896v128h512v-128h-512zM1280 640v128h512v-128h-512z' />
	  </g>
	
	</svg>"
),
//PowerPoint file types
If(".ppt" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM368 1296v-672h150v226h100q52 0 97 15.5t78.5 45.5t53 72.5t19.5 96.5q0 56 -17.5 97t-49.5 67.5t-76 39t-97 12.5h-258zM1920 128v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256h1280zM1536 1408q79 0 149 -30t122.5 -82.5t82.5 -122.5t30 -149h-384v384zM1408 1280v-384h384q0 -80 -30 -149.5t-82.5 -122t-122.5 -82.5t-149 -30q-33 0 -65 6.5t-63 17.5v720q31 11 63 17.5t65 6.5zM604 980h-86v185h90q47 0 74 -20t27 -70q0 -52 -28 -73.5t-77 -21.5z' />
	  </g>
	
	</svg>"
),
//Visio file types
If(".vsd" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1573v-1445q0 -27 -10 -50t-27.5 -40.5t-40.5 -27.5t-50 -10h-1280q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-397q-24 0 -44.5 9t-36.5 25t-25 36.5t-9 44.5v922q0 24 9 44.5t25 36.5t36.5 25t44.5 9h397v384q0 27 10 50t27.5 40.5t40.5 27.5t50 10h933q26 0 49.5 -9.5t41.5 -27.5l347 -347q18 -18 27.5 -41.5t9.5 -49.5zM1664 1829v-165h165zM493 624h163l255 672h-166l-147 -427q-5 -16 -10.5 -31t-10.5 -31q-41 123 -82.5 244.5t-83.5 244.5h-170l248 -662zM640 128h1280v1408h-256q-27 0 -50 10t-40.5 27.5t-27.5 40.5t-10 50v256h-896v-384h397q24 0 44.5 -9t36.5 -25t25 -36.5t9 -44.5v-922q0 -24 -9 -44.5t-25 -36.5t-36.5 -25t-44.5 -9h-397v-256zM1600 1408l192 -192l-128 -128v-448h-256v-128h-128v384h128v-128h128v320l-128 128z' />
	  </g>
	
	</svg>"
),
//Outlook file types
If(".eml" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M2048 1043v-929q0 -24 -9 -44.5t-24.5 -36t-36 -24.5t-44.5 -9h-1564q-24 0 -44.5 9t-36 24.5t-24.5 36t-9 44.5v270h-128q-26 0 -49.5 10t-41 27.5t-27.5 41t-10 49.5v1024q0 26 10 49.5t27.5 41t41 27.5t49.5 10h256v256q0 27 10 50t27.5 40.5t40.5 27.5t50 10h1280q27 0 50 -10t40.5 -27.5t27.5 -40.5t10 -50v-776l102 -58q11 -7 18.5 -18t7.5 -25zM1152 1792v-128q26 0 49.5 -10t41 -27.5t27.5 -41t10 -49.5v-256h512v513zM1792 1152h-512v-423l512 295v128zM512 1792v-128h512v128h-512zM638 608q95 0 172 31t131 87t83.5 134t29.5 172q0 91 -28.5 166t-81.5 129t-127.5 84t-165.5 30q-97 0 -175 -30.5t-133 -86t-85 -134t-30 -174.5q0 -92 30 -167t84 -128.5t129.5 -83t166.5 -29.5zM384 128h1429l-558 312q-18 -25 -45 -40.5t-58 -15.5h-768v-256zM1920 215v731l-1 1v-2l-639 -364v-9zM454 1024q0 45 11.5 86t35 72.5t59.5 50t85 18.5q51 0 86 -19t57 -51t31.5 -73.5t9.5 -86.5q0 -46 -10.5 -86.5t-33.5 -70.5t-59 -47.5t-86 -17.5q-49 0 -84 18.5t-57.5 50t-33.5 72t-11 84.5z' />
	  </g>
	
	</svg>"
	),
//Image file types
If(".png" in htmlAttachments.HtmlText Or ".jpeg" in htmlAttachments.HtmlText,
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M256 128h1536v-128h-1664v2048h1115l549 -549v-91h-640v512h-896v-1792zM1280 1536h293l-293 293v-293zM2048 1280v-1024h-1408v1024h1408zM768 1152v-421l320 319l416 -416l160 160l256 -256v614h-1152zM1755 384h139l-230 230l-69 -70zM768 384h805l-485 486l-320 -321v-165zM1728 896q-26 0 -45 19t-19 45t19 45t45 19t45 -19t19 -45t-19 -45t-45 -19z' />
	  </g>
	
	</svg>"
),
//PDF file types
If(".pdf" in htmlAttachments.HtmlText,
"data&colon;image/svg+xml," & 
 EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
   <path fill=''
d='M1920 384h-128v-384h-1664v384h-128v1024h128v640h1243l421 -421v-219h128v-1024zM1408 1664h165l-165 165v-165zM256 1408h1408v128h-384v384h-1024v-512zM1664 384h-1408v-256h1408v256zM1792 1280h-1664v-768h1664v768zM448 1152q40 0 75 -15t61 -41t41 -61t15 -75t-15 -75t-41 -61t-61 -41t-75 -15h-64v-128h-128v512h192zM448 896q26 0 45 19t19 45t-19 45t-45 19h-64v-128h64zM896 1152q53 0 99.5 -20t81.5 -55t55 -81.5t20 -99.5t-20 -99.5t-55 -81.5t-81.5 -55t-99.5 -20h-128v512h128zM896 768q27 0 50 10t40.5 27.5t27.5 40.5t10 50t-10 50t-27.5 40.5t-40.5 27.5t-50 10v-256zM1280 1152h320v-128h-192v-128h192v-128h-192v-128h-128v512z' />
  </g>

</svg>"
),
//Other file types
	"data&colon;image/svg+xml," & 
	 EncodeUrl(
	    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='-10 0 2068 2048'>
	  <g transform='matrix(1 0 0 -1 0 2048),rotate(0,1034,1024)'>
	   <path fill=''
	d='M1243 2048l549 -549v-1499h-1664v2048h1115zM1280 1829v-293h293zM256 128h1408v1280h-512v512h-896v-1792zM512 1024v128h896v-128h-896zM512 768v128h896v-128h-896zM512 512v128h896v-128h-896z' />
	  </g>
	
	</svg>"
)
)
)
)
))))

 

Once the code is saved you can remove the component from the app. You can then use the SVG code in other apps without installing the component.

 

The result (note the down arrow on each attachment line is to see the rest of the filename):

vwyankee_0-1637334174304.png

 

Lastly, we came across an issue if there's an apostrophe in the filename - Power Apps will truncate the filename at the apostrophe and it won't load. It seems to be the only character that has this issue. With that, we substitute the URL version of an apostrophe (%27) in our HTML control HTMLText property to cover that rarity:

 

"<a href='" & Substitute(ThisItem.AbsoluteUri, "'","%27") & "?web=1'>" & ThisItem.DisplayName & "</a>"

 

In my experience the "target='_blank'" is not needed.

 

HI @vwyankee, thank you for responding.

 

In a gallery I've an image that I set to show the preview of the attachments in SharePoint.

 

I was trying to find out how to open the attatchment on selecting the image.

 

Was this more clear?

 

Thank you

@soraiataipa - I hadn't seen that application done before, but it sounds like a nice addition! That said, I can say that one of the caveats to working with custom controls inside a form data card is many cannot utilize the OnSelect property unless the parent (form and data card) are in edit mode. This is the case for buttons, icons, images and almost every other control. I've tried many for various scenarios, but the HTML Text control is about the only thing I've found that will work when the form is in view mode.

 

The only ways around it are either:

  • To set the form in edit mode and then set all your controls within your data cards to view mode and then your image, icon, button controls will work if they are set to DisplayMode.Edit. If the parent data card or parent form to that control is in DisplayMode.View it will not work, unfortunately.
  • ...or put the control you want "clickable" outside the form, which in your case will require duplicating the gallery looking up the form attachment items. If you have many fields where your form scrolls this won't work well since the gallery outside the form will not scroll with it.

Hi @vwyankee 

 

Thank you, changing the DisplayMode worked!

 

Best,

Legendary work! Thank you!

Meant for your update! The updated version of this is brilliant, thanks again.

That is such a simple, well written way of doing this.  Thank you so much.

Petchi007p
Regular Visitor

Word documents open in new tap but come into edit mode i want only  read mode.

Pream1
Regular Visitor

its good but word documents and excel files are open new this comes into edit mode users want to open new tap documents come into view mode only, so which code add html text property

Helpful resources

Announcements

Exclusive LIVE Community Event: Power Apps Copilot Coffee Chat with Copilot Studio Product Team

  It's time for the SECOND Power Apps Copilot Coffee Chat featuring the Copilot Studio product team, which will be held LIVE on April 3, 2024 at 9:30 AM Pacific Daylight Time (PDT).     This is an incredible opportunity to connect with members of the Copilot Studio product team and ask them anything about Copilot Studio. We'll share our special guests with you shortly--but we want to encourage to mark your calendars now because you will not want to miss the conversation.   This live event will give you the unique opportunity to learn more about Copilot Studio plans, where we’ll focus, and get insight into upcoming features. We’re looking forward to hearing from the community, so bring your questions!   TO GET ACCESS TO THIS EXCLUSIVE AMA: Kudo this post to reserve your spot! Reserve your spot now by kudoing this post.  Reservations will be prioritized on when your kudo for the post comes through, so don't wait! Click that "kudo button" today.   Invitations will be sent on April 2nd.Users posting Kudos after April 2nd. at 9AM PDT may not receive an invitation but will be able to view the session online after conclusion of the event. Give your "kudo" today and mark your calendars for April 3rd, 2024 at 9:30 AM PDT and join us for an engaging and informative session!

Tuesday Tip: Unlocking Community Achievements and Earning Badges

TUESDAY TIPS are our way of communicating helpful things we've learned or shared that have helped members of the Community. Whether you're just getting started or you're a seasoned pro, Tuesday Tips will help you know where to go, what to look for, and navigate your way through the ever-growing--and ever-changing--world of the Power Platform Community! We cover basics about the Community, provide a few "insider tips" to make your experience even better, and share best practices gleaned from our most active community members and Super Users.   With so many new Community members joining us each week, we'll also review a few of our "best practices" so you know just "how" the Community works, so make sure to watch the News & Announcements each week for the latest and greatest Tuesday Tips!     THIS WEEK'S TIP: Unlocking Achievements and Earning BadgesAcross the Communities, you'll see badges on users profile that recognize and reward their engagement and contributions. These badges each signify a different achievement--and all of those achievements are available to any Community member! If you're a seasoned pro or just getting started, you too can earn badges for the great work you do. Check out some details on Community badges below--and find out more in the detailed link at the end of the article!       A Diverse Range of Badges to Collect The badges you can earn in the Community cover a wide array of activities, including: Kudos Received: Acknowledges the number of times a user’s post has been appreciated with a “Kudo.”Kudos Given: Highlights the user’s generosity in recognizing others’ contributions.Topics Created: Tracks the number of discussions initiated by a user.Solutions Provided: Celebrates the instances where a user’s response is marked as the correct solution.Reply: Counts the number of times a user has engaged with community discussions.Blog Contributor: Honors those who contribute valuable content and are invited to write for the community blog.       A Community Evolving Together Badges are not only a great way to recognize outstanding contributions of our amazing Community members--they are also a way to continue fostering a collaborative and supportive environment. As you continue to share your knowledge and assist each other these badges serve as a visual representation of your valuable contributions.   Find out more about badges in these Community Support pages in each Community: All About Community Badges - Power Apps CommunityAll About Community Badges - Power Automate CommunityAll About Community Badges - Copilot Studio CommunityAll About Community Badges - Power Pages Community

Tuesday Tips: Powering Up Your Community Profile

TUESDAY TIPS are our way of communicating helpful things we've learned or shared that have helped members of the Community. Whether you're just getting started or you're a seasoned pro, Tuesday Tips will help you know where to go, what to look for, and navigate your way through the ever-growing--and ever-changing--world of the Power Platform Community! We cover basics about the Community, provide a few "insider tips" to make your experience even better, and share best practices gleaned from our most active community members and Super Users.   With so many new Community members joining us each week, we'll also review a few of our "best practices" so you know just "how" the Community works, so make sure to watch the News & Announcements each week for the latest and greatest Tuesday Tips!   This Week's Tip: Power Up Your Profile!  🚀 It's where every Community member gets their start, and it's essential that you keep it updated! Your Community User Profile is how you're able to get messages, post solutions, ask questions--and as you rank up, it's where your badges will appear and how you'll be known when you start blogging in the Community Blog. Your Community User Profile is how the Community knows you--so it's essential that it works the way you need it to! From changing your username to updating contact information, this Knowledge Base Article is your best resource for powering up your profile.     Password Puzzles? No Problem! Find out how to sync your Azure AD password with your community account, ensuring a seamless sign-in. No separate passwords to remember! Job Jumps & Email Swaps Changed jobs? Got a new email? Fear not! You'll find out how to link your shiny new email to your existing community account, keeping your contributions and connections intact. Username Uncertainties Unraveled Picking the perfect username is crucial--and sometimes the original choice you signed up with doesn't fit as well as you may have thought. There's a quick way to request an update here--but remember, your username is your community identity, so choose wisely. "Need Admin Approval" Warning Window? If you see this error message while using the community, don't worry. A simple process will help you get where you need to go. If you still need assistance, find out how to contact your Community Support team. Whatever you're looking for, when it comes to your profile, the Community Account Support Knowledge Base article is your treasure trove of tips as you navigate the nuances of your Community Profile. It’s the ultimate resource for keeping your digital identity in tip-top shape while engaging with the Power Platform Community. So, dive in and power up your profile today!  💪🚀   Community Account Support | Power Apps Community Account Support | Power AutomateCommunity Account Support | Copilot Studio  Community Account Support | Power Pages

Super User of the Month | Chris Piasecki

In our 2nd installment of this new ongoing feature in the Community, we're thrilled to announce that Chris Piasecki is our Super User of the Month for March 2024. If you've been in the Community for a while, we're sure you've seen a comment or marked one of Chris' helpful tips as a solution--he's been a Super User for SEVEN consecutive seasons!       Since authoring his first reply in April 2020 to his most recent achievement organizing the Canadian Power Platform Summit this month, Chris has helped countless Community members with his insights and expertise. In addition to being a Super User, Chris is also a User Group leader, Microsoft MVP, and a featured speaker at the Microsoft Power Platform Conference. His contributions to the new SUIT program, along with his joyous personality and willingness to jump in and help so many members has made Chris a fixture in the Power Platform Community.   When Chris isn't authoring solutions or organizing events, he's actively leading Piasecki Consulting, specializing in solution architecture, integration, DevOps, and more--helping clients discover how to strategize and implement Microsoft's technology platforms. We are grateful for Chris' insightful help in the Community and look forward to even more amazing milestones as he continues to assist so many with his great tips, solutions--always with a smile and a great sense of humor.You can find Chris in the Community and on LinkedIn. Thanks for being such a SUPER user, Chris! 💪🌠

Find Out What Makes Super Users So Super

We know many of you visit the Power Platform Communities to ask questions and receive answers. But do you know that many of our best answers and solutions come from Community members who are super active, helping anyone who needs a little help getting unstuck with Business Applications products? We call these dedicated Community members Super Users because they are the real heroes in the Community, willing to jump in whenever they can to help! Maybe you've encountered them yourself and they've solved some of your biggest questions. Have you ever wondered, "Why?"We interviewed several of our Super Users to understand what drives them to help in the Community--and discover the difference it has made in their lives as well! Take a look in our gallery today: What Motivates a Super User? - Power Platform Community (microsoft.com)

March User Group Update: New Groups and Upcoming Events!

  Welcome to this month’s celebration of our Community User Groups and exciting User Group events. We’re thrilled to introduce some brand-new user groups that have recently joined our vibrant community. Plus, we’ve got a lineup of engaging events you won’t want to miss. Let’s jump right in: New User Groups   Sacramento Power Platform GroupANZ Power Platform COE User GroupPower Platform MongoliaPower Platform User Group OmanPower Platform User Group Delta StateMid Michigan Power Platform Upcoming Events  DUG4MFG - Quarterly Meetup - Microsoft Demand PlanningDate: 19 Mar 2024 | 10:30 AM to 12:30 PM Central America Standard TimeDescription: Dive into the world of manufacturing with a focus on Demand Planning. Learn from industry experts and share your insights. Dynamics User Group HoustonDate: 07 Mar 2024 | 11:00 AM to 01:00 PM Central America Standard TimeDescription: Houston, get ready for an immersive session on Dynamics 365 and the Power Platform. Connect with fellow professionals and expand your knowledge. Reading Dynamics 365 & Power Platform User Group (Q1)Date: 05 Mar 2024 | 06:00 PM to 09:00 PM GMT Standard TimeDescription: Join our virtual meetup for insightful discussions, demos, and community updates. Let’s kick off Q1 with a bang! Leaders, Create Your Events!    Leaders of existing User Groups, don’t forget to create your events within the Community platform. By doing so, you’ll enable us to share them in future posts and newsletters. Let’s spread the word and make these gatherings even more impactful! Stay tuned for more updates, inspiring stories, and collaborative opportunities from and for our Community User Groups.   P.S. Have an event or success story to share? Reach out to us – we’d love to feature you!

Top Solution Authors
Top Kudoed Authors
Users online (5,414)