Trying to create a custom note modal that pops open when I click "add a note" on the lead record. Does anyone have any experience with this? I followed a tutorial that someone did for cases, but switched cases with leads and for some reason I can't get the modal to display.
add_note_button.php located at custom/Extension/modules/Leads/Ext/clients/base/views/record(created this folder)
<?php
//Insert our custom button definition into existing Buttons array before the edit button
array_splice($viewdefs['Leads']['base']['view']['record']['buttons'], -2, 0, array(
array(
'name' => 'add_note',
'type' => 'button',
'label' => 'LBL_ADD_NOTE',
'css_class' => 'btn btn-success',//css class name for the button
'events' => array(
// custom Sidecar Event to trigger on click. Event name can be anything you want.
'click' => 'button:add_note:click',
)
),
));record.js located at custom/Extension/modules/Leads/Ext/clients/base/views/record(created this folder)
/**
* @extends View.Views.Base.RecordView
*/
({
extendsFrom:'RecordView',
initialize:function(options){
this._super('initialize',[options]);
this.context.on('button:add_note:click',this._openNoteModal,this);
},
/**Function to open the note create pop-up*/
_openNoteModal: function() {
/**add class content-overflow-visible if client has touch feature*/
if (Modernizr.touch) {
app.$contentEl.addClass('content-overflow-visible');
}
/**check whether the view already exists in the layout.
* If not we will create a new view and will add to the components list of the record layout
* */
var quickCreateView = this.layout.getComponent('quick-create');
if (!quickCreateView) {
/** Prepare the context object for the new quick create view*/
var context = this.context.getChildContext({
module: 'Notes',
forceNew: true,
create: true,
link:'notes', //relationship name
});
context.prepare();
/** Create a new view object */
quickCreateView = app.view.createView({
context:context,
name: 'quick-create',
layout: this.layout,
module: context.module,
});
/** add the new view to the components list of the record layout*/
this.layout._components.push(quickCreateView);
this.layout.$el.append(quickCreateView.$el);
}
/**triggers an event to show the pop up quick create view*/
this.layout.trigger("app:view:quick-create");
},
})quick-create.php located at custom/modules/Notes/clients/base/views/quick-create <- Had to create from base and all subdirectories
<?php
/** Metdata for the add note custom popup view
* The buttons array contains the buttons to be shown in the popup
* The fields array can be modified accordingly to display more number of fields if required
* */
$viewdefs['Notes']['base']['view']['quick-create'] = array(
'buttons' => array(
array(
'name' => 'cancel_button',
'type' => 'button',
'label' => 'LBL_CANCEL_BUTTON_LABEL',
'value' => 'cancel',
'css_class' => 'btn-invisible btn-link',
),
array(
'name' => 'save_button',
'type' => 'button',
'label' => 'LBL_SAVE_BUTTON_LABEL',
'value' => 'save',
'css_class' => 'btn-primary',
),
),
'panels' => array(
array(
'fields' => array(
0 =>
array(
'name' => 'name',
'default' => true,
'enabled' => true,
'width' => 35,
'required' => true //subject is required
),
1 =>
array(
'name' => 'description',
'default' => true,
'enabled' => true,
'width' => 35,
'required' => true, //description is required
'rows' => 5,
),
2 =>
array(
'name' => 'filename',
'default' => true,
'enabled' => true,
'width' => 35,
),
)
)
)
);quick-create.js located at custom/modules/Notes/clients/base/views/quick-create <- Had to create from base and all subdirectories
/**
* @class View.Views.Base.QuickCreateView
* @alias SUGAR.App.view.views.BaseQuickCreateView
* @extends View.Views.Base.BaseeditmodalView
*/
({
extendsFrom:'BaseeditmodalView',
fallbackFieldTemplate: 'edit',
initialize: function(options) {
app.view.View.prototype.initialize.call(this, options);
if (this.layout) {
this.layout.on('app:view:quick-create', function() {
this.render();
this.$('.modal').modal({
backdrop: 'static'
});
this.$('.modal').modal('show');
$('.datepicker').css('z-index','20000');
app.$contentEl.attr('aria-hidden', true);
$('.modal-backdrop').insertAfter($('.modal'));
/**If any validation error occurs, system will throw error and we need to enable the buttons back*/
this.context.get('model').on('error:validation', function() {
this.disableButtons(false);
}, this);
}, this);
}
this.bindDataChange();
},
/**Overriding the base saveButton method*/
saveButton: function() {
var createModel = this.context.get('model');
this.$('[name=save_button]').attr('data-loading-text', app.lang.get('LBL_LOADING'));
this.$('[name=save_button]').button('loading');
/** Disable the buttons during save.*/
this.disableButtons(true);
this.processModel(createModel);
/** saves the related note bean*/
createModel.save(null, {
relate: true,
fieldsToValidate: this.getFields(this.module),
success: _.bind(function() {
this.saveComplete();
}, this),
error: _.bind(function() {
this.disableButtons(false);
}, this)
});
},
/**Overriding the base cancelButton method*/
cancelButton: function() {
this._super('cancelButton');
app.$contentEl.removeAttr('aria-hidden');
this._disposeView();
},
/**Overriding the base saveComplete method*/
saveComplete: function() {
this._super('saveComplete');
app.$contentEl.removeAttr('aria-hidden');
this._disposeView();
},
/**Custom method to dispose the view*/
_disposeView:function(){
/**Find the index of the view in the components list of the layout*/
var index = _.indexOf(this.layout._components,_.findWhere(this.layout._components,{name:'quick-create'}));
if(index > -1){
/** dispose the view so that the evnets, context elements etc created by it will be released*/
this.layout._components[index].dispose();
/**remove the view from the components list**/
this.layout._components.splice(index, 1);
}
},
})quick-create.hbs located at custom/modules/Notes/clients/base/views/quick-create <- Had to create from base and all subdirectories
<div class="modal hide quick-create">
<div class="modal-header">
<a class="close" data-dismiss="modal"><i class="fa fa-times"></i></a>
<h3><i class="fa fa-book"></i> {{str "LBL_CREATE_NOTE" module}}</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" enctype="multipart/form-data" method="POST">
<fieldset>
{{#each meta.panels}}
{{#each fields}}
<div class="row-fluid control-group">
<label class="span3">{{str this.label ../../this.model.module}}</label>
<div class="span9">{{field ../../this model=../../context.attributes.createModel template="edit"}}</div>
</div>
{{/each}}
{{/each}}
</fieldset>
</form>
</div>
<div class="modal-footer">
{{#each meta.buttons}}
{{field ../this model=../createModel}}
{{/each}}
</div>
</div>custom.less located at custom/themes
.quick-create{
border:none;
}
.quick-create .modal-header h3 {
font-size:15px;
font-weight: normal;
}
.quick-create .modal-header{
background: #610319;
color: #FFF;
}
.quick-create .modal-body{
padding: 5px 0 58px 12px;
}
.quick-create .modal-body .row-fluid {
margin-top: 10px;
}
.quick-create label.span3{
font-size: 13px;
color: #797979;
}
.quick-create .fa-book{
color: #FFF;
}This is everything I have added and while the button shows up I am not getting the modal to work. If anyone has any ideas or solutions please let me know!
Thanks
