Comments

This page demonstrates the following features:

• compounded schemas: the JsonSchema:Comment is a reference within JsonSchema:Comments
• use of nested template using children (e.g. Template:Comments )
• edit_schema and edit_path parameters to add/edit items at the current level of the tree. Items are added appending a dot to the edit_path. (see Template:Comments.comments or Template:Comments.comments.Item.replies)
• use of parameter depth to add margin to the content (see Template:Comments.comments.Item.replies)
• use of property x-render-template to specify a fixed template name for the related subschema. This is necessary for nested items otherwise the processor would require a template for each level (see JsonSchema:Comment)
• use of x-hidden in the replies sub-schema of the Comment schema with a dependency schema in order to conditionally hide the replies array depending on the root schema. This allows the base schema used in the form below to edit all data, while the popup forms to keep the replies array hidden.
• use of nested parameter popup_button_config.icon=add (dot separated) to override the popup button's configuration (see Template:Comments.comments.Item.replies and JsonSchema:Core/CreatePageForm for the reference schema)
• use of option x-layout-config.resizeable in the Comments schema displaying the paged layout in a fixed-heigth container with resizeable navigation panel (useful when the schema contains a significant number of nested items)

Schemas:

• JsonSchema:Comments
• JsonSchema:Comment

Templates:

• Template:Comments
• Template:Comments.comments
• Template:Comments.comments.Item
• Template:Comments.comments.Item.replies

Parser function:

{{#jsonformsrender:{{FULLPAGENAME}}  
|slot=jsonforms-data
|print_scalar=true
}} 

Template: Comments

Template:Comments.comments

Comments

Template:Comments.comments.Item

Name: a name

Message: a content

Template:Comments.comments.Item.replies

Replies

Template:Comments.comments.Item

Name: a1 name

Message: a1 content

Template:Comments.comments.Item.replies

Replies

loading form

Params

{
    "key": "replies",
    "properties": "",
    "count": 0,
    "childrenCount": 0,
    "path": "comments.0.replies.0.replies",
    "jsonpath": "properties.comments.items.properties.replies.items.properties.replies",
    "depth": 5,
    "templateName": "Comments.comments.Item.replies",
    "data": []
}

Params

{
    "key": 0,
    "properties": "name, content, createdAt, replies",
    "count": 4,
    "childrenCount": 4,
    "path": "comments.0.replies.0",
    "jsonpath": "properties.comments.items.properties.replies.items",
    "depth": 4,
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a1 name",
        "content": "a1 content",
        "createdAt": "",
        "replies": []
    },
    "name": "a1 name",
    "content": "a1 content",
    "createdAt": "",
    "replies": "<subitem>"
}

Template:Comments.comments.Item

Name: a2 name

Message: a2 content b

Template:Comments.comments.Item.replies

Replies

Template:Comments.comments.Item

Name: a3 name

Message: a3 content

Template:Comments.comments.Item.replies

Replies

loading form

Params

{
    "key": "replies",
    "properties": "",
    "count": 0,
    "childrenCount": 0,
    "path": "comments.0.replies.1.replies.0.replies",
    "jsonpath": "properties.comments.items.properties.replies.items.properties.replies.items.properties.replies",
    "depth": 7,
    "templateName": "Comments.comments.Item.replies",
    "data": []
}

Params

{
    "key": 0,
    "properties": "name, content, createdAt, replies",
    "count": 4,
    "childrenCount": 4,
    "path": "comments.0.replies.1.replies.0",
    "jsonpath": "properties.comments.items.properties.replies.items.properties.replies.items",
    "depth": 6,
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a3 name",
        "content": "a3 content",
        "createdAt": "",
        "replies": []
    },
    "name": "a3 name",
    "content": "a3 content",
    "createdAt": "",
    "replies": "<subitem>"
}

loading form

Params

{
    "key": "replies",
    "properties": "0",
    "count": 1,
    "childrenCount": 1,
    "path": "comments.0.replies.1.replies",
    "jsonpath": "properties.comments.items.properties.replies.items.properties.replies",
    "depth": 5,
    "templateName": "Comments.comments.Item.replies",
    "data": [
        {
            "name": "a3 name",
            "content": "a3 content",
            "createdAt": "",
            "replies": []
        }
    ],
    "0": "<subitem>"
}

Params

{
    "key": 1,
    "properties": "name, content, createdAt, replies",
    "count": 4,
    "childrenCount": 4,
    "path": "comments.0.replies.1",
    "jsonpath": "properties.comments.items.properties.replies.items",
    "depth": 4,
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a2 name",
        "content": "a2 content b",
        "createdAt": "",
        "replies": [
            {
                "name": "a3 name",
                "content": "a3 content",
                "createdAt": "",
                "replies": []
            }
        ]
    },
    "name": "a2 name",
    "content": "a2 content b",
    "createdAt": "",
    "replies": "<subitem>"
}

Template:Comments.comments.Item

Name: b1 name

Message: b1 content

Template:Comments.comments.Item.replies

Replies

loading form

Params

{
    "key": "replies",
    "properties": "",
    "count": 0,
    "childrenCount": 0,
    "path": "comments.0.replies.2.replies",
    "jsonpath": "properties.comments.items.properties.replies.items.properties.replies",
    "depth": 5,
    "templateName": "Comments.comments.Item.replies",
    "data": []
}

Params

{
    "key": 2,
    "properties": "name, content, createdAt, replies",
    "count": 4,
    "childrenCount": 4,
    "path": "comments.0.replies.2",
    "jsonpath": "properties.comments.items.properties.replies.items",
    "depth": 4,
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "b1 name",
        "content": "b1 content",
        "createdAt": "",
        "replies": []
    },
    "name": "b1 name",
    "content": "b1 content",
    "createdAt": "",
    "replies": "<subitem>"
}

loading form

Params

{
    "key": "replies",
    "properties": "0, 1, 2",
    "count": 3,
    "childrenCount": 3,
    "path": "comments.0.replies",
    "jsonpath": "properties.comments.items.properties.replies",
    "depth": 3,
    "templateName": "Comments.comments.Item.replies",
    "data": [
        {
            "name": "a1 name",
            "content": "a1 content",
            "createdAt": "",
            "replies": []
        },
        {
            "name": "a2 name",
            "content": "a2 content b",
            "createdAt": "",
            "replies": [
                {
                    "name": "a3 name",
                    "content": "a3 content",
                    "createdAt": "",
                    "replies": []
                }
            ]
        },
        {
            "name": "b1 name",
            "content": "b1 content",
            "createdAt": "",
            "replies": []
        }
    ],
    "0": "<subitem>",
    "1": "<subitem>",
    "2": "<subitem>"
}

Params

{
    "key": 0,
    "properties": "name, content, createdAt, replies",
    "count": 4,
    "childrenCount": 4,
    "path": "comments.0",
    "jsonpath": "properties.comments.items",
    "depth": 2,
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a name",
        "content": "a content",
        "createdAt": "",
        "replies": [
            {
                "name": "a1 name",
                "content": "a1 content",
                "createdAt": "",
                "replies": []
            },
            {
                "name": "a2 name",
                "content": "a2 content b",
                "createdAt": "",
                "replies": [
                    {
                        "name": "a3 name",
                        "content": "a3 content",
                        "createdAt": "",
                        "replies": []
                    }
                ]
            },
            {
                "name": "b1 name",
                "content": "b1 content",
                "createdAt": "",
                "replies": []
            }
        ]
    },
    "name": "a name",
    "content": "a content",
    "createdAt": "",
    "replies": "<subitem>"
}

loading form

Params

{
    "key": "comments",
    "properties": "0",
    "count": 1,
    "childrenCount": 1,
    "path": "comments",
    "jsonpath": "properties.comments",
    "depth": 1,
    "templateName": "Template:Comments.comments",
    "data": [
        {
            "name": "a name",
            "content": "a content",
            "createdAt": "",
            "replies": [
                {
                    "name": "a1 name",
                    "content": "a1 content",
                    "createdAt": "",
                    "replies": []
                },
                {
                    "name": "a2 name",
                    "content": "a2 content b",
                    "createdAt": "",
                    "replies": [
                        {
                            "name": "a3 name",
                            "content": "a3 content",
                            "createdAt": "",
                            "replies": []
                        }
                    ]
                },
                {
                    "name": "b1 name",
                    "content": "b1 content",
                    "createdAt": "",
                    "replies": []
                }
            ]
        }
    ],
    "0": "<subitem>"
}

Params

{
    "key": "",
    "properties": "comments",
    "count": 1,
    "childrenCount": 1,
    "path": "",
    "jsonpath": null,
    "depth": 0,
    "templateName": "Template:Comments",
    "data": {
        "comments": [
            {
                "name": "a name",
                "content": "a content",
                "createdAt": "",
                "replies": [
                    {
                        "name": "a1 name",
                        "content": "a1 content",
                        "createdAt": "",
                        "replies": []
                    },
                    {
                        "name": "a2 name",
                        "content": "a2 content b",
                        "createdAt": "",
                        "replies": [
                            {
                                "name": "a3 name",
                                "content": "a3 content",
                                "createdAt": "",
                                "replies": []
                            }
                        ]
                    },
                    {
                        "name": "b1 name",
                        "content": "b1 content",
                        "createdAt": "",
                        "replies": []
                    }
                ]
            }
        ]
    },
    "comments": "<subitem>"
}

The following form is rendered with this parser function:

{{#jsonforms:Default
|schema=Comments
|view=inline
|title=comments
|edit={{FULLPAGENAME}}
|inline_css=width:800px
}}

(it's not necessary for the purpose of this demo, and the article's data can usually be edited using the action "Edit schema")

loading form

See also

• Demo JsonForms
• Comments
• ConditionFlow
• Captcha
• Contact Form
• Survey
• Text editors
• SMW Ask query builder
• Upload
• Wikispeech
• Interactive demos
• Interactive JSON-Schema-Test-Suite
• Form Builder (requires permissions)
• Schema Builder (requires permissions)
• Docs: https://www.mediawiki.org/wiki/Extension:JsonForms