Surendra Sharma

Surendra Sharma

Search This Blog

Showing posts with label JSS. Show all posts
Showing posts with label JSS. Show all posts

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!!!


Friday, November 15, 2019

How to get Sitecore multilist items details in GraphQL

I have graphQL query for my JSS app as

{
  search(fieldsEqual: [{name: "_fullpath", value: "/sitecore/content/abc"}]
  , keyword: "") {
    results {
      items {
        item {
          ... on Brand {
            heading {
              value
            }
            questionList {
              value
            }
          }
        }
      }
    }
  }
}

Here "QuestionList" is a list field for which I am getting output with Item ids separated by pipe "|" as

"questionList": {
  "value": "{79BADBCE-3824-4664-B74C-D5D931154E86}|{2D0FCE78-8377-4A1E-B47B-A3BDBB6D8D62}"
}

But instead of this items ids, how to get multilist items details?

For this we must use "targetItems" cluase as

{
  search(fieldsEqual: [{name: "_fullpath", value: "/sitecore/content/abc"}
   ], keyword: "") {
    results {
      items {
        item {
          ... on Brand {
            heading {
              value
            }
            questionList {
              value
              name
              targetItems {
                id
                name
                ... on Question
                {
                  questionstatement {value}
                }
              }
            }
          }
        }
      }
    }
  }
}

As you can observe here we can use strongly type items "Question" inside of "targetItems". Its output is

{
  "data": {
    "search": {
      "results": {
        "items": [
          {
            "item": {
              "heading": {
                "value": "This is Heading"
              },
              "questionList": {
                "value": "{79BADBCE-3824-4664-B74C-D5D931154E86}|{2D0FCE78-8377-4A1E-B47B-A3BDBB6D8D62}",
                "name": "questionList",
                "targetItems": [
                  {
                    "id": "79BADBCE38244664B74CD5D931154E86",
                    "name": "Question 1",
                    "questionstatement": {
                      "value": "Question 1"
                    }
                  },
                  {
                    "id": "2D0FCE7883774A1EB47BA3BDBB6D8D62",
                    "name": "Question 2",
                    "questionstatement": {
                      "value": "Question 2"
                    }
                  }
                ]
              }
            }
          }
        ]
      }
    }
  }
}

I hope this trick helps you to write GraphQL queries in better way for Sitecore JSS app.