CiviCRM 4.5 Examples

civicrm45examples.js

// A closure is a function that provides scope for your variables
// and can provide an abbreviated alias of globals.
// In this case we are importing Civi's copy of jQuery and lo-dash.
// @see http://wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference
function something($, _) {
  // Code goes here
}
// Run the function
something(CRM.$, CRM._);

// The above can be written more concisely (and without polluting the global scope with a function name) as:
(function($, _) {
  // All our code should go inside here.
}(CRM.$, CRM._));

/**
 * Snippet & popup examples
 * @see http://wiki.civicrm.org/confluence/display/CRMDOC/Ajax+Pages+and+Forms
 */

// Widgetize the main content area
$('#crm-main-content-wrapper').crmSnippet();

// Reload the content - the url hasn't changed so the new content is exactly the same
$('#crm-main-content-wrapper').crmSnippet('refresh');

// Set a new url
$('#crm-main-content-wrapper').crmSnippet('option', 'url', CRM.url('civicrm/contact/search/advanced', 'reset=1'));

// Reload content with the new url
$('#crm-main-content-wrapper').crmSnippet('refresh');

// Listen for new content
$('#crm-main-content-wrapper').on('crmLoad', function(event, data) {
  console.log(data);
  CRM.alert('Url: ' + data.url, 'crmLoad Triggered');
});

// Load a page in a popup
CRM.loadPage(CRM.url('civicrm/contact/search', 'reset=1'));

// Load a popup and handle form with ajax
CRM.loadForm(CRM.url('civicrm/activity', 'reset=1&action=add&context=standalone'))
// Add a success handler
  .on('crmFormSuccess', function(event, data) {
    console.log('data');
  });

// Put it all together - copied from crm.livePage.js
CRM.$(function($) {
  var active = 'a.button, a.action-item, a.crm-popup';
  $('#crm-main-content-wrapper')
    // Widgetize the content area
    .crmSnippet()
    // Open action links in a popup
    .off('.crmLivePage')
    .on('click.crmLivePage', active, CRM.popup)
    .on('crmPopupFormSuccess.crmLivePage', active, CRM.refreshParent);
});

// Example: edit the navigation menu via UI and witness the glory of popups

/**
 * Select2 and crmEntityRef examples
 * @see http://wiki.civicrm.org/confluence/display/CRMDOC/EntityRef+Fields
 */

// Select2 example
$('#my-field').crmSelect2();

// Entityref example - defaults to a contact reference
$('#my-field').crmEntityRef();

// Allow a new contact to be created
$('#my-field').crmEntityRef({create: true});

// Limit to a certain type of contact
$('#my-field').crmEntityRef({create: true, api: {params: {contact_type: 'Individual'}}});

// List events instead of contacts
$('#my-event').crmEntityRef({entity: 'Event'});

/**
 * Unobtrusive notifications
 * @see https://wiki.civicrm.org/confluence/display/CRMDOC/Notification+Reference
 */
var msg = CRM.status();
msg.resolve();

// With some params
var msg = CRM.status({start: 'Cooking', success: 'Cooked'});
msg.resolve();

// Chain it with an api call
CRM.api3('contact', 'get', {contact_type: 'Individual'}, {success: "Loaded 'em"});