Hi, I want to add a pop-up help text to some fields in Accounts module
Like
Name : [_________] ?
?- represents a information icon
and on clicking the ? icon it should popup a help text
I'm using sugar version 7.6
Hi, I want to add a pop-up help text to some fields in Accounts module
Like
Name : [_________] ?
?- represents a information icon
and on clicking the ? icon it should popup a help text
I'm using sugar version 7.6
You would simply create a custom field type for any fields that you need to add this to. This is done from the client/base/fields. The link below goes over all of it.
For example, if you wanted this on name field you could extend the file clients/base/fields/name/edit.hbs
Let me know if you have any questions.
Hi, Anoop Antony!
Let's say you need to set help popup on the record view. So you should to customize several files (for Accounts module):
In record.php add property:
'css_class' => 'help-class'
And in the controller record.js add:
// Some code before
events: {
"mouseenter .help-class" : "showHelpTooltip",
"mouseleave .help-class" : "hideHelpTooltip",
},
// Define method on mouse on the field event
showHelpTooltip: function() {
// You can get text for help info from language file or hard code here
// var content = app.lang.get('LBL_SOME_HELP_TEXT', this.module);
var content = 'Help Text Is Here';
this.$el.find(".help-class").popover({title: 'Help', content: content, placement: 'left'});
this.$el.find(".help-class").popover('show');
},
// Define method on mouse leave from field event
hideHelpTooltip: function() {
this.$el.find(".help-class").popover('hide');
},
// Some code afterI hope you'll find it useful.
Any help guys?
Solution
List of files to customize:
So, firtst thing is add to our Name field some option (i.g. tooltip_content) which describe a tooltip. I prefer to add direct language label called TOOLTIP_CONTENT_STR.
custom/modules/Accounts/clients/base/views/record/record.php
1 => array(
'name' => 'name',
'tooltip_content' => 'TOOLTIP_CONTENT_STR'
),Then we could add this language label with your own content to language file custom/Extension/modules/Accounts/Ext/Language/en_us.lang.php:
$mod_strings = array (
// ...
'TOOLTIP_CONTENT_STR' => 'Help Tooltip Text'
);
Next step is add HBS where we'll check tooltip_content param and if it's true we add custom span tag which represent help icon (custom/modules/Accounts/clients/base/views/record/record.hbs):
<div class="headerpane">
...
<span class="record-cell" data-type="{{type}}" data-name="{{name}}">
<span class="table-cell-wrapper">
...
</span>
{{#if this.tooltip_content}}
<span class="cs-tooltip"></span>
{{/if}}
</span>
...
</div>So, if we have span.cs-tooltip let's add a little bit of style to it (custom/themes/custom.less):
.cs-tooltip{
width: 30px;
height: 30px;
// By default span will be visible on Edit Mode
display: none;
background-image: url(<PATH_TO_ICON>);
position: relative;
top: 10px;
}Obviously you can customize style of that span as you wish.
And the last thing is to add controller (custom/modules/Accounts/clients/base/views/record/record.js):
({
extendsFrom: 'AccountsRecordView',
events: {
"mouseenter .cs-tooltip" : "showHelpTooltip",
"mouseleave .cs-tooltip" : "hideHelpTooltip",
},
initialize: function(options) {
this._super('initialize', [options]);
},
toggleEdit: function(isEdit) {
this._super('toggleEdit', [isEdit]);
this.toogleTooltipIcon(isEdit);
},
toogleTooltipIcon: function(isEdit) {
if (isEdit) {
this.$el.find('.cs-tooltip').css("display", "inline-block");
} else {
this.$el.find('.cs-tooltip').css("display", "none");
}
},
showHelpTooltip: function() {
var content = app.lang.get('TOOLTIP_CONTENT_STR', this.module);
this.$el.find(".cs-tooltip").popover({title: 'Help', content: content, placement: 'bottom'});
this.$el.find(".cs-tooltip").popover('show');
},
hideHelpTooltip: function() {
this.$el.find(".cs-tooltip").popover('hide');
},
});
Pay attention: this implementation works only when your record in edit mode. If you don't need it just comment line 15 in record.js and replace display: none; to display: inline-block; in custom.less file.
Finally just click on Repair And Rebuild.
Solution
List of files to customize:
So, firtst thing is add to our Name field some option (i.g. tooltip_content) which describe a tooltip. I prefer to add direct language label called TOOLTIP_CONTENT_STR.
custom/modules/Accounts/clients/base/views/record/record.php
1 => array(
'name' => 'name',
'tooltip_content' => 'TOOLTIP_CONTENT_STR'
),Then we could add this language label with your own content to language file custom/Extension/modules/Accounts/Ext/Language/en_us.lang.php:
$mod_strings = array (
// ...
'TOOLTIP_CONTENT_STR' => 'Help Tooltip Text'
);
Next step is add HBS where we'll check tooltip_content param and if it's true we add custom span tag which represent help icon (custom/modules/Accounts/clients/base/views/record/record.hbs):
<div class="headerpane">
...
<span class="record-cell" data-type="{{type}}" data-name="{{name}}">
<span class="table-cell-wrapper">
...
</span>
{{#if this.tooltip_content}}
<span class="cs-tooltip"></span>
{{/if}}
</span>
...
</div>So, if we have span.cs-tooltip let's add a little bit of style to it (custom/themes/custom.less):
.cs-tooltip{
width: 30px;
height: 30px;
// By default span will be visible on Edit Mode
display: none;
background-image: url(<PATH_TO_ICON>);
position: relative;
top: 10px;
}Obviously you can customize style of that span as you wish.
And the last thing is to add controller (custom/modules/Accounts/clients/base/views/record/record.js):
({
extendsFrom: 'AccountsRecordView',
events: {
"mouseenter .cs-tooltip" : "showHelpTooltip",
"mouseleave .cs-tooltip" : "hideHelpTooltip",
},
initialize: function(options) {
this._super('initialize', [options]);
},
toggleEdit: function(isEdit) {
this._super('toggleEdit', [isEdit]);
this.toogleTooltipIcon(isEdit);
},
toogleTooltipIcon: function(isEdit) {
if (isEdit) {
this.$el.find('.cs-tooltip').css("display", "inline-block");
} else {
this.$el.find('.cs-tooltip').css("display", "none");
}
},
showHelpTooltip: function() {
var content = app.lang.get('TOOLTIP_CONTENT_STR', this.module);
this.$el.find(".cs-tooltip").popover({title: 'Help', content: content, placement: 'bottom'});
this.$el.find(".cs-tooltip").popover('show');
},
hideHelpTooltip: function() {
this.$el.find(".cs-tooltip").popover('hide');
},
});
Pay attention: this implementation works only when your record in edit mode. If you don't need it just comment line 15 in record.js and replace display: none; to display: inline-block; in custom.less file.
Finally just click on Repair And Rebuild.