Umbraco 11 - Creating a Block Grid programmatically - Areas query

,

Hey All! - Umbraco v13

I managed to do this in Umbraco 13 programmatically if anyone is still wondering about this.

You will need to make sure you inject the ContentTypeService and DataTypeService

private readonly IDataTypeService _dataTypeService;
private readonly IContentTypeService _contentTypeService;

I am yet to put this into a service, but you can use this for the time being.

	var areaGuidKeyZero = GetAreaKeyGuidForLayout(BlockGridLayout_6_6_cols.ModelTypeAlias, "area_0");

Invoking the method passing in your BlockGrid alias, and the area label that you want.

In my case, I need the key for area_0.

		public string? GetAreaKeyGuidForLayout(string layoutAlias, string areaAlias)
		{
			var allContentTypes = _contentTypeService.GetAll();
			var layoutContentType = allContentTypes.FirstOrDefault(x => x.Alias == layoutAlias);
			if (layoutContentType == null)
			{
				Console.WriteLine($"Layout alias '{layoutAlias}' not found.");
				return null;
			}

			var layoutKey = layoutContentType.Key;
			var allBlockGridDataTypes = _dataTypeService.GetAll()
				.Where(dt => dt.EditorAlias == "Umbraco.BlockGrid");

			foreach (var dataType in allBlockGridDataTypes)
			{
				if (dataType.Configuration is not BlockGridConfiguration config)
					continue;

				foreach (var block in config.Blocks)
				{
					if (block.ContentElementTypeKey != layoutKey)
						continue;

					var area = block.Areas?.FirstOrDefault(a => a.Alias == areaAlias);
					if (area?.Key != null)
					{
						Console.WriteLine($"Match found in DataType '{dataType.Name}' (ID: {dataType.Id})");
						return area.Key.ToString();
					}
				}
			}

			Console.WriteLine($"No area with alias '{areaAlias}' found for layout '{layoutAlias}'.");
			return null;
		}

Then you can find the method here.

This will return the unique key you will need when creating your dynamic areas.

			var layoutItem = new BlockGridLayoutItemModel
			{
				ContentUdi = layoutUdi,
				ColumnSpan = 12,
				RowSpan = 1,
				Areas = new[]
					{
					new BlockGridLayoutAreaModel
					{
						Key = "afaecf29-bfd7-300d-ba04-8f8b3df5a751", // Area_0 Key
						Items = new[]
						{
							new BlockGridLayoutItemModel
							{
								ContentUdi = calcUdi,
								ColumnSpan = 6,
								RowSpan = 1,
								Areas = Array.Empty<BlockGridLayoutAreaModel>()
							}
						}
					},
					new BlockGridLayoutAreaModel
					{
						Key = "d28e8411-9172-3e63-a34d-513f7791e1ac", // Area_1 Key
						Items = new[]
						{
							new BlockGridLayoutItemModel
							{
								ContentUdi = videoUdi,
								ColumnSpan = 6,
								RowSpan = 1,
								Areas = Array.Empty<BlockGridLayoutAreaModel>()
							}
						}
					}
				}
			};

So in the above cove, I am creating my layout items, but I can replace the hardcoded GUIDS in each layout area with the method call.

So the final outcome would be

			var layoutItem = new BlockGridLayoutItemModel
			{
				ContentUdi = layoutUdi,
				ColumnSpan = 12,
				RowSpan = 1,
				Areas = new[]
					{
					new BlockGridLayoutAreaModel
					{
						Key = GetAreaKeyGuidForLayout(BlockGridLayout_6_6_cols.ModelTypeAlias, "area_0"), // Area_0 Key
						Items = new[]
						{
							new BlockGridLayoutItemModel
							{
								ContentUdi = calcUdi,
								ColumnSpan = 6,
								RowSpan = 1,
								Areas = Array.Empty<BlockGridLayoutAreaModel>()
							}
						}
					},
					new BlockGridLayoutAreaModel
					{
						Key = GetAreaKeyGuidForLayout(BlockGridLayout_6_6_cols.ModelTypeAlias, "area_1"), // Area_1 Key
						Items = new[]
						{
							new BlockGridLayoutItemModel
							{
								ContentUdi = videoUdi,
								ColumnSpan = 6,
								RowSpan = 1,
								Areas = Array.Empty<BlockGridLayoutAreaModel>()
							}
						}
					}
				}
			};

Of course this can be extended to return both the keys at once if you want. This is just a quick demonstration to solve the problem :slight_smile:

Hope this helps!