locked
how to add crm function in html page as web resource? RRS feed

  • Question

  • Hi,

    I have javascript for retrieve record from crm. I want to set retrieved value in html page which is web resource in crm 2013.

    here are my code

    javascript code:

    function GetEmail() {
       // var account = Xrm.Page.getAttribute("parentaccountid").getValue();
        //if (account === null || account === undefined) return;

        var req = new XMLHttpRequest();
        req.open('GET', encodeURI(Xrm.Page.context.getClientUrl() + "/XRMServices/2011/OrganizationData.svc/new_propertySet?$select=new_Longitude&$filter=new_PropertyStatus/Value eq 100000000"), true);
        req.setRequestHeader('Accept', 'application/json');
        req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        req.onreadystatechange = function () {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 200) {
                    var result = JSON.parse(req.responseText).d;

                    var EMailAddress1 = result.results[0].new_Longitude;
                    alert(EMailAddress1);

                }
                else {
                    alert(this.statusText);
                }
            }
        };
        req.send();
    }

    Html Web resource Code:



    <!DOCTYPE html>
    <html>
      <head>
        <title>Navigation functions (heading)</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
    <style type="text/css">
       .labels {
         color: red;
         background-color: white;
         font-family: "Lucida Grande", "Arial", sans-serif;
         font-size: 10px;
         font-weight: bold;
         text-align: center;
         width: 40px;     
         border: 2px solid black;
         white-space: nowrap;
       }
     </style>

        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
          #panel {
            ;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=geometry"></script>
        <script>
    var poly;
    var geodesicPoly;
    var marker1;
    var marker2;

    function initialize() {
      var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(24.893379,67.028061)
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

      map.controls[google.maps.ControlPosition.TOP_CENTER].push(
          document.getElementById('info'));


      marker1 = new google.maps.Marker({
        map: map,
        draggable: false,
    icon:'People.png',
        google.maps.LatLng(24.892937, 67.088348)
      });

      marker2 = new google.maps.Marker({
        map: map,
        draggable: false,
        google.maps.LatLng(24.899718, 67.072895)
      });
     marker3 = new google.maps.Marker({
        map: map,
        draggable: false,
    labelContent: "$425K",
       labelAnchor: new google.maps.Point(24.837584,67.080994),

        google.maps.LatLng(24.837584, 67.080994)
      });

      var bounds = new google.maps.LatLngBounds(marker1.getPosition(),marker2.getPosition());
      map.fitBounds(bounds);
    var bound = new google.maps.LatLngBounds(marker2.getPosition(),marker3.getPosition());
      map.fitBounds(bound);
      google.maps.event.addListener(marker1, 'position_changed', update);
      google.maps.event.addListener(marker2, 'position_changed', update);
    google.maps.event.addListener(marker3, 'position_changed', update);
      var polyOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        map: map,
      };
      poly = new google.maps.Polygon(polyOptions);

      var geodesicOptions = {
        strokeColor: '#CC0099',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        geodesic: true,
        map: map
      };
      geodesicPoly = new google.maps.Polyline(geodesicOptions);

      update();
    }


    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
      </head>
      <body>
        <div id="map-canvas"></div>
      </body>
    </html>

    Thursday, April 17, 2014 6:52 AM

Answers

All replies

  • How to pass value from javascript into html web resource in crm 2013

    I have a javascript and a html webresource. I want to pass value from javascript to html webresource.

    Thursday, April 17, 2014 6:57 AM
  • You can write javascript in your html webresource only under script tag under header ??

    Our Website | Our Blog | Follow US | My Facebook Page | Microsoft Dynamics CRM 2011 Application Design
    Make sure to "Vote as Helpful" and "Mark As Answer",if you get answer of your question.

    Thursday, April 17, 2014 7:45 AM
    Moderator
  • here is my html web resource code but no alert display when map is load.

    <html><head>
        <title>Navigation functions (heading)</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
    <style type="text/css">
       .labels {
         color: red;
         background-color: white;
         font-family: "Lucida Grande", "Arial", sans-serif;
         font-size: 10px;
         font-weight: bold;
         text-align: center;
         width: 40px;     
         border: 2px solid black;
         white-space: nowrap;
       }
     </style>

        <style>
          html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
          }
          #panel {
            ;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=geometry"></script>
    <script>
    function GetEmail() {
       // var account = Xrm.Page.getAttribute("parentaccountid").getValue();
        //if (account === null || account === undefined) return;

        var req = new XMLHttpRequest();
        req.open('GET', encodeURI(Xrm.Page.context.getClientUrl() + "/XRMServices/2011/OrganizationData.svc/new_propertySet?$select=new_Longitude&$filter=new_PropertyStatus/Value eq 100000000"), true);
        req.setRequestHeader('Accept', 'application/json');
        req.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        req.onreadystatechange = function () {
            if (this.readyState === 4) {
                req.onreadystatechange = null;
                if (this.status === 200) {
                    var result = JSON.parse(req.responseText).d;

                    var EMailAddress1 = result.results[0].new_Longitude;
                    alert(EMailAddress1);

                }
                else {
                    alert(this.statusText);
                }
            }
        };
        req.send();
    }
    </script> 
     <script>
    var poly;
    var geodesicPoly;
    var marker1;
    var marker2;

    function initialize() {

        var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(24.893379,67.028061)
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

      map.controls[google.maps.ControlPosition.TOP_CENTER].push(
          document.getElementById('info'));


      marker1 = new google.maps.Marker({
        map: map,
        draggable: false,
    icon:'People.png',
        google.maps.LatLng(24.892937, 67.088348)
      });

      marker2 = new google.maps.Marker({
        map: map,
        draggable: false,
        google.maps.LatLng(24.899718, 67.072895)
      });
     marker3 = new google.maps.Marker({
        map: map,
        draggable: false,
    labelContent: "$425K",
       labelAnchor: new google.maps.Point(24.837584,67.080994),

        google.maps.LatLng(24.837584, 67.080994)
      });

      var bounds = new google.maps.LatLngBounds(marker1.getPosition(),marker2.getPosition());
      map.fitBounds(bounds);
    var bound = new google.maps.LatLngBounds(marker2.getPosition(),marker3.getPosition());
      map.fitBounds(bound);
      google.maps.event.addListener(marker1, 'position_changed', update);
      google.maps.event.addListener(marker2, 'position_changed', update);
    google.maps.event.addListener(marker3, 'position_changed', update);
      var polyOptions = {
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        map: map,
      };
      poly = new google.maps.Polygon(polyOptions);

      var geodesicOptions = {
        strokeColor: '#CC0099',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        geodesic: true,
        map: map
      };
      geodesicPoly = new google.maps.Polyline(geodesicOptions);

      update();
    }


    google.maps.event.addDomListener(window, 'load', initialize);

        </script>
      </head>
      <body>
        <div id="map-canvas"></div>



    </body></html>

      
    Thursday, April 17, 2014 8:04 AM
  • You can also refer my post here and check how I am calling functions.

    Our Website | Our Blog | Follow US | My Facebook Page | Microsoft Dynamics CRM 2011 Application Design
    Make sure to "Vote as Helpful" and "Mark As Answer",if you get answer of your question.

    Thursday, April 17, 2014 8:10 AM
    Moderator
  • How can i display multiple records on map? Actually I want to show map on dashboard and all account records want to show on map
    Thursday, April 17, 2014 9:52 AM