### Initialize Facebook SDK with Composer

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/social/facebook/facebook_sdk/readme.md

Example of initializing the Facebook SDK when using Composer for dependency management. Requires running 'composer install' and including the autoloader.

```php
if (($loader = require_once __DIR__ . '/vendor/autoload.php') == null)  {
  die('Vendor directory not found, Please run composer install.');
}

$facebook = new Facebook(array(
  'appId'  => 'YOUR_APP_ID',
  'secret' => 'YOUR_APP_SECRET',
));

// Get User ID
$user = $facebook->getUser();
```

--------------------------------

### Initialize Facebook SDK

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/social/facebook/facebook_sdk/readme.md

Basic setup required to instantiate the Facebook SDK. Ensure the SDK is included via 'require'.

```php
require 'facebook-php-sdk/src/facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'YOUR_APP_ID',
  'secret' => 'YOUR_APP_SECRET',
));

// Get User ID
$user = $facebook->getUser();
```

--------------------------------

### Initialize Mozaik and Get Value

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/javascript/mozaik/README.md

Basic JavaScript example to initialize Mozaik on an element and retrieve its value. The `getMozaikValue` method can also apply inline styles.

```javascript
$(function(){
    // initialize
    $('#template').mozaik();

    // get value
    $('#template').getMozaikValue();

    // apply inline styles (tipically for email templates)
    $('#template').getMozaikValue({inlineStyles: true});
});
```

--------------------------------

### Calendar Setup

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/EmailMarketing/EditView.html

Initializes the calendar widget for date input fields. Configures date format, time display, and button triggers.

```javascript
Calendar.setup ({ inputField : "date_start_date", ifFormat : "{CALENDAR_DATEFORMAT}", showsTime : false, button : "jscal_trigger", singleClick : true, step : 1 });
```

--------------------------------

### Get Angular CLI Help

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/README.md

Use this command to access the general help documentation for the Angular CLI, providing an overview and command reference.

```bash
ng help
```

--------------------------------

### Setup Calendar Widget

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/MergeRecords/MergeField.html

Configures the Calendar.setup utility for a date input field. This snippet is used to initialize the calendar picker with specific date formatting and trigger options. It assumes the Calendar object is available.

```javascript
Calendar.setup ({
    inputField : "{EDIT_FIELD_NAME}",
    daFormat : "{CALENDAR_DATEFORMAT}",
    ifFormat : "{CALENDAR_DATEFORMAT}",
    showsTime : false,
    button : "{EDIT_FIELD_NAME}_trigger",
    singleClick : true,
    step : 1
});
```

--------------------------------

### List Field Definition Example

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/SubPanel/subpanels.txt

An example of a list field definition as found in layout_defs.php. It specifies how a field should be displayed, linked, and sorted within a ListView.

```php
'list_fields'=> array(

  array (

		// use the 'ENCODED_NAME' key to get the data
         'varname'=>'ENCODED_NAME',

		// the key into the vardef.php definition
		// also used as the sort order.. split that out
         'name'=>'last_name',

		// use this custom label in the header
         'vname'=>'LBL_LIST_NAME',

		// link this field
         'linked'=>true,

		// use this module because we are linking this field
         'module'=>'Contacts',

  ),
),

```

--------------------------------

### Mozaik Default Settings Configuration

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/javascript/mozaik/README.md

Example of configuring Mozaik with default settings, including templates, editables, styles, and TinyMCE plugins. This sets up the available content blocks and their appearance.

```javascript
$('#template').mozaik({
                headline: {thumbnail: 'tpls/default/thumbs/headline.png', label: 'Headline', tpl: 'tpls/default/headline.html'},
                content1: {thumbnail: 'tpls/default/thumbs/content1.png', label: 'Content', tpl: 'tpls/default/content1.html'},
                content3: {thumbnail: 'tpls/default/thumbs/content3.jpg', label: 'Three column', tpl: 'tpls/default/content3.html'},
                content2: {thumbnail: 'tpls/default/thumbs/content2.jpg', label: 'Two column', tpl: 'tpls/default/content2.html'},
                image3: {thumbnail: 'tpls/default/thumbs/image3.jpg', label: 'Three column with image', tpl: 'tpls/default/image3.html'},
                image2: {thumbnail: 'tpls/default/thumbs/image2.jpg', label: 'Two column with image', tpl: 'tpls/default/image2.html'},
                image1left: {thumbnail: 'tpls/default/thumbs/image1left.jpg', label: 'Content with image (left)', tpl: 'tpls/default/image1left.html'},
                image1right: {thumbnail: 'tpls/default/thumbs/image1right.jpg', label: 'Content with image (right)', tpl: 'tpls/default/image1right.html'},
                footer: {thumbnail: 'tpls/default/thumbs/footer.png', label: 'Footer', tpl: 'tpls/default/footer.html'},
            },
            editables: 'editable',
            style: 'tpls/default/styles/default.css',
            namespace: false,
            tinyMCEPlugins: "link image imagetools code"
        });
```

--------------------------------

### Make API Calls

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/social/facebook/facebook_sdk/readme.md

Example of making an API call to retrieve user profile information after checking if the user is logged in. Handles potential API exceptions.

```php
if ($user) {
  try {
    // Proceed knowing you have a logged in user who's authenticated.
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}
```

--------------------------------

### JavaScript Calendar Setup

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/SearchForm_NewsLetter.html

Configures the JavaScript calendar for date input fields. Use this for date selection in forms.

```javascript
Calendar.setup ({ inputField : "search_jscal_field", ifFormat : "{CALENDAR_DATEFORMAT}", showsTime : false, button : "search_jscal_trigger", singleClick : true, step : 1 });
```

```javascript
Calendar.setup ({ inputField : "search_enddate_jscal_field", ifFormat : "{CALENDAR_DATEFORMAT}", showsTime : false, button : "search_enddate_jscal_trigger", singleClick : true, step : 1 });
```

--------------------------------

### Initialize Campaign Wizard Email Settings

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

On document ready, this script triggers change events for inbound and outbound email IDs to initialize settings. It also includes commented-out code for calendar setup.

```javascript
$(document).ready(function(){ $('#inbound_email_id').change(); $('#outbound_email_id').change(); }); /* Calendar.setup ({literal} inputField : "date_start", ifFormat : "{$CALENDAR_DATEFORMAT}", showsTime : false, button : "jscal_trigger", singleClick : true, step : 1 {literal}); */
```

--------------------------------

### Initialize Date Pickers

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Schedulers/EditView.html

Initializes two date picker instances for start and end dates. These are used for setting the scheduling period.

```javascript
Calendar.setup ({ inputField : "jscal_start_date", ifFormat : "{CALENDAR_DATEFORMAT}", showsTime : false, button : "start_date_jscal_trigger", singleClick : true, step : 1 });
Calendar.setup ({ inputField : "jscal_end_date", ifFormat : "{CALENDAR_DATEFORMAT}", showsTime : false, button : "end_date_jscal_trigger", singleClick : true, step : 1 });
```

--------------------------------

### JavaScript Calendar Setup

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/CampaignTrackers/Forms.html

Initializes a JavaScript calendar widget for the 'end_date' input field. Configured for date-only selection and uses a specific date format.

```javascript
Calendar.setup ({ inputField : "end_date", ifFormat : "{CALENDAR_DATEFORMAT}", showsTime : false, button : "end_date_trigger", singleClick : true, step : 1 });
```

--------------------------------

### Calendar Setup and Update

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Sets up the YUI Calendar widget for the date input field. It configures the calendar's appearance, behavior, and links it to the input field and form. It also calls an initial update to round hours and minutes.

```javascript
YAHOO.util.Event.onDOMReady(function() {
 Calendar.setup ({
 onClose : update_date_start,
 inputField : "{$fields.date_start.name}_date",
 form : "{$form_name}",
 ifFormat : "{$CALENDAR_DATEFORMAT}",
 daFormat : "{$CALENDAR_DATEFORMAT}",
 button : "{$fields.date_start.name}_trigger",
 singleClick : true,
 step : 1,
 weekNumbers: false,
 startWeekday: {$CALENDAR_FDOW|default:'0'},
 comboObject: combo_date_start,
 form: '{$form_name}'
 });
 //Call update for first time to round hours and minute values
 combo_date_start.update(false);
});
```

--------------------------------

### Form Pre-validation and Advanced Toggle

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Schedulers/EditView.html

Checks form validity and toggles advanced settings if the start date is empty. It also validates the cron interval syntax.

```javascript
function checkFormPre(formId) {
 validateCronInterval(formId);
 var noError = check_form(formId);
 if(noError) {
 return true;
 } else {
 toggleAdv('true');
 return false;
 }
}
```

--------------------------------

### Get Current Wizard Page

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Determines the current active step in the wizard based on URL parameters and the display status of different step elements. Returns the zero-based index of the current step.

```javascript
var wizardMenuGetCurrentPage = function() { var campaignType = getParameterByName('campaign_type') ? getParameterByName('campaign_type') : (document.getElementById('campaign_type') ? document.getElementById('campaign_type').value : null); var step1Shows = $('#step1').css('display') && $('#step1').css('display') != 'none'; // Campaign Header OR!! Email Templates var step2Shows = $('#step2').css('display') && $('#step2').css('display') != 'none'; // Subscriptions / Target Lists / Budget OR!! Marketing var step3Shows = $('#step3').css('display') && $('#step3').css('display') != 'none'; // Target Lists / Summary var step; if(campaignType == 'NewsLetter' || campaignType == 'Email' || campaignType == null) { if(step1Shows) { if(typeof step3Shows == 'undefined') { step = 1; } else { step = 3; } } else if(step2Shows) { if(typeof step3Shows == 'undefined') { step = 2; } else { step = 4; } } else if(step3Shows) { step = 5; } else { console.log('unknown page - 1'); } } else if(campaignType == 'Telesales') { if(step1Shows) { step = 1; } else if(step2Shows) { step = 2; } else if(step3Shows) { if($('#step3').attr('data') == 'summary-page') { step = 4; } else { step = 3; } } else { console.log('unknown page - 2'); } } else { console.log('unknown page - 3'); } return step-1; };
```

--------------------------------

### Initialize Campaign Wizard UI

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Sets up the initial state of the campaign wizard UI on document ready. This includes managing the visibility of the back button and attaching click handlers for navigation steps. It also handles the initial state and change events for the email template ID to control the save button visibility.

```javascript
$(document).ready(function () {
    if($('#wiz_current_step').val() == 1) {
        $('#wiz_back_button').hide();
    } else {
        $('#wiz_back_button').show();
    }
    $('.nav-steps').unbind();
    $('.nav-steps').click(function(event) {
        var suc = gotoWizardStep($(event.target).closest('li'));
        if(!suc){ event.preventDefault; }
    });
    var toggleEmailTemplateSaveButton = function() {
        if( $('#template_id').val() == '') {
            $('#LBL_SAVE_EMAIL_TEMPLATE_BTN').parent().addClass('hidden'); // hid the button-group-separator as well
            $('#LBL_SAVE_EMAIL_TEMPLATE_BTN').parent().next().addClass('hidden');
        } else {
            $('#LBL_SAVE_EMAIL_TEMPLATE_BTN').parent().removeClass('hidden'); // show the button-group-separator as well
            $('#LBL_SAVE_EMAIL_TEMPLATE_BTN').parent().next().removeClass('hidden');
        }
    };
    $('#template_id').change(toggleEmailTemplateSaveButton);
    toggleEmailTemplateSaveButton();
})
```

--------------------------------

### Publish the Core Library

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/README.md

After building the library, navigate to the `dist/core` directory and use this command to publish it to npm. Ensure you have built the project first.

```bash
npm publish
```

--------------------------------

### Build the Core Project

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/README.md

Execute this command to build the SuiteCRM Core library. The compiled artifacts will be placed in the `dist/` directory.

```bash
ng build core
```

--------------------------------

### Get Selected Person Type

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WebToLeadCreation.html

Retrieves the integer value of the selected person type from a dropdown. Assumes a jQuery selector for '#personTypeSelect'.

```javascript
function getSelectedPersonType() {
  return parseInt($("#personTypeSelect").val());
}
```

--------------------------------

### Generate Component with Project Flag

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/README.md

Use this command to generate a new component and ensure it's added to the 'core' project. Always include the `--project core` flag to avoid adding it to the default project.

```bash
ng generate component component-name --project core
```

--------------------------------

### jQuery for Meridiem Handling

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

This jQuery code hides options for hours greater than 12 in the start time meridiem selector if the date_start_meridiem element exists.

```javascript
$(function(){
 if($('#date_start_meridiem').length) {
 $('#date_start_hours option').each(function(i,e){
 if(parseInt($(e).attr('value'))>12) {
 $(e).hide();
 }
 });
 }
 });
```

--------------------------------

### Squire Editor Initialization with Defaults

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/shell/src/squire-document.html

Initializes the Squire editor with default configurations and custom styles for various elements.

```javascript
var defaultStyle = '';
var fixedWidthStyle = 'border:1px solid #ccc;border-radius:3px;background:#f6f6f6;font-family:menlo,consolas,monospace;font-size:90%;';
var codeStyle = fixedWidthStyle + 'padding:1px 3px;';
var preStyle = fixedWidthStyle + 'margin:7px 0;padding:7px 10px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;';
var defaults = {
  label: 'MAIL_MESSAGE_BODY',
  tabIndex: 9,
  editorConfig: {
    blockAttributes: null,
    tagAttributes: {
      blockquote: {
        type: 'cite',
      },
      li: null,
      pre: {
        style: preStyle,
      },
      code: {
        style: codeStyle,
      },
    },
    classNames: {
      color: 'squire-editor-color',
      fontFamily: 'squire-editor-font',
      fontSize: 'squire-editor-size',
      highlight: 'squire-editor-highlight',
    },
    sanitizeToDOMFragment(html) {
      return html;
    },
  },
  layout: {
    minHeight: 270,
    height: 270,
  },
};
editor = new Squire(document.getElementById('editorContainer'), defaults);
```

--------------------------------

### Initialize Wizard Stage Visibility

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Ensures the wizard stage is visible when the DOM is ready.

```javascript
$(function(){ $('#wiz_stage').show(); });
```

--------------------------------

### Get Array of Items for Form

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WebToLeadCreation.html

Collects values from a list of form items into an array. Handles cases where items might be undefined or empty. Requires jQuery.

```javascript
function getArrayOfItemsForForm(items) {
  var keyValues = [];
  if(items !== undefined && items.length > 0) {
    $.each(items,function(i,v){
      keyValues.push($(v).val());
    });
  }
  return keyValues;
}
```

--------------------------------

### Generate Other Schematics with Project Flag

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/README.md

This command demonstrates generating other types of schematics (directive, pipe, service, etc.) for the 'core' project. Remember to append `--project core`.

```bash
ng generate directive|pipe|service|class|guard|interface|enum|module --project core
```

--------------------------------

### Get Background Image Name

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Extracts the filename of the background image from an element's CSS 'background-image' property. It parses the URL to return just the image name without the extension.

```javascript
var getBGImageName = function(elem) { var bgImage = $(elem).css('background-image').split('/'); bgImage = bgImage[bgImage.length-1].split('.')[0]; return bgImage; };
```

--------------------------------

### Run Unit Tests for Core Project

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/README.md

This command executes the unit tests for the SuiteCRM Core project using Karma. It's essential for verifying the correctness of your code.

```bash
ng test core
```

--------------------------------

### Initialize Reply-To Information

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Sets the initial 'Reply-To' information when the page loads, using a default mailbox value if provided.

```javascript
{if $MAILBOXES_DEAULT} set_from_reply_info({ldelim}value:"{$MAILBOXES_DEAULT}"{rdelim}); {/if}
```

--------------------------------

### Main Wizard Menu Function

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Orchestrates the initialization and updates of the wizard menu by calling cleanup, centering, step setting, width reset, and dot placement functions. It also sets up resize and interval handlers.

```javascript
var wizardMenu = function() { wizardMenuCleanup(); wizardMenuCenter(); wizardMenuSetToCurrentStep(); wizardMenuResetWidth(); wizardMenuPutDotToCurrentPage(); }; $(function(){ wizardMenu(); $(window).resize(function(){ wizardMenu(); }); setInterval(function(){ wizardMenu(); }, 300); });
```

--------------------------------

### Cleanup Wizard Menu Already Finished Steps

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Recursively ensures that all steps in the wizard menu have a clickable link, converting non-link elements into links if necessary. This prepares the menu for cleanup.

```javascript
var wizardMenuCleanupAlreadyFinishedStep = function() { var doAgain = false; $(".wizmenu ul li").each(function(i,e){ if(!$(e).find('a').length) { if($(e).next().find('a').length) { $(e).html('<a href="#">' + $(e).html() + '</a>'); doAgain = true; } } }); if(doAgain) { wizardMenuCleanupAlreadyFinishedStep(); } };
```

--------------------------------

### Reset Field Background on Focus

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Resets the background color of elements with the class 'errorable' to its initial state when they receive focus. This is used to clear visual error indicators when the user starts editing a field.

```javascript
$(function(){
  $('.errorable').focus(function(){
    $(this).css('background-color', 'initial');
  });
});
```

--------------------------------

### Handle Next Step Click in Wizard

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Manages the logic for proceeding to the next step in the wizard, including form validation and saving.

```javascript
function onNextClick() {
    switch(document.getElementById('wiz_current_step').value) {
        case '1':
            var updateChecked = $('input[name="update_exists_template" ]').prop('checked');
            if($('#template_id').val() == '') {
                alert(SUGAR.language.translate('Campaigns', 'LBL_STEP_INFO_EMAIL_TEMPLATE'));
                return false;
            }
            // if(!updateChecked) {
                // validate email template form before save
                if (isValidEmailTemplateFormAndShowErrors()) {
                    onSaveCopyMarketingEmailTemplate(function () {
                        onSaveMarketingEmail(function(){
                            if (hasNewAttachments()) {
                                submitMarketingEmailAttachments(function(){
                                    onNext();
                                    wizardMenuSetStepLink(4);
                                });
                            } else {
                                onNext();
                                wizardMenuSetStepLink(4);
                            }
                        });
                    });
                }
            // } else {
            //     onNext();
            //     wizardMenuSetStepLink(4);
            // }
            break;
        case '2':
            // save/create marketing email first
            onSaveMarketingEmail(function(){
                onNext();
                refreshMarketingSelect();
            });
            break;
        default:
            onNext();
            break;
    }
}
```

--------------------------------

### Date Input Change Handler

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Attaches a change event listener to the date start date input. It uses the `toDate` function to convert the input value to a Date object and clears the input if the conversion results in an invalid date.

```javascript
$(document).ready(function(){
  YAHOO.util.Event.addListener(YAHOO.util.Selector.query('#date_start_date'), "change", function(){
    var $date = toDate(YAHOO.util.Selector.query('#date_start_date')[0].value);
    if($date == 'Invalid Date') {
      $('#date_start_date').val('')
    }
  });
  $('#date_start_date').change(function() {
    var $date = toDate(YAHOO.util.Selector.query('#date_start_date')[0].value);
    if($date == 'Invalid Date') {
      $('#date_start_date').val('')
    }
  })
});
```

--------------------------------

### Populate Fields for Web-to-Lead

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WebToLeadCreation.html

Dynamically populates form fields based on selected person types. Ensure the necessary HTML elements and jQuery are available.

```javascript
populateFields(beanList,getSelectedPersonType(),"#backlog");
```

--------------------------------

### Go to Wizard Step

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Handles navigation to a specific wizard step. It checks if the target step is available (not in the future) and displays an alert if the step is unavailable. Currently, it only supports direct navigation and prevents moving forward.

```javascript
function gotoWizardStep($obj) { var direction = 'direct'; if ($($obj).attr('data-nav-step') > $('.nav-steps.selected').attr('data-nav-step')) { // direction = 'next'; alert(SUGAR.language.translate('Campaigns', 'LBL_STEP_UNAVAILABLE')); return false; } else if (($($obj).attr('data-nav-step') < $('.nav-steps.s
```

--------------------------------

### Include Mozaik Dependencies

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/javascript/mozaik/README.md

Include these CSS and JavaScript files in your HTML to use the Mozaik library. Ensure jQuery and jQuery UI are loaded before Mozaik.

```html
<link rel="stylesheet" href="vendor/components/jqueryui/themes/ui-lightness/jquery-ui.min.css">
<script src='vendor/components/jquery/jquery.min.js'></script>
<script src="vendor/components/jqueryui/jquery-ui.min.js"></script>
<script src='vendor/tinymce/tinymce/tinymce.min.js'></script>
<script src="vendor/gymadarasz/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="vendor/gymadarasz/ace/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<!-- include mozaik -->
<link rel="stylesheet" href="jquery.mozaik.css">
<script src='jquery.mozaik.js'></script>
```

--------------------------------

### Initialize Multi-File Uploader

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/EmailTemplates/EditView.html

Initializes a multi-file uploader if the upload form exists. This is used for handling multiple file attachments.

```javascript
toggle_textarea_elem_values = ["Hide Alt Text", "Edit Alt Text"];
if(document.getElementById('upload_form') != null){
    var multi_selector = new multiFiles(document.getElementById('upload_div'));
    multi_selector.addElement( document.getElementById('my_file'));
}
```

--------------------------------

### Include JavaScript Files for Wizard

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardEmailSetup.html

Includes necessary JavaScript files for the campaign wizard functionality and general DIV handling.

```php
{sugar_getscript file="modules/Campaigns/wizard.js"} {sugar_getscript file="modules/InboundEmail/InboundEmail.js"} {$WIZ_JAVASCRIPT} {$DIV_JAVASCRIPT} {$JAVASCRIPT}
```

--------------------------------

### Create a 3D Bar Chart with Tooltips

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/SuiteGraphs/rgraph/default.html

This snippet shows how to initialize an RGraph Bar chart, configure its data, colors, labels, tooltips, and various visual properties for a 3D appearance. It's useful for displaying categorized data with interactive information on hover.

```javascript
window.onload = function () { var bar = new RGraph.Bar('cvs_bar', [[45,-60],[-65,-30],[40,80],[-59,48]]) .set('colors', [ 'rgba(255, 176, 176, 1)', 'rgba(153, 208, 249,1)' ]) .set('labels', ['Luis', 'Kevin', 'John', 'Gregory']) .set('tooltips', ['Luis','Luis','Kevin','Kevin','John','John','Gregory','Gregory']) .set('tooltips.event', 'onmousemove') .set('ymax', 100) .set('ylabels.count', 4) .set('numyticks', 8) .set('strokestyle', 'rgba(0,0,0,0)') .set('hmargin.grouped', 2) .set('units.pre', '�') .set('title', 'Bar chart with tooltips') .set('title.y', 25) .set('gutter.top', 55) .set('gutter.left', 40) .set('gutter.right', 15) .set('gutter.bottom', 80) .set('xaxispos', 'center') .set('key', ['Results from Monday','Results from Tuesday']) .set('key.position', 'gutter') .set('key.position.y', 30) .set('variant', '3d') .set('axis.color', '#aaa') .draw() };
```

--------------------------------

### Initialize Date/Time Input

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Initializes a Datetimecombo widget for date and time input. It sets up the separator based on user time format and renders the HTML for the time selection. It also includes validation rules for hours, minutes, and meridiem.

```javascript
var combo_date_start = new Datetimecombo("{$fields.date_start.value}", "{$fields.date_start.name}", "{$TIME_FORMAT}", "0", '1', false, true); //Render the remaining widget fields combo_date_start.timeseparator = $('#userTimeFormat').val()[3]; text = combo_date_start.html(''); document.getElementById('{$fields.date_start.name}_time_section').innerHTML = text; //Call eval on the update function to handle updates to calendar picker object eval(combo_date_start.jsscript('')); //bug 47718: this causes too many addToValidates to be called, resulting in the error messages being displayed multiple times // removing it here to mirror the Datetime SugarField, where the validation is not added at this level //addToValidate('{$form_name}',"{$fields.date_start.name}_date",'date',false,"{$fields.date_start.name}"); addToValidateBinaryDependency('{$form_name}',"{$fields.date_start.name}_hours", 'alpha', false, "{$APP.ERR_MISSING_REQUIRED_FIELDS} {$APP.LBL_HOURS}" ,"{$fields.date_start.name}_date"); addToValidateBinaryDependency('{$form_name}', "{$fields.date_start.name}_minutes", 'alpha', false, "{$APP.ERR_MISSING_REQUIRED_FIELDS} {$APP.LBL_MINUTES}" ,"{$fields.date_start.name}_date"); addToValidateBinaryDependency('{$form_name}', "{$fields.date_start.name}_meridiem", 'alpha', false, "{$APP.ERR_MISSING_REQUIRED_FIELDS} {$APP.LBL_MERIDIEM}","{$fields.date_start.name}_date");
```

--------------------------------

### Fill Wizard Menu

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Ensures that every list item in the wizard menu has a corresponding anchor tag (link), prepending one if it doesn't exist. This is a preparatory step for styling or interaction.

```javascript
var wizardMenuFillAll = function() { $(".wizmenu ul li").each(function(i,e){ if(!$(e).find('a').length) { $(e).prepend('<a href="#">&nbsp;</a>'); } }); };
```

--------------------------------

### Implement ColorPicker CSS and JavaScript

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/javascript/mozaik/colorpicker/index.html

Include the necessary CSS and JavaScript files for the ColorPicker plugin in your HTML document.

```html
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>
```

--------------------------------

### Flat Mode ColorPicker Initialization

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/javascript/mozaik/colorpicker/index.html

Initialize the ColorPicker in flat mode, making it appear as an element directly on the page.

```javascript
$('#colorpickerHolder').ColorPicker({flat: true});
```

--------------------------------

### JavaScript for Adding Email Variables

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Initializes the email variable selection interface by populating dropdowns based on the selected module.

```javascript
$(function(){ addVariables(document.wizform.variable_name,document.wizform.variable_module.options[document.wizform.variable_module.selectedIndex].value, 'wizform'); });
```

--------------------------------

### Cleanup Wizard Menu

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Removes empty links and ensures all steps are properly formatted by calling a recursive cleanup function. This function prepares the wizard menu for display.

```javascript
var wizardMenuCleanup = function() { $(".wizmenu ul li a").each(function(i,e){ if(!$(e).html()) { $(e).addClass('removable'); } }); $(".wizmenu ul li a.removable").remove(); wizardMenuCleanupAlreadyFinishedStep(); }
```

--------------------------------

### Navigate Campaign Wizard Step

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Handles the logic for moving between steps in the campaign wizard, including validation, state saving, and URL redirection. Use this function when a user clicks on a navigation step.

```javascript
function gotoWizardStep(obj) {
    var direction = 'forward';
    if ($('.nav-steps.selected').attr('data-nav-step') > $(obj).attr('data-nav-step')) { direction = 'back'; } else { return false; } if(validate_wiz($('.nav-steps.selected').attr('data-nav-step'), direction)) { // passed validation saveWizardState(); if($('.nav-steps.selected').attr('data-nav-step') == '1') { $('#wiz_back_button').hide(); } else { $('#wiz_back_button').show(); } if($(obj).attr('data-nav-url') && $(obj).attr('data-nav-url') != '#') { window.location = $(obj).attr('data-nav-url'); } else if ($('#step'+$(obj).attr('data-nav-step')).length == 0) { // if steps is not loaded alert(SUGAR.language.translate('Campaigns', 'LBL_STEP_UNAVAILABLE')); } else { $('#wiz_current_step').val( $(obj).attr('data-nav-step') ); navigate('direct'); } } else { // failed validation alert(SUGAR.language.translate('Campaigns', 'LBL_PROVIDE_WEB_TO_LEAD_FORM_FIELDS')); console.log("validation failed") return false; } return true;
}
```

--------------------------------

### Jump to Wizard Page Functionality

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Navigates the user to a specific step in the wizard based on URL parameters. Includes logic for handling different campaign types and email template selections.

```javascript
var jumpToPageByURL = function() {
    var jump = getParameterByName('jump');
    var func = getParameterByName('func');
    if(func == 'createEmailMarketing') {
        jump = 1;
    }
    var jumpToPage = function(jump, noValidation) {
        if(typeof noValidation == 'undefined') {
            noValidation = false;
        }
        var i=0;
        while (jump != document.getElementById('wiz_current_step').value && i<100) {
            var currentStep = document.getElementById('wiz_current_step').value;
            if(document.getElementById('wiz_current_step').value > document.getElementById('wiz_total_steps').value) {
                break;
            }
            navigate('next', noValidation, true);
            i++;
            if(document.getElementById('wiz_current_step').value == currentStep) {
                break;
            }
        }
        changeNextBtnLabel();
    };
    if(jump != null) {
        var campaignType = getParameterByName('campaign_type');
        var showWizardMarketing = getParameterByName('show_wizard_marketing');
        if(jump == 1 && func == 'createEmailMarketing') {
            jumpToPage(jump, true);
        } else if(jump == 3 && showWizardMarketing && campaignType != 'Email') {
            jumpToPage(jump, true);
        } else {
            if (jump == 2) {
                var templateId = getParameterByName('template_id');
                onEmailTemplateChange(document.getElementById('template_id'), '{$MOD.LBL_COPY_OF}', templateId, function () {
                    jumpToPage(jump);
                });
            } else {
                jumpToPage(jump);
            }
        }
    } else {
        $('#step1').show();
    }
};
var createEmptyMarketing = function(){
    saveMarketingAndTemplate('createEmailMarketing');
};
$(function(){
    jumpToPageByURL();
    if($('#func').val() == "createEmailMarketing" && parseInt($('.nav-steps.selected').attr('data-nav-step')) == 3) {
        createEmptyMarketing();
    }
});
```

--------------------------------

### Navigate Wizard Steps

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Handles navigation to the next step in the wizard. It calls the `navigate` function and updates the next button label and wizard menu if the current step is the last one.

```javascript
function onNext() {
  navigate('next', false, true);
  if(document.getElementById('wiz_current_step').value == document.getElementById('wiz_total_steps').value) {
    wizardMenuFillAll();
  }
  changeNextBtnLabel();
  saveMarketingAndTemplate('getTemplateValidation');
}
```

--------------------------------

### Initialize Popup Request Data

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/Popup_picker.html

Initializes the popup request data by stringifying the data from the opener window if the request_data field is empty. This is typically done when the popup is first opened.

```javascript
if(window.document.forms['popup_query_form'].request_data.value == "") {
  window.document.forms['popup_query_form'].request_data.value = JSON.stringify(window.opener.get_popup_request_data());
}
```

--------------------------------

### CSS for Template Options List

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Provides basic styling for the template option list, including removing default list styles and adjusting label font weight.

```css
ul.template_option_list {list-style-type: none; padding-left: 0; margin-bottom: 8px;}
ul.template_option_list input {position: relative; top: -6px;}
ul.template_option_list label {font-weight: normal;}
```

--------------------------------

### Set Reply-To Information from Mailbox

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Populates 'from_name', 'from_addr', 'reply_name', and 'reply_addr' fields based on the selected mailbox. It uses stored options for both outbound and inbound email configurations.

```javascript
// cn: bug 12587 - allow setting of Reply-to X from campaigns
var ie_stored_options = {$IEStoredOptions};
var oe_stored_options = {$OEStoredOptions};
function set_from_reply_info(mailbox) {
var fn = document.getElementById('from_name');
var fa = document.getElementById('from_addr');
var rn = document.getElementById('reply_name');
var ra = document.getElementById('reply_addr');
if(mailbox.value != '') {
if(oe_stored_options[mailbox.value]) {
var focusOe = oe_stored_options[mailbox.value];
// from name
if(!fn.value) {
var fromName = focusOe.smtp_from_name ? focusOe.smtp_from_name : ( focusOe.from_name ? focusOe.from_name : ( focusOe.name ? focusOe.name : '' ));
if (fromName && fromName != "") {
fn.value = fromName;
}
}
// from addr
if(!fa.value) {
var fromAddr = focusOe.smtp_from_addr ? focusOe.smtp_from_addr : ( focusOe.from_addr ? focusOe.from_addr : ( focusOe.mail_smtpuser ? focusOe.mail_smtpuser : '' ));
if (fromAddr && fromAddr != "") {
fa.value = fromAddr;
}
}
}
if(ie_stored_options[mailbox.value]) {
var focusIe = ie_stored_options[mailbox.value];
// reply name
if (!rn.value) {
if (focusIe.from_name && focusIe.from_name != "") {
rn.value = focusIe.from_name;
}
}
// reply add
if (!ra.value) {
if(focusIe.from_addr && focusIe.from_addr != "") {
ra.value = focusIe.from_addr;
}
}
}
} else {
fn.value = '';
fa.value = '';
rn.value = '';
ra.value = '';
}
}
```

--------------------------------

### Render Datetime Combo Widget and Calendar

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/MergeRecords/MergeField.html

Renders a datetime combo widget and sets up a calendar picker for a specific field. It handles the initial rendering and subsequent updates for the calendar. Ensure the necessary JavaScript objects and variables are defined before use.

```javascript
var combo_{EDIT_FIELD_NAME} = new Datetimecombo("{EDIT_FIELD_VALUE}", "{EDIT_FIELD_NAME}", "{USER_DATEFORMAT}", '','',''); //Render the remaining widget fields
text = combo_{EDIT_FIELD_NAME}.html('');
document.getElementById('{EDIT_FIELD_NAME}_time_section').innerHTML = text;
//Call eval on the update function to handle updates to calendar picker object
eval(combo_{EDIT_FIELD_NAME}.jsscript(''));

function update_{EDIT_FIELD_NAME}_available() {
    YAHOO.util.Event.onAvailable("{EDIT_FIELD_NAME}_date", this.handleOnAvailable, this);
}

update_{EDIT_FIELD_NAME}_available.prototype.handleOnAvailable = function(me) {
    Calendar.setup ({
        onClose : update_{EDIT_FIELD_NAME},
        inputField : "{EDIT_FIELD_NAME}_date",
        daFormat : "{CALENDAR_DATEFORMAT}",
        ifFormat : "{CALENDAR_DATEFORMAT}",
        button : "{EDIT_FIELD_NAME}_trigger",
        singleClick : true,
        step : 1
    });
    //Call update for first time to round hours and minute values
    combo_{EDIT_FIELD_NAME}.update();
}

var obj_{EDIT_FIELD_NAME} = new update_{EDIT_FIELD_NAME}_available();
```

--------------------------------

### JavaScript for Initializing and Updating UI Elements

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/EmailTemplates/EditViewMain.html

Initializes the focus object for the email body and updates the textarea button. It also calls the portal flag toggle function on load to set the initial state.

```javascript
toggle_text_only(true);
focus_obj = document.EditView.body;
toggle_portal_flag();
update_textarea_button();
```

--------------------------------

### Web to Lead Form Generation JavaScript

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WebToLeadCreation.html

This JavaScript code handles the client-side logic for the Web to Lead Creation form. It includes functions for populating dropdowns, handling button clicks for form generation and field selection, and managing the form's state.

```javascript
$(function(){ var beanList = {BEAN_LIST}; populatePersonTypeDropDown(beanList); $('#btnGenerateForm').on('click',function(){ //Check that the related campaign and assigned to have values var assignedUser = $('#assigned_user_id').val(); var campaignId = $('#campaign_id').val(); var errorFound = false; $('.webToPersonError').text(''); if(assignedUser === '') { $('#assignedToError').text('{APP.LBL_ASSIGNED_TO_REQUIRED}'); errorFound = true; } if(campaignId === '') { $('#relatedCampaignError').text('{APP.LBL_RELATED_CAMPAIGN_REQUIRED}'); errorFound = true; } if(errorFound) { return; } $('#action').val('GenerateWebToLeadForm'); $('#WebToLeadCreation').submit(); }); function populatePersonTypeDropDown(beanList) { var list = ""; $.each(beanList,function(i,v){ list+="<option value='"+i+"'>"+ v.moduleKnownAs+"</option>"; }); $("#personTypeSelect").empty().append(list); } $('#personTypeSelect').on('change',function(){ //RESET THE LIST AND CHANGE TYPE $('.field-list').empty(); populateFields(beanList,getSelectedPersonType(),"#backlog"); }); $('#btnResetAllFields').on('click',function(){ $('.field-list').empty(); populateFields(beanList,getSelectedPersonType(),"#backlog"); }); $('#btnBack').on('click',function(){ $('#fieldChoices').show(); $('#formSettings').hide(); }); function addItemsToForm(items,form,name) { $.each(items,function(i,v){ $("<input/>", { class: 'fieldItems', id: name+i, name: name+'\[\]', type: 'hidden', value: v }).appendTo('#'+form); }); } function addItemToForm(form,name,value) { $("<input/>", { class: 'fieldItems', id: name, name: name, type: 'hidden', value: value }).appendTo('#'+form); } function addTypeOfPersonToForm(type, form) { $("<input/>", { id: 'typeOfPerson', name: 'typeOfPerson', type: 'hidden', value: type }).appendTo('#'+form); } $('#btnNext').on('click',function(){ var requiredItemsNotIncluded =$('#backlog div.required'); if(requiredItemsNotIncluded.length === 0) { //Remove all previously added column items to stop duplicate items (should not happen but worth ensuring) $('#WebToLeadCreation .fieldItems').remove(); var colsFirst = getArrayOfItemsForForm($('#pending input.fieldKey')); var colsSecond = getArrayOfItemsForForm($('#inProgress input.fieldKey')); if(colsFirst.length > 0) addItemsToForm(colsFirst,'WebToLeadCreation','colsFirst'); if(colsSecond.length > 0) addItemsToForm(colsSecond,'WebToLeadCreation','colsSecond'); var index = $("#personTypeSelect option:selected").val(); var bean = beanList\[index\]; var personType = bean.name; addTypeOfPersonToForm(personType, 'WebToLeadCreation'); addItemToForm('WebToLeadCreation','moduleDir',bean.moduleDir); addItemToForm('WebToLeadCreation','moduleName',bean.moduleName); $('#fieldChoices').hide(); $('#formSettings').show(); var personLabel = $("#personTypeSelect option:selected").text(); $('#web_header').val('{APP.LBL_TYPE_OF_PERSON_FOR_FORM}'+personLabel); $('#web_description').val('{APP.LBL_TYPE_OF_PERSON_FOR_FORM_DESC}'+personLabel); } else { var requiredFields = ""; $.each(requiredItemsNotIncluded,function(i,v){ requiredFields += '\n'+v.innerText; }); alert("{MOD.LBL_SELECT_REQUIRED_LEAD_FIELDS}"+requiredFields); } }) $('#btnAddAllFields').on('click',function(){ $('#backlog div.field').appendTo($('#pending')); }); function populateFields(beanList,index,destination){ if(beanList === undefined || index === undefined || beanList\[index\] === undefined ) { alert("Sorry, no person type items found"); return; } var availableFields = ""; var fieldList = beanList\[index\].fields; $.each(fieldList,function(i,v){ var field = '' if(v\[2\] !== undefined) field+='<div class="field ui-sortable-handle required">'; else field+='<div class="field ui-sortable-handle">'; field+= '<div class="field-header">'; field+= '<div class="field-type">'+v\[0\]+'</div>'; field+= '<input type="hidden" class="fieldKey" value="'+v\[1\]+'">'; field+= '</div>'; field+= '</div>'; availableFields+=field; }); $(destination).append(availableFields); var $container = $(".field-container"); var $field = $(".field"); $field.draggable({ addClasses: false, connectToSortable: ".field-container", }); $container.droppable({ accept: ".field" }); $(".ui-droppable").sortable({ placeholder: "ui-state-highlight", helper: 'original', beforeStop: function (event, ui) { newItem = ui.item; }, receive: function (event, ui) { } }).disableSelection().droppable({ over: ".ui-droppable", activeClass: 'highlight', drop: function (event, ui) { $(this).addClass(" 
```

--------------------------------

### Set Wizard Step Link

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Updates the link (href) and optional onclick script for a specific step in the wizard navigation. It adds a link if one doesn't exist or modifies an existing one.

```javascript
var wizardMenuSetStepLink = function(step, link, script) { // if(typeof link == 'undefined') { // link = '#'; // } // if(typeof script == 'undefined') { // var onClick = false; // } // else { // var onClick = ' onclick="' + script + '"'; // } // if($('#nav\_step' + step + ' a').length == 0) { // $('#nav\_step' + step).html('<a href="' + link + '"' + (onClick ? onClick : '') + '>' + $('#nav\_step' + step).html() + '</a>'); // } // else { // $('#nav\_step' + step + ' a').attr('href', link); // if(onClick) { // $('#nav\_step' + step + ' a').attr('onclick', script); // } // } };
```

--------------------------------

### Change Next Button Label

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/WizardMarketing.html

Dynamically changes the label of the 'Next' button based on the current wizard step. If the current step is '2', it sets the label to 'Create Marketing Record'; otherwise, it uses the default 'Next' label.

```javascript
function changeNextBtnLabel() {
  if(document.getElementById('wiz_current_step').value == '2') {
    $('#wiz_next_button').val('{/literal}{$MOD.LBL_CREATE_MARKETING_RECORD}{literal}');
  } else {
    $('#wiz_next_button').val('{/literal}{$APP.LBL_NEXT_BUTTON_LABEL}{literal}');
  }
}
```

--------------------------------

### Basic ColorPicker Invocation

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/include/javascript/mozaik/colorpicker/index.html

Select input elements using jQuery and call the ColorPicker plugin to attach it.

```javascript
$('input').ColorPicker(options);
```

--------------------------------

### Displaying Item Label

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/core/app/core/src/lib/fields/multirelate/templates/edit/multirelate.component.html

Renders the label for an individual item within a list, with a fallback to an empty string if no label is defined.

```html
{{ item.label ?? '' }}
```

--------------------------------

### Set Wizard Menu to Current Step

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/Campaigns/tpls/progressStepsStyle.html

Styles the wizard navigation bar to visually indicate the current step and transitions between steps. It dynamically sets background images for step elements.

```javascript
var wizardMenuSetToCurrentStep = function() { // fill navbar to current step $(".wizmenu ul li").each(function(i,e){ if(i==0 && $(e).find('a').length && $(e).next().find('a').length) { $(e).css('background-image', 'url({$imgdir}left-full.png)'); $(e).next().css('background-image', 'url({$imgdir}center-full-half.png)'); } else if(i > 0 && i < $(".wizmenu ul li").length-2 && $(e).find('a').length && $(e).next().find('a').length) { $(e).css('background-image', 'url({$imgdir}center-full.png)'); $(e).css('background-image', 'url({$imgdir}center-full.png)'); $(e).next().css('background-image', 'url({$imgdir}center-full-half.png)'); } else if(i > 0 && $(e).find('a').length && $(e).next().find('a').length) { $(e).css('background-image', 'url({$imgdir}center-full.png)'); $(e).next().css('background-image', 'url({$imgdir}right-full.png)'); } }); };
```

--------------------------------

### Open Email Template Form

Source: https://github.com/suitecrm/suitecrm-core/blob/hotfix/public/legacy/modules/EmailMarketing/EditView.html

Opens a new window to create a new email template. Sets window size and features.

```javascript
function open_email_template_form() {
  URL="index.php?module=EmailTemplates&action=EditView&campaign_id={CAMPAIGN_ID}";
  URL+="&show_js=1";
  windowName = 'email_template';
  windowFeatures = 'width=800' + ',height=600' + ',resizable=1,scrollbars=1';
  win = window.open(URL, windowName, windowFeatures);
  if(window.focus) {
    // put the focus on the popup if the browser supports the focus() method
    win.focus();
  }
}
```