U4-7385 - Improve UI for listview - Make it clearer that users can search children

Created by Pete Duncanson 11 Nov 2015, 11:36:19 Updated by Sebastiaan Janssen 10 Feb 2017, 15:43:39

Relates to: U4-4381

Depends on: U4-9465

Depends on: U4-9467

Depends on: U4-9468

Depends on: U4-9470

Depends on: U4-9471

Depends on: U4-9472

Subtask of: U4-9272

Now that the list view allows you to link to content the UI for it needs some work to catch up with the functionality.

"You know what my biggest issue is with the MTNP and the Listview? It looks broken. There is no indication at all that it's a feature. The first time I encountered this, I thought the default view didn't searched deep enough in the tree.

If I could add a label (of just have a default label) on the searchpage telling me that I need the search option because of the list-view, I would know instantly. And I can sell that to my customers. Now they end up with a almost blank sidebar."

This issue was pulled out of the comments from issue (http://issues.umbraco.org/issue/U4-4381#commentDateGroup_67_24078)


Sebastiaan Janssen 20 Jun 2016, 09:43:41

Assigned to @hartvig who offered to help on initial UI for a mini listview to appear in sidebars with just one or two columns so you know you can immediately start selecting something instead of just searching.

Mads Rasmussen 09 Feb 2017, 10:03:42

PR: https://github.com/umbraco/Umbraco-CMS/pull/1745

Notes: A setting as been added to the tree to allow expand of list view nodes. All this does is add the small arrow to list view nodes. When clicked it will sent out the expand event like “normal” nodes and we handle this from pickers. This will allow us to hide the expand arrow on trees which shouldn’t support the mini list view.

Inside the tree picker overlay we listen for the expand event and when a list view node is expanded we open up the mini list view.

A new component for the mini list view has been added. It handles: mini list view title, breadcrumb, table, pagination, opening nested list views and pagination. In the mini list view component the node for the list view you want to open is passed in and all children will be loaded and shown in the table. The list view data will be added to a local history variable so we don’t have to reload the children when navigating back and the history is used to generate the breadcrumb. When clicking a nested list view the current list view will be swapped out with the new one. The component has callbacks for selecting nodes and for closing the mini list view again.

Testing the mini list view should include:

  • testing property editors: ** Multinode tree picker (Content, Media and Member) ** Content picker ** Member picker
  • open the mini list view by clicking the small arrow next to a list view node.
  • select items
  • search the list
  • use the pagination
  • open a nested list view
  • make sure that using the pagination and search doesn’t affect other list views
  • use the breadcrumbs to navigate
  • use the back button to exit the mini list view
  • test that a picker with a list view start node will open the list view
  • make sure you can’t access any parents for the start node
  • test that you can’t access the mini list view from any other tree than the pickers

Known: issues:

  • Right now all nodes in the mini list view shows the small expand arrow next to them. This should only be shown for nodes with children. An issue is created to get it fixed: http://issues.umbraco.org/issue/U4-9470

Emil Wangaa 09 Feb 2017, 14:15:48

@madsrasmussen I've done some testing and generally it works great. I have found some issues that needs to be fixed though:

  • --I couldn't get it to work for the media multinode tree picker (content and media was fine)---
  • If I have used the pagination and I'm at page 2 for instance and then try to do a search for a node (even if it's on the same page as I'm currently on) it doesn't find anything.

The rest of the tests were fine but I think we need someone else to have a look at reviewing the code and also have a go at testing this as it seems like a major change. I'll leave this open for review.

Emil Wangaa 09 Feb 2017, 15:21:07

@madsrasmussen forget about the listview not working for media - that was just me being a newb :)

Sebastiaan Janssen 09 Feb 2017, 20:30:51

Yeah the problem is when you finish searching, it sends the page number you're currently on, it needs to reset to 1 when the search starts (when the request to getchildren gets done for the first time). Of course then if there are more than x results, you still need to be able to go to the next page of the results, not sure how you'd make paging kick in after you've not just typed in the search box.

Mads Rasmussen 10 Feb 2017, 09:37:51

I have pushed an update which resets the pagination when you search. I think this will fix the issue.

Sebastiaan Janssen 10 Feb 2017, 15:43:27

Awesome! Works now, I tested to make sure that the paging also still works after searching (and it does).

Priority: Task - Pri 1

Type: Feature (request)

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version: 7.6.0

Sprint: Sprint 52

Story Points: 4