Heya,
I am trying to think of the best approach of building a custom block view for Bellissima that has some properties set on the top level of the block.
Shape of JSON - Content property on Block
{
"header": "About",
"introduction": {
"markup": "<p>Lorem Lipsum</p>",
"blocks": {
"layout": {},
"contentData": [],
"settingsData": [],
"expose": []
}
},
"cardItems": {
"layout": {
"Umbraco.BlockList": [
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/b5f91f1591664b989b402da255daa171",
"settingsUdi": null,
"contentKey": "b5f91f15-9166-4b98-9b40-2da255daa171",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/62fb62851b234d34a4323cbcc1733feb",
"settingsUdi": null,
"contentKey": "62fb6285-1b23-4d34-a432-3cbcc1733feb",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/c58024105eb74cb2aa40ada0369d5db8",
"settingsUdi": null,
"contentKey": "c5802410-5eb7-4cb2-aa40-ada0369d5db8",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/e07d5888e4634c6dac0e89008a24a96d",
"settingsUdi": null,
"contentKey": "e07d5888-e463-4c6d-ac0e-89008a24a96d",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/0b7d00e0024847308c6643e10d4c118e",
"settingsUdi": null,
"contentKey": "0b7d00e0-0248-4730-8c66-43e10d4c118e",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/d2fc5d2bd6244acc92b674f1275c4c85",
"settingsUdi": null,
"contentKey": "d2fc5d2b-d624-4acc-92b6-74f1275c4c85",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/7bac1321f5254523b05260c3be4be86b",
"settingsUdi": null,
"contentKey": "7bac1321-f525-4523-b052-60c3be4be86b",
"settingsKey": null
},
{
"$type": "BlockListLayoutItem",
"contentUdi": "umb://element/e7e5ea674ad04ea6a25f66b09654d5ed",
"settingsUdi": null,
"contentKey": "e7e5ea67-4ad0-4ea6-a25f-66b09654d5ed",
"settingsKey": null
}
]
},
"contentData": [
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "b5f91f15-9166-4b98-9b40-2da255daa171",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "00118592-176b-44a2-8e9e-42d6dcc37be9"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "62fb6285-1b23-4d34-a432-3cbcc1733feb",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "f77bcaac-a21c-4d8e-a29d-3651183338d4"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "d2fc5d2b-d624-4acc-92b6-74f1275c4c85",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "10ca3056-06f2-4788-8cf3-50d7d4296cc5"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "e07d5888-e463-4c6d-ac0e-89008a24a96d",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "d2652cd2-2b2d-40ff-9438-8eac10a96ba0"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Medium"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "c5802410-5eb7-4cb2-aa40-ada0369d5db8",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "bb56ca7c-7b91-47a9-99a3-f1d642452275"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "e7e5ea67-4ad0-4ea6-a25f-66b09654d5ed",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "6522a6c9-4427-40eb-a05b-43dd7a2498a7"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "7bac1321-f525-4523-b052-60c3be4be86b",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "1210af9b-73fc-4090-b9e5-010e16d00495"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
},
{
"contentTypeKey": "c5714a85-0b3b-4c4e-888a-e34b9b25bd98",
"udi": null,
"key": "0b7d00e0-0248-4730-8c66-43e10d4c118e",
"values": [
{
"editorAlias": "Umbraco.DateTime",
"culture": null,
"segment": null,
"alias": "scheduleDisplay",
"value": ""
},
{
"editorAlias": "Umbraco.TrueFalse",
"culture": null,
"segment": null,
"alias": "hidden",
"value": false
},
{
"editorAlias": "Umbraco.MultiNodeTreePicker",
"culture": null,
"segment": null,
"alias": "cardItem",
"value": [
{
"type": "document",
"unique": "9ccf31ec-9d20-4e86-9c15-25f97c299428"
}
]
},
{
"editorAlias": "Umbraco.Community.Contentment.DataList",
"culture": null,
"segment": null,
"alias": "size",
"value": "Small"
}
]
}
],
"settingsData": [],
"expose": [
{
"contentKey": "b5f91f15-9166-4b98-9b40-2da255daa171",
"culture": null,
"segment": null
},
{
"contentKey": "62fb6285-1b23-4d34-a432-3cbcc1733feb",
"culture": null,
"segment": null
},
{
"contentKey": "d2fc5d2b-d624-4acc-92b6-74f1275c4c85",
"culture": null,
"segment": null
},
{
"contentKey": "e07d5888-e463-4c6d-ac0e-89008a24a96d",
"culture": null,
"segment": null
},
{
"contentKey": "c5802410-5eb7-4cb2-aa40-ada0369d5db8",
"culture": null,
"segment": null
},
{
"contentKey": "e7e5ea67-4ad0-4ea6-a25f-66b09654d5ed",
"culture": null,
"segment": null
},
{
"contentKey": "7bac1321-f525-4523-b052-60c3be4be86b",
"culture": null,
"segment": null
},
{
"contentKey": "0b7d00e0-0248-4730-8c66-43e10d4c118e",
"culture": null,
"segment": null
}
]
}
}
I can easily grab the following information to use in the HTML of the component
- header
- introduction
For the cardItems
property at this level, it is an Umbraco Block List which the JSON object contains:
- layout
- contentData
- settingsData
- expose
Again I am able to get info and values out of the items in the cardItems
from inside cardItems.contentData
such as
- scheduleDisplay
- hidden
- size
But the property cardItem
is a MNTP picker set to allow only pick one content node and contains two properties type
and unique
I am stuck at this point, on how best to get properties/values of the picked node in the MNTP as I only have a GUID/key of the picked document.
Ideas…
My thought to this problem is to get the list of contentKey stored in expose array at the top level and call a custom C# API controller to get the content server side and resolve the picked content node stored in the content picker and return my own shape of data.
Has anyone else resolved this?
Does anyone else have any other suggestions or ideas on how to resolve this level of nesting of content and properties inside an element type?
TL:DR version
- Unsure how to resolve a MNTP picked node to get more data/properties for rendering