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

[R3dKap]

Thanks @DavesTechTips. Gald you appreciate it... 😊

I'm working on a new component called the ShapeShadow which will allow to have rounded corners to rectangles as well as make shadows for circles or just vertical/horizontal lines...

It's almost ready and I should release it soon... Just a little more patience here... 😉

[Anonymous]

Love this component use it a lot thanks so much. But just noticed a little issue I'm having.  On preview mode it looks fine but when I published (checked chrome and Edge) it's completely  off  position wise?  see both screen shots below..  any ideas?

[R3dKap]

Hi @Anonymous,

Have you unabled one of these two options in your app's Screen size + orientation's settings?

Have you used formulas or fixed values to specify the position and size of the shadow box?

[Anonymous]

@R3dKap   Aspect Ratio is off should I turn that on?    No formula's for position just regular X and Y and placed visually the page..

[Anonymous]

Actually that fixed it !! (turning on aspect ratio)  thanks 🙂  @R3dKap 

[R3dKap]

Glad you fixed it! Wasn't sure the ratio would fix it. Nice job!

[Najib]

First @R3dKap thanks for the great work! Did you already do the radius?

[R3dKap]

Hi @DavesTechTips, @Najib,

Thanks... 😊

Well, I just published a few minutes ago a version 2.0 of the component, thus allowing you to have rounded corners up to the point of having a full-circle shadow. Just have a look at the initial post up here on this page and you'll have all necessary information.

Hope you appreciate it...

[Najib]

@R3dKapThanks that works 100%! I am also looking for social media share buttons for Power Apps, do you know a solution? I found this but works only on Dynamics365--> https://github.com/vigneshr1236/PCF-365spartan-Custom-SocialMediaIconsControl

[R3dKap]

@Najib if you just want to add social media buttons in your app, just google for SVG icons for each social media (you can find them here: https://www.iconfinder.com/iconsets/social-media-2285) and add the files in the media section of your app. Then insert them in your app and place a shadow box behind it and give it a big radius to make it circle like this: