Add Search to Block List Element Picker

[prjseal]

As I am using the block list editor more and more and creating lots of blocks, it would be really useful to have a search box to filter the document types to choose for the block content model and block settings model. I imagine it would work a bit like the multi node tree picker.

Here is how it looks currently.

Here is the search on the multinode tree picker

I would love it if someone was able to make this idea a reality.

Thanks in advance.

Paul

[abjerner]

This made me curios, so I decided to have a look at this, but I have hit a dead end for now. So here is what I've found out so far:

Step 1

The option for picking the element types opens a new content type picker via the editorService.treePicker() method. The infinite editor that opens when this method is called, as some checks for whether search should be enabled:

https://github.com/umbraco/Umbraco-CMS/blob/release-9.1.1/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js#L51

So if the section isn't one of content, media or member, the search isn't enabled. To add support for searching other types, there should probably be introduced some additional options for the editorService.treePicker() method.

For testing purposes, I updated the source code so that vm.enableSearh (which contains a typo) is always set to true.

Step 2

The actual search is handled by the <umb-tree-search-box /> directive, and similar the tree picker, it really only supports content, media and member:

https://github.com/umbraco/Umbraco-CMS/blob/release-9.1.1/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreesearchbox.directive.js#L87-L94

The highlighted lines deletages the actual search to searchService. Unfortunately the service doesn't contain methods for searching any other types 😢

Again for the purpose of testing and playing around, let's assume that the service has a searchContentTypes method that is implemented something like the snippet below, and that umbtreesearchbox.directive.js is updated to detect that we are in fact searching for content types (eg. via the tree alias, which the directive currently doesn't know about):

searchContentTypes: function (args) {

    if (!args.term) {
        throw "args.term is required";
    }

    return entityResource.search(args.term, "DocumentType", args.searchFrom)
        .then(data => {
            data.forEach(item => searchResultFormatter.configureDefaultResult(item));
            return data;
        });
}

With this method, the search sends a request to /umbraco/backoffice/umbracoapi/entity/Search?query=hello&type=DocumentType. But this API doesn't support searching for content types, and therefore results in this error:

The Umbraco.Cms.Infrastructure.Examine.BackOfficeExamineSearcher currently does not support searching against object type DocumentType

at Umbraco.Cms.Infrastructure.Examine.BackOfficeExamineSearcher.Search(String query, UmbracoEntityTypes entityType, Int32 pageSize, Int64 pageIndex, Int64& totalFound, String searchFrom, Boolean ignoreUserStartNodes)
   at Umbraco.Cms.Infrastructure.Search.UmbracoTreeSearcher.ExamineSearch(String query, UmbracoEntityTypes entityType, Int32 pageSize, Int64 pageIndex, Int64& totalFound, String culture, String searchFrom, Boolean ignoreUserStartNodes)
   at Umbraco.Cms.Web.BackOffice.Controllers.EntityController.ExamineSearch(String query, UmbracoEntityTypes entityType, String searchFrom, Boolean ignoreUserStartNodes)
   at Umbraco.Cms.Web.BackOffice.Controllers.EntityController.Search(String query, UmbracoEntityTypes type, String searchFrom, Nullable`1 dataTypeKey)
   at lambda_method1220(Closure , Object , Object[] )
   at Microsoft.AspNetCore.Mvc.Infrastructure.ActionMethodExecutor.SyncObjectResultExecutor.Execute(IActionResultTypeMapper mapper, ObjectMethodExecutor executor, Object controller, Object[] arguments)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeActionMethodAsync()
   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeNextActionFilterAsync()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextExceptionFilterAsync>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)

Setting the type to DocumentType seems correct, as writing a type that shouldn't exist, the error message instead says Language (🤷‍♂️). So my conclusion is that the endpoint and underlying logic just doesn't support searching for content types.

Step 3

This is how far I managed to go for now. The next step would be to look into whether the endpoint can be updated to support other types as well - content types in particular. Or if there is another endpoint we can use instead.

If we can get this to work, we should be able to go back to Step 2 and make the <umb-tree-search-box /> support searching for content types.

And then thereafter back to Step 1 to also make the Umbraco.PropertyEditors.BlockList.BlockConfigurationController controller and the editorService.treePicker() method support sending the necessary parameters for the <umb-tree-search-box /> directive.

[abjerner]

The entity controller already supports searching all searchable trees:

https://github.com/umbraco/Umbraco-CMS/blob/release-9.1.1/src/Umbraco.Web.BackOffice/Controllers/EntityController.cs#L195

So maybe this concept can be re-used somehow. This seems like what the todo here is describing:

https://github.com/umbraco/Umbraco-CMS/blob/release-9.1.1/src/Umbraco.Web.BackOffice/Controllers/EntityController.cs#L172

[skartknet]

I was thinking about this today and found this discussion. Has anyone made any progress?