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 consulting services
    • Blog
    • Customer stories
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • 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
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • 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

    Super User R3dKap
    Super User
    7339 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

    Moved from Community App Samples Gallery.

     

    Hello all,

    Here is a PowerApps component that will allow you to add nice good-looking shadow effects in your applications:

    ShadowBox.png

    Other samples with labels and icons controls placed in the foreground:

    ShadowBoxVisualCard1.pngShadowBoxVisualCard2.pngShadowBoxVisualCard3.png

    With a text input box in the foreground:

    TextBoxDropShadow.gif

    This component, called the ShadowBox component, allows you to render a rectangle shadow. The shadow is fully customizable thanks to the following properties of the component:

    • ShadowOffsetX (number)
    • ShadowOffsetY (number)
    • ShadowBlur (number)
    • ShadowColor (string)
    • ShadowOpacity (number)

    Using positive values for the ShadowOffsetX and ShadowOffsetY properties will drop the shadow in the lower-right corner of the box. Using negative values will drop the shadow in the upper-left corner of the box.

    Appart from customizing the shadow, you can also define the box's properties with the following parameters:

    • BoxFill (string)
    • BoxOpacity (number)
    • BoxBorderWidth (number)
    • BoxBorderColor (string)

    And last but not least, you can activate and customize a colouring edge that will be displayed inside the box, thanks to the following properties:

    • ShowEdge (boolean)
    • EdgePosition (text) = values can be top, right, bottom, left
    • EdgeWidth (number)
    • EdgePadding (number)
    • EdgeColor (string)

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

    You can download the component and see more details right here: https://github.com/e-gallis/PowerApps

    See you all,

    Emmanuel

    Preview file
    83 KB
    ShadowBox.zip
    Message 1 of 16
    7,339 Views
    11 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    • « Previous
      • 1
      • 2
    • 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 16
    6,953 Views
    0 Kudos
    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 16
    6,935 Views
    1 Kudo
    Reply
    Dudditz
    Dudditz Responsive Resident
    Responsive Resident
    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 16
    6,796 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 16
    4,929 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 16
    4,921 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 16
    4,920 Views
    0 Kudos
    Reply
    kkowal
    kkowal
    Frequent Visitor
    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 16
    4,266 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 16
    4,257 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 16
    3,193 Views
    0 Kudos
    Reply
    Preview Exit Preview

    never-displayed

    You must be signed in to add attachments

    never-displayed

    Additional options
    You do not have permission to remove this product association.
     
    • « Previous
      • 1
      • 2
    • Next »

    Power Platform

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

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

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

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