MicroApp Dev: Developer Environment

This documentation covers the main IDE (Integrated Developer Environment) for building MicroApps within Graphene.

Table of Contents
Resources
Scripts
Templates
Styles
Forms

Resources

These are the external resources (APIs) that the micro app will utilize to provide interaction with external data feeds and data sources.

Field	Description	Options
Name	This is the name of the resource being referenced. This name is used in the micro app "code", as well as in the App Instance (to map back to a given endpoint)	N/A
Modifier	The modifier instructs the micro app engine on how to modify the data from its original format to JSON. (Example: xml => JSON)	None (keeps data in original format, and does not attempt to convert it to JSON) XML (converts the data from XML to JSON) CSV (converts the data from CSV to JSON)
Path	This is either a fully qualified URL (of an external API) or a relative path which should be appended to an existing endpoint.	N/A
Fetch	If checked, the resource will be fetched (via the GET verb) during app initialization	True / False
Cache	If checked, the resource will be cached for 10 minutes	True / False

Scripts

This is the javascript which will be executed as part of the micro app. All micro apps start with a "main" script, but other scripts may be created to help organize code. The order of scripts may be changed by dragging them above/below each other.

Note: At runtime, all "scripts" are concatenated together in the order that they appear in the menu.

Templates

This tab contains the main mustache template, and provides the ability to build multiple mustache template partials. At runtime, the main template is rendered, along with any partials which are referenced within.

All templates are written in standard mustache syntax, and may reference data stored in the App Data Object.

As Graphene utilizes Bootstrap 3 and FontAwesome, templates may reference standard Bootstrap 3 and FontAwesome classes.

Example:

<h1>Hello {{user.first_name}} {{user.last_name}}!</h1>
I see your favorite color is: 
<span style="color:{{user.options.favorite_color}}">{{user.options.favorite_color}}</span>

Styles

You may add any additional CSS to the page using this editor.

_Note: CSS provided here is applied globally to the entire page, so it is possible to unintentionally impact other areas of the page not contained within the micro app. To avoid this, developers are encouraged to wrap their app's main template in a <div> with a unique class, and then only apply css to that class.

Example:

<!-- Main Template -->
<div class="my-awesome-app">
  Hello World
</div>

/* Styles */
div.my-awesome-app {
  color:blue;
}

Forms

These are the various forms that are referenced in the micro application. By default, there are two default forms including "Options" (which are defined in the App Instance by an Admin), and "User Options" (which are defined at runtime by the user). Additional forms may be defined as well.

Forms are implemented with the GrapheneForms library, and follow the standard GrapheneForms syntax.