{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:35Z","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":1}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"refers":{"objects":[{"created":"2026-10-07T11:13:08Z","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":"2026-10-07T11:13:35Z","object_id":{"id":2922,"is_a":["text","documentation","developerguide"],"name":"developer_naming","title":{"_type":"trans","tr":{"en":"Application and module names"}},"uri":"https:\/\/zotonic.com\/id\/2922"},"seq":1},{"created":"2026-10-07T11:13:35Z","object_id":{"id":2925,"is_a":["text","documentation","developerguide"],"name":"developer_module_discovery","title":{"_type":"trans","tr":{"en":"How Zotonic finds templates, dispatch rules, and assets"}},"uri":"https:\/\/zotonic.com\/id\/2925"},"seq":2},{"created":"2026-10-07T11:13:35Z","object_id":{"id":2946,"is_a":["text","documentation","developerguide"],"name":"developer_template_cache","title":{"_type":"trans","tr":{"en":"Cache a template fragment"}},"uri":"https:\/\/zotonic.com\/id\/2946"},"seq":3}],"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:35Z","object_id":{"id":2554,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_how_to_guide","title":"How-to guide","uri":"https:\/\/zotonic.com\/id\/2554"},"seq":1},{"created":"2026-10-07T11:13:35Z","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:35Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":3},{"created":"2026-10-07T11:13:35Z","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":4},{"created":"2026-10-07T11:13:35Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"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":2961,"is_a":["text","documentation","developerguide"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2961"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"developer_template_extensions","page_url":{"en":"https:\/\/zotonic.com\/docs\/2961\/add-a-filter-or-rendering-component","x-default":"https:\/\/zotonic.com\/docs\/2961\/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":317,"is_a":["meta","category"],"name":"developerguide","title":"Developer guide","uri":"https:\/\/zotonic.com\/id\/developerguide"},"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":"2026-10-07T11:12:56Z","creator_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"doc_editorial_bundle":true,"doc_editorial_edges":{"hasreference":[1384],"relation":[2922,2925,2946],"subject":[2554,2564,2620,2621,2623]},"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:39Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"name":"developer_template_extensions","pivot_geocode":null,"pivot_location_lat":null,"pivot_location_lng":null,"privacy":0,"publication_end":"9999-06-01T00:00:00Z","publication_start":"2026-10-07T11:12:56Z","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":25,"visible_for":0},"uri":"https:\/\/zotonic.com\/id\/2961","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2961"}},"status":"ok"}