How to build a production grade UI5 application with GIS integration using 3rd party API (ARCGIS)
In one of my customer engagements the business requirement was to build a UI5 application with geospatial capabilities. I used Interactive maps from ARCGIS enriched with business data from SAP to accomplish this. This blog outlines my journey and challenges I faced to impliment it.
We faced a major hurdle in deploying the application to the Frontend server due to Cross origin resource Sharing (CORS) errors but I will not discuss it here. (Maybe a separate blog later)
Here are the steps I followed.
- Created a CDS view to read the assets from backend SAP system. Included UI annotations so that the smart control directly build the view and I don’t have to worry about enabling it at the UI5 app level (That’s why S/4Hana is fun).
- Used Webide to build a List report application. I was tempted earlier to use the smart template but then decided not to use as I needed more control doing the GIS integration and facet replacement has its own set of restrictions. So I ended up using smart controls like Smart Filter and Smart Table to build a list report. The idea was to show a list of all assets( from mapping perspective assets have a physical location associated with them and can be identified by coordinates) and clicking on one will display it on the ESRI map
<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>
- So I went with option two. I downloaded the latest version of ESRI JS API (Link) and loaded it in frontend server as a library (See my last blog) You may have to create an account for that if you want to try it. Now this package is pretty big and webide will not able to handle such volume. So I used the report /UI5/UI5_REPOSITORY_LOAD to upload it directly from system (laptop) in Frontend server. I can now reference the library from any GIS enabled UI5 apps(consuming application) without making the apps bulky and unmanageable. Declare it as a dependency in Manifest along with standard UI5 library calls. The final structure of the ARCGIS should look like the second screenshot with the entire package loaded.
- Now I needed a perfect UI5 control to display maps. My initial idea was to extend the SAP standard Viewport (sap.ui.vk.Viewport) control. Which worked out initially. But as I went on adding more widgets to the interactive maps I realized that the standard control was actually restricting some of the ESRI features(like search widget). So I built a very simple UI5 control (viewPort.js) with just html <div> and loaded the map in its onAfterRendering() method.Please Note The code here is just for understanding the concepts and cannot be copy pasted. The ARCGIS query reads asset key from SAP and navigates to it using goto method.
- Once the control is ready we just need to build a view to display it. My custom control was present in a folder “control” so I declared it at the top of view with the following lines where zxxxx is the namespace-
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>
That’s it, the UI5 app is ready and it has an embedded interactive map which work by consuming SAP business data. We can also build UI5 controls like combobox or select and use the user input to interact with the map ( zoom, highlight, goto and so on )