Skip to main content

Notifications

Shadow Box

R3dKap Profile Picture Posted 16 May 2022 by R3dKap 1,594

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

Categories:

Comments

  • ziron999 Profile Picture ziron999 12
    Posted 26 Oct 2022 at 14:13:17
    Shadow Box

    How would you do a shadow on just 1 side?

  • R3dKap Profile Picture R3dKap 1,594
    Posted 13 Jul 2022 at 16:59:38
    Shadow Box

    Hi @gaurav_gupta1,

    Sorry for the delay... Were you able to add the component to your app?

  • Sajarac Profile Picture Sajarac 3,251
    Posted 11 Jul 2022 at 21:48:59
    Shadow Box

    Thank you very much for your prompt response. I will check.

  • eddiel Profile Picture eddiel 2
    Posted 11 Jul 2022 at 21:39:04
    Shadow Box

    I'm not sure you can use components in a form (known limitation).

     

    The work around would be to download the app I created, which includes a code generate to create an image for the drop box, rather than use a component.

     

    See original post - and download the app - see below for link screenshot. Let me know if that works. Its not too complicated. Just use the app and follow the instructions in the app.

    eddiel_0-1657575491694.png

     

     

  • Sajarac Profile Picture Sajarac 3,251
    Posted 11 Jul 2022 at 21:34:51
    Shadow Box

    Hi @R3dKap . Thank you very much for this great tool.

    I have just a small question?

    I have been trying to add the component inside a form and for some reason I can't copy/paste or insert\component.

    Any idea what could be the issue?

    Again, thank you very much!

    🙂

  • amankumar0031 Profile Picture amankumar0031 4
    Posted 11 Jul 2022 at 17:43:59
    Shadow Box

    html base component
    1. Shadow box
    2. Background Color Change
    3.Graident Color, Gradient Direction, Gradient Color Input
    4.Border , Border Type, Border Color, Border Width
    5.Border Radius with all Separate Corner Value
    6.Margin property with all 4 separate view
    7.Shadow property with Shadow color , X and Y Value, blur & spread
    8.Button - Shadow Box Turn to html Base Button with all Shadow Box Properties
    Download Link:-
    https://aman-kumar.com/powerapps-shadow-effect/

  • gaurav_gupta1 Profile Picture gaurav_gupta1 4
    Posted 13 Jun 2022 at 04:07:06
    Shadow Box

    I am not even close to it. Can you please explain how to add this component in my powerapp?

     

  • eddiel Profile Picture eddiel 2
    Posted 12 May 2022 at 15:28:38
    Shadow Box

    @R3dKap1 definitely go ahead. The idea of the text input control vs label sounds great, and noticed some other users struggle with that when I was having them try it out. 🙂

  • R3dKap Profile Picture R3dKap 1,594
    Posted 12 May 2022 at 11:07:59
    Shadow Box

    That's great @eddiel... Nice job! 😀

    If you're ok with it, I can edit my post for the component and add your app to the post, giving you credit for it of course. FYI, I took the liberty of editing your app and just replaced your label that provides the code with a text input that resizes to the same size as the label's: I find it much easier to just click inside the text box, press CTRL-A and then copy/paste the code to the image rather than aiming at the label's starting and ending characters... 😉

    Is that ok with you? What do you think?

  • eddiel Profile Picture eddiel 2
    Posted 07 May 2022 at 22:56:09
    Shadow Box

    @R3dKap Thanks for the inspiration. 🙂

    I ended up creating the graphical interface you suggested above, but with the choice whether or not to use components. The two approaches implemented were:

    Approach 1 -  A Shadow Box Code Generator (for an image control) - A simple Canvas App which provides a user interface to play around with the input values for your approach - with no component required... it then generates the code to be copied and pasted into any image control. The size of the shadow box dynamically resizes based on the image control size.

    Approach 2. An updated version of original component, with 2 additional properties:

       i/ "Image" - which directly creates the value for an Image control's image. This still depends on an instance of the component being in the app.

       ii/ "ImageFormulaCode" which generates code that can be copied and pasted into a image without relying on an instance of the component being in the app.

     

    For most scenarios I can think of, I think Approach 1 above works best, because there's no reliance on the developer to understand the inputs in detail or how to use the component or its inputs. They just play around shadow settings using the interface, then copy the code. 

     

    For Approach 2, this would be better perhaps if the values needed to be more dynamically updated (other than height and width, which are already dynamic in Approach 1). However, I had difficulty using a graphical interface to update the component and was not able to get the values to reliably update - which I think is due to a MS bug with components I've seen elsewhere.

     

    Let me know what you think... 🙂

     

    eddiel_0-1651963466846.png

    eddiel_1-1651963888980.png