Jump to content
Raymond Geerts

Custom dashboard sorting MarkupAdminDataTable pages

Recommended Posts

I'm building a dashboard, based on the dashboard from Kongondo's Blog.

In there i have Articles and Widgets. Articles are sorted by some date, but for the widgets i want to be able to use manual drag-n-drop sorting.

Widgets are all child pages from a certain parent page.

Is this possible and how would i be able to approach this?

Would it be possible to build manual sorting into MarkupAdminDataTable or should i use PageTable instead?


update: Im looking in to ProcessPageSort to see if i can use that. Seems it needs an AJAX call.

update: Changed title of post

Edited by Raymond Geerts

Share this post

Link to post
Share on other sites

What I would try (Never done this before)

- Use jquerui sortable.

- start drag (or something), get de index of the item in the list of pages 

- stop drag (or something), get the new index of the dropped item.

- then from your list get the Page id's from start drag index till stop drag index and make from all id's a comma separated string.  (1234,3241,6473,1001,1234)

Then you need to do a post with Javascript to /processwire/page/sort/, use the following variables:

sort (comma separated list of ID's) 

move_id (dragged page)
Edited by Martijn Geerts
copy pasted the wrong URL updated the post
  • Like 1

Share this post

Link to post
Share on other sites

Thanks Martijn, will take a look at jquery sortable, looks like its easy to setup.

Will have to find out how to add some data attributes to a table row with the MarkupAdminDataTable, or else i might be able to do it with hidden form fields.

Share this post

Link to post
Share on other sites

Ok it seems i have set up everything now.

The table (specificly all children of tbody) are sortable now with

$('.blocksTable > tbody').sortable()

In sortable() i have set some options like axis:"y" and beforeStop

on beforeStop i gather the needed ids to pass as data, for example:


Where the TOKEN is grabbed from the hidden input field with class _post_token, 'id' is the id from the page that was 'moved', 'parent_id' is the id of the parent page, 'sort' are the ids of the pages in the new order.

These are posted with ajax to /processwire/page/sort/

The problem is i get the following message return, indicating the page is not saved because there are no changes.

{"error":true,"message":"You do not have permission to sort pages using this parent - \/partners\/partnername\/blocks\/"}

The strange thing is the current user has move and sort permissions, so i'm not sure what i'm missing here. Does anybody have a clue?

Edited by Raymond Geerts

Share this post

Link to post
Share on other sites

Solved, the parent template "EDIT PAGES" for the current users role, needed to be ticked.

Now it works fine, sorting pages from a custom dashboard within a MarkupAdminDataTable.

  • Like 2

Share this post

Link to post
Share on other sites

I'm working on MarkupAdminDataTable. From OP screenshot, how to put a checkbox in front of each row.

My intention is to allow user for multiple row selection to perform some actions like delete pages

Share this post

Link to post
Share on other sites

Disable content encoding and just insert the raw html into the table. Just make sure you're entity encoding the html on your own if needed.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By opalepatrick
      Hi, trying to order pages by modified date, date. I can do 'sort=-date_modified, sort=-date' but that will always put the modified date first regardless of actual date order. I just want to coalesce the two fields and sort. Any ideas would be appreciated.
    • By d'Hinnisdaël
      Happy new year, everybody 🥬
      I've been sitting on this Dashboard module I made for a client and finally came around to cleaning it up and releasing it to the wider public. This is how it looks.
      ProcessWire Dashboard

      If anyone is interested in trying this out, please go ahead! I'd love to get some feedback on it. If this proves useful and survives some real-world testing, I'll add this to the module directory.
      You can find the latest release on Github.
      Check out the documentation to get started. This is where you'll find information about included panel types and configuration options.
      Custom Panels
      My goal was to make it really simple to create custom panels. The easiest way to do that is to use the panel type template and have it render a file in your templates folder. This might be enough for 80% of all use cases. For anything more complex (FormBuilder submissions? Comments? Live chat?), you can add new panel types by creating modules that extend the DashboardPanel base class. Check out the documentation on custom panels or take a look at the HelloWorld panel to get started. I'm happy to merge any user-created modules into the main repo if they might be useful to more than a few people.
      This is a pre-release version. Please treat it as such — don't install it on production sites. Just making sure 🍇
      These are the things I'm looking to implement myself at some point. The wishlist is a lot longer, but those are the 80/20 items that I probably won't regret spending time on.
      Improve documentation & add examples ⚙️ Panel types Google Analytics ⚙️ Add new page  🔥 Drafts 🔥 At a glance / Page counter 404s  Layout options Render multiple tabs per panel panel groups with heading and spacing between ✅ panel wrappers as grid item (e.g. stacked notices) ✅ Admin themes support AdminThemeReno and AdminThemeDefault ✅ Shortcuts panel add a table layout with icon, title & summary ✅ Chart panel add default styles for common chart types ✅ load chart data from JS file (currently passed as PHP array) Collection panel support image columns ✅ add buttons: view all & add new ✅
    • By ttttim
      Is there a way to add a (new or existing) page to the top of the asmSelect list? By default they're added at the bottom. 
    • By Leftfield

      First, this is production realestate site, big one. So please, if any chanse to fix this without touching database, it would be great

      I have field "pstatus" as a PageReference,
      In the tree under Status as children:
      sold unavailable paused In the template "property" I have dropdown were I choose: empty (nothing); sold; unavailable or paused. If you do not choose anything, property will have active selling status.

      I need help sorting property template in this order: show all empty and than show all sold.

      1031 is Status, parent of the sold unavailable and paused.
      $status = $pages->get('1031')->children('sort=pstatus'); $selector[] = "sort=price, pstatus!=$status"; But I got there all except from status. I need to list "sold" too.

    • By louisstephens
      I have done a bit of searching, but I can not seem to find an actual answer. I have a list of services as child pages under "Services". I can output the services just fine, but I cant wrap my head around how to group them "alphabetically" like:
      Services A - Service "A" 1 - Service "A" 2 - Service "A" 3 B - Service "B" 1 - Service "B" 2 - Service "B" 3 C - Service "C" 1 - Service "C" 2 - Service "C" 3 Has anyone achieved this type of functionality before?
  • Create New...