Custom Panel Applications TutorialAuthor: Piotr Szrajber piotr.szrajber@hexagongeospatial.comRevision: 2016-03-20Abstract: The purpose of this document is to explain what the Custom Panel is and how to use to build a custom application by providing a working example.

What is a Custom Panel?Custom Panel is one of the application components that can be created using the M.App Studio © . Technically speaking, Custom Panel is just a nearly-empty HTML page with just essential markup that can run customization scripts created in the M.App Studio Customize step with access to the Smart M.App Javascript API:

• Platform◦ Catalog◦ Publications◦ Shoebox

• Messages• Business Intelligence Geo-Visualization Components Library (GVC)

Creating custom application componentsThe original purpose of introducing the Custom Panel component was to let developers create Smart M.App © panels that contain completely custom logic and do not fit into any of the predefined panels like Map Panel, BI Map Panel, Recipes Panel or Workflow Panel.The developer may build a custom panel by providing markup, styling, javascript code and external library references.

generated by haroopad

Migrating existing web applications to Smart M.App Studio ©Another application of the Custom Panel is migrating existing applications to the Smart M.App cloud without necessity of a complete rewrite.Limitation on the number of source code files remains the sole inconvenience.

Creating Custom Panel applicationsTo define an application using the Custom Panel component, one adds:

• HTML Markup that structures the application• CSS Stylesheet that defines how the application should look like• Javascript code that is going to be evaluated on the panel load• References to external scripts (for example inhouse hosted or available at one of

the Content Delivery Networks)Current Custom Panel implementation allows to add

• 1 x HTML Markup content• 1 x Stylesheet content (but it is possible to use @import statement and

reference external stylesheets)• 1 x Javascript content• Many external scripts references

Customization content can be created either using the M.App Studio editor or created externally and then pasted into the editor.

Using the embedded code editorFor simple functionalities that can fit in a few screens of code, we suggest to use the embedded code editor and keep the code there. It can be edited according to the needs just by clicking the appropriate tool icon in the M.App Studio applications list view.Embedded code editor can be very good also for scenarios where most of the desired functionality is present in a library that can be accessed from external URL and the generated by haroopad

actual source code of the customization is just for linking the external feature with other parts of the Smart M.App using the Javascript API.

Keeping the sources externallyIn case of creating the application externally, it is necessary to remember that:

• All HTML markup must be within a single file• All Styles must be within a single stylesheet• All Javascript code must be with a single javascript file

In order to avoid keeping the sources in just 1 file, one can keep them in their preferred structure and just take advantage of existing tools that can concatenate and minify the javascript code from many files to a single file.Please mind that, although it is present in our roadmap, currently there is no automated customizations import feature and content of files created as described above needs to be pasted manually with the editor.

ExampleThis example will create a simple Leaflet based map application in the M.App Studio © without using any components besides the Custom Panel.

CreateFirst, let’s create a new application in the M.App Studio © using the wizard:

generated by haroopad

BuildNext, in the Build step add a Custom Panel component to the application layout by dragging the puzzle icon from the toolbox to the workspace:

CustomizeNow we are ready to customize the application. In order to do it, move on to the Customize step. We can see several icons in the top right corner of the workspace:

These are as follows:• Javascript attachment editor• Markup attachment editor• Stylesheet attachment editor• External script references configurator

For this example we are going to use the following code snippets:Javascriptfunction initmap(config) {

//generated by haroopad

console.log(config); // set up the map

map = new L.Map('map');

// create the tile layer with correct attributionvar osmUrl = '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; var osmAttrib = 'Map data © <a href="//openstreetmap.org">OpenStreetMap</a> con

tributors'; var osm = new L.TileLayer(osmUrl, {

minZoom: 8, maxZoom: 12, attribution: osmAttrib });

// start the map in South-East England map.setView(new L.LatLng(config.lat, config.lng), config.zoom); map.addLayer(osm); }

initmap({lat:51.3, lng: 0.7, zoom: 9});

Paste this code snippet to the M.App Studio © editor:

Markup

generated by haroopad

<div id="map" class="map">

</div>

Paste this code snippet to the M.App Studio © editor:

Stylesheet@import url('//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css');

body { margin: 0;

}

.map { width: 100%; height: 100%; position: absolute;

}

Paste this code snippet to the M.App Studio © editor:

And add an external reference to the Leaflet library by clicking the EXT icon:generated by haroopad

Then click on the “Add external script” label:

and paste the following address (without protocol part!)cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js

The external script is ready to use:

SaveType in the name of the application and save it using the floppy disk icon.

generated by haroopad

UseNow our simple application is ready to use!

generated by haroopad