List view improvements

[philipdanielhayton]

Hi guys,

I'm just playing around with v14 of Umbraco and was surprised to see that the behavior of the list view has changed. Specifically, doc types set as a list view will still show their child items in the tree view.

Anyway, that got me thinking, if there are changes being made to the list view, maybe this is a good opportunity to improve and expand it's functionality?

Two things that I've always longed for are:

• The ability to only show certain doc types in the list, but continue to show others in the tree. A good use case for this is a blog section where you will typically have a handful of categories which could be shown in the tree, but thousands of articles that could be shown in the list.
• Additionally and / or alternatively, it would be great to be able to have more than one list view per doc type.
• Oh, and if we could at least have the option to hide list view items from the tree, that would be great! 😁

Anyway, this is mostly just me thinking out loud, would be interested to hear what others think? How would you improve it?

[skttl]

I think it's a bug that list views are showing children in the tree, but other than that, I would love to have those features too!

[nielslyngsoe]

Hi @skttl and others, its not intended as a bug.

The background story is that the List View was made for a more detailed overview and to solve a performance problem.

We do not have the performance problem of the tree any longer, as we have implemented pagination, aka. load more.
In this way the List View is not seen as a way to hide children from the tree. But as a detail overview.

This enables users to still navigate via the tree, if they like. As well it provides an element of confirmation that you can see that there is child items within, not hidden inside the list view. My perspective here is mainly towards new users, those who do not know the List View concept.

It may still be relevant to be able to hide children in the tree, but I would like to hear and see the use cases before we invest time and effort into such feature. So please share more concrete examples of such.

Thanks in advance

[PeterKvayt]

@nielslyngsoe
So we have the following case: old umbraco users expect that there is no content in the tree when we using list view, new umbraco users do not expect any.

I think instead of choose show content in tree or not, let's provide ability to enable content in tree or not in options of list view.

What do you think about it?

[skttl]

One case of needing to hide the children in the tree could be when having a different sort order. Eg. by article date or similar. In this case it would just confuse the editors that the articles get listed in another order in the tree.

I dream of being able to select which content types go into the list view, and which goes into the tree. So on a specific list view, you can specify that the list view should only contain nodes of one or more specific content types, and additionally configure these content types to be hidden from the tree.

[dennispedersenakqa]

@nielslyngsoe Is this still the way you are looking at things. We might have hit another issue with it.

We are experiencing very, very long login times with a solution that has alot of migrated pages, and we suspect its because its loading the entire tree. however we cannot be sure, as its the login action that takes time. We have a login times of over 2 hours and counting, when we have imported around 50k nodes in umbraco. This is not really useable. Is this something you've experienced in your tests?
This is a huge case for us, and we dont really know what to do, since we cant really circumvent the login in any way.

I think for the best user scenario would be have a the ability to hide the tree nodes when making list views.

[mistyn8]

Bit late to the party (and have to admit not made the jump to v14/14 as yet)

Maybe not a concrete example for hiding listView items in the tree but if this is also a wider remove the listview as the problem it solved is no longer an issue...

then list views have uses beyond that!

• list and grid view with custom props exposed
• bulk actions on the list
• scoped search within a list view. (be great to revisit searching custom props too)

[hfloyd]

I agree that listviews have lots of uses, like those mentioned by @mistyn8 (in pre-v14 site I have often added listviews as properties on doctypes when I wanted these features without hiding the tree items). If conversations are happening about the future of listviews, may I also suggest these other discussions:
#13295
#12393

[ssplyuvrajsingh]

Hi @nielslyngsoe ,
I am using list view in my umbraco 14 project which I have upgraded from umbrco 13 to 14 but I am unable to add custom search functionality in umbraco 14 which i was using in umbraco 13 ,I Implemented to see this CLICK TO SEE

My js fie

angular.module('umbraco.services').config([
    '$httpProvider',
    function ($httpProvider) {
        $httpProvider.interceptors.push(function ($q) {
            return {
                'request': function (request) {
                    // Redirect any requests for the listview to our custom list view UI
                    if (request.url.indexOf("umbraco/backoffice/umbracoapi/content/GetChildren?id=") > -1)
                    request.url = request.url.replace("backoffice/umbracoapi/content/GetChildren", "backoffice/Umbracoapi/CustomListViewSearch/GetChildrenCustom");

                    return request || $q.when(request);
                }
            };
        });

    }]);

An my Controller

using Examine;
using Examine.Search;
using Microsoft.AspNetCore.Authorization;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using NPoco;
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.Actions;
using Umbraco.Cms.Core.Configuration.Models;
using Umbraco.Cms.Core.Dictionary;
using Umbraco.Cms.Core.Events;
using Umbraco.Cms.Core.Mapping;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.Models.ContentEditing;
using Umbraco.Cms.Core.Persistence.Querying;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Routing;
using Umbraco.Cms.Core.Scoping;
using Umbraco.Cms.Core.Security;
using Umbraco.Cms.Core.Serialization;
using Umbraco.Cms.Core.Services;
using Umbraco.Cms.Core.Strings;
using Umbraco.Cms.Infrastructure.Persistence;
using Umbraco.Cms.Web.BackOffice.Controllers;
using Umbraco.Cms.Web.Common.Attributes;
using Umbraco.Extensions;

namespace Rex.Repository.Controllers.Plugin
{
    [PluginController("UmbracoApi")]
    public class CustomListViewSearchController : ContentController
    {
        private readonly IContentService _contentService;
        //private readonly ILogger _logger;
        private readonly IExamineManager _examineManager;
        private readonly IUmbracoMapper _mapper;
        private readonly Lazy<IDictionary<string, ILanguage>> _allLangs;
        private readonly ILocalizationService _localizationService;
        private readonly ISqlContext _sqlContext;
        public CustomListViewSearchController(ICultureDictionary cultureDictionary,
         ILoggerFactory loggerFactory,
         IShortStringHelper shortStringHelper,
         IEventMessagesFactory eventMessages,
         ILocalizedTextService localizedTextService,
         PropertyEditorCollection propertyEditors,
         IContentService contentService,
         IUserService userService,
         IBackOfficeSecurityAccessor backofficeSecurityAccessor,
         IContentTypeService contentTypeService,
         IUmbracoMapper umbracoMapper,
         IPublishedUrlProvider publishedUrlProvider,
         IDomainService domainService,
         IDataTypeService dataTypeService,
         ILocalizationService localizationService,
         IFileService fileService,
         INotificationService notificationService,
         ActionCollection actionCollection,
         ISqlContext sqlContext,
         IJsonSerializer serializer,
         ICoreScopeProvider scopeProvider,
         IAuthorizationService authorizationService,
         IContentVersionService contentVersionService,
         ICultureImpactFactory cultureImpactFactory,
         IOptions<ContentSettings> contentSettings, IExamineManager examineManager, IUmbracoMapper mapper)
             : base(cultureDictionary, loggerFactory, shortStringHelper, eventMessages, localizedTextService, propertyEditors, contentService, userService, backofficeSecurityAccessor, contentTypeService, umbracoMapper, publishedUrlProvider, domainService, dataTypeService, localizationService, fileService, notificationService, actionCollection, sqlContext, serializer, scopeProvider, authorizationService, contentVersionService, cultureImpactFactory, contentSettings)
       {
            _contentService = contentService;
            _examineManager = examineManager;
            _mapper = mapper;
            _localizationService = localizationService;
            _allLangs = new Lazy<IDictionary<string, ILanguage>>(() =>
        _localizationService.GetAllLanguages().ToDictionary(x => x.IsoCode, x => x, StringComparer.InvariantCultureIgnoreCase));
            _sqlContext= sqlContext;
        }

        public PagedResult<ContentItemBasic<ContentPropertyBasic>> GetChildrenCustom(int id, string includeProperties, int pageNumber = 0, int pageSize = 0, string orderBy = "SortOrder", Direction orderDirection = Direction.Ascending, bool orderBySystemField = true, string filter = "", string cultureName = "")
        {
            // get the parent node, and its doctype alias from the content cache
            var parentNode = _contentService.GetById(id);
            var parentNodeDocTypeAlias = parentNode != null ? parentNode.ContentType.Alias : null;

            // if the parent node is not "books", redirect to the core GetChildren() method
            if (parentNode?.ContentType.Alias != "products" || filter.IsNullOrWhiteSpace())
            {
                return GetChildren(id, includeProperties, pageNumber, pageSize, orderBy, orderDirection, orderBySystemField, filter, cultureName);
            }

            // if we can't get the InternalIndex, redirect to the core GetChildren() method, but log an error
            if (!_examineManager.TryGetIndex("ProductIndex", out IIndex index))
            {
                //_logger.Error<CustomListViewSearchController>("Couldn't get InternalIndex for searching products in list view");
                return GetChildren(id, includeProperties, pageNumber, pageSize, orderBy, orderDirection, orderBySystemField, filter, cultureName);
            }

            // find children using Examine

            // create search criteria
            var searcher = index.Searcher; 
            var searchCriteria = searcher.CreateQuery();
            var searchQuery = searchCriteria.Field("parentID",Convert.ToString(id));

            if (!filter.IsNullOrWhiteSpace())
            {
                searchQuery = searchQuery.And().ManagedQuery(filter,new[] { "nodeName", "SKU" });
            }

           
            // pageNumber is not zero indexed in this, so just multiply pageSize by pageNumber
            var searchResults = searchQuery.Execute();

            // get the results on the current page
            // pageNumber is not zero indexed in this, so subtract 1 from the pageNumber
            var totalChildren = searchResults.TotalItemCount;

            if (totalChildren == 0)
            {
                return GetChildren(id, includeProperties, pageNumber, pageSize, orderBy, orderDirection, orderBySystemField, filter, cultureName);
            }

			var pagedResultIds = searchResults.Skip((pageNumber > 0 ? pageNumber - 1 : 0) * pageSize).Take(pageSize).Select(x => x.Id).Select(x => int.Parse(x)).ToList();
            var children = _contentService.GetByIds(pagedResultIds).ToList();

            var pagedResult = new PagedResult<ContentItemBasic<ContentPropertyBasic>>(totalChildren, pageNumber, pageSize)
            {
                Items = children.Select(content =>
                    _mapper.Map<IContent, ContentItemBasic<ContentPropertyBasic>>(
                        content,
                        context =>
                        {
                            context.SetCulture(cultureName);

                            // if there's a list of property aliases to map - we will make sure to store this in the mapping context.
                            if (!includeProperties.IsNullOrWhiteSpace())
                            {
                                context.SetIncludedProperties(includeProperties.Split(
                                    new[] { ", ", "," },
                                    StringSplitOptions.RemoveEmptyEntries));
                            }
                        }))
           .WhereNotNull()
           .ToList() // evaluate now
            };

            return pagedResult;
        }
    }
}

Please provide me a way so I can implement it to my umbraco 14 project

[hfloyd]

@ssplyuvrajsingh - I'd suggest moving this specific message to the Forum where you are more likely to get some help with your code.

[Myster]

I separately posted a feature request to make the listview available on any page. This idea is different/tangential to the ideas discussed here.