Showing results for 
Search instead for 
Do you mean 

Custom Panel Applications Tutorial

by Technical Evangelist on ‎03-30-2016 06:00 AM - edited on ‎04-12-2016 03:53 AM by Technical Evangelist (1,585 Views)

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 components


The 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.


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 applications


To 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 editor


For 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 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 externally


In 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.




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




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


Custom Panel in 1000 words - 1.png




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


Custom Panel in 1000 words - 2.png





Now 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:


Custom Panel in 1000 words - 3.png


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:



function initmap(config) {
   // set up the map
      map = new L.Map('map');

// create the tile layer with correct attribution var osmUrl = '//{s}{z}/{x}/{y}.png'; var osmAttrib = 'Map data © <a href="//">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.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:


Custom Panel in 1000 words - 4.png






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



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


Custom Panel in 1000 words - 5.png





@import url('//');

body {
        margin: 0;

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


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


Custom Panel in 1000 words - 6.png


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


Custom Panel in 1000 words - 10.png



Then click on the “Add external script” label:


Custom Panel in 1000 words - 7.png



and paste the following address (without protocol part!) 


The external script is ready to use:


Custom Panel in 1000 words - 8.png





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


Custom Panel in 1000 words - 11.png





Now our simple application is ready to use!


Custom Panel in 1000 words - 12.png



on ‎09-28-2016 02:11 AM