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 using 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 following example. 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, style sheet, and images that are required 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> <Image>PushpinBlue.png</Image> <Image>PushpinGreen.png</Image> <Image>PushpinRed.png</Image> <Script>Script.js</Script> <StyleSheet>StyleSheet.css</StyleSheet> </Resources> <ScriptUrls> <ScriptUrl>http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3</ScriptUrl> </ScriptUrls> <Script> <![CDATA[ InitializeMap('controlAddIn'); Microsoft.Dynamics.NAV.InvokeExtensibilityMethod('ControlAddInReady', null); ]]> </Script> <RequestedHeight>300</RequestedHeight> <RequestedWidth>700</RequestedWidth> <MinimumHeight>200</MinimumHeight> <MinimumWidth>400</MinimumWidth> <MaximumHeight>800</MinimumHeight> <MaximumWidth>1000</MinimumWidth> <VerticalStretch>true</VerticalStretch> <HorizontalStretch>true</HorizontalStretch> <VerticalShrink>true</VerticalShrink> <HorizontalShrink>true</HorizontalShrink> </Manifest> |
Script Code in a Separate File
Code that is called from C/AL code must be put 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"; } |
Sizing the Control Add-in
To control that the sizing of the control add-in always is optimal, even on smaller display targets, such as the phone, some settings are available when you write the manifest code. The settings make sure that resizing of the control add-in works on all client types.
VerticalShrink
specifies that the control add-in can be made smaller vertically. This setting is optional.
Copy Code | |
---|---|
bool VerticalShrink() |
HorizontalShrink
specifies that the control add-in can be made smaller horizontally. This setting is optional.
Copy Code | |
---|---|
bool HorizontalShrink() |
MinimumHeight
specifies the minimum height that the control add-in can be shrunk to. This setting only applies if the VerticalShrink
setting is specified.
Copy Code | |
---|---|
int MinimumHeight() |
MinimumWidth
specifies the minimum width that the control add-in can be shrunk to. This setting only applies if the HorizontalShrink
setting is specified.
Copy Code | |
---|---|
int MinimumWidth() |
MaximumHeight
specifies the maximum height that the control add-in can be stretched to. This setting only applies if the VerticalStretch
setting is specified.
Copy Code | |
---|---|
int MaximumHeight() |
MaximumWidth
specifies the maximum width that the control add-in can be stretched to. This setting only applies if the HorizontalStretch
setting is specified.
Copy Code | |
---|---|
int MaximumWidth() |
VerticalStretch
specifies that the control add-in can be made larger vertically. This setting is optional.
Copy Code | |
---|---|
bool VerticalStretch() |
HorizontalStretch
specifies that the control add-in can be made larger horizontally. This setting is optional.
Copy Code | |
---|---|
bool HorizontalStretch() |
RequestedHeight
specifies the initial height of the control add-in.
Copy Code | |
---|---|
int RequestedHeight() |
RequestedWidth
specifies the initial width of the control add-in.
Copy Code | |
---|---|
int RequestedWidth() |
Resource Files
The resource files can be described in the manifest file with or without a relative path; Microsoft Dynamics NAV supports both.
In the following example the files are described by using their file name only:
Copy Code | |
---|---|
<Resources> <Image>Blue.png</Image> <Script>Script.js</Script> <StyleSheet>StyleSheet.css</StyleSheet> </Resources> |
To support the example earlier in this section, the resource files must be located in subfolders in the control add-in .zip file by using the following names:
Resource File Type | Resource Name | Subfolder Name |
---|---|---|
Image file | Blue.png | Image/Blue.png |
Script file | Script.js | Script/Script.js |
Style sheet file | StyleSheet.css | StyleSheet/StyleSheet.css |
In the next example the resource files are described using a relative path in the manifest file:
Copy Code | |
---|---|
<Resources> <Image>Images/Pushpins/Blue.png</Image> <Script>Scripts/Script.js</Script> <StyleSheet>StyleSheets/StyleSheet.css</StyleSheet> </Resources> |
To support this example, the resource files must be located in subfolders with the name of the relative path in the control add-in .zip file:
Resource File Type | Resource Name | Subfolder Name |
---|---|---|
Image file | Images/Pushpins/Blue.png | Images/Pushpins/Blue.png |
Script file | Scripts/Script.css | Scripts/Script.css |
Style sheet file | StyleSheets/StyleSheet.css | StyleSheets/StyleSheet.css |