How to add edit link to wagtail-autocomplete items

Wagtail-autocomplete is a good solution for creating relations between pages. By default you can only search for a page and add or remove relation. Here is a solution to add edit icon that allows to edit related page in new tab.

In views.py we put page edit url to edit variable:

def render_page(page):
    if getattr(page, 'specific', None):
        # For support of non-Page models like Snippets.
        page = page.specific
    if callable(getattr(page, 'autocomplete_label', None)):
        title = page.autocomplete_label()
    else:
        title = page.title
    edit = reverse('wagtailadmin_pages:edit', args=[page.id])
    return dict(pk=page.pk, title=title, edit=edit)

In dist.js we look for this code (prettify first!):

return e.createElement("div", {
                                key: n.pk,
                                className: ee("selection")
                            }, e.createElement("span", {
                                className: ee("selection__label")
                            }, n.title), e.createElement("button", {
                                type: "button",
                                className: ee("selection__button"),
                                onClick: t.handleRemove.bind(t, n)
                            }, e.createElement(k, {
                                className: ee("selection__icon")
                            }), e.createElement("span", {
                                className: ee("sr-only")
                            }, "Remove")))
                        }))))

And we make it look like this:

return e.createElement("div", {
                            key: n.pk,
                            className: ee("selection")
                        }, e.createElement("span", {
                            className: ee("selection__label")
                        }, n.title),

                        e.createElement("div", {
                            className: ee("selection__controls")
                        },

                        // edit icon here
                        e.createElement("a", {
                            href: n.edit,
                            target: '__blank',
                            className: ee("edit__button")},
                            e.createElement("svg", {
                                className: ("icon icon-edit icon--item-action")},
                                e.createElement("use", { href: '#icon-edit'}),
                        )),

                        e.createElement("button", {
                            type: "button",
                            className: ee("selection__button"),
                            onClick: t.handleRemove.bind(t, n)
                        }, e.createElement(k, {
                            className: ee("selection__icon")
                        }), e.createElement("span", {
                            className: ee("sr-only")
                        }, "Remove"))))
                    }))))

Now we need to uninstall wagtail-autocomplete from pip and put our wagtailautocomplete folder with modified files directly to our app folder (where we have home, search etc. so it can be found by Wagtail).

Blog

How to add edit link to wagtail-autocomplete items

Adam Mateusz Brożyński

Join Our Newsletter. No Spam, Only the good stuff.

Related