MicroApp Dev: JavaScript Helper Functions

These functions (callable by app.______), are available within your app's local context, and can be helpful in providing basic interactivity and other standard functionality within your app.

Note: While app.data is available most everywhere, the app helper functions mentioned in this document are only available within the context of the this.callback function. Please ensure that you have defined a this.callback function to ensure full access to the functions below.

Table of Contents
app.click
app.get
app.post
app.put
app.delete
app.refresh
app.update
app.form
app.grid
app.alert
app.modal
app.render

app.click(selector, callback)

This function registers a callback which is triggered when a user clicks on a DOM element matching the specified selector.

Argument	Type	Description
selector	String	This is the CSS selector string which maps to the element that should trigger a click event
callback	Function	This is the function that is called when the click event is triggered

// Example
app.click('#my-button',function(e) {
  // The button was clicked!
});

app.get(resource_name, data, callback_success, callback_failure?)

This function performs an AJAX request to a resource using the HTTP 'GET' verb.

Argument	Type	Description
resource_name	String	This is the name of the resource as defined in the micro app definition
data	Object	This is an object which contains the data to be sent. (Data is encoded as a standard URI "query" as part of the request)
callback_success	Function	This is the function which will be called upon success (HTTP "200" Response Code)
callback_failure	Function	This is an optional which will be called upon failure (Non "200" Response Code)

// Example
app.get('colors',{'id':0},function(response) {
  // Hooray!
},function(response) {
  // There was an error :-(!
});

app.post(resource_name, data, callback_success, callback_failure?)

This function performs an AJAX request to a resource using the HTTP 'POST' verb.

Argument	Type	Description
resource_name	String	This is the name of the resource as defined in the micro app definition
data	Object	This is an object which contains the data to be sent. (Data is encoded as x-www-form-urlencoded data as part of the request. The "x-www-form-urlencoded" header is sent as part of the request.)
callback_success	Function	This is the function which will be called upon success (HTTP "200" Response Code)
callback_failure	Function	This is an optional which will be called upon failure (Non "200" Response Code)

// Example
app.post('colors',{'color':'blue},function(response) {
  // Hooray!
},function(response) {
  // There was an error :-(!
});

app.put(resource_name, data, callback_success, callback_failure?)

This function performs an AJAX request to a resource using the HTTP 'PUT' verb.

Argument	Type	Description
resource_name	String	This is the name of the resource as defined in the micro app definition
data	Object	This is an object which contains the data to be sent. (Data is encoded as x-www-form-urlencoded data as part of the request. The "x-www-form-urlencoded" header is sent as part of the request.)
callback_success	Function	This is the function which will be called upon success (HTTP "200" Response Code)
callback_failure	Function	This is an optional which will be called upon failure (Non "200" Response Code)

// Example
app.put('colors',{'id':0,'color':'red},function(response) {
  // Hooray!
},function(response) {
  // There was an error :-(!
});

app.delete(resource_name, data, callback_success, callback_failure?)

This function performs an AJAX request to a resource using the HTTP 'DELETE' verb.

Argument	Type	Description
resource_name	String	This is the name of the resource as defined in the micro app definition
data	Object	This is an object which contains the data to be sent. (Data is encoded as x-www-form-urlencoded data as part of the request. The "x-www-form-urlencoded" header is sent as part of the request.)
callback_success	Function	This is the function which will be called upon success (HTTP "200" Response Code)
callback_failure	Function	This is an optional function which will be called upon failure (Non "200" Response Code)

// Example
app.delete('colors',{'id':0},function(response) {
  // Hooray!
},function(response) {
  // There was an error :-(!
});

app.refresh()

This function completely refreshes the application. This includes refetching / initializing the data, and redrawing all templates, etc. This function accepts no parameters.

// Example
app.refresh();

app.update(data?)

This function updates the app data object, and instructs the template rendering engine to re-render the templates (with updated data). This function should be called whenever the app data object is updated. Optionally, this function may accept parameters which will directly update the app data object.

Argument	Type	Description
data	Object	This is an optional data object which will be merged into the existing app data object, and serves as an easy way to update the app data object without performing an additional external assignment

// Examples
app.data.favorite_color = blue;
app.update();

app.update({"favorite_color":"blue"});

app.form(form,selector?)

This function instantiates and returns an instance of the GrapheneForms form as defined in Micro App "Forms" tab, and optionally binds to a specified DOM element. Subsequent calls to app.form with the same form name will return the same form which was previously instantiated. Once a form has been bound to an element, it cannot be rebound to a different element without first destroying the form.

Argument	Type	Description
form	String / Object	This required field is either the name of a form (as defined in the Micro App "Forms" tab, or a GrapheneForms object definition.
selector	String	This optional field is a "css selector" to a given DOM element contained within the Micro App. Example: "#my-form"

// Examples
var myForm = app.form('myForm')
app.form('myForm','.my-form-here').on('change',function(e){ /* etc */ });

app.grid(name, options)

This function instantiates and returns an instance of the GrapheneDataGrid grid.

Argument	Type	Description
name	String	This required field is the name of a grid
options	Object	This required field contains the options for configuring your GrapheneDataGrid

// Examples
app.grid('Data',{
   el: '#my-form-element', 
   resource: "gridData",
   form:"myForm"
})

app.alert(options)

This function initiates a temporary popup alert based on the options supplied.

Argument	Type	Description
options	String / Object	This required field is either an alert String or Object which configures the alert.
options.title	String	Optional title affiliated with the alert
options.content	String	Optional body affiliated with the alert
options.status	String	Optional color of the alert: (info, warning, error, success)

// Examples
app.alert({"title":"Hello","content":"World!","status":"warning"})
app.alert("Hello World!")

app.modal(options)

This function opens a modal based on the options supplied.

Argument	Type	Description
options	Object	This required field is an Object which configures the modal.
options.title	String	Optional title affiliated with the modal
options.content	String	Optional body affiliated with the modal
options.status	String	Optional color of the modal title bar: (info, warning, error, success)

// Examples
app.modal({"title":"Hello","content":"Here is the content!","status":"warning"})

app.render(template, data)

This function renders a mustache template data provided.

Argument	Type	Description
template	String	The name of a template, as defined in the "Templates" section of the Micro App
data	Object	Data to pass to the mustache renderer

// Example 1:
// test_template content:
// My Favorite Color is: {{color}}

var output = app.render('test_template',{"color":"blue"})
console.log(output)

// Printed to Console:
// My Favorite Color is: blue