Umbraco 7 custom layout sample, reuse the default List layout

customLayout.html

<div ng-class="{'-content':(entityType === 'content')}"
     ng-controller="dstream.customLayoutController as vm">
    <div ng-if="entityType === 'media'"
         on-drag-leave="vm.dragLeave()"
         on-drag-end="vm.dragLeave()"
         on-drag-enter="vm.dragEnter()">
        <umb-file-dropzone ng-if="!vm.isRecycleBin && vm.acceptedMediatypes.length > 0"
                           accepted-mediatypes="vm.acceptedMediatypes"
                           parent-id="{{vm.nodeId}}"
                           files-uploaded="vm.onUploadComplete"
                           accept="{{vm.acceptedFileTypes}}"
                           max-file-size="{{vm.maxFileSize}}"
                           hide-dropzone="{{options.filter.length > 0}}"
                           compact="{{ items.length > 0 }}"
                           files-queued="vm.onFilesQueue">
        </umb-file-dropzone>
        <umb-table ng-if="items"
                   items="items"
                   allow-select-all="options.bulkActionsAllowed"
                   item-properties="options.includeProperties"
                   on-select="vm.selectItem"
                   on-click="vm.clickItem"
                   on-select-all="vm.selectAll"
                   on-selected-all="vm.isSelectedAll"
                   on-sorting-direction="vm.isSortDirection"
                   on-sort="vm.sort">
        </umb-table>
    </div>
    <div ng-if="entityType !== 'media'">
        <umb-table ng-if="items"
                   items="items"
                   allow-select-all="options.bulkActionsAllowed"
                   item-properties="options.includeProperties"
                   on-select="vm.selectItem"
                   on-click="vm.clickItem"
                   on-select-all="vm.selectAll"
                   on-selected-all="vm.isSelectedAll"
                   on-sorting-direction="vm.isSortDirection"
                   on-sort="vm.sort">
        </umb-table>
        <umb-empty-state ng-if="!items && options.filter.length === 0 && !vm.isRecycleBin"
                         position="center">
            <div ng-if="entityType === 'content'"><localize key="content_listViewNoContent">No content has been added</localize></div>
            <div ng-if="entityType === 'member'"><localize key="content_listViewNoMembers">No members have been added</localize></div>
        </umb-empty-state>
    </div>
    <umb-empty-state ng-if="!items && options.filter.length > 0"
                     position="center">
        <localize key="general_searchNoResult"></localize>
    </umb-empty-state>
    <umb-empty-state ng-if="!items && options.filter.length == 0 && vm.isRecycleBin"
                     position="center">
        <localize key="general_recycleBinEmpty"></localize>
    </umb-empty-state>
</div>

CustomLayoutController.js

(function () {
    "use strict";

    function customLayoutController($scope, listViewHelper, $location, mediaHelper, mediaTypeHelper, assetsService) {

        /*
         * $scope.items = [
         *  {
         *   properties: [
         *      {
         *          id: 1,
         *          alias: 'internalLink',
         *          editor: "Umbraco.TinyMCEv3",
         *          value: 'value'
         *      },
         *      {
         *          id: 1,
         *          alias: 'allDay',
         *          editor: "Umbraco.TrueFalse",
         *          value: '0'
         *      },
         *      {
         *          id: 3,
         *          alias: 'eventDate',
         *          editor: 'Diplo.DateRangePicker',
         *          value: '2018-12-12T16:00:00,2018-12-13T17:00:00'
         *      }
         *   ] 
         *  }
         * ]
         * 
         * */        

        var vm = this;
        var umbracoSettings = Umbraco.Sys.ServerVariables.umbracoSettings;

        vm.nodeId = $scope.contentId;

        // Use whitelist of allowed file types if provided
        vm.acceptedFileTypes = mediaHelper.formatFileTypes(umbracoSettings.allowedUploadFiles);
        if (vm.acceptedFileTypes === '') {
            // If not provided, we pass in a blacklist by adding ! to the file extensions, allowing everything EXCEPT for disallowedUploadFiles
            vm.acceptedFileTypes = !mediaHelper.formatFileTypes(umbracoSettings.disallowedUploadFiles);
        }

        vm.maxFileSize = umbracoSettings.maxFileSize + "KB";
        vm.activeDrag = false;
        vm.isRecycleBin = $scope.contentId === '-21' || $scope.contentId === '-20';
        vm.acceptedMediatypes = [];

        vm.selectItem = selectItem;
        vm.clickItem = clickItem;
        vm.selectAll = selectAll;
        vm.isSelectedAll = isSelectedAll;
        vm.isSortDirection = isSortDirection;
        vm.sort = sort;
        vm.dragEnter = dragEnter;
        vm.dragLeave = dragLeave;
        vm.onFilesQueue = onFilesQueue;
        vm.onUploadComplete = onUploadComplete;
        markAsSensitive();

        function activate() {
            if ($scope.entityType === 'media') {
                mediaTypeHelper.getAllowedImagetypes(vm.nodeId).then(function (types) {
                    vm.acceptedMediatypes = types;
                });
            }
        }

        function selectAll($event) {
            listViewHelper.selectAllItems($scope.items, $scope.selection, $event);
        }

        function isSelectedAll() {
            return listViewHelper.isSelectedAll($scope.items, $scope.selection);
        }

        function selectItem(selectedItem, $index, $event) {
            listViewHelper.selectHandler(selectedItem, $index, $scope.items, $scope.selection, $event);
        }

        function clickItem(item) {
            // if item.id is 2147483647 (int.MaxValue) use item.key
            $location.path($scope.entityType + '/' + $scope.entityType + '/edit/' + (item.id === 2147483647 ? item.key : item.id));
        }

        function isSortDirection(col, direction) {
            return listViewHelper.setSortingDirection(col, direction, $scope.options);
        }

        function sort(field, allow, isSystem) {
            if (allow) {
                $scope.options.orderBySystemField = isSystem;
                listViewHelper.setSorting(field, allow, $scope.options);
                $scope.getContent($scope.contentId);
            }
        }

        // Dropzone upload functions
        function dragEnter(el, event) {
            vm.activeDrag = true;
        }

        function dragLeave(el, event) {
            vm.activeDrag = false;
        }

        function onFilesQueue() {
            vm.activeDrag = false;
        }

        function onUploadComplete() {
            $scope.getContent($scope.contentId);
        }

        function markAsSensitive() {
            angular.forEach($scope.options.includeProperties, function (option) {
                option.isSensitive = false;

                angular.forEach($scope.items,
                    function (item) {

                        angular.forEach(item.properties,
                            function (property) {

                                if (option.alias === property.alias) {
                                    option.isSensitive = property.isSensitive;
                                }

                            });

                    });

            });
        }

        activate();

        function strip(html) {
            var tmp = document.createElement("DIV");
            tmp.innerHTML = html;
            return tmp.textContent || tmp.innerText;
        }

        //format items        
        for (var i = 0; i < $scope.items.length; i++) {
            var item = $scope.items[i];
            for (var j = 0; j < item.properties.length; j++) {
                var property = item.properties[j];
                if (property.editor === "Diplo.DateRangePicker") {
                    var splited = property.value.split(',');
                    if (splited.length === 2) {
                        var start = moment(splited[0]);
                        var end = moment(splited[1]);
                        if (start.isValid() && end.isValid()) {
                            item[property.alias] = start.format("DD/MM/YYYY h:mm A") + " - " + end.format("DD/MM/YYYY h:mm A");

                        }
                    }
                }
                else if (property.editor === "Umbraco.TrueFalse") {
                    item[property.alias] = property.value == 0 ? "No" : "Yes";
                }
                else if (property.editor === "Umbraco.TinyMCEv3") {
                    item[property.alias] = strip(property.value);
                }
            }            
        }              

    }

    angular.module("umbraco").controller("dstream.customLayoutController", customLayoutController);
   
})();

Instructions: Add this to your plugin, set the html page as a custom layout of ListView