DEV Community

Adam Mateusz Brożyński
Adam Mateusz Brożyński

Posted on

How to add edit link to wagtail-autocomplete items

#wagtail #django #python

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.

  1. 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)
Enter fullscreen mode Exit fullscreen mode
  1. 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"))) }))))
Enter fullscreen mode Exit fullscreen mode

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")))) }))))
Enter fullscreen mode Exit fullscreen mode
  1. 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).

Top comments (0)