{"result":{"depiction_url":null,"edges":{"references":{"objects":[{"created":"2020-05-30T05:47:36Z","object_id":{"id":1594,"is_a":["text","documentation","cookbook"],"name":"doc_cookbook_admin_custom_layout","title":"Customizing the layout of the admin edit page","uri":"https:\/\/zotonic.com\/id\/1594"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}}},"id":1593,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1593"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_admin_a_custom_widget","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1593\/creating-a-custom-widget-on-the-edit-page","x-default":"https:\/\/zotonic.com\/cookbook\/1593\/creating-a-custom-widget-on-the-edit-page"},"preview_url":null,"resource":{"body":"
\n \n
\n\n
\n

Why<\/h2>\n

For an imaginary webshop edit page, we want to add 2 more data fields: the affiliate URL and a note about free shipping.<\/p>\n

\n

Assumptions<\/h3>\n

Readers are expected to have experience with Zotonic templates.\nFor reference, look at the Zotonic admin template directory apps\/zotonic_mod_admin\/priv\/templates\/<\/span><\/code>.<\/p>\n<\/div>\n<\/div>\n

\n

Custom widget<\/h2>\n

Content widgets are created by creating a file _admin_edit_content.my_cat.tpl<\/span><\/code>, where my_cat<\/span><\/code> is the category name - webshop<\/span><\/code> in our case.<\/p>\n

Create a file _admin_edit_content.webshop.tpl<\/span><\/code>:<\/p>\n

<\/span>{%<\/span> extends<\/span> "admin_edit_widget_std.tpl"<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
Extending will also give us a couple of default properties like id<\/span><\/code> and is_editable<\/span><\/code>.<\/p>\n
We can also override admin_edit_widget_i18n.tpl<\/span><\/code> if fields need to get translated.<\/p>\n
Add these block definitions:<\/p>\n
<\/span>{%<\/span> block<\/span> widget_title<\/span> %}<\/span><\/span>\n    {_ Webshop Properties _}<\/span>\n{%<\/span> endblock<\/span> %}<\/span><\/span>\n\n{%<\/span> block<\/span> widget_show_minimized<\/span> %}<\/span>false<\/span>{%<\/span> endblock<\/span> %}<\/span><\/span>\n{%<\/span> block<\/span> widget_id<\/span> %}<\/span>edit-webshop-properties<\/span>{%<\/span> endblock<\/span> %}<\/span><\/span>\n\n{%<\/span> block<\/span> widget_content<\/span> %}<\/span><\/span>\n    <fieldset class="form-horizontal"><\/span>\n        <div class="form-group row"><\/span>\n            <label class="control-label col-md-3">{_ Affiliate URL _}<\/label><\/span>\n            <div class="col-md-9"><\/span>\n                <input type="text"<\/span>\n                    name="affiliate_url"<\/span>\n                    class="form-control"<\/span>\n                    value="<\/span>{{<\/span> id.affiliate_url<\/span> }}<\/span>"<\/span>\n                    <\/span>{%<\/span> if<\/span> not<\/span> is_editable<\/span> %}<\/span>disabled="disabled"<\/span>{%<\/span> endif<\/span> %}<\/span><\/span>\n                \/><\/span>\n            <\/div><\/span>\n        <\/div><\/span>\n        <div class="form-group row"><\/span>\n            <label class="control-label col-md-3">{_ Free shipping note _}<\/label><\/span>\n            <div class="col-md-9"><\/span>\n                <input type="text"<\/span>\n                    name="free_shipping_note"<\/span>\n                    class="form-control"<\/span>\n                    value="<\/span>{{<\/span> id.free_shipping_note<\/span> }}<\/span>"<\/span>\n                    <\/span>{%<\/span> if<\/span> not<\/span> is_editable<\/span> %}<\/span>disabled="disabled"<\/span>{%<\/span> endif<\/span> %}<\/span><\/span>\n                \/><\/span>\n            <\/div><\/span>\n        <\/div><\/span>\n    <\/fieldset><\/span>\n{%<\/span> endblock<\/span> %}<\/span><\/span>\n<\/pre><\/div>\n<\/div>\n
When loading a webshop edit page, the widget should now appear below the Basics block.<\/p>\n
To customize the edit page further, see Customizing the layout of the admin edit page<\/span><\/a>.<\/p>\n<\/div>\n
\n
Word of caution<\/h2>\n
Admin templates will evolve over time. Custom changes you make now may not work after an update. Use these guidelines at your own risk.<\/p>\n<\/div>\n<\/div>\n\n\n           <\/div>","category_id":{"id":318,"is_a":["meta","category"],"name":"cookbook","title":{"_type":"trans","tr":{"en":"Cookbook"}},"uri":"https:\/\/test.zotonic.com\/id\/318"},"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"created":"2020-05-30T05:47:27Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/cookbook\/admin-a-custom-widget.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2022-02-15T10:01:35Z","modifier_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"name":"doc_cookbook_admin_a_custom_widget","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2022-02-15T10:01:35Z","slug":"creating-a-custom-widget-on-the-edit-page","title":"Creating a custom widget on the edit page","title_slug":"creating-a-custom-widget-on-the-edit-page","tz":"UTC","uri":null,"version":18,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1593","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1593"}},"status":"ok"}