Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Paul de Quant 394 posts 1477 karma points
    Sep 06, 2017 @ 16:20
    Paul de Quant
    0

    Customized List views and Filters

    Hello,

    I would like to create a custom list view (in the backoffice), much like what comes as standard in Umbraco (Doc Type List View Option).

    Except I would like to filter the results based on a category dropdown.

    I have a Dropdown datatype with some values in it and I would like to filter the table of results based on the category selected.

    Can anyone point me towards an example? I know how to create a custom view as an App_Plugin) and I've got my dropdown populated - I just don't know how to adjust the result set based on what I select.

    Thanks

    Paul

  • Paul de Quant 394 posts 1477 karma points
    Sep 07, 2017 @ 13:51
    Paul de Quant
    0

    Does anyone know how I can do this?

  • Dan Diplo 1505 posts 5905 karma points MVP 4x c-trib
    Sep 07, 2017 @ 14:00
    Dan Diplo
    0

    So you are using a custom listview layout? I'm presuming you have seen this article - https://24days.in/umbraco-cms/2016/custom-list-view-layouts/ I'd guess you'd need to add your dropdown into the listview and then filter the listview result items returned using an AngularJS filter:

  • Paul de Quant 394 posts 1477 karma points
    Sep 07, 2017 @ 14:02
    Paul de Quant
    0

    Hi Dan,

    I did indeed read that article. However I wasn't sure how I can filter the results - Angular JS is not my strong point.

    Thanks

    Paul

  • Dan Diplo 1505 posts 5905 karma points MVP 4x c-trib
    Sep 07, 2017 @ 14:25
    Dan Diplo
    0

    OK, it's not mine either, but I can see that in the example the controller has a value called $scope.items that contains a list of all the items in the listview.

    So you could perform a filter on this within the activate function, something like:

    $scope.items = $scope.items.filter(function (item) {
        return item.contentTypeAlias === "whatEver";
    });
    

    That would just return all the items who have a contentTypeAlias that equals "whatEver". You'd just need to make the comparison value the selected value of your list and then compare it to one of the properties that item has. If it's a custom property then each item has an array of properties for these.

    If you add:

    console.log($scope.items)
    

    to your controller then you can use chrome dev tools console to see all the values. Hope that gives you some help?

  • Paul de Quant 394 posts 1477 karma points
    Sep 07, 2017 @ 15:55
    Paul de Quant
    0

    Hi Dan,

    I've nearly got it working. As my Filter is based on Dropdown Datatype - the values are coming back as Id's, where as the filter is the Name.

    I don't suppose you know how to easily output as a name - see this post for a similar scenario - https://our.umbraco.org/forum/umbraco-7/using-umbraco-7/69202-display-dropdown-text-in-list-view

    Thanks

    Paul

  • Dan Diplo 1505 posts 5905 karma points MVP 4x c-trib
    Sep 07, 2017 @ 16:16
    Dan Diplo
    0

    Sorry, Paul, from reading that thread there doesn't seem to be any simple way to do that. Does your filter have to use a Dropdown Datatype - could you not just hardcode a select list?

  • Paul de Quant 394 posts 1477 karma points
    Sep 07, 2017 @ 16:17
    Paul de Quant
    0

    Unfortunately it has to be dynamic :(

  • Paul de Quant 394 posts 1477 karma points
    Sep 08, 2017 @ 07:18
    Paul de Quant
    1

    I've managed to get it working, however the filtered results seems to reset themselves when you use the pagination - any thoughts on how I can get around this?

    Thanks

    Paul

  • Dan Diplo 1505 posts 5905 karma points MVP 4x c-trib
    Sep 08, 2017 @ 07:53
    Dan Diplo
    0

    Sorry, Paul, can't think of anything off the top of my head. There is a umbPagination directive in Angular with docs here - https://our.umbraco.org/apidocs/ui/#/api/umbraco.directives.directive:umbPagination

  • Asembli 50 posts 168 karma points
    Mar 04, 2018 @ 12:09
    Asembli
    0

    Hey Paul,

    can you share your solution with us? Did you find solution for pagination or you abandon the whole concept and implement different approach.

  • aviram 3 posts 73 karma points
    Jul 21, 2018 @ 17:52
    aviram
    0

    hello all, if it helps, u can create a custom listview layout ( acurding to the link mentioned Dan Diplo - https://24days.in/umbraco-cms/2016/custom-list-view-layouts/ ).

    • after having created the layout as mentioned,

    --- step 1 ---

    • create in the controller.js new function which will be somthing like this:

    function getFilterName(item) {

            if (!item.contentTypeAlias == "desierdDocAlias") {
                 item.showOrHide = "hideItmLst";
        }
    

    }

    • the desierdDocAlias will be the document alias u want to display.

    --- step 2 ---

    go to the html file, go to the second div ( the one with the class "my-songs-layout__cards"

    and change the class attribute to :

    class="my-songs-layout__card {{item.showOrHide}}"

    --- step 3 ---

    go to the css file and ad:

    .hideItmLst { display: none !important; }

    --- step 4 ---

    • call the function getFilterName in the activate() function (also in the controller.js)

    -- by doing all that,. the layout will only show the items with the selected alias you have mentioned in the getFilterName(item) function.

    offcurse u can change the display by seeting the css files and the html file but i think u got the idea...

    hoped it helps. it worked for me.

    P.S - using umbraco 7.5

  • Andy Felton 171 posts 450 karma points c-trib
    Mar 31, 2020 @ 13:51
    Andy Felton
    0

    Hi,

    I've implemented this and have it mostly working but can't get it to work with paging.

    The issue I'm seeing is because the paged list of items is retrieved and passed to the view you end up with some pages with no items.

    Any ideas how to proceed with this?

    Thanks

    Andy

Please Sign in or register to post replies

Write your reply to:

Draft