Shadow Box 05-01-2022 16:23 PM - last edited 05-01-2022 16:25 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

[90_percent]

@R3dKap once again, you have made a great component, and the community is grateful. I am sure you are excited to see how many ways and places this component has been used.

I am trying to use it to help visualize whether a market index was up or down for the day. 
i have been trying to do this two different ways, and can't get either one to work.

First way is to set a variable on visible.

Set(varIndexColor,{
IWM: If(Value(LookUp(TD_Index_Data, Symbol = "IWN").'Net Chng')>0, {Color: "#00A2E8"}, {Color: "#D16C3D"})

---

then in the edge property I used this:
{Position: Self.EdgePositionEnum.Left, Width: 8, Color: varIndexColor.IWM.Color, Padding: 0}

then i tried this:

{Position: Self.EdgePositionEnum.Left, Width: 8, Color: (If(Value(LookUp(TD_Index_Data, Symbol = "IWN").'Net Chng')>0, "#00A2E8", "#D16C3D")), Padding: 0}

Both showed this. 

What am I doing wrong......If I set it manually it showes correctly:

[R3dKap]

Hi @90_percent,

This is due to the fact that, as you may have noticed, I chose to regroup some of the settings within records:

• one parameter named Shadow for all the shadow settings (with OffsetX, OffsetY, Color, Blur and Opacity sub-properties)
• same for the Box and the Edge parameters with their own sub-properties

This means that when you look at those parameters on the Advanced tab on right-hand side of the Studio, you will see something like this:

As you can see, this allows you to map the correct sub-properties of the record-type parameters of your component instance on your screen with the sub-properties of the record-type parameters WITHIN the component definition.

So normally, for instance for the Edge parameter you should have: Color: Color, Padding: Padding, Position: Position and Width: Width just like this...

Unfortunately, when you edit the parameters record value, if at any time the Studio detects an error on your formula, then all the mapping of its sub-properties are mixed up and you end up with something like this:

And this leads to an incorrect rendering of your shadow of course...

This bug has been reported to the MS Power Apps team but doesn't have a fix at the moment yet.

The solution

So the idea is that every time you change one of the record-type component's parameter value (Box, Shadow or Edge), make sure that right after you check that the mapping of its sub-properties are "aligned" (same name on the left and within the combo box) on the Advanced tab. The three record-type parameters should always look like this at all times:

So, just remapping your component's Edge sub-properties correctly will fix your issue... 🙂

Note: to enlarge the name of the properties within the record-type parameters on the Advanced tab...

...from this:

...to this:

...which is much easier to read, you should change the width of the associated CSS property by right-clicking on one of the sub-property name and opening the browser page Inspector:

And then change the associated CSS...

...from this:

...to this:

Just replace "auto" with "100px"...

Hope this helps... 😉

[90_percent]

You the man!!!!! thank you.... didn't even catch that it misaligned them on the side!

[alekarp]

I was looking for something like this, thank you very much! It serves me too much for the applications I do.

Greetings!

[R3dKap]

@alekarp glad you like it and use it! 😊

[eddiel]

@R3dKap thanks for this component. Its awesome.

However, whilst playing around for a project, I reminded myself of the limitation of not being able to use Components yet in Galleries and Forms.

To solve this, I used the experimental component function functionality to create the below functions in a modified version of your component (attached):

• ShadowBoxGenerator.GenerateImage( Width, Height, Shadow, Box, Edge, ShowEdge )
• ShadowBoxGenerator.GenerateImageFormula( Width, Height, Shadow, Box, Edge, ShowEdge )

Both of the above use the same formula parameters as you've used for input parameters as the original component - so is quite easy to use and understand. Only the first two parameters (width and height) are required - otherwise they default to the component's input parameter defaults.

In terms of what they do:

1. GenerateImage - This can be called to generate an "Image" without creating new instances of the component each time you want to have a shadow box.
2. GenerateImageFormula - this generates the formula code for the SVG, which can be output to a label control. From here you can copy and paste the code into an Image control. This is useful if you don't want to be dependent on the original component.

To use:

1. Create an instance of the component e.g. ShadowBoxGenerator_1.

2. Call the relevant functions on the component instance e.g. ShadowBoxGenerator_1:

ShadowBoxGenerator_1.GenerateImageFormula(
    Self.Width, Self.Height,
    {OffsetX: 0, OffsetY: 0, Color: "#000000", Blur: 5, Opacity: 0.5}, // Shadow
    {Fill: "#00000000", Opacity: 1, BorderThickness: 0, BorderColor: "#000000", Radius: 0}, // Box
    {Position: ShadowBoxGenerator_1.EdgePositionEnum.Left, Width: 8, Color: "#00A2E8", Padding: 0}, // Edge
    true
)

ShadowBoxGenerator_1.GenerateImage( Self.Width, Self.Height )

The approach has worked well with Galleries and Forms.

Although it relies on the component functions which are still in experimental release, the code generator in particular doesn't carry any ongoing dependency on the approach, once the image code has been generated and copied. So I still thought it was a valuable.

I've attached a copy of the modified component and would love to get your feedback. 

Thanks

Ed

[R3dKap]

Hi @eddiel,

It's funny because I was just working on adding a new feature in my original ShadowBox component to provide a way to generate that same code to put it in an image control inside a component or inside a gallery... 😁

You can actually add a component to a gallery if it's inside a container (not directly in the gallery template). But I faced some rendering issues when there are too much items displayed in the gallery. So I had to use an image control instead, with the shadow code inside it.

The idea of generating the shadow code using a function is very interesting. But I would complete it with a component that allows you "graphically" to set your shadow's settings and then click a GENERATE button. I'll probably include that in my next ShadowBox version... 😉

Thanks a lot for sharing though... 👍

[eddiel]

@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... 🙂

[R3dKap]

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]

@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. 🙂