A couple of weeks ago I posted a video blog on how you can embed 3D Models directly within Dynamics 365. Today I will walk you through exactly how to achieve this within your environment complete with source code and steps.

Firstly just to reiterate my reasons why I think this would be useful to a business. A common scenario is to better service end-customers, by providing a three dimensional view of your product you can quickly identify features that may be able to help you quickly resolve queries. Imagine you’re a reseller of electronic goods, and you’re asked to check what Audio Visual input ports are available on a Television, instead of going through the user manuals you can directly access a 3D model of the Television set and zoom into the connections panel at the back of the unit. There are many common customer service or sales enquiry scenarios that may benefit from this. So lets get on with it and I’ll show you exactly how you can easily integrate this within your system.

Create the Web Resource

  1. Goto Settings > Customizations > Customize the System
  2. Navigate to Web Resources > New
  3. Give the Web Resource a Display Name called “new_SketchupModelDisplay”
  4. Set the Type to “Webpage (HTML)”
  5. Click on Text Editor
  6. Click on Source and insert the following code:
<html><head>

<script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script>

<meta>

<script type="text/javascript">

document.onreadystatechange = function () {

if (document.readyState == "complete") {

var Xrm = window.parent.Xrm;

var modelURL = Xrm.Page.getAttribute("new_sketchup3dmodelurl");

if(modelURL){

document.write("Please click on below image to view in 3D<br>");

vals = modelURL.getValue().split("id=");

document.write("<iframe src=\"https://3dwarehouse.sketchup.com/embed.html?mid=");

document.write(vals[1]);

document.write("&amp;width=580&amp;height=326\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" width=\"580\" height=\"326\" allowfullscreen=\"\"></iframe>");

}

}

}

</script>

<meta><meta><meta></head><body style="word-wrap: break-word;"></body></html>
  1. Exit the Text Editor
  2. Save the Web Resource

Create the New Form

  1. Goto Settings > Customizations > Customize the System
  2. Navigate to the Product Entity > Forms > New > Main Form
  3. Create a New Field
  4. Give this new field the Display Name “Sketchup 3D Model URL”, set the Type to “Single Line of Text” and set the Format to “URL”
  5. Now layout the Form as such:

    ensure that you add the Sketchup 3D Model URL attribute, and insert web resource new_SketchupModelDisplay (this is important!)
  6. Save the Form once you’re finished and give it a name like “3D Model Form”.
  7. Now publish all customizations and you’re set.

Testing

To test this model, go to https://3dwarehouse.sketchup.com/?hl=en and search for a model (e.g. Sony TV).

Then copy the URL up to end of the unique ID section :

and paste this into your product form.

You should now be able to see this product rendered onto the form like this:

Links:

Hope you found this blog interesting, if you have any feedback about this blog please do get in touch with me or drop me a comment below. If you like this post, please retweet or reshare on your favourite social network.  Thanks for reading, Happy 365’ing!