Demo JsonForms / Comments

Comments

From Wikisphere
(Redirected from Demo JsonForms/Comments)
Jump to navigation Jump to search

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:


Templates:


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


Retrieved from "https://www.wikisphere.org/w/index.php?title=Demo_JsonForms/Comments&oldid=202914"