Example 4 creates a dialog that displays the owner of the current selection and allows it to be edited. The updated owner name is sent to a page on the web tier for updating in the feature source. It uses the following files in the folder C:\Program Files\Autodesk\Autodesk Infrastructure Web Server Extension 2016\www\fusion:
- widgets\Example4.js
- widgets\widgetinfo\example4.xml
- widgets\Example4\Example4.php
- templates\mapguide\examples.xml
- templates\mapguide\examples\index.html
Example 4 is very similar in structure to Example 3: Dialogs and Events. It uses a dialog that updates based on the events Fusion.Event.MAP_SELECTION_ON and Fusion.Event.MAP_SELECTION_OFF. Instead of simply displaying the selection information, though, the dialog has an input field so the user can edit the owner of the currently selected parcel.
The initialization code for the dialog, in Example4.js, creates the form with an input text field and button, and sets the onclick action for the button.
this.messageDiv = document.createElement('div');
this.formInput = document.createElement('form');
this.formInput.innerHTML =
'<p><label>Property owner: <input type="text" ' +
'name="propertyOwner" ' +
'value="propertyowner" size="30" / ></label></p>' +
'<p><input name="inputButton" type="button" value="Update" ' +
'style="width: 70px;" class="Ctrl" /></p>';
this.formInput.inputButton.onclick = this.updatePropertyOwner;
this.messageDiv.appendChild(this.formInput);
this.domObj.appendChild(this.messageDiv);
The widget updates the dialog whenever the selection changes.
If a user clicks the update button, the widget sends the new owner name to a page on the web tier, using an Ajax.Request object from the Prototype JavaScript framework. It expects the web page to return results in a JSON object.
updatePropertyOwner : function()
{
var thisWidget = Fusion.getWidgetById('Example4');
var theMap = Fusion.getWidgetById('Map');
var reqParameters = {};
reqParameters.session = Fusion.sessionId;
reqParameters.mapname = theMap.getMapName();
reqParameters.layer = 'Parcels';
reqParameters.propName = 'RNAME'; // Must use name from feature source, not display name
reqParameters.newValue = thisWidget.formInput.propertyOwner.value;
this.sBaseUrl = '/widgets/Example4/Example4.php';
Fusion.ajaxRequest(this.sBaseUrl,
{
method:'post',
parameters: reqParameters,
onSuccess: function(transport)
{
var jsonContent = eval("(" + transport.responseText + ")");
// Optionally, write the results to the Firebug console
console.group('Returned values');
for (var prop in jsonContent)
{
console.log(prop + ': ' + jsonContent[prop]);
}
console.groupEnd();
if (jsonContent.error)
{
alert('There was an error:\n' + jsonContent.errorMsg);
}
else
{
alert('Update successful!');
}
},
onFailure: function(ajaxResponse)
{
alert('Error:\n' + ajaxResponse.status + ' ' +
ajaxResponse.statusText);
}
}
);
}
The client-side JavaScript uses the display names for properties, as defined in the layer definition in Infrastructure Studio. The Infrastructure Map Server Web API uses the property names as defined in the feature class. In this example, the property in the feature class is RNAME and the display name is Owner.
The web page, Example4.php, updates the property for the selected feature. This is standard use of the Web API as described in Modifying Maps and Layers and other sample programs. There are a few items that are specific to flexible web layouts, though.
It includes the file Common.php which performs some standard initialization for widgets, including creating an MgResourceService object $resourceService and setting the $mapName variable.
$fusionMGpath = '../../layers/MapGuide/php/'; include $fusionMGpath . 'Common.php';
Because the client-side JavaScript function expects to receive JSON-formatted results, the web page must set the appropriate headers.
header('Content-type: text/x-json');
header('X-JSON: true');
It must also format the results properly. In this case, the web page returns the original POST arguments with some added members to indicate success or failure of the request. The added members are simply added to the arguments array. For example:
$args['error'] = false;
The entire arguments array is returned to the client.
echo json_encode($args);
$reader =
$resourceService->GetResourceContent($layerFeatureResource);
$xmlString = $reader->ToString();
$domDoc = DOMDocument::loadXML($xmlString);
$xpath = new DOMXPath($domDoc);
$query = "//Parameter[Name='ReadOnly']";
$nodes = $xpath->query($query);
foreach ($nodes as $node)
{
$query = "Value";
$subNodes = $xpath->query($query, $node);
foreach ($subNodes as $subNode)
{
$subNode->nodeValue = 'FALSE';
}
}
$newXml = $domDoc->saveXML();
$resourceService->SetResource($layerFeatureResource,
new MgByteReader($newXml, MgMimeType::Xml), NULL);