{"result":{"depiction_url":null,"edges":{"subject":{"objects":[{"created":"2026-09-30T09:11:23Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-30T09:11:23Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-30T09:11:23Z","object_id":{"id":2583,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_user_interface_and_interaction","title":"User interface and interaction","uri":"https:\/\/zotonic.com\/id\/2583"},"seq":3},{"created":"2026-09-30T09:11:23Z","object_id":{"id":2625,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_model","title":"Model","uri":"https:\/\/zotonic.com\/id\/2625"},"seq":4},{"created":"2026-09-30T09:11:23Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":5},{"created":"2026-09-30T09:11:23Z","object_id":{"id":2718,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_cotonic","title":"Cotonic","uri":"https:\/\/zotonic.com\/id\/2718"},"seq":6},{"created":"2026-09-30T09:11:23Z","object_id":{"id":2721,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_dom","title":"Document Object Model","uri":"https:\/\/zotonic.com\/id\/2721"},"seq":7}],"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":2737,"is_a":["text","documentation","reference","cotonic_reference","cotonic_model"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2737"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cotonic_model_ui","page_url":{"en":"https:\/\/zotonic.com\/cotonic\/models\/ui","x-default":"https:\/\/zotonic.com\/cotonic\/models\/ui"},"preview_url":null,"resource":{"version":15,"pivot_location_lat":null,"title":"model\/ui","is_authoritative":true,"body":"<\/a>

model\/ui<\/h3>\n\n

\n The ui model can be used to update the dom by publishing messages on one of the\n model\/ui\/#<\/tt> topics. Elements can be inserted, deleted and updated. If\n elements in the dom-tree are updated, then a message\n model\/ui\/event\/dom-updated\/+key<\/tt> is published. This can be used to\n react to dom-changes when they happen.\n <\/p>\n\n <\/a>

\n insert\/+key<\/strong>\n
\n Insert a new ui snippet named key<\/tt> into the user interface composer.\n Expects a message with the following properties.\n\n

\n
initialData<\/tt><\/dt>\n
The initial data to place in the dom tree.<\/dd>\n\n
inner<\/tt><\/dt>\n
If set to true<\/tt>, the ui composer will update the inner html, when set\n to false<\/tt>, the outer html<\/dd>\n\n
priority<\/tt><\/dt>\n
An element with a high priority will be rendered before elements with a lower\n priority.\n \n <\/dd>\n <\/dl>\n\n <\/p>\n 
\nself.publish("model\/ui\/insert\/root", {\n    initialData: "<div class='loading'>Loading<\/div>",\n    inner: true\n    priority: 100\n}, {retain: true});\n=> When the ui composer receives this message it will add the\n   loading\n            <\/pre>\n\n            <\/a>
\n            update\/+key<\/strong>\n            
\n            Update the contents of ui snippet named key<\/tt> previously registered\n            by an insert<\/tt>. Expects a message with the html snippet as message.\n            <\/p>\n            
\nself.publish("model\/ui\/update\/root",\n    "
<\/div>");\n=> The root element is updated.<\/pre>\n\n            <\/a>
\n            delete\/+key<\/strong>\n            
\n            Delete ui snippet named key<\/tt> from the user interface composer.\n            <\/p>\n            
\nself.publish("model\/ui\/delete\/root");\n=> The root element is removed from the composer, but\n   stays in the DOM tree.<\/pre>\n\n            <\/a>
\n            render<\/strong>\n            
\n            Trigger a render of all registered elements.\n            <\/p>\n            
\nself.publish("model\/ui\/render");<\/pre>\n\n            <\/a>
\n            render\/+key<\/strong>\n            
\n            Trigger a render of the element key<\/tt>\n            <\/p>\n            
\nself.publish("model\/ui\/render.root");<\/pre>\n            \n\n            <\/a>
\n            render-template\/+key<\/strong>\n            
\n            Request rendering a template with parameters. A rendering engine must be\n            available to respond to the render requests. The render result will update\n            key<\/tt> element. Note: The element must first be inserted with\n            cotonic.ui.insert<\/a> or\n            model\/ui\/insert\/+key<\/tt><\/a>.\n            The payload of the render request should be:\n            
\n                
topic<\/tt><\/dt>\n                
The topic on which the render engine is subscribed. Can be a local or a remote topic.\n                The response of the renderer will be updated on key<\/tt><\/dd>\n\n                
data<\/tt><\/dt>\n                
The data which the render engine can use to render the template.<\/dd>\n\n                
dedup<\/tt><\/dt>\n                
Send the render request via a MQTT QoS 1 message. This means that we can\n                get multiple responses. Dedup makes sure the result will be rendered only once.<\/dd>\n            <\/dl>\n            <\/p>\n            
\nself.publish("model\/ui\/render-template\/root",\n             {topic: "bridge\/origin\/model\/template\/get\/render\/hello.tpl",\n              dedup: true,\n              data: {name: "Bob"}\n             });\n==> The render engine listening at bridge\/origin\/model\/template receives\n    a render request. The render result will be placed in element root.<\/pre>\n\n            <\/a>
\n            replace\/+key<\/strong>\n            
\n            Replace an element with id key<\/tt> with a new element or elements. If the\n            new HTML is passed as a string then the new DOM tree can have multiple elements.
\n            The replacement is done once and no further updates are registered.\n            <\/p>\n            
\nself.publish("model\/ui\/replace\/eltid", "Hello and here we are<\/b>");\n            <\/pre>\n\n            <\/a>
\n            event\/recent-activity<\/strong>\n            
\n            A message containing the user's activity status is published regularly\n            on this topic. The message is an object which contains a\n            is_active<\/tt> boolean property which indicates if the has been\n            active over the last period between publishes.\n            <\/p>\n            
\n\/\/ worker example\nself.subscribe("model\/ui\/event\/recent-activity",\n    function(m) {\n        const a = m.payload.is_active?"active":"not active";\n        console.log("The user is: ", a);\n    }\n);\n=> Displays the user's activity status.<\/pre>\n\n            <\/a>
\n            event\/dom-updated\/+key<\/strong>\n            
\n            When the dom-tree is updated a message will be published. The\n            message is fired after the dom-tree is updated.\n            <\/p>\n            
\ncotonic.broker.subscribe("model\/ui\/event\/dom-updated\/message-container",\n    function(m) {\n        const c = document.getElementById("message-container");\n        c.scrollTop = c.scrollHeight\n    }\n);\n=> Scrolls the messages bubble container to the bottom.\n            <\/pre>\n\n            \n\n            <\/a>
\n            event\/+model\/ui-status<\/strong>\n            
\n            Events send to this topic will result in class and data attributes set on\n            the html<\/tt> of the document. The model<\/tt> attribute is used in the\n            data and class attributes. This can be used to signal the state of a model to\n            the document. This can be used to signal the state of cotonic workers or models to\n            other ui libraries like Elm<\/a> or\n            React<\/a>. The payload of the message:\n            
\n                
status<\/tt><\/dt>\n                
Object with model statuses. Will be set as data attributes.<\/dd>\n                
classes<\/tt><\/dt>\n                
List with model statuses. Will be set as classes.<\/dd>\n            <\/dl>\n            <\/p>\n            
\nself.publish("model\/auth\/event\/ui-status",  {status: {"auth": "anonymous"},\n                                             classes: ["anonymous"]});\n==> model.ui adds clas "ui-state-auth-anonymous" and\n    adds data-ui-state-auth-auth="anonymous" to the html element of the document.<\/pre>\n\n            \n\n            <\/a>
\n            event\/new-shadow-root\/+key<\/strong>\n            
\n            Init the topic event listener when new shadow roots are added.\n            
\n                
id<\/tt><\/dt>\n                
Element id<\/dd>\n            <\/dl>\n            <\/p>\n            
\ncotonic.broker.subscribe("model\/ui\/event\/new-shadow-root\/data-list",\n    function(m) {\n         console.log("Init the event listener for", "data-list")\n    }\n);\n=> Init the topic event listener when new shadow roots are added.<\/pre>\n\n            \n            ","slug":"model-ui","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"6610c093ae371abfc26ddb002792786e3fe4094cbbe518b0e6f61218aca02e05","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":2723,"is_a":["meta","category"],"name":"cotonic_model","title":"Cotonic models","uri":"https:\/\/zotonic.com\/id\/cotonic_model"},"doc_source_path":"index.html","publication_start":"2026-09-30T09:11:23Z","page_path":"\/cotonic\/models\/ui","github_url":"https:\/\/github.com\/cotonic\/cotonic\/blob\/master\/index.html","pivot_location_lng":null,"doc_source_kind":"cotonic","name":"doc_cotonic_model_ui","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2026-09-30T09:11:23Z","uri":null,"doc_source_anchor":"model.ui","doc_status":"current","is_dependent":false,"publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"694f9f9fd2e5c3e95c094eedbead6f844e243660","creator_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"modified":"2026-09-30T09:11:24Z","title_slug":"model-ui"},"uri":"https:\/\/zotonic.com\/id\/2737","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/2737"}},"status":"ok"}