diff --git a/power-apps/gallery-with-animated-cards/README.md b/power-apps/gallery-with-animated-cards/README.md new file mode 100644 index 0000000..a7a94da --- /dev/null +++ b/power-apps/gallery-with-animated-cards/README.md @@ -0,0 +1,35 @@ +# Gallery with animated cards + +A fairly simple use of a dynamic SVG image in a gallery to highlight the selected item with an animation. + +![Gallery with animated cards](./assets/gallery-with-animated-cards.gif) + +## Authors + +Snippet|Author +--------|--------- +David Zoonekyndt | [GitHub](https://github.com/DavidZoon) ([LinkedIn](https://www.linkedin.com/in/david-zoonekyndt/) ) + +## Minimal path to awesome + +1. Open your canvas app in **Power Apps** +2. Copy the contents of the **[YAML-file](./source/formfactor.yaml)** +3. Click on the three dots of the screen where you want to add the snippet and select "Paste" +4. Customize the appearance and behavior of the map by changing the parameters in the With() of the Image object: + ![Customize With()](./assets/gallery-with-animated-cards-customize.png) + +### ⚠️⚠️⚠️ Important: + + Be careful, however, the visuals are less attractive on a gallery template that is too stretched in height or width. + The card is responsive; it will adapt to the gallery template format. The colors also change with the modern theme of your application. + +phone_portrait.png + +## Code + **[YAML-file](./source/gallery-with-animated-ards.yaml)** + + ## 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/gallery-with-animated-cards/assets/gallery-with-animated-cards-customize.png b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-customize.png new file mode 100644 index 0000000..c247dbb Binary files /dev/null and b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-customize.png differ diff --git a/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-theme-change.gif b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-theme-change.gif new file mode 100644 index 0000000..156b9c8 Binary files /dev/null and b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards-theme-change.gif differ diff --git a/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards.gif b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards.gif new file mode 100644 index 0000000..892ddc2 Binary files /dev/null and b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards.gif differ diff --git a/power-apps/gallery-with-animated-cards/assets/sample.json b/power-apps/gallery-with-animated-cards/assets/sample.json new file mode 100644 index 0000000..6daf7f3 --- /dev/null +++ b/power-apps/gallery-with-animated-cards/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-gallery-with-animated-cards", + "version": "1.0.0.0", + "source": "pnp", + "creationDateTime": "2025-07-13T00:00:00.000Z", + "updateDateTime": "2025-07-13T00:00:00.000Z", + "title": "Form Factor selector", + "shortDescription": "A fairly simple use of a dynamic SVG image in a gallery to highlight the selected item with an animation.", + "longDescription": [ + "Be careful, however, the visuals are less attractive on a gallery template that is too stretched in height or width. The card is responsive; it will adapt to the gallery template format. The colors also change with the modern theme of your application." + ], + "url": "https://github.com/DavidZoon/powerplatform-snippets/blob/main/power-apps/gallery-with-animated-cards/", + "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://github.com/DavidZoon/powerplatform-snippets/blob/cd24bdfbc69c69f48183bc70258e648d2fa0cf5b/power-apps/gallery-with-animated-cards/assets/gallery-with-animated-cards.gif", + "alt": "Preview GIF" + } + ], + "authors": [ + { + "gitHubAccount": "DavidZoon", + "name": "David Zoonekyndt", + "pictureUrl": "https://github.com/DavidZoon.png" + } + ] + } +] diff --git a/power-apps/gallery-with-animated-cards/source/gallery-with-animated-cards.yaml b/power-apps/gallery-with-animated-cards/source/gallery-with-animated-cards.yaml new file mode 100644 index 0000000..a765d32 --- /dev/null +++ b/power-apps/gallery-with-animated-cards/source/gallery-with-animated-cards.yaml @@ -0,0 +1,18 @@ +- GalleryWithAnimatedCards: + Control: Gallery@2.15.0 + Variant: Vertical + Properties: + Height: =689 + TemplateSize: =300 + Width: =498 + WrapCount: =2 + X: =40 + Y: =40 + Children: + - ImageCard: + Control: Image@2.2.3 + Properties: + Height: =Parent.TemplateHeight + Image: "=With({\r\n _Text:If(ThisItem.IsSelected,\"Selected\",\"Not Selected\"),\r\n _Height:Text(Self.Height,\"0.0\",\"en-US\"),\r\n _Width:Text(Self.Width,\"0.0\",\"en-US\"),\r\n _BackGroundColor:If(ThisItem.IsSelected,Mid(JSON(App.Theme.Colors.Darker60),2,7),Mid(JSON(App.Theme.Colors.Lighter40),2,7)),\r\n _GradientColors:{Color1:\"rgb(0, 183, 255)\",Color2:\"rgb(255, 48, 255)\"}\r\n \r\n},\"data:image/svg+xml;utf8, \" & EncodeUrl($\"\r\n\r\n \r\n \r\n\r\n\r\n\r\n{If(ThisItem.IsSelected,\"\r\n \")}\r\n {_Text} \")\r\n)" + OnSelect: =Select(Parent) + Width: =Parent.TemplateWidth