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)
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.
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.
To define an application using the Custom Panel component, one adds:
Current Custom Panel implementation allows to add
Customization content can be created either using the M.App Studio editor or created externally and then pasted into the 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.
In case of creating the application externally, it is necessary to remember that:
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:
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:
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:
These are as follows:
For this example we are going to use the following code snippets:
function initmap(config) { // console.log(config); // set up the map map = new L.Map('map');
// create the tile layer with correct attribution var 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
<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:
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:
Type in the name of the application and save it using the floppy disk icon.
Now our simple application is ready to use!