Advanced UI design in PowerApps using HTML

Apply Two Color Values for Button:

• 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

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 2^nd image.

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})

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

Modern Controls

• We can use the below modern controls in PowerApps by enabling the feature “Try out the modern controls”.

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

=====