Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Ben Palmer 180 posts 866 karma points c-trib
    19 days ago
    Ben Palmer
    0

    Adding block grid content programatically

    Hi,

    I'm attempting to create some Block Grid content for a node with the property of pageBody.

    I've got this working by using the Content Service and it's working nicely for the most part.

    I have a structure that looks like this:

    • Row
      • Column
        • Editor
      • Column
        • Editor

    The editors in this case are a custom doc type used to build a carousel.

    To create the structure and content I'm creating a JSON object which follows the Block Grid content structure and it's all working nicely until it comes to creating the block list items which represent each slide.

    This is the JSON that I'm using to create the block grid:

    {
      "layout": {
        "Umbraco.BlockGrid": [
          {
            "contentUdi": "umb://element/9b607641d0794014bd4624633bdf0bc1",
            "settingsUdi": "umb://element/94e04102756f469c820a596d6ec32ccd",
            "areas": [
              {
                "key": "6c8edc61-b52f-375b-b805-91746c66ce1c",
                "items": [
                  {
                    "contentUdi": "umb://element/34e47a1023404389bdfdc437f3e46038",
                    "columnSpan": 0,
                    "rowSpan": 0,
                    "areas": [
                      {
                        "key": "469abcec-0c05-3e54-b0d5-6475308649d1",
                        "items": [
                          {
                            "contentUdi": "umb://element/9f80b0d085e84fcdaff056826a61c6fe",
                            "columnSpan": 6,
                            "rowSpan": 1,
                            "areas": [],
                            "settingsUdi": "umb://element/cee1cdd9cf9a4220851ca14f003f49a7"
                          }
                        ]
                      },
                      {
                        "key": "1dcb2bbb-d383-37a1-90fc-d5083d16778d",
                        "items": [
                          {
                            "contentUdi": "umb://element/94e844d9e67b482fbe5bc6a98f43fc86",
                            "columnSpan": 6,
                            "rowSpan": 1,
                            "areas": [],
                            "settingsUdi": "umb://element/ee9c940313e2457c9058d3bb62cc6284"
                          }
                        ]
                      }
                    ],
                    "settingsUdi": null
                  }
                ]
              }
            ]
          }
        ]
      },
      "contentData": [
        {
          "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
          "udi": "umb://element/9f80b0d085e84fcdaff056826a61c6fe",
          "carouselSlides": {
            "layout": {
              "Umbraco.BlockGrid": [
                {
                  "contentUdi": "umb://element/23851b764ede47cf84b536bd9fdc1c96"
                }
              ]
            },
            "contentData": [
              {
                "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
                "udi": "umb://element/23851b764ede47cf84b536bd9fdc1c96",
                "carouselHeading": "Test",
                "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
              }
            ],
            "settingsData": []
          }
        },
        {
          "contentTypeKey": "65b260e3-2060-3376-9182-277a3566c721",
          "udi": "umb://element/77ebac535c9849f78b9d4f54fa058c61"
        },
        {
          "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
          "udi": "umb://element/94e844d9e67b482fbe5bc6a98f43fc86",
          "carouselSlides": {
            "layout": {
              "Umbraco.BlockGrid": [
                {
                  "contentUdi": "umb://element/66244dfd6c7a40b0a2a634495ff0e754"
                }
              ]
            },
            "contentData": [
              {
                "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
                "udi": "umb://element/66244dfd6c7a40b0a2a634495ff0e754",
                "carouselHeading": "Test",
                "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
              }
            ],
            "settingsData": []
          }
        }
      ],
      "settingsData": []
    }
    

    This creates the rows, the columns, and the carousel but the carouselSlides property is empty.

    For comparison, an example of the slides I'm trying to create look like this:

    {
      "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
      "udi": "umb://element/9f80b0d085e84fcdaff056826a61c6fe",
      "carouselSlides": {
        "layout": {
          "Umbraco.BlockGrid": [
            {
              "contentUdi": "umb://element/23851b764ede47cf84b536bd9fdc1c96"
            }
          ]
        },
        "contentData": [
          {
            "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
            "udi": "umb://element/23851b764ede47cf84b536bd9fdc1c96",
            "carouselHeading": "Test",
            "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
          }
        ],
        "settingsData": []
      }
    }
    

    If I create the content manually and get the data back, it comes back like this:

    {
      "contentTypeKey": "e09e94a3-3697-42c6-9a4d-eb8631e35f05",
      "udi": "umb://element/8d04bbe17cc84a6f8ec024a2cdf6e521",
      "displayControls": 0,
      "autoPlay": 1,
      "carouselSlides": {
        "layout": {
          "Umbraco.BlockList": [
            {
              "contentUdi": "umb://element/ccc99d993bfc4faea384eb03becb6b78"
            }
          ]
        },
        "contentData": [
          {
            "contentTypeKey": "0bb6d398-44cd-4699-81ee-1ee8fb2362a8",
            "udi": "umb://element/ccc99d993bfc4faea384eb03becb6b78",
            "carouselHeading": "test",
            "carouselImage": "umb://media/515526e502d64d33bb3a3cf993d25b19"
          }
        ],
        "settingsData": []
      }
    }
    

    This structure looks to match, but it simple won't appear on the content when I view it in the UI.

    This is how I'm saving the content:

    string gridString = JsonSerializer.Serialize(newGrid, new JsonSerializerOptions { Encoder = System.Text.Encodings.Web.JavaScriptEncoder.UnsafeRelaxedJsonEscaping });
    
    node.SetValue("pageBody", gridString);
    
    _contentService.SaveAndPublish(node);
    

    There are no errors and everything saves but not the carousel slides.

    I've spent quite a lot of time on this and am struggling to figure out what's going on, please put my out of my misery!

    Thanks,

    Ben

  • Ben Palmer 180 posts 866 karma points c-trib
    19 days ago
    Ben Palmer
    100

    I went for a walk and it suddenly dawned on me that I'd specified the wrong data type, Umbraco.BlockGrid should be Umbraco.BlockList.

    Very silly, but glad it's fixed so I can move on!

Please Sign in or register to post replies

Write your reply to:

Draft