v14: custom view (web component) with nested grid ...
# help-with-umbraco
r
I just got started with custom views using the example in the docs (https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist). This is the basic view without added custom view (picture 1). When this code is added (picture 2), the following view shows up (picture 3). As you can see in picture 3, compared to picture 1, the nested grid items doesen't show up. I guess I need to code the web component to match the structure of the grid. Is there some documentation I can read to understand the principles to proceed with this? I guess I have to learn more about web components and Lit, but before this is useful, how can I code it right to view the children of the first grid item, even if the structure changes? Any examples, guides or tips? https://cdn.discordapp.com/attachments/1293837184817827840/1293837185178406912/bilde.png?ex=6708d347&is=670781c7&hm=4cf1925a66768c4ee00d150d2204b2328ea0c73df6a371cf8102c4cb797913ff& https://cdn.discordapp.com/attachments/1293837184817827840/1293837185434255411/bilde.png?ex=6708d347&is=670781c7&hm=b009bc675bfbef5262c7474cbe0870b2114f6c6aff71963010a6dd2a1530e0f2& https://cdn.discordapp.com/attachments/1293837184817827840/1293837185648300032/bilde.png?ex=6708d347&is=670781c7&hm=ff62cff31b139c861eaf93d06be5f2b7e1c3e8963ddd01b71784a2f311d79877&
r
Hey @rstei! You'll need to add
<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
to render the nested areas
Also, slightly biased, but you can check out my BlockPreview package so you don't have to write a custom view for each Block, it uses your Razor partials or ViewComponents! https://marketplace.umbraco.com/package/umbraco.community.blockpreview
There's also Kaspar's InstantBlockPreview that works slightly differently https://marketplace.umbraco.com/package/knowit.umbraco.instantblockpreview
d
+1 for @rickbutterfield 's package in v14
27 Views