You are currently browsing the category archive for the ‘JScript’ category.

Seems like this is a topic of interest. My previous post HERE is still one of the most popular posts, even though it was published way back in April 2014. As such, and since I was recently putting together a small POC that involved this functionality, I decided to revisit this topic.

As I was saying, recently I had the opportunity to look at an asset management solution that integrates assets from Esri with other sources for enhanced data, as well as Customer Service and Field Service. Lots of integration work, as well as some interesting challenges along the way.

It is unfortunate that Esri decided a while back to pull support for their Dynamics CRM solution. Now we can only integrate to bring data into Dynamics 365. Even the support for the old 2015 version has been retired at the beginning of June 2017. It’s even more interesting, since they seem to support SharePoint, but I digress.

The part I want to focus on, and to come back to why I mentioned the original article, is simple. It deals with leveraging Google Maps to locate assets on a visual map.

Through integration, I can get my needed details on asset type, description and location in the form of Latitude and Longitude. This being a physical asset, like a tree, bench, bus stop, or any other type of urban furniture, an address does not apply and the coordinates are tracking the exact location of the item. IoT provides additional data points on the assets, depending on the asset, but that will be a different topic one day.

So, on my asset record, I am tracking the Latitude and Longitude data fields in two fields named asm_latitude and asm_longitude. Similarly to the approach described in the referenced article, I’m using a HTML web resource to present the location.

The Google API has evolved, and you will find references stating that as of v3 a key is not required anymore. While technically that is correct, pay close attention to the licensing model. This is an asset tracking application, and, as described HERE in the Pricing and Plans section, a Premium Plan is required for Asset Tracking Use Case. Obviously, contact sales for a price. And HERE is the description on the usage limits.

But, back to the record form, the format I chose for this POC is quite simplistic. See the screenshot below.

image

The displayed map is nothing more that a Web Resource of type Webpage (HTML).

The code to make it render, based on the Latitude and Longitude coordinates in the asset form is below (remember, this goes in the web resource, in the Source of the page).

NOTE: I’m not showing any kind of error handling for simplicity. Build your own error handling to make sure no unexpected behavior is impacting the user experience.

<html><head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>
<meta charset="utf-8"></head>
<body style="word-wrap: break-word;">

var point_lat = window.parent.Xrm.Page.getAttribute(“asm_latitude”).getValue();
var point_lng = window.parent.Xrm.Page.getAttribute(“asm_longitude”).getValue();

function initMap() {
    var point_location = new google.maps.LatLng(point_lat, point_lng);
   
    var map = new google.maps.Map(document.getElementById(‘map’), {
        zoom: 15,
        center: point_location
    });
   
    var marker = new google.maps.Marker({
        position: point_location,
        map: map
    });
}

https://maps.googleapis.com/maps/api/js?key=font

</body></html>

Replace the YOUR_KEY_HERE with an API key. You can obtain one from HERE.

There’s three main pieces to this code. First off, the style in the header sets-up the page format to extend all the way. You could tinker with this, but it’s best to just maximize it.

The second part is the div with an id of map. This is our anchor point on the page, and the script is looking for this.

And lastly, the script. I’m reading the values from the Latitude and Longitude fields on the form using windows.parent to reference the record form rather than the web resource the script is running in. The rest is straight out of Google’s API documentation. Strongly recommend you browse through that for more examples, as well as the description of zoom values available (cool to know).

Wham, bam, 5 minutes jam, happy demo!

Advertisements

I’ve been asked recently about namespacing in JScript, if I use it, and how I use it. This is a loaded question, with no simple answer. I probably never paid too much attention to all the details around this topic, and I am guilty of mixing styles and sometimes not even using namespacing. I guess it all depends on how fast I need something done, and how much time I have to plan this process. But here’s a quick overview.

First off, not using namespacing. We all know the risks, as we can easily have another dev coming in and creating a function with the same name. If you reference all libraries in your form, then how is the system going to know which one to use? Here comes namespacing.

A function without namespacing can look like:

function foo()

{

   alert(“Here we go!”);

}

By default, JScript is not a language built with the complexities of the .NET framework (as an example). So, in order to introduce namespacing, we have to a little manual work. Don’t worry, you can keep it simple.

Static Namespacing

Now, probably the simplest way to namespace is using static namespacing. With this approach, you better have a clear plan from the beginning, and stick with it to the end. Renaming a namespace can be a painful process.

The simplest way to define a namespace is using a syntax similar to the following:

var myNamespace = {};

Next step, you define your variables and functions:

myNamespace.CONSTANT = “AAA”;

myNamespace.myVariable = 0;

myNamespace.myFunction = function()

{

   alert(“The value of my constant is: “ + myNamespace.CONSTANT);

}

so now you see how renaming the namespace can become a tedious job (I don’t ever trust the find and replace).

This is the format used in the Dynamics CRM 2011 SDK examples. It is effective, simple to read, and can also be nested as such:

myNamespace = {};

myNamespace.mySubNamespace = {};

You check for the namespace at the beginning and create it if it’s missing:

if(typeof(myNamespace) == “undefined”)

{ myNamespace = {}; }

Object Literal Notation

Another approach is using object literal notation. Now, this makes renaming the namespace later less of a tedious job. The syntax would look like so:

var myNamespace = {

   CONSTANT: “AAA”,

   myVariable: 0,

   myFunction: function() {

      alert(“The value of my constant is: “ + myNamespace.CONSTANT);

   }

}

This can take a little bit of getting used to, but once you get the hang of it it’s just as simple.

Next you can go into patterns, but that is the subject of another article.

Dynamic Namespacing Approaches

In this approach, you create your namespace as before, but you use the context:

var myNamespace = {};

(function(context)

{

   var CONSTANT = “AAA”;

   var myVariable = 0;

   context.myFunction = function()

   {

      alert(“Alert message!”);

   }

})(myNamespace);

This is the approach used in some popular frameworks out there. The advantage is that you can set the context to the global object easily.

Nesting Namespaces

Now, if you think .NET, you will be thinking, I need to nest namespaces. Something similar to Microsoft.Xrm.Sdk.Messages; but in JScript, how do I go about it?

You can simply declare your nested namespaces as follows:

var myNamespace = {};

myNamespace.subNamespace = {

   myFunction: function(){

      alert(“Your message here!”);

   }

}

You would call this as such:

myNamespace.subNamespace.myFunction();

At this point I would look at patterns, and there are some good patterns out there to investigate (AMD, CommonJS, MV*, etc.)

Enjoy!

Microsoft Business Solutions MVP

Reviewed Book

Microsoft Dynamics 365 Extensions Cookbook

Microsoft Dynamics 365 Extensions Cookbook

Check out my Book

Microsoft Dynamics CRM 2016 Customization - Second Edition

Microsoft Dynamics CRM 2016 Customization - Second Edition

Check out my Book

Microsoft Dynamics CRM Customization Essentials

Microsoft Dynamics CRM Customization Essentials

Check out my Book

Microsoft Dynamics CRM 2011 Scripting Cookbook

Microsoft Dynamics CRM 2011 Scripting Cookbook

Reviewed Book

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Microsoft Dynamics CRM 2011: Dashboards Cookbook

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 428 other followers

Follow TheCRMwiz on WordPress.com