Shadow Box
Like
Share
Report
Posted
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:
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
Comments
-
Shadow Box
Hi @gaurav_gupta1,
Sorry for the delay... Were you able to add the component to your app?
-
-
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.
-
-
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/ -
-
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?
-
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... 🙂
*This post is locked for comments