Developers Knowledge Base

[#1]

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.

Example

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

Create

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

Build

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:

Customize

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:

• 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) {
   //
   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:

Save

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

Use

Now our simple application is ready to use!

[#2]

Here's the bitbucket link to the source: https://bitbucket.org/HGDN/hgdn_mappstudio/src/8d68bc2b50ffe21cb88c5a5c26ec90a59e402587/Simple_Leafl...