Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Shadow Box

    Shadow Box

    12-30-2019 06:02 AM - last edited 05-16-2022 12:15 PM

    Super User R3dKap
    Super User
    18539 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    R3dKap
    Super User R3dKap
    Super User
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Shadow Box

    ‎12-30-2019 06:02 AM

    16-may-2022 update: added an application made by @eddiel to generate the code for a shadow (check out explanations below)


    Hello all,

    Here is version 2.0 for one of my first Power Apps components which will allow you to add nice good-looking shadow effects in your applications:

    ShadowBoxSamples.png

    TextBoxDropShadow.gif

    This component, called the ShadowBox, allows you to render a rectangle shadow. The shadow is fully customizable and the corners of the inner box can be rounded (to the point that it renders a full-circle shadow).

    For this new version of the component, properties have been regrouped:

    • Shadow (record) can be used to set the shadow's options: OffsetX, OffsetY, Color, Blur, Opacity
    • Box (record) can be used to set the inner box's options: Fill, Opacity, BorderThickness, BorderColor, Radius
    • Edge (record) can be used to set the edge's option: Position, Width, Color, Padding
    • ShowEdge (boolean) will show/hide the edge

    All details about the component and its properties, along with important notes, can be found here: https://github.com/e-gallis/PowerApps/tree/master/Components/ShadowBox

    To download the component: https://github.com/e-gallis/PowerApps/blob/master/Components/ShadowBox/ShadowBox.msapp

    I hope you'll like this component and that it will help you create nice applications...

     

    EDIT - 16-may-2022 - @eddiel has made a little application with a nice UI to allow you to generate the code for a shadow and just copy/paste it to your image control:

    R3dKap_0-1652728479652.png

    The application is attached to this post and can be downloaded below. Thanks for this @eddiel... 😉

     

    See you all,

    Emmanuel

    Shadow Box Generator 2022 v1_1.msapp
    Labels:
    • Labels:
    • Components
    Message 1 of 36
    18,539 Views
    23 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
      • 3
      • 4
    • Next »
    Raynok1
    Raynok1 Helper V
    Helper V
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎02-15-2020 09:13 AM

    Hi @R3dKap ,

    Thank you for sharing, good work. Would you be able to extend the component with the ability to handle a radius border?

    Message 2 of 36
    16,733 Views
    1 Kudo
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to Raynok1
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎02-17-2020 03:34 AM

    Hi @Raynok1,

    Thanks. Yes, adding a radius to the corners has been in my mind for quite a time now. I'll try to do it before the end of february... 😊

    Message 3 of 36
    16,715 Views
    1 Kudo
    Reply
    Dudditz
    Dudditz Continued Contributor
    Continued Contributor
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎03-08-2020 04:45 PM

    Great work!  Much easier using this than creating drop shadows using the html control.

    Message 4 of 36
    16,573 Views
    0 Kudos
    Reply
    csteig1230
    csteig1230 Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎04-28-2020 05:33 AM

    Very nice.  I'm always a little nervous incorporating something into an app for our whole organization that rely's on a resource from the internet that we don't control (in this case the base images for the shadow box).  If that image link ever goes away or changes my app would no longer display correctly.  Is it possible to have the image(s) used by the component stored locally within the app?  Or at least in a cloud storage we control like SharePoint or OneDrive?

    Message 5 of 36
    14,709 Views
    0 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to csteig1230
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎04-28-2020 07:37 AM

    Hi @csteig1230,

    Firstly, once you've imported the component inside your app, it's all yours... Meaning that, as far as you don't change it, it will keep working "for ever" because its "code" is part of your app now.

    Secondly, the image inside the component is not really an image you could store somewhere else. In fact it IS a Power Apps image control but the shadow is generated "on-the-fly" by an SVG code which is 100% HTML compatible. The EncodeUrl() function call you see inside the image control's Image property is only used to convert the SVG code special characters (like " \ / : & etc.) to html entities (like %3C %3F %20 etc.). And the http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd url you also see there is not even mandatory: it's a remark to specify what is the format of the code that follows. And further more it point to something that will never go away: it's a World Wide Web standard 😊).

    I hope I've relieved you from your nervousness... 😉

    R3dKap

    Message 6 of 36
    14,700 Views
    2 Kudos
    Reply
    csteig1230
    csteig1230 Helper I
    Helper I
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎04-28-2020 07:39 AM
    Ahh, I get it now. Very cool. Thanks.
    Message 7 of 36
    14,703 Views
    0 Kudos
    Reply
    kkowal
    kkowal Advocate I
    Advocate I
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-15-2020 11:06 PM

    Hey @R3dKap ,

     

    I was thinking of extending your ShadowBox Component with round corners! But I wanted to make sure that you are not sitting on it right now and we will do the same work?


    Otherwise I would try to implement it and share it with you.

    • @
    Message 8 of 36
    14,049 Views
    0 Kudos
    Reply
    R3dKap
    Super User R3dKap
    Super User
    In response to kkowal
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-16-2020 01:50 AM

    Hi @kkowal,

    Good idea! I was planning to review the SVG code of the component (which I did not optimize at all in its first version) and use a simple RECT element. It would then be very easy to add round corners to it.

    I don't know when I'll find the time to do it, so in the meantime, sure, feel free to extend the component to include rounded corners... Waiting to see how it looks... 😊

    Message 9 of 36
    14,037 Views
    0 Kudos
    Reply
    DavesTechTips
    Super User DavesTechTips
    Super User
    In response to R3dKap
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎10-07-2020 12:47 PM

    Great work @R3dKap, top stuff man.

     

    Have you or @kkowal gotten round to implementing the radius corners yet? This would be an great addition to an already awesome component.

     

    Message 10 of 36
    12,974 Views
    0 Kudos
    Reply
    • « Previous
      • 1
      • 2
      • 3
      • 4
    • Next »

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks