UmbracoCustomBlockView gists

config.json

{
  "name": "items",
  "defaultTitleAlias": "title",
  "defaultItemsAlias": "items",

  "items": [
    {
      "name": "myBlockAlias",
      "titleAlias": "myTitleAlias",
      "thumbsAlias": "myImageAlias",
      "itemsAlias": "mySubItemsAlias",
      "mainImageAlias": "myMainImageAlias"
    },
    {
      "name": "AnotherBlockAlias",
      "titleAlias": "anotherTitleAlias",
      "thumbsAlias": "anotherImageAlias",
      "itemsAlias": "anotherItemsAlias",
      "mainImageAlias": ""
    }
  ]
}

customBlockItemDetail.html

<div class="dotsee-item-header">
    <div class="dotsee-item-header-titles">
        {{$ctrl.item.label}}

        <div class="umb-sub-views-nav-item-text"
             style="margin-bottom:10px;margin-left:0px;margin-top:2px;"
             ng-if="$ctrl.item.childItemsCount>0">
            {{$ctrl.item.childItemsCount}} items

            <span style="margin-left:20px;">
                (Block: {{$ctrl.item.blockName}})
            </span>
        </div>

        <div class="umb-sub-views-nav-item-text"
             style="margin-bottom:10px;margin-left:0px;margin-top:2px;"
             ng-if="$ctrl.item.childItemsCount==0">
            <span style="margin-left:0px;">
                (Block: {{$ctrl.item.blockName}})
            </span>
        </div>
    </div>
    <div ng-if="$ctrl.item.mainImage" class="dotsee-item-header-image" style="background-image: url({{$ctrl.item.mainImage}})">
    </div>
</div>

<div class="umb-sub-views-nav-item-text dotsee-item-list"
     ng-if="$ctrl.item.childItemsCount>0 && !$ctrl.item.hasImages">
    <ul>
        <li ng-repeat="item in $ctrl.item.subItems track by $index">
            {{item.title}}
        </li>
    </ul>
</div>

<div class="umb-sub-views-nav-item-text dotsee-thumb-list"
     ng-if="$ctrl.item.childItemsCount>0 && $ctrl.item.hasImages">
    <ul>
        <li ng-repeat="item in $ctrl.item.subItems track by $index">
            <img src="{{item.image}}">
            <span>{{item.title}}</span>
        </li>
    </ul>
</div>

customBlockView.html

<div ng-controller="Umazel.Website.Blocks.CustomBlockController as vm">

    <button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element dotsee-list-button"
            ng-click="api.editBlock(block, block.hideContentInOverlay, index, parentForm)"
            ng-focus="block.focus"
            ng-class="{ '--active': block.active, '--error': parentForm.$invalid && valFormManager.isShowingValidation() }"
            val-server-property-class="">
        
        <i class="icon {{block.content.icon}}"
           aria-hidden="true"></i>
        
        <div ng-if="vm.isDisabled==false">
            <custom-block-item-detail item="vm"></custom-block-item-detail>
        </div>
       
        <div ng-if="vm.isDisabled==true" style="color:#bbbbbb">
            <custom-block-disabled-item-detail item="vm"></custom-block-disabled-item-detail>
        </div>
    </button>
</div>