Surendra Sharma

Surendra Sharma

Search This Blog

Friday, January 28, 2022

Sitecore JSS : Convert YML to JSON

Till yesterday, I knew that to provide content in Sitecore JSS I need to create YML file.

But today I learn that one can also create JSON file as well

Lets suppose we have following Graphql en.yml file

fields:

  pageTitle: GraphQL | Sitecore JSS

placeholders:

  jss-main:

  - componentName: ContentBlock

    fields:

      heading: Using GraphQL with JSS

      content: |

        <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.

        For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>

  - componentName: GraphQL-Layout

    placeholders:

      jss-graphql-layout:

      - componentName: GraphQL-IntegratedDemo

        fields:

          sample1: Hello integrated GraphQL world!

          sample2:

            href: https://www.sitecore.com

            target: _blank

            text: GraphQL lets you get structured field data too

      - componentName: GraphQL-ConnectedDemo

        fields:

          sample1: Hello connected GraphQL world!

          sample2:

            href: https://www.sitecore.com

            target: _blank

            text: GraphQL lets you get structured field data too

 

I want to convert it to json file which can be easily accopalieshed by visiting https://onlineyamltools.com/convert-yaml-to-json as


I kept this json data in “testymltojson.json” file as 



He is the complete code

{

    "fields": {

        "pageTitle": "GraphQL | Sitecore JSS - YML To JSON"

    },

    "placeholders": {

        "jss-main": [

            {

                "componentName": "ContentBlock",

                "fields": {

                    "heading": "Using GraphQL with JSS - YML To JSON",

                    "content": "<p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.\nFor more information on GraphQL use in JSS, please see <a href=\"https://jss.sitecore.com\" target=\"_blank\" rel=\"noopener noreferrer\">the documentation</a>.</p>\n"

                }

            },

            {

                "componentName": "GraphQL-Layout",

                "placeholders": {

                    "jss-graphql-layout": [

                        {

                            "componentName": "GraphQL-IntegratedDemo",

                            "fields": {

                                "sample1": "Hello integrated GraphQL world!",

                                "sample2": {

                                    "href": "https://www.sitecore.com",

                                    "target": "_blank",

                                    "text": "GraphQL lets you get structured field data too"

                                }

                            }

                        },

                        {

                            "componentName": "GraphQL-ConnectedDemo",

                            "fields": {

                                "sample1": "Hello connected GraphQL world!",

                                "sample2": {

                                    "href": "https://www.sitecore.com",

                                    "target": "_blank",

                                    "text": "GraphQL lets you get structured field data too"

                                }

                            }

                        }

                    ]

                }

            }

        ]

    }

}


So if you deployed it to Sitecore, this json file will create its item as


Short tip but very useful!!!