canvasapps – DIY D365

Hi Everyone

In this vlog we will see how to see multiple points/pushpins on a map in canvas app. As always, this is a no code solution and fairly basic.

I have came across this requirement so many times in Dynamics 365 for e.g. show all customers on a map or contacts on a map or even appointments on a map. Many solutions are available for Dynamics 365 CE including add ons like Maplytics. But for canvas app, following issues persists:

No map components
Static bing/google maps can be inserted by inserting an image and then providing URL
Bing or Google maps API is required
Hard code latitude and longitude
If you want to show more than one push pin, you need to hard code all coordinates
You can’t apply dynamic filters on your maps

To me all of the above are not easy to use solution and that’s why I decided to look for something which all our #nocodemonkeys can use. This can be the fastest way you can plot all your customers on a map within canvas apps.

Prerequisites:

Access to Power Apps
Access to Power BI (Desktop and Web)
Super Basic Knowledge of how to create a chart/report in Power BI
Basic understanding of Power Apps formulas
Entity (accounts/contacts/appointments) must have Latitude and Longitude filled (otherwise it won’t be shown on maps

Note: You can get latitude and longitude by create a flow in Power Automate

Step 1-7 for Power BI and Step 8-12 Power Apps

Step 1: Go to your Power BI Desktop>>Create a connection>>Get data (e.g. Accounts)

Step 2: Once your data is loaded>>click on report icon and then add the visualisation type as shown below:

Step 3: Add data fields

Step 4: Save your Power BI report by clicking on the disk button on top left

Step 5: Login to Power BI web https://app.powerbi.com/

Step 6: Click on ‘Workspace’ in the left navigation and then click reports (this is where you can find the report you created in above steps)

Step 7: Click on the report to open and then click pin visual

Step 8: Login to Power Apps https://make.powerapps.com/ and pick your existing app or create a new canvas app

Step 9: Click Insert then ‘Power BI tile’

Step 10: Select Workspace, Dashboard and Tile

Dynamic Filtering- Step 11 & 12

Step 11: Apply dynamic filtering by adding new components like Text Input or Drop Downs. In my case, I have two drop downs and one text input; names below:

StateDropDown- With 5 values (you can have any values here)

CityDropDown-With 5 values (you can have any values here)

txtPostCode- Text input for ZIP/Postal Code

Step 12: Update the ‘TileURL’ of Power BI tile. Use the following sub-steps based on how many filters you need as it can go to Nth level (I am only showing three)

12a. One field filter

“Power BI TileURL” & If(!IsBlank(txtPostCode.Text),
“&$filter=accounts/address1_postalcode eq ‘” & txtPostCode.Text & “‘”)

12b. Two fields filter

“Power BI TileURL” & If(!IsBlank(txtPostCode.Text),
“&$filter=accounts/address1_postalcode eq ‘” & txtPostCode.Text & “‘”,
!IsBlank(CityDropdown.SelectedText.Value),
“&$filter=accounts/address1_city eq ‘” & CityDropdown.SelectedText.Value & “‘”)

12c. Three fields filter

“https://app.powerbi.com/embed?dashboardId=ed06a838-8b0f-4445-a582-1890699df2d3&tileId=401efbc1-2194-4807-a07e-7e89567e49ce&config=eyJjbHVzdGVyVXJsIjoiaHR0cHM6Ly9XQUJJLUFVU1RSQUxJQS1FQVNULUEtUFJJTUFSWS1yZWRpcmVjdC5hbmFseXNpcy53aW5kb3dzLm5ldCJ9” & If(
!IsBlank(txtPostCode.Text),
“&$filter=accounts/address1_postalcode eq ‘” & txtPostCode.Text & “‘”,
!IsBlank(CityDropdown.SelectedText.Value),
“&$filter=accounts/address1_city eq ‘” & CityDropdown.SelectedText.Value & “‘”,
!IsBlank(StateDropdown.SelectedText.Value),
“&$filter=accounts/address1_stateorprovince eq ‘” & StateDropdown.SelectedText.Value & “‘”
)

Note: Screenshot below for better understanding