Drupal relations with drag and drop

Proof of concept on how to use the relations module with drag and drop.

Transcript

1. Relations with drag and drop 02-02-2013 Drupal meetup - Lisbon Notes:
2. The Problem 02-02-2013 Drupal meetup - Lisbon Notes:
3. 02-02-2013 Surveys Questions Order Required ... Drupal meetup - Lisbon Notes: We have these two entities in our project. We needed to relate them in a way that a survey can have multiple questions and a question can belong to multiple surveys. Our first thought was to use an entity reference field on the question but soon we realized that this was no option because we needed to have what we called of survey_question data. This data can be the question order in that survey, if it's required or not.
4. The Solution 02-02-2013 Drupal meetup - Lisbon Notes:
5. 02-02-2013 Relation is an API module and storage model for both simple and the most complex relations between entities. The module can handle both directional and symmetrical relations very well Relation http://drupal.org/project/relation Drupal meetup - Lisbon Notes: Use the relation module. This module allow us to create a relation between two entities and since the relation is an entity in itself it's fieldable thus allowing us to have the survey question data. We had a solution, we just needed to find a way to implement it.
6. 02-02-2013 Drupal meetup - Lisbon Notes: The relation module comes with this widget that allow us to create relations between two entities but its usage isn't very intuitive and it didn't provide the user experience that we wanted.
7. Our approach 02-02-2013 Drupal meetup - Lisbon Notes: We decided to go custom and build our own solution using drag and drop. We are using two views. The one on the left is showing the survey questions (the relations of that survey with the questions) The view on the right is the question picker and shows all the questions o our repository. By presenting the questions as a list and adding some classes we made jquery aware of the list. The sortable plugin takes over and allows the user to add, remove and reorder questions. When a change is detected a save button is shown and upon saving the questions are serialized and sent to the server for processing.
8. 02-02-2013 question[]=15-88&question[]=23 ... Drupal meetup - Lisbon Notes: With this serialization we have everything we need to know which relations to create, update and delete.
9. 02-02-2013 question[]=15-88&question[]=23 ... Drupal meetup - Lisbon Notes: With this serialization we have everything we need to know which relations to create, update and delete.
10. 02-02-2013 question[]=15-88&question[]=23 ... qid qid rid Drupal meetup - Lisbon Notes: The serialization has always the same format. Its a question array and the value that can be made of two ids or just one. Two ids means that a relation already exists for that question. The first id is the question one and the second is the relation id
11. 02-02-2013 Update 88 Create* 23 Delete 88 90 92 question[]=15-88&question[]=23 ... qid qid rid Existing 88 90 92 *Always referring to question id. Drupal meetup - Lisbon Notes: And with this we know which relations to create and to update. The only thing that we need to take into account is that the ids in the insert table refer to questions. The other ids are always relations. To know which relations to delete we need to load all the relations for that survey. And now we get the difference between existing relations and the ones to be updated. Since all the relations are always updated, if a relation is not present to be updated means that it was not present in the serialization meaning that the user removed it. Now we have all the data that we need and using the relation's api we just create, save and delete what we need.
12. Drupal meetup - Lisbon 02-02-2013 Thank you Thank you Daniel Silva daniel.silva@flipside.org Notes: