Sorting with DraggableViews

Sep 29, 2014. | By: Danny Duro

If you had been tasked to do what I had been tasked, i.e create a view in which the client can drag and re-order the list as it fits their purpose, then you would have come to a suggestion made by our very good and knowledgeable friend that we all love and cant live without these days - namely google, to a module called Draggableviews. At this point I know what is going through your head, “ Thank God for google and these people who have created this module just for me.” But you will soon find out that this module, although you can do wonders with it, doesn’t have enough documentation to help you navigate the waters when you use the module. So I will try my best to explain a few conundrums that I was faced with while I was working with draggableviews.

The instructions in the readme are pretty straight forward, but here is a highlight, just in case.

Create initial view

So, first off, the page that you create to reorder and the view pane/block that you are going to display to your site visitors must be in the same view. Now moving on to the order page that you are going to create - the settings that you create must be similar to the one on the view pane that you are going to display, mind you the format has to be a table and has to show fields because you are going to add the node id field and a field that draggableviews module creates called, you guessed it, draggableviews: content. So these are the two important fields that play the part in making you able to drag and reorder the view how you please.

What you need to remember is that you can exclude the node id from the display on the order page but not the draggableviews: content field. The next important step is adding the field draggableviews:weight field to the sort criteria. The draggableviews: weight field should be the first on the list in the sort criteria. Now here’s an added bonus, you can add other sorting criteria below the the draggableviews: weight, thus making you able to use drag and re-order and in addition any other sorting that you have specified. You have to be careful though when adding more than one sort criteria on draggableviews. The one that worked for me was the dev version of draggable views.

Now for the final touch to the view that will accomplish what you have been tasked with, you now have to go to the view pane that you are going to display and add the draggableviews: weight to sort criteria.

Draggableviews weight

Once you add it, under the display sort as drop down menu chose the view page that you created. Now the draggableviews: weight should be the only field you have in the sort criteria. What that effectively means is that the view pane that you are going to display is going to be sorted by the view page that you created. So if you want the view to be sorted in anyway more than the draggable view that you have set up, you have to add it on the sort order page that you created.

Sort criterea for display page

In my experience here are some pointers you should be careful of. Don’t have anything above the draggableviews weight on the sort criteria. Make sure that the node id field that you add in your sort page is at the top of the list and above the draggableviews: content that you added, and make sure that you don’t exclude the draggableviews: content from the display. If there are any relationships that you have created, make sure that the draggableviews: wight in the sort criteria does not use the relationship.

Draggableviews: Content field setting

Thats all folks, hope it helped shed some light.

Subscribe

Subscribe to this blog via RSS.

Recent Posts

About

BLEN Corp is a small, minority, and veteran-owned information technology firm located in Washington D.C. Since 2004, we have been ahead of the curve in early adaption and implementation of cutting edge technologies including web and mobile development, service-oriented architecture, and other innovative web based solutions. Look at some of our projects.

Social Links

Our Bunker

WeWork Wonder Bread Factory
641 S St. NW
3rd Floor
Washington, DC 20001
United States.