Surendra Sharma

Surendra Sharma

Search This Blog

Showing posts with label headless. Show all posts
Showing posts with label headless. 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!!!


Saturday, February 2, 2019

Sitecore Headless architecture in Ravana ways


With version 9.1, Sitecore officially started to support JSS(Java Script Services) which bring a capability of true headless CMS.
 
But headless is still a new concept for many developers and if you questioned them during interview what is headless, many developers just started to feel uncomfortable.

This article may help you to understand headless architecture through Ravana(Wikipedia) way.

In India we have one of the greatest epic called Ramayana.

In short it's an epic about lord Rama, Sita, Ravana etc. This Ravana is very interesting mythological character and help me to understand headless architecture.

In many temples, Ravana showed with all his weapons and with 10 heads as

Ravan
Ravan

Ravana kidnapped Sita, so there was a war between Rama and Ravana. During that war Rama cut his head as

Headless Ravan
Headless Ravan


But Ravana was blessed with boon from Brahma and nobody can kill him in normal way.

Here you can imagine Ravana legs as Sitecore databases, his middle body as Sitecore XP and his all weapons represented as xConnect, Sitecore analytics and services, etc. 

But any living creature can't be survive well without any head. Similarly Sitecore can be headless but your final product or website can't be headless. It must have at least one or more head. It's something like

Depicting Sitecore and Ravan

Ravana had 10 heads which were different in look and shape. Each head was master in one field but ultimately, they all were face of Ravana. 

Similarly there are different front-end technologies with different features and uses. Where front end technologies can be angular, React, Vue.js, knockout, ASP.Net, MVC, Ruby etc. 

In short Ravana body represent Sitecore backend parts while his heads represent front end technologies.

That’s it.

I hope Ravana's character help you to understand Headless architecture. So next time someone ask you about headless explain him through Ravana's way.

Happy headless.