Author Details

avatar-teacher

Evolvous

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

Advanced UI design in PowerApps using HTML

Apply Two Color Values for Button:

Advanced UI design in PowerApps using HTML - Evolvous

  • Insert a Html Text in PowerApps and use the below html text for this.
    • "

    • We can change the linear gradient color values according to our requirements.
  • Insert a button and apply width, height and x, y values according to taken Html Text control.
    • X: HtmlText1.X+20 (Because we have used margin value as 20. It can be changed based on the margin value)
    • Y: HtmlText1.Y+20
    • Width: HtmlText1.Width-40 (It depends on Html text width)
    • Height: 50 (It depends on Html text height)
  • The output will be looks like below

Advanced UI design in PowerApps using HTML - Evolvous

Apply Shadow and Box like look to Button Control:

As shown in the screenshot below, the button looks like the 1st image. On click it looks like 2nd image.

Apply Shadow and Box like look to Button Control - Evolvous

  • Insert a Html text control and use the below hotel value for this.
    "

    • Insert a button and apply width, height and x, y values according to taken Html Text control.
      • X: HtmlText2.X+20 (Because we have used margin value as 20. It can be changed based on the margin value)
      • Y: HtmlText2.Y+20
      • Width: HtmlText2.Width-60 (It depends on Html text width)
      • Height: HtmlText2.Height-60
      • OnSelect: UpdateContext({VarReset: !VarReset})

    Insert a button and apply width, height and x, y values according to taken Html Text control.

    • Screen on visible “UpdateContext({VarReset: false})

    Modern Controls

    Modern Controls. Advanced UI design in PowerApps using HTML - Evolvous

    • Once enable the above feature then we can use the below modern controls.

    Conclusion:

    Utilizing HTML for advanced UI design in PowerApps can greatly enhance the overall user experience and functionality of your application. By leveraging the power and flexibility of HTML, you can create dynamic visuals, customize layouts, and incorporate interactive elements. To learn more about how to implement advanced UI design techniques in Power Apps using HTML, please contact us. Our team of experts will be happy to guide you through the process and help you achieve your desired results.