HTML field & Date Time formatting in powerapps

Hi All,

When i dig around powerapps found an interesting control called HTML field. the potential of this control is enormous based on the scenario lets see couple of examples.

1. Formatting Datetime

Go to insert -> Text=>HTML Text



Insert the control in the list view


Add the below in the formula box
Concatenate("<div style='height:100%;width:100%;padding:1px;background-color: #418bca;border-right: 1px solid #fff;float:left;'><div style='position: relative;text-align: center;color: #fff;font-size:20px;padding:0px 3px;'>",Text(DateTimeValue(Text(Modified)),"dd"),"<h4 style='margin: 5px 0 0 0;color: #fff;text-align: center;'>",Upper(Text(DateTimeValue(Text(Modified)),"mmm-yy")),"</h4></div>")
i.e. Concatenate("<html>",Text(DateTimeValue(Text(Modified)),"dd"),"<html>")

 Output


Note: here for more information about date time


2. Data Formatting

 

Concatenate("<div style='height:100px;width:auto;min-width:100px;padding:1px;background-color: #418bca;border-right: 1px solid #fff;float:left;'><h4 style='margin: 5px 0 0 0;color: #fff;text-align: center;'>Total reviews</h4><div style='position: relative;top: 30px;text-align: right;color: #fff;line-height: 25px;font-size:60px;padding-right: 3px;'>",Text(CountIf('Product Reviews',Author.DisplayName = User().FullName)),"</div>
</div>", "<div style='height:100px;width:auto;min-width:100px;padding:1px;background-color: #aaba2d;border-right: 1px solid #fff;float:left;'><h4 style='margin: 5px 0 0 0;color: #fff;text-align: center;'>Likes</h4><div style='position: relative;top: 30px;text-align: right;color: #fff;line-height: 25px;font-size:60px;padding-right: 3px;'>",Text(CountIf('Product Reviews',Author.DisplayName = User().FullName && Total_x0020_Likes > 0)),"</div></div>", "<div style='height:100px;width:auto;min-width:100px;padding:1px;background-color: #da534f;border-right: 1px solid #fff;float:left;'><h4 style='margin: 5px 0 0 0;color: #fff;text-align: center;'>Dis-Likes</h4><div style='position: relative;top: 30px;text-align: right;color: #fff;line-height: 25px;font-size:60px;padding-right: 3px;'>",Text(CountIf('Product Reviews',Author.DisplayName = User().FullName && Total_x0020_DisLikes > 0)),"</div>
</div>")

we can even add the complex yet, easy design using HTML controls in powerapps.

Regards
Ratsub

Related Articles:
People picker control in PowerApps
Create and configure custom connector for PowerApps and MSFlow

Develop Powerapps from the Scratch - Series1/3
Develop Powerapps from the Scratch - Series2/3
Develop Powerapps from the Scratch - Series3/3


Comments

Popular posts from this blog

People picker Control in PowerApps

Secure When a HTTP request is received Power Automate a.k.a MS Flow

Upload attachment to SharePoint list item using Microsoft Flow

Modern page provisioning using page template

REST call returns XML instead of JSON in SharePoint

Step-By-Step Azure AD App Registration

Approval and auto escalation with time out in Microsoft Flow

Create and configure custom connectors for PowerApps and MSFlow from AzureFunctions

Developing custom reusable components in PowerApps