Demo JsonForms / Comments

Comments

From Wikisphere
Jump to navigation Jump to search
Commentsobject
commentsarray(1)
    Comment 1object
    name
    a name edit
    content
    a content editc
    repliesarray(3)
      Comment 1object
      name
      a1 name
      content
      a1 content
      repliesarray(0)
        Comment 2object
        name
        a2 name
        content
        a2 content
        repliesarray(1)
          Comment 1object
          name
          a3 name
          content
          a3 content b
          repliesarray(0)
          Comment 3object
          name
          b1 name
          content
          b1 content
          repliesarray(0)

        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/delete 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. (alternatively use the parameter display_path=root in the form descriptor for a simpler solution)
        • 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
}}

        Template: Comments

        Template:Comments.comments

        Comments

        Template:Comments.comments.Item

        loading form

        Name: a name edit

        Message: a content editc

        Template:Comments.comments.Item.replies

        Replies

        Template:Comments.comments.Item

        loading form

        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,
    "type": "array",
    "templateName": "Comments.comments.Item.replies",
    "data": []
}
        Params
        {
    "key": 0,
    "properties": "name, content, replies",
    "count": 3,
    "childrenCount": 3,
    "path": "comments.0.replies.0",
    "jsonpath": "properties.comments.items.properties.replies.items",
    "depth": 4,
    "type": "object",
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a1 name",
        "content": "a1 content",
        "replies": []
    },
    "name": "a1 name",
    "content": "a1 content",
    "replies": "<subitem>"
}

        Template:Comments.comments.Item

        loading form

        Name: a2 name

        Message: a2 content

        Template:Comments.comments.Item.replies

        Replies

        Template:Comments.comments.Item

        loading form

        Name: a3 name

        Message: a3 content b

        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,
    "type": "array",
    "templateName": "Comments.comments.Item.replies",
    "data": []
}
        Params
        {
    "key": 0,
    "properties": "name, content, replies",
    "count": 3,
    "childrenCount": 3,
    "path": "comments.0.replies.1.replies.0",
    "jsonpath": "properties.comments.items.properties.replies.items.properties.replies.items",
    "depth": 6,
    "type": "object",
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a3 name",
        "content": "a3 content b",
        "replies": []
    },
    "name": "a3 name",
    "content": "a3 content b",
    "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,
    "type": "array",
    "templateName": "Comments.comments.Item.replies",
    "data": [
        {
            "name": "a3 name",
            "content": "a3 content b",
            "replies": []
        }
    ],
    "0": "<subitem>"
}
        Params
        {
    "key": 1,
    "properties": "name, content, replies",
    "count": 3,
    "childrenCount": 3,
    "path": "comments.0.replies.1",
    "jsonpath": "properties.comments.items.properties.replies.items",
    "depth": 4,
    "type": "object",
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a2 name",
        "content": "a2 content",
        "replies": [
            {
                "name": "a3 name",
                "content": "a3 content b",
                "replies": []
            }
        ]
    },
    "name": "a2 name",
    "content": "a2 content",
    "replies": "<subitem>"
}

        Template:Comments.comments.Item

        loading form

        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,
    "type": "array",
    "templateName": "Comments.comments.Item.replies",
    "data": []
}
        Params
        {
    "key": 2,
    "properties": "name, content, replies",
    "count": 3,
    "childrenCount": 3,
    "path": "comments.0.replies.2",
    "jsonpath": "properties.comments.items.properties.replies.items",
    "depth": 4,
    "type": "object",
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "b1 name",
        "content": "b1 content",
        "replies": []
    },
    "name": "b1 name",
    "content": "b1 content",
    "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,
    "type": "array",
    "templateName": "Comments.comments.Item.replies",
    "data": [
        {
            "name": "a1 name",
            "content": "a1 content",
            "replies": []
        },
        {
            "name": "a2 name",
            "content": "a2 content",
            "replies": [
                {
                    "name": "a3 name",
                    "content": "a3 content b",
                    "replies": []
                }
            ]
        },
        {
            "name": "b1 name",
            "content": "b1 content",
            "replies": []
        }
    ],
    "0": "<subitem>",
    "1": "<subitem>",
    "2": "<subitem>"
}
        Params
        {
    "key": 0,
    "properties": "name, content, replies",
    "count": 3,
    "childrenCount": 3,
    "path": "comments.0",
    "jsonpath": "properties.comments.items",
    "depth": 2,
    "type": "object",
    "templateName": "Template:Comments.comments.Item",
    "data": {
        "name": "a name edit",
        "content": "a content editc",
        "replies": [
            {
                "name": "a1 name",
                "content": "a1 content",
                "replies": []
            },
            {
                "name": "a2 name",
                "content": "a2 content",
                "replies": [
                    {
                        "name": "a3 name",
                        "content": "a3 content b",
                        "replies": []
                    }
                ]
            },
            {
                "name": "b1 name",
                "content": "b1 content",
                "replies": []
            }
        ]
    },
    "name": "a name edit",
    "content": "a content editc",
    "replies": "<subitem>"
}


        loading form
        Params
        {
    "key": "comments",
    "properties": "0",
    "count": 1,
    "childrenCount": 1,
    "path": "comments",
    "jsonpath": "properties.comments",
    "depth": 1,
    "type": "array",
    "templateName": "Template:Comments.comments",
    "data": [
        {
            "name": "a name edit",
            "content": "a content editc",
            "replies": [
                {
                    "name": "a1 name",
                    "content": "a1 content",
                    "replies": []
                },
                {
                    "name": "a2 name",
                    "content": "a2 content",
                    "replies": [
                        {
                            "name": "a3 name",
                            "content": "a3 content b",
                            "replies": []
                        }
                    ]
                },
                {
                    "name": "b1 name",
                    "content": "b1 content",
                    "replies": []
                }
            ]
        }
    ],
    "0": "<subitem>"
}
        Params
        {
    "key": "",
    "properties": "comments",
    "count": 1,
    "childrenCount": 1,
    "path": "",
    "jsonpath": null,
    "depth": 0,
    "type": "object",
    "templateName": "Template:Comments",
    "data": {
        "comments": [
            {
                "name": "a name edit",
                "content": "a content editc",
                "replies": [
                    {
                        "name": "a1 name",
                        "content": "a1 content",
                        "replies": []
                    },
                    {
                        "name": "a2 name",
                        "content": "a2 content",
                        "replies": [
                            {
                                "name": "a3 name",
                                "content": "a3 content b",
                                "replies": []
                            }
                        ]
                    },
                    {
                        "name": "b1 name",
                        "content": "b1 content",
                        "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://wikisphere.org/w/index.php?title=Demo_JsonForms/Comments&oldid=206260"