{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:39Z","object_id":{"id":2961,"is_a":["text","documentation","developerguide"],"name":"developer_template_extensions","title":{"_type":"trans","tr":{"en":"Add a filter or rendering component"}},"uri":"https:\/\/zotonic.com\/id\/2961"},"seq":1}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"references":{"objects":[{"created":"2020-05-30T05:47:52Z","object_id":{"id":1352,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_templates","title":{"_type":"trans","tr":{"en":"Create a page layout"}},"uri":"https:\/\/zotonic.com\/id\/1352"},"seq":1000000},{"created":"2020-05-30T05:47:52Z","object_id":{"id":1353,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_modules","title":{"_type":"trans","tr":{"en":"Create a reusable module"}},"uri":"https:\/\/zotonic.com\/id\/1353"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-10-07T11:13:02Z","object_id":{"id":1384,"is_a":["text","documentation","reference","template_scomp"],"name":"doc_template_scomp_scomp_button","title":"button","uri":"https:\/\/zotonic.com\/id\/1384"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"relation":{"objects":[{"created":"2020-05-30T05:47:52Z","object_id":{"id":1352,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_templates","title":{"_type":"trans","tr":{"en":"Create a page layout"}},"uri":"https:\/\/zotonic.com\/id\/1352"},"seq":1000000},{"created":"2020-05-30T05:47:52Z","object_id":{"id":325,"is_a":["meta","category"],"name":"template_filter","title":"Filters","uri":"https:\/\/test.zotonic.com\/id\/325"},"seq":1000000}],"predicate":{"id":303,"is_a":["meta","predicate"],"name":"relation","title":{"_type":"trans","tr":{"nl":"Relatie","en":"Relation"}},"uri":"http:\/\/purl.org\/dc\/terms\/relation"}},"subject":{"objects":[{"created":"2026-10-07T11:13:39Z","object_id":{"id":2557,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_cookbook_recipe","title":"Cookbook recipe","uri":"https:\/\/zotonic.com\/id\/2557"},"seq":1},{"created":"2026-10-07T11:13:39Z","object_id":{"id":2564,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_backend_developer","title":"Backend developer","uri":"https:\/\/zotonic.com\/id\/2564"},"seq":2},{"created":"2026-10-07T11:13:39Z","object_id":{"id":2621,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template_filter","title":"Template filter","uri":"https:\/\/zotonic.com\/id\/2621"},"seq":3},{"created":"2026-10-07T11:13:39Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":4},{"created":"2026-10-07T11:13:39Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":5}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1572,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1572"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_custom_filter","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1572\/add-a-filter-or-rendering-component","x-default":"https:\/\/zotonic.com\/cookbook\/1572\/add-a-filter-or-rendering-component"},"preview_url":null,"resource":{"body":{"_type":"trans","tr":{"en":"<p>Use a scomp when rendering needs arguments, context, or more substantial server work. Follow an existing scomp&#39;s callback contract and declare caching behavior deliberately.<\/p>\n<p>Place the implementation in the application&#39;s <code>src\/filters<\/code> or <code>src\/scomps<\/code> directory and follow Zotonic naming conventions. Compile and confirm discovery before changing templates to depend on it.<\/p>\n<p>A complete filter example in <code>src\/filters\/filter_garden_label.erl<\/code>:<\/p>\n<pre class=\"notranslate\"><code class=\"notranslate language-erlang\">-module(filter_garden_label).\n-export([garden_label\/2]).\n\n-spec garden_label(Value, Context) -&gt; binary()\n    when Value :: term(), Context :: z:context().\ngarden_label(&lt;&lt;&quot;open&quot;&gt;&gt;, _Context) -&gt; &lt;&lt;&quot;Open to visitors&quot;&gt;&gt;;\ngarden_label(_Value, _Context) -&gt; &lt;&lt;&quot;Check visiting times&quot;&gt;&gt;.\n<\/code><\/pre>\n<p>Compile it and render <code>{{ &quot;open&quot;|garden_label|escape }}<\/code>. Expect “Open to visitors”; a missing value should produce the fallback. These fixed English labels illustrate the callback only: use translation support for real interface labels.<\/p>\n<p>For a scomp, use the current <code>zotonic_scomp<\/code> behaviour and its <code>render\/3<\/code> callback, not the old <code>gen_scomp<\/code> behaviour. Start with the source of <a href=\"\/id\/1384\" class=\"doc-reference doc-reference-scomp\"><code>scomp#button<\/code><\/a> for a maintained example that queues browser actions.<\/p>"}},"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:26Z","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[2961],"subject":[2557,2564,2620,2621,2623]},"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/cookbook\/custom-filter.rst","is_authoritative":true,"is_dependent":false,"is_featured":false,"is_protected":false,"is_published":true,"is_unfindable":false,"language":["en"],"modified":"2026-10-07T20:45:38Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"doc_cookbook_custom_filter","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:18Z","slug":"add-a-filter-or-rendering-component","summary":{"_type":"trans","tr":{"en":"Use a filter for a small transformation of an input value. Keep missing and unexpected values predictable, and escape output at the point where it becomes HTML."}},"title":{"_type":"trans","tr":{"en":"Add a filter or rendering component"}},"title_slug":{"_type":"trans","tr":{"en":"add-a-filter-or-rendering-component"}},"tz":"UTC","uri":null,"version":35,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/1572","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1572"}},"status":"ok"}