diff --git a/power-apps/glass-effect-template/README.md b/power-apps/glass-effect-template/README.md new file mode 100644 index 0000000..f6e865c --- /dev/null +++ b/power-apps/glass-effect-template/README.md @@ -0,0 +1,313 @@ +# Glass Effect Template + +This screen showcases a glass-effect design using the HTML component in Power Apps. It features a prominent main card in the center displaying a profile. +![View of the paste code button](./assets/maincard.png) + +The KPI section uses emoji icons creatively to represent key metrics, adding a visual and intuitive touch. Each KPI is displayed within a card, featuring the metric value alongside its corresponding emoji. +![View of the paste code button](./assets/KPIs.png) + +This snippet helps create a visually engaging layout using simple Power Apps elements. + +## Authors + +Snippet|Author(s) +--------|--------- +Leonardo Russo | [GitHub](https://github.com/leorrusso) + +## Code + +```yaml +- conMain: + Control: GroupContainer + Variant: manualLayoutContainer + Properties: + Height: =1366 + Width: =768 + Children: + - imgBackground: + Control: Image + Properties: + Image: ="https://images.pexels.com/photos/3617500/pexels-photo-3617500.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=3" + Height: =Parent.Height + ImagePosition: =ImagePosition.Fill + Width: =Parent.Width + - Gallery1: + Control: Gallery + Variant: galleryHorizontal + Properties: + Items: =["home","calendar","code","cog"] + Height: =144 + ShowScrollbar: =false + TemplateSize: =188 + Transition: =Transition.Pop + Width: =768 + Y: =1222 + Children: + - HtmlText1_2: + Control: HtmlViewer + Properties: + HtmlText: "=\"\n\n
\n \n \n \n \n
\"" + AutoHeight: =true + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Fill: =RGBA(0, 0, 0, 0) + Font: =Font.'Segoe UI' + Height: =95 + Width: =97 + X: =54 + Y: =15 + - Label2: + Control: Label + Properties: + Text: ="GLASS EFFECT" + Color: =RGBA(255, 255, 255, 0.88) + FontWeight: =FontWeight.Semibold + Height: =117 + PaddingLeft: =40 + Size: =28 + Width: =734 + X: =33 + Y: =23 + - htmKPI1: + Control: HtmlViewer + Properties: + HtmlText: "=\"
\n
❤️
97\n\n
\n Lightning\n
\n \n
\n \n\n\n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Height: =233 + Width: =241 + X: =53 + Y: =747 + - cardGroup: + Control: Group + Children: + - Button1_1: + Control: Classic/Button + Properties: + Text: ="" + BorderColor: =Color.White + BorderStyle: =BorderStyle.None + BorderThickness: =1 + Fill: =RGBA(0, 0, 0, 0) + Height: =353 + HoverFill: =RGBA(250,250,250,0.1) + PressedFill: = + Width: =657 + X: =61 + Y: =353 + - userImage: + Control: Image + Properties: + Image: ="https://avatars.githubusercontent.com/u/62526027?v=4" + BorderColor: =RGBA(255, 255, 255, 1) + BorderThickness: =1 + Height: =88 + RadiusBottomLeft: =180 + RadiusBottomRight: =180 + RadiusTopLeft: =180 + RadiusTopRight: =180 + Transparency: =0.1 + Width: =94 + X: =579 + Y: =429 + - Button1: + Control: Classic/Button + Properties: + Text: ="Get in touch" + BorderColor: =Color.White + BorderThickness: =1 + Fill: =RGBA(0, 0, 0, 0) + Height: =52 + HoverFill: =RGBA(250,250,250,0.1) + PaddingLeft: =28 + Width: =196 + X: =477 + Y: =616 + - HtmlText1: + Control: HtmlViewer + Properties: + HtmlText: "=\"\n\n
\n \n \n
LEONARDO RUSSO
\n
Power Apps Addict
\n \n \n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Fill: =RGBA(0, 0, 0, 0) + Font: =Font.'Segoe UI' + Height: =394 + Width: =686 + X: =61 + Y: =353 + - htmKPI2: + Control: HtmlViewer + Properties: + HtmlText: "=\"
\n
\U0001F680
32\n\n
\n Rockets\n
\n \n
\n \n\n\n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Height: =233 + Width: =241 + X: =275 + Y: =747 + - htmKPI3: + Control: HtmlViewer + Properties: + HtmlText: "=\"
\n
\U0001F4B8
24%\n\n
\n Flying Money\n
\n \n
\n \n\n\n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Height: =233 + Width: =241 + X: =497 + Y: =747 + - galTopButtons: + Control: Gallery + Variant: galleryHorizontal + Properties: + Items: =["Apps", "BI", "Flow"] + Height: =116 + ShowScrollbar: =false + TemplatePadding: =20 + TemplateSize: =198 + Transition: =Transition.Pop + Width: =673 + X: =53 + Y: =119 + Children: + - btnTop: + Control: Classic/Button + Properties: + Text: =ThisItem.Value + BorderColor: =Color.White + BorderThickness: =1 + Fill: =RGBA(0, 0, 0, 0) + Height: =52 + HoverFill: =RGBA(250,250,250,0.1) + Width: =196 + Y: =24 + - imgPowerAppsa: + Control: Image + Properties: + Image: |- + ="data:image/svg+xml;utf8, "& + EncodeUrl(" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ") + Height: =64 + Width: =64 + X: =654 + Y: =49 + - icoGitHub: + Control: Image + Properties: + OnSelect: =Launch("https://github.com/leorrusso") + Image: ="https://icongr.am/fontawesome/github.svg?size=128&color=fafafa" + Height: =57 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =8 + Width: =49 + X: =90 + Y: =614 + - icoLinkedin: + Control: Image + Properties: + OnSelect: ="https://www.linkedin.com/in/leonardorrusso/" + Image: ="https://icongr.am/fontawesome/linkedin.svg?size=128&color=fafafa" + Height: =57 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =8 + Width: =49 + X: =137 + Y: =614 + - icoInstagrama: + Control: Image + Properties: + OnSelect: ="https://www.instagram.com/powerappsleo/" + Image: ="https://icongr.am/fontawesome/instagram.svg?size=128&color=fafafa" + Height: =57 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =8 + Width: =49 + X: =186 + Y: =615 + - icoPaperPlane: + Control: Image + Properties: + OnSelect: =Launch("mailto:leonardo.russo@ltechsp.onmicrosoft.com") + Image: ="https://icongr.am/fontawesome/paper-plane.svg?size=128&color=fafafa" + Height: =45 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =9 + Width: =37 + X: =488 + Y: =618 + +``` + +## Minimal path to awesome + +1. Open your canvas app in **Power Apps** +1. Copy the contents of the **[YAML-file](./source/glass.pa.yaml)** or copy it from the code above. +1. Right click on the screen where you want to add the snippet and select "Paste YAML" +![View of the paste code button](./assets/pastecode.png) + +This will add the containers to your screen and you can delete the containers you don't want to use. + +![View of the pasted containers](./assets/screen-glass.png) + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + + diff --git a/power-apps/glass-effect-template/assets/KPIs.png b/power-apps/glass-effect-template/assets/KPIs.png new file mode 100644 index 0000000..386ba8d Binary files /dev/null and b/power-apps/glass-effect-template/assets/KPIs.png differ diff --git a/power-apps/glass-effect-template/assets/bottom-navbar.png b/power-apps/glass-effect-template/assets/bottom-navbar.png new file mode 100644 index 0000000..f1df35d Binary files /dev/null and b/power-apps/glass-effect-template/assets/bottom-navbar.png differ diff --git a/power-apps/glass-effect-template/assets/componentPasteCode.png b/power-apps/glass-effect-template/assets/componentPasteCode.png new file mode 100644 index 0000000..aeaa109 Binary files /dev/null and b/power-apps/glass-effect-template/assets/componentPasteCode.png differ diff --git a/power-apps/glass-effect-template/assets/maincard.png b/power-apps/glass-effect-template/assets/maincard.png new file mode 100644 index 0000000..f5adf43 Binary files /dev/null and b/power-apps/glass-effect-template/assets/maincard.png differ diff --git a/power-apps/glass-effect-template/assets/pastecode.png b/power-apps/glass-effect-template/assets/pastecode.png new file mode 100644 index 0000000..15edc66 Binary files /dev/null and b/power-apps/glass-effect-template/assets/pastecode.png differ diff --git a/power-apps/glass-effect-template/assets/sample.json b/power-apps/glass-effect-template/assets/sample.json new file mode 100644 index 0000000..508b447 --- /dev/null +++ b/power-apps/glass-effect-template/assets/sample.json @@ -0,0 +1,49 @@ +[ + { + "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json", + "name": "pnp-powerplatform-snippets-glass-effect-template", + "version": "1.0.0.0", + "source": "pnp", + "creationDateTime": "2024-10-30T00:00:00.000Z", + "updateDateTime": "2024-10-30T00:00:00.000Z", + "title": "Glass Effect Template", + "shortDescription": "This snippet showcases a mobile screen using effect using glass effect.", + "longDescription": [ + "This screen showcases a glass-effect design using the HTML text component in Power Apps. It features a prominent main card in the center displaying a profile, with navigation buttons at the top. At the bottom, there’s a navbar for additional navigation options. This snippet helps create a visually engaging layout using simple Power Apps elements." + ], + "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/glass-effect-template/", + "products": [ + "Power Platform", + "Power Apps", + "powerplatform-snippets", + "power-apps-snippets" + ], + "tags": [], + "categories": [], + "metadata": [ + { + "key": "Product", + "value": "Power Apps" + }, + { + "key": "Type", + "value": "Snippet" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://raw.githubusercontent.com/leorrusso/powerplatform-snippets/main/power-apps/glass-effect-template/assets/screen-glass.png", + "alt": "Preview PNG" + } + ], + "authors": [ + { + "gitHubAccount": "leorrusso", + "name": "Leonardo Russo", + "pictureUrl": "https://avatars.githubusercontent.com/u/62526027?v=4&size=64https://avatars.githubusercontent.com/u/62526027?v=4&size=64" + } + ] + } + ] \ No newline at end of file diff --git a/power-apps/glass-effect-template/assets/screen-glass.png b/power-apps/glass-effect-template/assets/screen-glass.png new file mode 100644 index 0000000..a01bb87 Binary files /dev/null and b/power-apps/glass-effect-template/assets/screen-glass.png differ diff --git a/power-apps/glass-effect-template/source/glass.pa.yaml b/power-apps/glass-effect-template/source/glass.pa.yaml new file mode 100644 index 0000000..06af73c --- /dev/null +++ b/power-apps/glass-effect-template/source/glass.pa.yaml @@ -0,0 +1,275 @@ +- conMain: + Control: GroupContainer + Variant: manualLayoutContainer + Properties: + Height: =1366 + Width: =768 + Children: + - imgBackground: + Control: Image + Properties: + Image: ="https://images.pexels.com/photos/3617500/pexels-photo-3617500.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=3" + Height: =Parent.Height + ImagePosition: =ImagePosition.Fill + Width: =Parent.Width + - Gallery1: + Control: Gallery + Variant: galleryHorizontal + Properties: + Items: =["home","calendar","code","cog"] + Height: =144 + ShowScrollbar: =false + TemplateSize: =188 + Transition: =Transition.Pop + Width: =768 + Y: =1222 + Children: + - HtmlText1_2: + Control: HtmlViewer + Properties: + HtmlText: "=\"\n\n
\n \n \n \n \n
\"" + AutoHeight: =true + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Fill: =RGBA(0, 0, 0, 0) + Font: =Font.'Segoe UI' + Height: =95 + Width: =97 + X: =54 + Y: =15 + - Label2: + Control: Label + Properties: + Text: ="GLASS EFFECT" + Color: =RGBA(255, 255, 255, 0.88) + FontWeight: =FontWeight.Semibold + Height: =117 + PaddingLeft: =40 + Size: =28 + Width: =734 + X: =33 + Y: =23 + - htmKPI1: + Control: HtmlViewer + Properties: + HtmlText: "=\"
\n
❤️
97\n\n
\n Lightning\n
\n \n
\n \n\n\n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Height: =233 + Width: =241 + X: =53 + Y: =747 + - cardGroup: + Control: Group + Children: + - Button1_1: + Control: Classic/Button + Properties: + Text: ="" + BorderColor: =Color.White + BorderStyle: =BorderStyle.None + BorderThickness: =1 + Fill: =RGBA(0, 0, 0, 0) + Height: =353 + HoverFill: =RGBA(250,250,250,0.1) + PressedFill: = + Width: =657 + X: =61 + Y: =353 + - userImage: + Control: Image + Properties: + Image: ="https://avatars.githubusercontent.com/u/62526027?v=4" + BorderColor: =RGBA(255, 255, 255, 1) + BorderThickness: =1 + Height: =88 + RadiusBottomLeft: =180 + RadiusBottomRight: =180 + RadiusTopLeft: =180 + RadiusTopRight: =180 + Transparency: =0.1 + Width: =94 + X: =579 + Y: =429 + - Button1: + Control: Classic/Button + Properties: + Text: ="Get in touch" + BorderColor: =Color.White + BorderThickness: =1 + Fill: =RGBA(0, 0, 0, 0) + Height: =52 + HoverFill: =RGBA(250,250,250,0.1) + PaddingLeft: =28 + Width: =196 + X: =477 + Y: =616 + - HtmlText1: + Control: HtmlViewer + Properties: + HtmlText: "=\"\n\n
\n \n \n
LEONARDO RUSSO
\n
Power Apps Addict
\n \n \n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Fill: =RGBA(0, 0, 0, 0) + Font: =Font.'Segoe UI' + Height: =394 + Width: =686 + X: =61 + Y: =353 + - htmKPI2: + Control: HtmlViewer + Properties: + HtmlText: "=\"
\n
\U0001F680
32\n\n
\n Rockets\n
\n \n
\n \n\n\n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Height: =233 + Width: =241 + X: =275 + Y: =747 + - htmKPI3: + Control: HtmlViewer + Properties: + HtmlText: "=\"
\n
\U0001F4B8
24%\n\n
\n Flying Money\n
\n \n
\n \n\n\n
\"" + DisabledBorderColor: =RGBA(56, 56, 56, 1) + Height: =233 + Width: =241 + X: =497 + Y: =747 + - galTopButtons: + Control: Gallery + Variant: galleryHorizontal + Properties: + Items: =["Apps", "BI", "Flow"] + Height: =116 + ShowScrollbar: =false + TemplatePadding: =20 + TemplateSize: =198 + Transition: =Transition.Pop + Width: =673 + X: =53 + Y: =119 + Children: + - btnTop: + Control: Classic/Button + Properties: + Text: =ThisItem.Value + BorderColor: =Color.White + BorderThickness: =1 + Fill: =RGBA(0, 0, 0, 0) + Height: =52 + HoverFill: =RGBA(250,250,250,0.1) + Width: =196 + Y: =24 + - imgPowerAppsa: + Control: Image + Properties: + Image: |- + ="data:image/svg+xml;utf8, "& + EncodeUrl(" + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ") + Height: =64 + Width: =64 + X: =654 + Y: =49 + - icoGitHub: + Control: Image + Properties: + OnSelect: =Launch("https://github.com/leorrusso") + Image: ="https://icongr.am/fontawesome/github.svg?size=128&color=fafafa" + Height: =57 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =8 + Width: =49 + X: =90 + Y: =614 + - icoLinkedin: + Control: Image + Properties: + OnSelect: ="https://www.linkedin.com/in/leonardorrusso/" + Image: ="https://icongr.am/fontawesome/linkedin.svg?size=128&color=fafafa" + Height: =57 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =8 + Width: =49 + X: =137 + Y: =614 + - icoInstagrama: + Control: Image + Properties: + OnSelect: ="https://www.instagram.com/powerappsleo/" + Image: ="https://icongr.am/fontawesome/instagram.svg?size=128&color=fafafa" + Height: =57 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =8 + Width: =49 + X: =186 + Y: =615 + - icoPaperPlane: + Control: Image + Properties: + OnSelect: =Launch("mailto:leonardo.russo@ltechsp.onmicrosoft.com") + Image: ="https://icongr.am/fontawesome/paper-plane.svg?size=128&color=fafafa" + Height: =45 + PaddingBottom: =8 + PaddingLeft: =8 + PaddingRight: =8 + PaddingTop: =9 + Width: =37 + X: =488 + Y: =618