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

[R3dKap]

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:

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:

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

See you all,

Emmanuel

[Raynok1]

Hi @R3dKap ,

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

[R3dKap]

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... 😊

[Dudditz]

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

[csteig1230]

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?

[R3dKap]

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

[csteig1230]

Ahh, I get it now. Very cool. Thanks.

[kkowal]

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.

[R3dKap]

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... 😊

[DavesTechTips]

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.