This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Custom Panel Applications TutorialAuthor: Piotr Szrajber [email protected]: 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.
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.
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) {