How to make "Copy to clipboard" button/link in django admin for selected field?

Question

I use classic Django Admin panel. I want to add button/link for on of the fields in model.

What is the simplest way to do that?

Answer 1

Let me show you how you can display a button next to a field in Django admin using Javascript.

First of all, you'll need to know the HTML element id of that field. To know the id of an element in Chrom/Firefox: Right click on the input field > Inspect Element.

Let's say I have a field called name in my models, its HTML element id, as assigned by Django admin interface would be id_name

So if I want to display a a button next to it I'd write this JS script:

var $ = django.jQuery;

$(document).ready(function() {
    var myButton = '<button>Copy</button>';
    $(myButton).insertAfter($('#id_name'));
});

Save this file in your project's /static/ folder. I named it show-copy-btn.js.

Then supply this file to your model admin's add/change page using class Media, like this:

class MyModelAdmin(admin.ModelAdmin):
    ...
    class Media:
        js = ('show-copy-btn.js',) 
        # above path is equivalent to /static/show-copy-btn.js
        # if your file in /static/js/ folder, the path above should 
        # be 'js/show-copy-btn.js'

If you open the add/change admin page of your model, you will see a button next to the desired field. Although, the button may look a little ugly, I'm sure you can make it pretty via some CSS magic.

Hope this answer gets you started. After this, you can write the JS code for the actual "Copy to clipboard" feature and pass that code to Django admin just like I showed you above.

NOTE: This answer doesn't show you how to copy text to clipboard. It only shows you how you can display a button next to a field in Django admin using JS.

Answer 2

Today I stumbled upon this problem and xyres answer above. But instead of including a static file (which might lead to other trouble e.g. having two different targets) I though about a method field style and came up with this:

from django.utils.safestring import mark_safe


class AttachmentAdmin(admin.ModelAdmin):

    .
    .

    readonly_fields = (
        'options',
    )

    def options(self, obj):
        btn_id = 'copy-helper'
        return mark_safe(f"""
            <input text="text" id="{btn_id}" value="{obj.media_url}" style="position: absolute; top: -10000px">
            <a href="#" onclick="document.querySelector(\'#{btn_id}\').select(); document.execCommand(\'copy\');" class="addlink">Copy media url to clipboard</a>
            """
        )
    options.short_description = _('Options')

Which leads to:

This way the appeareance can easily be customized and if needed one can extend the javascript to fetch the input(type="text") field value from other html tags via queryselector first.

Hope this might be useful for others.