Steps to Embed a HTML Page in a Model-Driven App Form

Image
 Step 1: Upload the HTML file as a Web Resource Open your solution, then click on + New and select Web Resource. Add your HTML code. Set the File Type to 'Webpage (HTML)', provide a Name and Display Name, then click Save. HTML CODE: <!DOCTYPE html> <html> <head>     <title>Account Info</title>     <meta charset="utf-8" />     <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>     <style>         body {             font-family: "Segoe UI", sans-serif;             padding: 20px;         }     </style> </head> <body>     <h2>Account Information</h2>     <p> <strong>Record Id:</strong> <span id="id">Loading...</span><br/> <strong>Entity Name:</strong> <span...

Supercharge Your Power Apps Look with SVG

 What is SVG?

SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics. Unlike raster images (like PNG or JPG), SVGs don’t lose quality when scaled, making them perfect for responsive and sharp UI designs.

Key Benefits of SVG:

  • Scalable without losing quality.

  • Lightweight compared to image files.

  • Customizable using CSS or inline styles.

  • Supports interactivity and animations.

  • Ideal for icons, shapes, progress indicators, graphs, etc.


How to Use SVG in Power Apps – Step by Step

Step 1: Get Your SVG Code

You can get SVG code from:



Step 2: Convert SVG to a Data URI (if needed)

  • Power Apps doesn’t support raw <svg> tags directly.

  • Convert it to data URI format.

You can use tools like:
https://yoksel.github.io/url-encoder/

Example:

data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='blue'
stroke-width='4' fill='lightblue' /></svg>

Step 3: Insert Image Control in Power Apps

  • In your Canvas App, insert an Image control.

  • Set the Image property to:

Power FX:
"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><circle cx='50' cy='50' r='40' stroke='green' stroke-width='4'
fill='lightblue' /></svg>"
)

Step 4: Make It Dynamic (Optional)

You can build dynamic SVGs using concatenated strings in Power Fx.

Add Label control.

Example:

power FX

"data:image/svg+xml;utf8," & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><text x='10' y='50' font-size='20'>" & Label1.Text & "</text></svg>
"
)

This allows SVG text or colors to change based on app input!


Step 5: Style & Integrate in UI

  • You can layer SVGs over buttons or backgrounds.

  • Use them as icons, progress indicators, status badges, or visual feedback.


Dynamic SVG Examples:

Example 1: Display Dynamic SVG Text in Power Apps

  1. Insert a Text Input control and name it TextInput1.

  2. Insert an Image control onto the screen.

  3. Select the Image control, and in the Image property, paste the following code:


"data:image/svg+xml;utf8,"&EncodeUrl("<svg width='500' height='100' xmlns='http://www.w3.org/2000/svg'>
  <style>
    .hello-text {
      opacity: 0;
      transform: translateX(-50px) scale(1);
      fill: black;
      font: bold 40px sans-serif;
      animation: fadeSlideIn 2s ease-out forwards, scaleColor 1s ease-in-out 2s forwards;
    }

    @keyframes fadeSlideIn {
      to {
        opacity: 1;
        transform: translateX(0) scale(1);
      }
    }

    @keyframes scaleColor {
      to {
        transform: translateX(0) scale(1.1);
        fill: #ff5722;
      }
    }
  </style>

  <text x='50' y='60' class='hello-text'>"&TextInput1.Text&"</text>
</svg>
")

It will include animation and display similar to the example shown in the image below.

Show Dynamic Progress Circle Using Slider Value

  1. Insert a Slider control and name it Slider1.

  2. Insert an Image control onto the screen.

  3. Select the Image control, and in its Image property, paste the following code

"data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 120 120' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
  <style>
    .progress-bg {
      fill: none;
      stroke: #eee;
      stroke-width: 10;
    }

    .progress-bar {
      fill: none;
      stroke-width: 10;
      stroke-linecap: round;
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      stroke-dasharray: 314;
      stroke-dashoffset: 314;
      animation: fillProgress 2s ease-out forwards;
    }

    @keyframes fillProgress {
      to {
        stroke-dashoffset: "&Text(314 - (Slider1.Value * 3.14))&";
      }
    }
  </style>

  <circle class='progress-bg' cx='60' cy='60' r='50' />
  <circle class='progress-bar' cx='60' cy='60' r='50' stroke='"&If(
  Slider1.Value < 20, "red",
  Slider1.Value < 40, "yellow",
  Slider1.Value < 60, "#bada55",
  Slider1.Value = 100, "green",
  "#00bcd4"
)
&"'/>
  <text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20' fill='#333'>
    "&(Slider1.Value)&"
  </text>
</svg>
")
The output will appear as shown in the image below.

Example 3: Loading Animation Using a Timer

  1. Insert a Timer control and name it Timer1.

  2. Set its Duration property to 5000 (for 5 seconds).

  3. Set the Repeat property to true and AutoStart to true to keep the animation looping.

  4. Insert an Image control onto the screen.

  5. In the Image property of the Image control, paste the following code

ex 3.1:
"data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 120 120' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>
  <style>
    .track {
      fill: none;
      stroke: #eee;
      stroke-width: 10;
    }

    .progress {
      fill: none;
      stroke: #2196f3;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-dasharray: 314;
      stroke-dashoffset: "&Text(314 - (Timer1.Value / Timer1.Duration) * 314)&";
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      transition: stroke-dashoffset 0.1s linear;
    }

    .label {
      font-size: 20px;
      fill: #333;
      text-anchor: middle;
      dominant-baseline: middle;
    }
  </style>

  <circle class='track' cx='60' cy='60' r='50' />
  <circle class='progress' cx='60' cy='60' r='50' />
  <text x='60' y='60' class='label'>"&Text(Round(Timer1.Value / 1000, 1) & "s")&"</text>
</svg>

")

 ex 3.2: add another image control and paste the below code

        "data:image/svg+xml;utf8,"&EncodeUrl("<svg viewBox='0 0 120 120' width='200' height='200' xmlns='http://www.w3.org/2000/svg'>

  <style>
    .track {
      fill: none;
      stroke: #eee;
      stroke-width: 10;
    }

    .progress {
      fill: none;
      stroke: #2196f3;
      stroke-width: 10;
      stroke-linecap: round;
      stroke-dasharray: 314;
      stroke-dashoffset: "&Text(314 - (Timer1.Value / Timer1.Duration) * 314)&";
      transform: rotate(-90deg);
      transform-origin: 50% 50%;
      transition: stroke-dashoffset 0.1s linear;
    }

    .label {
      font-size: 16px;
      font-family: Calibri, sans-serif;
      fill: #333;
      text-anchor: middle;
      dominant-baseline: middle;
    }
  </style>

  <circle class='track' cx='60' cy='60' r='50' />
  <circle class='progress' cx='60' cy='60' r='50' />
  <text x='60' y='65' class='label'>Loading...</text>
</svg>

")

The output will appear as shown in the image below.


Example 4: Rating Animation Using Dropdown

  1. Insert a Dropdown control and name it Dropdown1.

  2. Set its Items property to Sequence(5,1,1)

  3. Insert an Image control onto the screen.

  4. In the Image property of the Image control, paste the following code:


"data:image/svg+xml;utf8,"&EncodeUrl(Substitute(
  Substitute(
    Substitute(
      Substitute(
        Substitute(
          svgTemplate,
          "STAR1", If(Value(Dropdown1.Selected.Value) >= 1, "filled", "")
        ),
        "STAR2", If(Value(Dropdown1.Selected.Value) >= 2, "filled", "")
      ),
      "STAR3", If(Value(Dropdown1.Selected.Value) >= 3, "filled", "")
    ),
    "STAR4", If(Value(Dropdown1.Selected.Value) >= 4, "filled", "")
  ),
  "STAR5", If(Value(Dropdown1.Selected.Value) >= 5, "filled", "")
)
)

On App.Onstart Propert add the below code
Set(svgTemplate,"<svg viewBox='0 0 250 50' width='250' height='50' xmlns='http://www.w3.org/2000/svg'>
  <style>
    .star {
      fill: #ccc;
      transition: fill 0.3s ease, transform 0.3s ease;
    }

    .star.filled {
      fill: gold;
      animation: brighten 0.5s ease forwards;
    }

    @keyframes brighten {
      0% { transform: scale(1); filter: brightness(1); }
      50% { transform: scale(1.2); filter: brightness(1.5); }
      100% { transform: scale(1); filter: brightness(1.2); }
    }
  </style>

  <!-- Repeat 5 stars -->
  <g transform='translate(0, 0)'>
    <polygon class='star STAR1' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
  </g>
  <g transform='translate(50, 0)'>
    <polygon class='star STAR2' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
  </g>
  <g transform='translate(100, 0)'>
    <polygon class='star STAR3' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
  </g>
  <g transform='translate(150, 0)'>
    <polygon class='star STAR4' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
  </g>
  <g transform='translate(200, 0)'>
    <polygon class='star STAR5' points='25,1 31,18 49,18 35,29 40,46 25,36 10,46 15,29 1,18 19,18'/>
  </g>
</svg>
")

The output will appear as shown in the image below.


 

Comments

Popular posts from this blog

Step-by-Step Guide: Power Automate Custom Connector Using Graph API from Azure App Service

Step-by-Step: Give Unique Permissions to OneDrive Files Using Power Automate and Graph API (No Premium License Needed)

Unleashing Power Apps with Your Local MSSQL Data