Monday 22 September 2014

Categories and sub-categories with cascading lists in Booki

When creating your bookings with Booki, cascading lists are quite useful when you have more than one list of items that are related i.e. categories and sub-categories.

For example, imagine you want to allow your users to rent a car based on the location. You present your user with a list of locations, then once a location is selected you show a car available in that location.

The idea is that you start from a broad list and then drill down into more specific lists, finally landing on one item, which reflects your choice.

In Booki this is possible to achieve through the Cascading Lists option that is available on every new project created in the "Projects" page. Select a Project and then head on to the "Cascading Lists" tab.



For the remainder of this article, we will be working on a typical 3 level car example:
Year->Make->Model

First we start by creating the main list, which is "Year". This will be the first list the customer sees. When the year is selected, we will load sub lists automatically for "Make".

Create a new list and name it "Year". Check the "Is required" checkbox, which is optional and allows you to force the user to make a selection.


Next add each year to the "Year" list one at a time. Only the final list must include cost. Cost set on parent lists will be ignored. The "Year" list is the main top list, hence a parent or perhaps grand parent is the right term here.

We will add 2 years for this example : 1964 - 1965


If you would like to edit one of the items in the dropdown list, simply select it from the listbox and you will be able to edit it.

Note that we've not added a cost for items in the list above. Only the final list can have a cost. If a cost is provided on a parent list, it will be ignored.

At this point, the "Year" list is complete. Now it's time to create the "Make" list. We are going to list only 2 makes, "Ford" and "Mustang".

The "Ford" list will contain all Ford models for the year 1964, obviously Ford made cars in 1965 as well, but we're going to limit our example to two lists to simplify.


Note that we have set a cost. This is going to the final list hence cost is applicable and will add up to the total cost of the booking.

Now do the same for "Pontiac" which is our only other model we will be creating for this example.


Oh finally! We now have all the lists we need. We can now start setting up the relationships.As you can note from the sketch below, we've created 3 lists. Pontiac, Ford, and Year.



One important thing to keep in mind regarding the work we've done so far is that we've always maintained clear names for our cascading lists i.e. Year, Ford, Pontiac.

This is intentional as it will help greatly when we create the relationships as our relationships are easy to spot.

Now the relationships. Select "Year". And in the lists, select the Year 1965. This will enable the relationships dropdown. From the relationships, select "Pontiac". This means when year 1965 is selected, all items contained in "Pontiac" will get loaded.


Do the same for 1964. Select it and then select "Ford" from the parent list.

We have now created our lists. There is no limit to the number of levels deep a list can be related.

In the front end, your booking form will contain a "Year" dropdown list now.


Selecting a year will cascade and load a second list i.e. make where you select the model.


The selected item in the "Ford" list will add up to the total cost as we provided one for each of these sub lists.

What about just a regular list ? Oh, nice you asked.
If a list does not have a relationship, it will be listed on it's own and appear as a regular dropdown list. This means you can create as many individual dropdown lists as you want. The solution is not limited to just cascading lists.

1 comment:

  1. Ciao Alessandro, c'è solo un problema nella questione cascading list, ovvero che gli elementi messi in relazione non sommano i prezzi assegnati. Ho provato a cercare fra le opzioni generali ma non ho trovato nulla che determini il blocco della somma di default, non capisco se è un bug o una cosa non pensata. Ti ringrazio del fantastico plugine e rimango a disposizione per chiarimenti in merito a questo difetto. Grazie e buon lavoro.

    ReplyDelete