Umbraco-CMS: Custom view for block list editor returns 404 if placed in Views folder

In Umbraco v8.7 custom views can be adding for block list editor. It is probably recommended to place this inside App_Plugins folder, however since the file picker is using starting from root level, you can also pick any html files at root level or e.g. inside Views folder. https://our.umbraco.com/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Block-List-Editor/#write-your-own-html-view

If selecting a html file placed in Views folder, then block editor throws an 404 error when accessing the content node with the block list editor. https://our.umbraco.com/forum/using-umbraco-and-getting-started/103488-specifying-a-custom-view-for-block-configuration-returns-404

2020-09-13_18-05-49

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 1
  • Comments: 18 (17 by maintainers)

Most upvoted comments

@nielslyngsoe I think it is better than what we have now and avoiding this error with custom views inside ~/Views folder. I can always be improved later then 👍

and probably some update in the documentation recommeding placing custom views in e.g. App_Plugins or at root level.

Maybe something like this for now? I can still select html view in App_Plugins and at root level, but not in Views folder (or the other blacklisted folders).

vm.addViewForBlock = function(block) {
    localizationService.localize("blockEditor_headlineAddCustomView").then(function (localizedTitle) {

        const filePicker = {
            title: localizedTitle,
            section: "settings",
            treeAlias: "files",
            entityType: "file",
            isDialog: true,
            filter: function (i) {
                var excludedFolders = ["App_Data", "Media", "Umbraco", "Views"];
                var rootFolderName = i.path === "-1" ? i.name : i.parentId.split("/")[0];

                if (excludedFolders.includes(rootFolderName)) {
                    return true;
                }

                return !(i.name.indexOf(".html") !== -1);
            },
            filterCssClass: "not-allowed",
            select: function (node) {
                const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
                block.view = "~/" + filepath;
                editorService.close();
            },
            close: function () {
                editorService.close();
            }
        };
        editorService.treePicker(filePicker);

    });
};