Thread Details
  • State Verified Answer
  • Replies 10 replies
  • Subscribers 367 subscribers
  • Views 3873 views
  • Users 0 members are here
Forum Actions

How can I add a popup help text near a field in Accounts module in SugarVersion 7.6

Anoop Antony

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

Parents
  • 0

    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

    http://support.sugarcrm.com/Documentation/Sugar_Developer/Sugar_Developer_Guide_7.5/UI_Model/Fields/Examples/Creating_Cu… 

    Let me know if you have any questions.

  • 0 in reply to Kenneth Brill

    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):

    • record.php;
    • record.js.

    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 after

    I hope you'll find it useful.

Reply Children
  • 0 in reply to Anoop Antony

    Anoop Antony, hi!
    I have solution for you, but it's complicated to discuss here. Maybe we can email?

  • 0 in reply to Maksim Nesterenko

    Hi @Maksim Nesterenko

    Thank@ you for the reply.

    Sure. We can email. My email ID is anup347@gmail.com

    Thanks

    Anoop

  • 0 in reply to Anoop Antony

    Solution

    List of files to customize:

    • custom/modules/Accounts/clients/base/views/record/record.php;
    • custom/modules/Accounts/clients/base/views/record/record.hbs;
    • custom/modules/Accounts/clients/base/views/record/record.js;
    • custom/Extension/modules/Accounts/Ext/Language/en_us.lang.php;
    • custom/themes/custom.less.

    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.