Has anyone added a copy to clipboard button in Sugar?

Hello Dan Petersen , 

A while back I've explored a working approach specifically for the email address field.

There is already a “Copy to Clipboard” element defined in clients/base/fields/email/email.js.
By leveraging that, I was able to get this working by overriding two hbs files:

I've created the following two files: 

custom/clients/base/fields/email/detail.hbs
custom/clients/base/fields/email/email.hbs

You can review the content here:

{{!--
/*
 * Adds a copy-to-clipboard button next to every email address in detail/record views.
 * path /custom/clients/base/fields/email/detail.hbs
--}}
{{#each value}}
    <div class="control-group email">
        {{#if hasAnchor}}
            <a rel="tooltip"{{#if ../../dir}} dir="{{../../../dir}}"{{/if}}
               title="{{email_address}}{{#notEq flagLabel ''}} ({{flagLabel}}){{/notEq}}" data-bs-placement="bottom"
               class="ellipsis_inline{{#if opt_out}} opt-out{{/if}}" href="javascript:void(0);" data-action="email"
               data-email-address-id="{{email_address_id}}" data-email-to="{{email_address}}"
               data-email-opt-out="{{opt_out}}" track="click:email_address"
            >
                {{#if opt_out}}<i class="sicon sicon-ban"></i>{{/if}}
                {{email_address}}
            </a>
        {{else}}
            {{#if invalid_email}}
                <del rel="tooltip"{{#if ../../../dir}} dir="{{../../../../dir}}"{{/if}}
                     title="{{email_address}} ({{flagLabel}})" data-bs-placement="bottom"
                     class="ellipsis_inline{{#if opt_out}} opt-out{{/if}}">{{email_address}}</del>
            {{else}}
                <span rel="tooltip"{{#if ../../../dir}} dir="{{../../../../dir}}"{{/if}}
                      title="{{email_address}}{{#notEq flagLabel ''}} ({{flagLabel}}){{/notEq}}"
                      data-bs-placement="bottom" class="ellipsis_inline{{#if opt_out}} opt-out{{/if}}">
                    {{email_address}}
                </span>
            {{/if}}
        {{/if}}
        <div class="btn-toolbar prevent-mousedown">
            <div class="btn-group">
                <button type="button" class="btn" data-clipboard="enabled"
                        data-clipboard-text="{{email_address}}"
                        rel="tooltip" data-bs-placement="bottom"
                        title="Copy email address"
                        aria-label="Copy email address"
                >
                    <i class="sicon sicon-copy"></i>
                </button>
                {{#if opt_out}}
                    <button type="button" class="btn" data-clipboard="enabled" data-clipboard-text="{{confirmation_url}}"
                            data-email-address-id="{{email_address_id}}" rel="tooltip"
                            title="{{str 'LBL_COPY_EMAIL_ADDRESS_CONFIRMATION_LINK' ../../module}}"
                            aria-label="{{str 'LBL_COPY_EMAIL_ADDRESS_CONFIRMATION_LINK' ../../module}}"
                    >
                        <i class="sicon sicon-link"></i>
                    </button>
                {{/if}}
            </div>
        </div>
    </div>
{{/each}}

{{!--
/*
 * Adds a copy-to-clipboard button next to every email address in list and other views.
 * path /custom/clients/base/fields/email/email.hbs
--}}
{{#if hasAnchor}}
    {{#if ellipsis}}
        <div class="ellipsis_inline"{{#if dir}} dir="{{dir}}"{{/if}} rel="tooltip"
             title="{{email_address}}{{#notEq flagLabel ''}} ({{flagLabel}}){{/notEq}}" data-bs-placement="bottom">
    {{/if}}
    <a href="javascript:void(0);"{{#if opt_out}} class="opt-out"{{/if}} data-action="email"
       data-email-address-id="{{email_address_id}}" data-email-to="{{email_address}}"
       data-email-opt-out="{{opt_out}}" track="click:email_address">
        {{email_address}}
    </a>
    {{#if ellipsis}}
        </div>
    {{/if}}
{{else}}
    {{#if invalid_email}}
        <del rel="tooltip"{{#if dir}} dir="{{dir}}"{{/if}} title="{{email_address}} ({{flagLabel}})"
             data-bs-placement="bottom" class="{{#if ellipsis}}ellipsis_inline{{/if}}{{#if opt_out}} opt-out{{/if}}">
            {{email_address}}
        </del>
    {{else}}
        <span rel="tooltip"{{#if dir}} dir="{{dir}}"{{/if}}
              title="{{email_address}}{{#notEq flagLabel ''}} ({{flagLabel}}){{/notEq}}" data-bs-placement="bottom"
              class="{{#if ellipsis}}ellipsis_inline{{/if}}{{#if opt_out}} opt-out{{/if}}">
            {{email_address}}
        </span>
    {{~/if~}}
{{/if}}
<button type="button" class="btn btn-link btn-sm prevent-mousedown"
        data-clipboard="enabled"
        data-clipboard-text="{{email_address}}"
        rel="tooltip" data-bs-placement="bottom"
        title="Copy email address"
        aria-label="Copy email address"
>
    <i class="sicon sicon-copy"></i>
</button>

And this is the resulting behaviour:
Fell free to use it as inspiration and use it to adapt it to your needs, 

Cheers, 

André

Hi Andre Serrazina ,

This is exactly what I was looking for so I appreciate the code & screenshot. Is this in version 25? The reason I ask is we recently upgraded to v25 and noticed the default copy email address (right click and copy) function was removed. See screenshot below.

Hi Dan ,

The issue you are encountering is tracked as a bug (95334 - Right Clicking on Email Address no longer shows "Copy Email Address" option). I recommend filing a support case referencing the bug to help Sugar prioritize the importance of this fix. 

Chris

Thank you, Chris! Doing that now.

I will say it's a shame that we keep losing useful features with new releases. We lost a lot of shortcuts in v14 and now this in v25.

Thank you, Chris! Doing that now.

I will say it's a shame that we keep losing useful features with new releases. We lost a lot of shortcuts in v14 and now this in v25.