app

Namespace

app

Description:

  • Main app instance of Backbone AppRouter used to control views and view change flow

Source:

Members

activeView :countlyView

Description:

  • View that is currently being displayed

Source:

View that is currently being displayed

Type:

Methods

addAppAddTypeCallback(callback)

Description:

  • Add callback to be called when user changes app type in UI in Managment -> Applications section (even without saving app type, just chaning in UI), useful when providing custom input additions to app editing for different app types

Source:
Example
app.addAppAddTypeCallback(function(type){
  if (type == "mobile") {
      $("#view-app .appmng-push").show();
  } else {
      $("#view-app .appmng-push").hide();
  }
});
Parameters:
Name Type Description
callback function

function receives type which is app type

addAppManagementSwitchCallback(callback)

Description:

  • Add callback to be called when user changes app in Managment -> Applications section, useful when providing custom input additions to app editing for different app types

Source:
Example
app.addAppManagementSwitchCallback(function(appId, type){
  if (type == "mobile") {
      addPushHTMLIfNeeded(type);
      $("#view-app .appmng-push").show();
  } else {
      $("#view-app .appmng-push").hide();
  }
});
Parameters:
Name Type Description
callback function

function receives app_id param which is app id and type which is app type

addAppObjectModificator(callback)

Description:

  • Modify app object on app create/update before submitting it to server

Source:
Example
app.addAppObjectModificatorfunction(args){
  if (args.type === "mobile") {
      //do something for mobile
  }
});
Parameters:
Name Type Description
callback function

function args object with all data that will be submitted to server on app create/update

addAppSetting(id, options)

Description:

  • Add additional settings to app management. Allows you to inject html with css classes app-read-settings, app-write-settings and using data-id attribute for the key to store in app collection. And if your value or input needs additional processing, you may add the callbacks here

Source:
Example
app.addAppSetting("my_setting", {
    toDisplay: function(appId, elem){$(elem).text(process(countlyGlobal['apps'][appId]["my_setting"]));},
    toInput: function(appId, elem){$(elem).val(process(countlyGlobal['apps'][appId]["my_setting"]));},
    toSave: function(appId, args, elem){
        args.my_setting = process($(elem).val());
    },
    toInject: function(){
        var addApp = '<tr class="help-zone-vs" data-help-localize="manage-apps.app-my_setting">'+
            '<td>'+
                '<span data-localize="management-applications.my_setting"></span>'+
            '</td>'+
            '<td>'+
                '<input type="text" value="" class="app-write-settings" data-localize="placeholder.my_setting" data-id="my_setting">'+
            '</td>'+
        '</tr>';

        $("#add-new-app table .table-add").before(addApp);

        var editApp = '<tr class="help-zone-vs" data-help-localize="manage-apps.app-my_settingt">'+
            '<td>'+
                '<span data-localize="management-applications.my_setting"></span>'+
            '</td>'+
            '<td>'+
                '<div class="read app-read-settings" data-id="my_setting"></div>'+
                '<div class="edit">'+
                    '<input type="text" value="" class="app-write-settings" data-id="my_setting" data-localize="placeholder.my_setting">'+
                '</div>'+
            '</td>'+
        '</tr>';

        $(".app-details table .table-edit").before(editApp);
    }
});
Parameters:
Name Type Description
id string

the same value on your input data-id attributes
options object

different callbacks for data modification

Properties
Name Type Description
toDisplay function

function to be called when data is prepared for displaying, pases reference to html element with app-read-settings css class in which value should be displayed
toInput function

function to be called when data is prepared for input, pases reference to html input element with app-write-settings css class in which value should be placed for editing
toSave function

function to be called when data is prepared for saving, pases reference to object args that will be sent to server ad html input element with app-write-settings css class from which value should be taken and placed in args
toInject function

function to be called when to inject HTML into app management view

addAppSwitchCallback(callback, name)

Description:

  • Add callback to be called when user changes app in dashboard, which can be used globally, outside of the view

Source:
Example
app.addAppSwitchCallback(function(appId){
   countlyCrashes.loadList(appId);
});
Parameters:
Name Type Description
callback function

function receives app_id param which is app id of the new app to which user switched
name string

Plugin name

addAppType(name, view)

Description:

  • Register new app type as mobile, web, desktop, etc. You can create new plugin to add new app type with its own dashboard

Source:
Example
app.addAppType("mobile", MobileDashboardView);
Parameters:
Name Type Description
name string

name of the app type as mobile, web, desktop etc
view countlyView

instance of the countlyView to show as main dashboard for provided app type

addDataExport(name, callback)

Description:

  • Add custom data export handler from datatables to csv/xls exporter. Provide exporter name and callback function. Then add the same name as sExport attribute to the first datatables column. Then when user will want to export data from this table, your callback function will be called to get the data. You must perpare array of objects all with the same keys, where keys are columns and value are table data and return it from callback to be processed by exporter.

Source:
Example
app.addDataExport("userinfo", function(){
   var ret = [];
   var elem;
   for(var i = 0; i < tableData.length; i++){
       //use same keys for each array element with different user data
       elem ={
           "fullname": tableData[i].firstname + " " + tableData[i].lastname,
           "job": tableData[i].company + ", " + tableData[i].jobtitle,
           "email": tableData[i].email
       };
       ret.push(elem);
   }
   //return array
   return ret;
});
Parameters:
Name Type Description
name string

name of the export to expect in datatables sExport attribute
callback function

callback to call when getting data

addPageScript(view, callback, name)

Description:

  • Add callback to be called everytime new view/page is loaded, so you can modify view with javascript after it has been loaded

Source:
Examples

Adding to single specific view with specific url

//this will work only for view bind to #/analytics/events
app.addPageScript("/analytics/events", function(){
  $("#event-nav-head").after(
      "<a href='#/analytics/events/compare'>" +
          "<div id='compare-events' class='event-container'>" +
              "<div class='icon'></div>" +
              "<div class='name'>" + jQuery.i18n.map["compare.button"] + "</div>" +
          "</div>" +
      "</a>"
  );
});

Add to all view subpages

//this will work /users/ and users/1 and users/abs etc
app.addPageScript("/users#", modifyUserDetailsForPush);

Adding script to any view

//this will work for any view
app.addPageScript("#", function(){
  alert("I am an annoying popup appearing on each view");
});
Parameters:
Name Type Description
view string

view url/hash or with possible # as wildcard or simply providing # for any view
callback function

function to be called when view loaded
name string

Plugin name

addRefreshScript(view, callback)

Description:

  • Add callback to be called everytime view is refreshed, because view may reset some html, and we may want to remodify it again. By default this happens every 10 seconds, so not cpu intensive tasks

Source:
Examples

Adding to single specific view with specific url

//this will work only for view bind to #/analytics/events
app.addPageScript("/analytics/events", function(){
  $("#event-nav-head").after(
      "<a href='#/analytics/events/compare'>" +
          "<div id='compare-events' class='event-container'>" +
              "<div class='icon'></div>" +
              "<div class='name'>" + jQuery.i18n.map["compare.button"] + "</div>" +
          "</div>" +
      "</a>"
  );
});

Add to all view subpage refreshed

//this will work /users/ and users/1 and users/abs etc
app.addRefreshScript("/users#", modifyUserDetailsForPush);

Adding script to any view

//this will work for any view
app.addRefreshScript("#", function(){
  alert("I am an annoying popup appearing on each refresh of any view");
});
Parameters:
Name Type Description
view string

view url/hash or with possible # as wildcard or simply providing # for any view
callback function

function to be called when view refreshed

addUserEditCallback(callback)

Description:

  • Add callback to be called when user open user edit UI in Managment -> Users section (even without saving, just opening), useful when providing custom input additions to user editing

Source:
Parameters:
Name Type Description
callback function

function receives user object and paramm which can be true if saving data, false if opening data, string to modify data
Description:

  • Navigate to another view programmatically. If you need to change the view without user clicking anything, like redirect. You can do this using this method. This method is not define by countly but is direct method of AppRouter object in Backbone js

Source:
Examples

Redirect to url of the same view

//you are at #/manage/systemlogs
app.navigate("#/manage/systemlogs/query/{}");

Redirect to url of other view

//you are at #/manage/systemlogs
app.navigate("#/crashes", true);
Parameters:
Name Type Attributes Description
fragment string

url path (hash part) where to redirect user
triggerRoute boolean <optional>

to trigger route call, like initialize new view, etc. Default is false, so you may want to use false when redirecting to URL for your own same view where you are already, so no need to reload it

tipsify(enable, el)

Description:

  • Toggle showing tooltips, which are usually used in help mode for all elements containing css class help-zone-vs or help-zone-vb and having data-help attributes (which are generated automatically from data-help-localize attributes upon localization)

Source:
Parameters:
Name Type Description
enable boolean

if true tooltips will be shown on hover, if false tooltips will be disabled
el jquery_object

jquery reference to parent element which contents to check for tooltips, by default all document is checked if not provided

(static) addAppManagementInput(plugin, title, inputs)

Description:

  • Add a countlyManagementView-extending view which will be displayed in accordion tabs on Management->Applications screen

Source:
Parameters:
Name Type Description
plugin string

plugin name
title string

plugin title
inputs Array

plugin inputs

(static) addAppManagementView(plugin, title, View)

Description:

  • Add a countlyManagementView-extending view which will be displayed in accordion tabs on Management->Applications screen

Source:
Parameters:
Name Type Description
plugin string

plugin name
title string

plugin title
View object

plugin view

(static) addMenu(category, node)

Description:

  • Add first level menu element for all app types and special categories.

Source:
Parameters:
Name Type Description
category string

category under which to add menu: "understand", "explore", "reach", "improve", "utilities", "management", "user"
node Object

object defining menu lement

Properties
Name Type Description
text string

key for localization string which to use as text
code string

code name for menu to reference for children, also assigned as id attribute with -menu postfix
icon string

HTML code for icon to show, usually a div element with font icon classes
priority number

priority order number, the less it is, the more on top menu will be
url string

url where menu points. Don't provide this, if it is upper menu and will contain children
classes string

string with css classes to add to menu element
style string

string with css styling to add to menu element
html string

additional HTML to append after text (use icon to append HTML before text)
callback function

called when and each time menu is added passing same parameters as to this method plus added jquery menu element as 4th param

(static) addMenuCategory(category, node)

Description:

  • Add menu category. Categories will be copied for all app types and its visibility should be controled from the app type plugin

Source:
Parameters:
Name Type Description
category string

new menu category
node Object

object defining category lement

Properties
Name Type Description
text string

key for localization string which to use as text
priority number

priority order number, the less it is, the more on top category will be
classes string

string with css classes to add to category element
style string

string with css styling to add to category element
html string

additional HTML to append after text
callback function

called when and each time category is added passing same parameters as to this method plus added jquery category element as 3th param

(static) addMenuForType(app_type, category, node)

Description:

  • Add first level menu element for specific app type under specified category. You can only add app type specific menu to categories "understand", "explore", "reach", "improve", "utilities"

Source:
Parameters:
Name Type Description
app_type string

type of the app for which to add menu
category string

category under which to add menu: "understand", "explore", "reach", "improve", "utilities"
node Object

object defining menu lement

Properties
Name Type Description
text string

key for localization string which to use as text
code string

code name for menu to reference for children, also assigned as id attribute with -menu postfix
icon string

HTML code for icon to show, usually a div element with font icon classes
priority number

priority order number, the less it is, the more on top menu will be
url string

url where menu points. Don't provide this, if it is upper menu and will contain children
classes string

string with css classes to add to menu element
style string

string with css styling to add to menu element
html string

additional HTML to append after text (use icon to append HTML before text)
callback function

called when and each time menu is added passing same parameters as to this method plus added jquery menu element as 4th param

(static) addSubMenu(parent_code, node)

Description:

  • Add second level sub menu element for all app types (not available for special categories as "management" and "user")

Source:
Parameters:
Name Type Description
parent_code string

code for parent element under which to add this submenu element
node Object

object defining menu lement

Properties
Name Type Description
text string

key for localization string which to use as text
code string

code name for menu to reference for children, also assigned as id attribute with -menu postfix
icon string

HTML code for icon to show, usually a div element with font icon classes
priority number

priority order number, the less it is, the more on top menu will be
url string

url where menu points. Don't provide this, if it is upper menu and will contain children
classes string

string with css classes to add to menu element
style string

string with css styling to add to menu element
html string

additional HTML to append after text (use icon to append HTML before text)
callback function

called when and each time menu is added passing same parameters as to this method plus added jquery menu element as 4th param

(static) addSubMenuForType(app_type, parent_code, node)

Description:

  • Add second level menu element for specific app type under specified parent code.

Source:
Parameters:
Name Type Description
app_type string

type of the app for which to add menu
parent_code string

code for parent element under which to add this submenu element
node Object

object defining menu lement

Properties
Name Type Description
text string

key for localization string which to use as text
code string

code name for menu to reference for children, also assigned as id attribute with -menu postfix
priority number

priority order number, the less it is, the more on top menu will be
url string

url where menu points. Don't provide this, if it is upper menu and will contain children
classes string

string with css classes to add to menu element
style string

string with css styling to add to menu element
html string

additional HTML to append after text (use icon to append HTML before text)
callback function

called when and each time menu is added passing same parameters as to this method plus added jquery menu element as 4th param

(static) localize(el)

Description:

  • Localize all found html elements with data-localize and data-help-localize attributes

Source:
Parameters:
Name Type Description
el jquery_object

jquery reference to parent element which contents to localize, by default all document is localized if not provided

(static) noHistory(hash)

Description:

  • Navigate to another hash address programmatically, without trigering view route and without leaving trace in history, if possible

Source:
Example
//you are at #/manage/systemlogs
app.noHistory("#/manage/systemlogs/query/{}");
//now pressing back would not go to #/manage/systemlogs
Parameters:
Name Type Description
hash string

url path (hash part) to change