{"id":3990,"date":"2020-10-12T06:48:12","date_gmt":"2020-10-12T06:48:12","guid":{"rendered":"https:\/\/himbap.com\/blog\/?p=3990"},"modified":"2020-10-13T05:09:57","modified_gmt":"2020-10-13T05:09:57","slug":"canvas-app-with-bing-maps-in-dynamics-365-ce-2","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=3990","title":{"rendered":"Canvas app with Bing Maps in Dynamics 365 CE -2"},"content":{"rendered":"

Introduction<\/strong>
\nThis is second article about using Bing maps in Canvas app. In the first article we discussed about how we can show event organizer data in the gallery control and render them in the Bing maps. In this article we are going to show event as well as event organization details in Bing maps.<\/p>\n

Details<\/strong>
\nIn last app we rendered event organizations in the Bing maps but now let’s say we also want to show event location with event organizations. To show event location over map we need to add geo coordinates to event entity (Latitude and Longitude), so let’s modify our event entity and add some other address field and latitude and longitude like below:
\n\"part2_1\"<\/a><\/p>\n

Once we have added this field we need to add some logic to get geo coordinates based on the address details. We can create a simple Power Automate to get these details using following steps.<\/p>\n

1. Navigate to Power Automate from your subscriptions, click on Create to create automated Flow
\n2. Select Common Data Service connector and select below trigger
\n\"part2_2\"<\/a>
\n3. Configuration start step for your flow
\n\"part2_3\"<\/a>
\n4. Search for Bing maps connector and select get location by address action, we need to pass address details to get latitude and longitude
\n\"part2_4\"<\/a>
\n5. Next add steps to update these details to event entity like following
\n\"part2_5\"<\/a>
\n6. Save your changes and test your flow to make sure it getting details after event record created.<\/p>\n

Now we have geocoordinates of the event location, let’s change our canvas app.<\/p>\n

Open canvas app in edit mode and drag Reload icon and place on the title bar like below
\n\"part2_6\"<\/a><\/p>\n

Now we need to add following code in OnSelect event of the icon<\/p>\n

\r\n\/\/Create new collection of event and event organizer\r\nUpdateContext(\r\n    {\r\n        eventwitheventorgCol: Concatenate(\r\n            eventorganizersCol,\r\n            "&pp=",\r\n            Text(ModelDrivenFormIntegration.Item.Latitude),\r\n            ",",\r\n            Text(ModelDrivenFormIntegration.Item.Longitude),\r\n            ";" & "129" & ";"\r\n        )\r\n    }\r\n);\r\n\/\/create a variable mapURL to set it to image control\r\nSet(\r\n    mapURL,\r\n    "https:\/\/dev.virtualearth.net\/REST\/v1\/Imagery\/Map\/Road?mapSize=650,400" & eventwitheventorgCol & "&zoomlevel=14" & "&key=BINGMapKey"\r\n);\r\n\/\/refresh form\r\nModelDrivenFormIntegration.RefreshForm(false);\r\n<\/pre>\n
In the first express we are combining our existing eventorganizersCol with we created in our part1 with the event details. To get event details we are using ModelDrivenFormIntegration control which will provide us details of the current record, we can consider this control just like executioncontext we use in entity forms to get context information. You can get more details about this control from here<\/a>. To get current record fields we can simple use following option of this control<\/p>\n
ModelDrivenFormIntegration.Item.FieldDisplayName <\/strong><\/p>\n
We are concatenating event organization details with event and using 129 (push pin icon style) to show event location. Next we are creating a variable to hold Bing maps static url which will be using under the image property of image control.<\/p>\n
Set(
\nmapURL,
\n“https:\/\/dev.virtualearth.net\/REST\/v1\/Imagery\/Map\/Road?mapSize=650,400” & eventwitheventorgCol & “&zoomlevel=14” & “&key=Bingmap key”
\n);<\/p>\n
We can change our old code where we are showing event organization similarly to have url for the event organizers.<\/p>\n
Finally we set this variable under image control
\n\"part2_7\"<\/a><\/p>\n
Finally Save and publish our app. Now we will create event record we will be able to see map like below:
\n\"part2_8\"<\/a><\/p>\n
And if we want to see Event location with event organizations we can click on the Reload icon and it will show both details like below:
\n\"part2_9\"<\/a><\/p>\n
Canvas app with Bing Maps in Dynamics 365 CE -1<\/strong><\/a><\/p>\n
Summary<\/strong>
\nThis is how we can get geocoordinates using simple Power Automate and show two entity details in the Bing maps.<\/p>\n
We will be doing some more changes to our demo app so stay tuned!.<\/p>\n
Hope it will help someone!
\nKeep learning, Keep sharing !!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction This is second article about using Bing maps in Canvas app. In the first article we discussed about how we can show event organizer data in the gallery control and render them in the Bing maps. In this article we are going to show event as well as event organization details in Bing maps. Details In last app we… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":4002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[817,21,593,728],"tags":[830,827,828,826,829],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3990"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3990"}],"version-history":[{"count":8,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3990\/revisions"}],"predecessor-version":[{"id":4015,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/3990\/revisions\/4015"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/4002"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}