
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
xmlns:smartTable="sap.ui.comp.smarttable" xmlns:sem="sap.m.semantic" controllerName="zxxx.controller.list">
<App id="app">
<sem:FullscreenPage id="fp" title="List Search">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="ZXXX_ ASSET_XXX" enableBasicSearch="true" basicSearchFieldName="Name"
showFilterConfiguration="true"/>
<smartTable:SmartTable id="smartTable" smartFilterId="smartFilterBar" tableType="Table" editable="false" entitySet="ZXXX_ ASSET_XXX"
useVariantManagement="true" useTablePersonalisation="true" header="Assets" showRowCount="true" useExportToExcel="false"
enableAutoBinding="true">
<Table>
<items>
<ColumnListItem type="Navigation" press="onListItemPress"></ColumnListItem>
</items>
</Table>
</smartTable:SmartTable>
</sem:FullscreenPage>
</App>
</mvc:View>
sap.ui.define([
'sap/ui/core/Control',
'zxxx/model/models'
],
function(ViewPort, Model) {
var view;
var query;
var queryStatesTask;
var resultsLyr;
var symbol;
var webmap;
var that;
return ViewPort.extend("zxxx.control.viewPort", {
metadata: {
properties: {
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "100%"
}
}
},
renderer: function(oRm, oControl) {
oRm.write("<div");
// Write controles and classes defined by the developer
oRm.writeControlData(oControl);
oRm.writeClasses(oControl);
oRm.addStyle("height", oControl.getHeight());
oRm.addStyle("width", oControl.getWidth());
oRm.writeStyles();
oRm.write(">");
oRm.write("<div id='legendDiv'></div>");
oRm.write("<div id='laylstDiv'></div>");
oRm.write("</div>");
},
onAfterRendering: function(args) {
this.mapLoad();
},
mapLoad: function() {
that = this;
// Initialize ARCGIS
if (initialized == 0) {
//Include ESRI style sheets
jQuery.sap.includeStyleSheet("https://js.arcgis.com/4.5/esri/css/main.css");
jQuery.sap.includeStyleSheet("https://js.arcgis.com/4.5/esri/css/view.css");
jQuery.sap.includeStyleSheet("https://js.arcgis.com/4.5/dijit/themes/claro/claro.css");
//This referes to the namespace of the faceless component for ESRI libraries
jQuery.sap.require("XXX/ZARCGIS/arcgis/dojo/dojo");
initialized = 1;
}
require([
"esri/Map",
"esri/WebMap",
"esri/views/MapView",
"esri/config",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
"esri/widgets/LayerList",
"esri/widgets/Legend",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/core/urlUtils",
"esri/widgets/Print",
"dojo/domReady"
], function(Map, WebMap, MapView, esriConfig, QueryTask, Query, GraphicsLayer, LayerList, Legend,
Search, FeatureLayer, urlUtils, Print, ready) {
ready(function() {
// Impliment Utility to read the ARCGIS URLs and mapid
// Poral URL to point to ARCGIS Portal
esriConfig.portalUrl = portal;
// Load webmap from the map id
webmap = new WebMap({
portalItem: {
id: mapid
}
});
//Load map to view
view = new MapView({
map: webmap,
container: that.getId()
});
view.center = [133, -27]; // Sets the center point of the view at a specified lon/lat
view.zoom = 5;
query = new Query({
returnGeometry: true,
outFields: ["*"],
});
query.geometry = view.extent;
//QueryInt points to a feature server where the query will be executed
queryStatesTask = new QueryTask({
url: queryInt
});
resultsLyr = new GraphicsLayer();
//Declate the layerlist and retrive it from the view
var layerList = new LayerList({
view: view
}, "laylstDiv");
//Add it to view to be displayed as a widget on top left
view.ui.add(layerList, "top-left");
// Use Javascript Promises so that widget loading happens in proper sequence.
// Here featurelayer is dependent on webmap being loaded and legend is dependent on feature layer
webmap.then(function() {
var featureLayer = webmap.layers.getItemAt(0);
featureLayer.then(function() {
var legend = new Legend({
view: view,
id: "leg",
style: "card"
}, "legendDiv");
view.ui.add(legend, "top-left");
})
});
//This is where we pass the Asset id to map to show it in map
if (view) {
if (Model) {
//Idea is as soon as you click on a asset in list report
//its key is captured in Model and is retrived here
var intKey = Model.getKey();
}
//If key is found execute the query
if (intKey) {
view.then(function() {
console.log("Querying the service");
query.outSpatialReference = view.spatialReference;
query.spatialRelationship = "intersects";
query.where = "Asset='" + intKey + "'";
queryStatesTask.execute(query).then(getResults).then(addToLayer).then(goToLayer);
//if the query retunsresult based on asset id
function getResults(result) {
console.log("found " + result.features.length + " features");
// Loop through each of the results and assign a symbol and PopupTemplate
// to each so they may be visualized on the map
var assets = [];
require(["dojo/_base/array"], function(arrayUtils) {
assets = arrayUtils.map(result.features, function(
feature) {
return feature;
});
});
return assets;
}
// Add the assets to Results Layer(graphic LAyer) declared earlier and add it to webmap
function addToLayer(assets) {
console.log("Add Layer");
resultsLyr.addMany(assets);
webmap.add(resultsLyr);
return assets;
}
//finally navigate to the asset
function goToLayer(assets) {
console.log("Goto");
view.goTo({
target: assets,
zoom: 18
});
}
});
}
}
})
});
}
});
});
xmlns:mapCont="zxxxx.control"
The map control can be placed at any desirable place as below.
<l:VerticalLayout id="VL" width="100%">
<mapCont:viewPort id='GIS' class='claro'/>
</l:VerticalLayout>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
23 | |
23 | |
9 | |
6 | |
5 | |
5 | |
5 | |
4 | |
4 | |
3 |