Power Platform
Power Apps
Power Automate
Power BI
Power Virtual Agents
Dataverse
AI Builder
Dynamics 365
Sales
Marketing
Customer Service
Field Services
Project Operations
Finance and Operations
Supply Chain
Retail Commerce
Business Central
HR
Microsoft 365
Microsoft Teams
Sharepoint
Office 365
Azure
A. Overview
Inside the Accounts gallery, an embedded gallery displays the price cost by changing the color of an icon. The rating for the gas price is out of 4.
B. Calculating Price Tag
The Price Tag is derived by considering the distance and scaling it down to a 4-point rating system:
C. Color Coding
Depending on the comparison between the current item’s value and the Price Tag, the icon color changes:
Section 3: Code and Implementation
A. Utilizing Dataverse Account Table
The core of this demo is the System Dataverse Accounts table (it includes sample data if the environment is provisioned with sample data). We retrieve the necessary client information to feed i…
🎈You can use any table with a column with a city name value, but just make sure you change the Power Fx formulas to reflect your table and column names.
B. Integrating Bing Maps API
To sign up for a free API key, go to Bing Maps Dev Center – Bing Maps Dev Center (bingmapsportal.com)
✅ Sign up or log in if you have an account.
✅ Go to my account and select my keys.
✅ Create a new key or copy a new one.
✅ You will use this key when you add the BingMaps connector to your PowerApps.
C. Galleries and Drive Rating
🚀 1. Main Accounts Gallery
The Accounts Gallery control displays the Accounts from the Dataverse, and each Account’s drive smoothness rating is determined using the Bing Maps API with the following formula that is used for the Default Property of the Rating Control:
With(
{
ClientDistanceFromMemphis: BingMaps.GetRouteV2(
ThisItem.’Address 1: City’,
“Memphis”
).travelDistance / 1.609
},
10 – (ClientDistanceFromMemphis / 3000 * 10)
)
🚀 2. Embedded Gallery for Gas Price Rating
An embedded gallery visualizes the gas price rating inside the main Accounts gallery, again utilizing Bing Maps API for distance calculations.
🚀 3. Gas Price Rating Formula
The icon’s color inside the embedded gallery changes based on the gas price rating, using this formula:
With(
{ClientDistanceFromMemphis: lbl_DistanceInMiles.Text},
With(
{
PriceTag: Round(
4 – (ClientDistanceFromMemphis / 3000 * 4),
0
)
},
If(
ThisItem.Value < PriceTag,
RGBA(219, 219, 219, 1),
Color.Orange
)
)
)
Conclusion
This PowerApps use case combines geographic data and a unique rating algorithm to convey insights about driving experiences and gas costs. By creatively using galleries, distance calculation, and color coding, complex data is made approachable. Whether you’re a business looking to enhance client communication or a developer seeking inspiration, this application showcases the power and flexibility of PowerApps.
