Shadow Box 12-30-2019 06:02 AM

[R3dKap]

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:

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

With a text input box in the foreground:

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

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