For a control add-in to work on all display targets there has to be a manifest. The manifest contains a declarative description of the control add-in and is written in XML. The manifest is added together with any resource files in a .zip file and registered with the control add-in resources in the Client Add-in page. This topic explains the structure of a manifest by going through an example of the manifest for the Bing Maps control add-in. For more information about the implementation of the Bing Maps control add-in, see Walkthrough: Creating and Using a Client Control Add-in.

Example of a Manifest

The syntax of a manifest file is illustrated in the example below. All tags inside the <manifest> tag are optional. Inside the <Manifest> tag, the <ScriptUrls> tag references other JavaScripts from the manifest. In this case the <ScriptUrls> tag points to online map controls. Inside the <Resources> tag, all of the resources such as the script, stylesheet, and images needed to display the Bing Maps control add-in are listed.

The <Script> tag contains the actual initialization code for the control add-in. The code must be written inside a <![CDATA[]]> tag to be parsed as code. The Microsoft.Dynamics.NAV.InvokeExtensibilityMethod is described in more detail in the reference documentation. For more information, see InvokeExtensibilityMethod Method.

Inside the <Manifest> tag, at the end of the script, the <RequestedHeight> and the <RequestedWidth> tags are set to definite sizes. It is recommended to apply some size to the add-in using these tags. The properties <VerticalStretch> and <HorizontalStretch> determine how the control add-in behaves in the client when the window it is displayed in is resized. The default value is false which means that the control add-in is not resized vertically, or horizontally. The value true means that the control add-in is resized vertically, or horizontally. The values in <RequestedHeight> and <RequestedWidth> determine the minimum resize value of the control add-in.

 Copy Code
<?xml version="1.0" encoding="utf-8"?>
<Manifest>
    <Resources>
        <Script>Script.js</Script>
    </Resources>
    <ScriptUrls>
        <ScriptUrl>http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js</ScriptUrl>
        <ScriptUrl>http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3</ScriptUrl>
    </ScriptUrls>
    
    <Script>
        <![CDATA[
        $(document).ready(function() 
        { 
            InitializeMap('controlAddIn');
            Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('ControlAddInReady', null);
        });
        ]]>
    </Script>
    
    <RequestedHeight>300</RequestedHeight>
    <RequestedWidth>700</RequestedWidth>
    <VerticalStretch>false</VerticalStretch>
    <HorizontalStretch>false</HorizontalStretch>
</Manifest>

C/AL Code in Separate File

Code that is called from C/AL code must be placed in a separate file under the \Script folder. The code below is called from the manifest file and initializes and loads the map.

 Copy Code
var map = null;
        function InitializeMap(controlId) {
            map = new VEMap(controlId);
            map.HideScalebar();
            map.onLoadMap = function () {
                Microsoft.Dynamics.NAV.InvokeExtensiblityMethod('MapLoaded', null);
            };
        }
        function LoadMap(latitude, longiture) {
            var mapOptions = new VEMapOptions();
            mapOptions.DashboardColor = "black";
            mapOptions.EnableSearchLogo = false;
            map.LoadMap(
                new VELatLong(latitude, longiture), // Center
                1,                                  // Zoom level 1-19
                VEMapStyle.Birdseye,                // Map style
                false,                              // Fixed map
                VEMapMode.Mode2D,                   // Map mode
                true,                               // Map mode switch
                0,                                  // Tile buffer
                mapOptions                          // Options
            );
        }        
        function ShowMiniMap(show) {
            if (show)
                map.ShowMiniMap();
            else
                map.HideMiniMap();
        }
        function ShowPushpin(title, imageName) {
            map.Clear(); 
            if (title != '') {
                var point = map.GetCenter();
                var pushpin = map.AddPushpin(point);
                pushpin.SetTitle(title);
            }
        }

Control Add-in HTML Element

When the control add-in is loaded into the Web browser one HTML element is provided for the control add-in to host its content. This HTML element is a DIV element and it is always named controlAddIn.

 Copy Code
<div id='controlAddIn'>
    control add-in script code can add content here...
</div>

The following is an example of the script code for a control add-in

 Copy Code
function initializeControlAddIn() {
    var controlAddIn = document.getElementById('controlAddIn');
    controlAddIn.innerHTML = "Hello World";
}

See Also