Added the 'progress-bar-card' YAML snippet

power-apps/progress-bar-card/README.md

@@ -0,0 +1,92 @@
+# Progress Bar Card
+
+## Overview
+The `Progress Bar Card` is a custom HTML component for Power Apps designed to display a progress bar with a title, value, and subtitle. 
+
+This component is ideal for visualizing metrics like customer satisfaction rates in an engaging format.
+
+![Progress Bar Card Example](./assets/progress-bar-card.png)
+
+## Authors
+
+Author (s)| Socials
+--------|---------
+Rudimar Baesso Althof | [GitHub](https://github.com/rualthof) - [YouTube](https://www.youtube.com/@powerrudy) - [Linkedin](https://www.linkedin.com/in/rudimar/)
+
+
+## Features
+- Displays a title, value, and subtitle with a progress bar.
+- Uses a gradient color effect for the progress bar.
+- Customizable properties for title, value, background color, and gradient colors.
+- Simple, clean design suitable for dashboards or report pages in Power Apps.
+
+## Minimal path to awesome
+
+1. Open your canvas app in **Power Apps**
+1. Copy the contents of the **[YAML-file](./source/progress-bar-card.yaml)**.
+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 card to your screen and you can customize the item `HTMLText`property to dynamically change its data.
+
+![View of the pasted card](./assets/thumbnail.png)
+
+
+## YAML Configuration
+
+### Control
+The `htmlProgressBarCard` uses the `HtmlViewer` control to render HTML-based visuals.
+
+## Configuring Properties in the `With` Function
+
+The `htmlProgressBarCard` uses a `With` function to set key properties for customization. 
+
+It's located in the `HTMLText` property and here’s a breakdown of each property and how to configure them:
+
+- **Title**: The main title text displayed on the card (e.g., `"Customer Satisfaction"`).
+- **Subtitle**: The text displayed below the progress bar to describe the value (e.g., `"Satisfaction Rate"`).
+- **Value**: The displayed percentage value and progress bar fill level (e.g., `"92%"`).
+- **BgColor**: Background color of the card. Use Power Apps color values, like `Color.White`.
+- **GradientStart**: The starting color of the gradient used for the progress bar and value text (e.g., `"#da22ff"`).
+- **GradientEnd**: The ending color of the gradient for the progress bar and value text (e.g., `"#ff9b44"`).
+
+### Card Configuration Example
+
+Below is the relevant code excerpt showing how to set these properties in the `With` function:
+
+```yaml
+=With(
+    {
+        Title: "Customer Satisfaction",
+        Subtitle: "Satisfaction Rate",
+        Value: "92%",
+        BgColor: Color.White,
+        GradientStart: "#da22ff", // Start color of the gradient
+        GradientEnd: "#ff9b44"    // End color of the gradient
+    },
+    // HTML structure that builds the card
+)
+```
+
+Here is an example of how it is configured in the Power Apps interface:
+![Progress Bar Card Configuratoin Example](./assets/configuration-demo.png)
+
+## Related Videos
+
+For a complete guide on creating custom controls in Power Apps, check out my playlist on YouTube:
+
+[Power Apps Design & Customizations Playlist 🚀](https://youtube.com/playlist?list=PLJCcpEOSXzJQlsKuP2YeHHyAYjj2x4qsZ&si=aFGKpSEJ0a8KrFpF)
+
+
+This playlist contains all the videos I’ve created on custom controls, with tutorials and tips to enhance your Power Apps projects.
+
+
+<br>
+
+## 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.**
+
+<br><br><br>
+
+<img src="https://telemetry.sharepointpnp.com/powerplatform-snippets/samples/progress-bar-card" aria-hidden="true" >

power-apps/progress-bar-card/assets/sample.json

@@ -0,0 +1,50 @@
+[
+    {
+      "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json",
+      "name": "pnp-powerplatform-snippets-progress-bar-card",
+      "version": "1.0.0.0",
+      "source": "pnp",
+      "creationDateTime": "2024-10-31T00:00:00.000Z",
+      "updateDateTime": "2024-10-31T00:00:00.000Z",
+      "title": "HTML Progress Bar Card",
+      "shortDescription": "A Power Apps YAML snippet for a customizable progress bar card with gradient and text options.",
+      "longDescription": [
+        "This is a Power Apps YAML snippet that displays a customizable HTML-based progress bar card. The card is designed to show a title, percentage value, and descriptive subtitle with gradient color options for visual appeal. Suitable for applications that require easy visualization of progress metrics."
+      ],
+      "url": "https://github.com/pnp/powerplatform-snippets/tree/main/power-apps/progress-bar-card/",
+      "products": [
+        "Power Platform",
+        "Power Apps",
+        "powerplatform-snippets",
+        "power-apps-snippets"
+      ],
+      "tags": ["progress", "gradient", "html", "powerapps"],
+      "categories": ["Visualizations", "Dashboard Components"],
+      "metadata": [
+        {
+          "key": "Product",
+          "value": "Power Apps"
+        },
+        {
+          "key": "Type",
+          "value": "Snippet"
+        }
+      ],
+      "thumbnails": [
+        {
+          "type": "image",
+          "order": 100,
+          "url": "https://raw.githubusercontent.com/rualthof/powerplatform-snippets/main/power-apps/progress-bar-card/assets/progress-bar-card.png",
+          "alt": "Progress Bar Card Preview"
+        }
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "rualthof",
+          "name": "Rudimar Baesso Althof",
+          "pictureUrl": "https://github.com/rualthof.png"
+        }
+      ]
+    }
+  ]
+

power-apps/progress-bar-card/source/progress-bar-card.yaml

@@ -0,0 +1,33 @@
+- htmlProgressBarCard:
+    Control: HtmlViewer
+    Properties:
+      HtmlText: |+
+        =With(
+            {
+                Title: "Customer Satisfaction",
+                Subtitle: "Satisfaction Rate",
+                Value: "92%",
+                BgColor: Color.White,
+                GradientStart: "#da22ff", // Start color of the gradient
+                GradientEnd: "#ff9b44"    // End color of the gradient
+            },
+            $"<div style='text-align: center; border-radius: 10px; padding: 10px; background-color: {Substitute(JSON(BgColor), """","")}; box-shadow: 0 4px 8px rgba(0,0,0,0.1); position: absolute; height: 96%; width: 96%;'>
+                <div style='height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;'>
+                    <!-- Title Section -->
+                    <div style='font-size: 1.2em; font-weight: bold; margin-bottom: 5px; color: #333;'>{Title}</div>
+                    <!-- Value Section -->
+                    <div style='font-size: 2.5em; font-weight: bold; background: linear-gradient(90deg, {GradientStart}, {GradientEnd}); -webkit-background-clip: text; color: transparent; margin-bottom: 10px;'>{Value}</div>
+                    <!-- Progress Bar Section -->
+                    <div style='width: 80%; height: 8px; background-color: #e0e0e0; border-radius: 4px; margin-top: 10px;'>
+                        <div style='width: {Value}; height: 100%; background: linear-gradient(90deg, {GradientStart}, {GradientEnd}); border-radius: 4px;'></div>
+                    </div>
+                    <!-- Footer Text Section -->
+                    <div style='font-size: 0.9em; color: #666; margin-top: 10px;'>{Subtitle}</div>
+                </div>
+            </div>"
+        )
+      Height: =161
+      Size: =12
+      Width: =275
+      X: =56
+      Y: =104