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.
  • "<div style='margin:20px;width:" & Self.Width - 40 & "px;height:50px;background-image: linear-gradient(to left,#21d397,#0392d1) ;border-radius:10px; box-shadow: -5px 5px 15px -2px rgba(13, 39, 80, 0.45)'> </div>" 
  • 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.

    • "<div style='margin:20px; width: " & Self.Width - 60 & "px; height: " & Self.Height - 60 & "px; 

background:#e8eaec; 
box-shadow:  
  " & If( 
    VarReset, 
    " inset 5px 5px 4px #bec0c2, 
            inset -5px -5px 4px #ffffff", 
    " 12px 12px 18px rgba(13, 39, 80, 0.25), -10px -10px 15px white" 
) & "; border-radius: 10px'></div>" 

  • 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.

=====

Plus read

Accordion Style FAQ in SharePoint

A Guide to Creating Workspaces in Power BI