Demo JsonForms / Comments

Comments

From Wikisphere
Jump to navigation Jump to search
Commentsobject
commentsarray(1)
    Commentobject
    name
    a name edit
    content
    a content editc
    repliesarray(3)
      Comment 3object
      name
      a1 name
      content
      a1 content
      repliesarray(0)
        Comment 3object
        name
        a2 name
        content
        a2 content b
        repliesarray(2)
          Commentobject
          name
          a3 name
          content
          a3 content
          repliesarray(0)
            Commentobject
            name
            a4 name
            content
            a4 content
            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 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

          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,
    "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

          loading form

          Name: a2 name

          Message: a2 content b

          Template:Comments.comments.Item.replies

          Replies

          Template:Comments.comments.Item

          loading form

          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>"
}

          Template:Comments.comments.Item

          loading form

          Name: a4 name

          Message: a4 content

          Template:Comments.comments.Item.replies

          Replies

          loading form


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


          Params
          {
    "key": "replies",
    "properties": "0, 1",
    "count": 2,
    "childrenCount": 2,
    "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": []
        },
        {
            "name": "a4 name",
            "content": "a4 content",
            "createdAt": "",
            "replies": []
        }
    ],
    "0": "<subitem>",
    "1": "<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": "a4 name",
                "content": "a4 content",
                "createdAt": "",
                "replies": []
            }
        ]
    },
    "name": "a2 name",
    "content": "a2 content b",
    "createdAt": "",
    "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,
    "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": "a4 name",
                    "content": "a4 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 edit",
        "content": "a content editc",
        "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": "a4 name",
                        "content": "a4 content",
                        "createdAt": "",
                        "replies": []
                    }
                ]
            },
            {
                "name": "b1 name",
                "content": "b1 content",
                "createdAt": "",
                "replies": []
            }
        ]
    },
    "name": "a name edit",
    "content": "a content editc",
    "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 edit",
            "content": "a content editc",
            "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": "a4 name",
                            "content": "a4 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 edit",
                "content": "a content editc",
                "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": "a4 name",
                                "content": "a4 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=205732"