Ticket ordering selection problem - Seat selection for venue

#1

Hi All,
I’ve been designing a prototype for a ticket ordering website. The first part of the booking wizard is a demo for the seat selection.
By clicking on a desired seat you can add it to the order.
The order is summarized in a list which is operated using a repeater.
There are two problems that I haven’t been able to overcome:

  1. When removing a selected seat from the summary list (the repeater), the seat in question stays selected
  2. When clicking on a seat which was added, it will not turn false

Any ideas on how I can simplify this or make it work?
Here’s the File:
Booking Wizard Interaction.rp (247.7 KB)

Please note that only the seat widgets on the 5 seats on the top left (named 001 - 005) are interactive.

Thank you in advance!

#2

If you only have to support a demonstration of the concept, e.g., your prototype only has to be functional for the first five seats, you can keep your structure, with a different popup for each seat. The trick will be adding logic so the “Remove Selection” group/button in the repeater knows which seat to unselect.

Two ways I would approach this. The first is a kind of straightforward “brute force” method, and the second is less intuitive but more elegant with less code.

  • Add conditional cases to the Remove Selection group’s Click or Tap

    • Hover over the CLICK OR TAP event then click the “Enable Cases” button
    • Then click “OK” button to make it your first case
    • Hover over the CLICK OR TAP event again and click “Add Case”
    • Press Enter
    • Create a condition to test if this row is for seat 001
      • Hover over Case 2 and click the “Add Logic” button
      • Change “text on widget” to “value”
      • click the fx icon in next field to bring up the Edit Text dialog
      • Click “insert Variable or Function…”
      • Click “Repeater / Dataset” to spin open this category
      • Click “Item.Seat_Number” to select this column
      • Click OK
      • keep the default fields of “equals” and “value” and change the last field to “001” (no quotes, just the digits)
      • Click OK
      • (Important for this case only. Set it to “IF” and not “Else If”)
        • Click “Case 2” so this case has an outline border
        • Right-click it and select “Toggle IF/ELSE IF” such that it now reads
          If "[[Item.Seat_Number]] equals…
      • Add action of Set Selected/Checked and choose the seat widget, named “001”
        (you can start typing “001” to search for it), then set to Unselected
        • Resulting action should be Set Selected/Checked 001 to "false"
    • Repeat creating conditions to test for all five seats
      .

  • -OR- Create a “listener event” in each of your first five seat widgets

    • You can make use of an otherwise unused event, like Move or Rotated and turn it into a special “listener event”. The logic goes like this:
      • When “Remove Selection” is clicked, set a temporary variable (global variable or text on some widget) to the seat number
      • Then trigger/fire the listener event for every seat
      • When a seat’s listener event is fired, it “listens” to the temporary variable and if a match, it unselects itself, otherwise does nothing.
    • I’ll use the example of a global variable (default one is named “OnLoadVariable” and the Move event. So, for each of your five seats, create a Move event with these actions:
      • If [[This.name]] equals value of variable OnLoadVariable
        Set selected of This to "false"
        Set value of OnLoadVariable to "" (blank)
      • (You can easily copy this event and paste to the rest of the five seats)
    • In the repeater, select the “Remove Selection” group and add two actions before the Delete Rows action:
      • Set Variable Value OnLoadVariable to [[Item.Seat_Number]]
      • A Fire Event action, selecting each of the first five seats as targets:
      • Fire Event
        001 fire Moved
        002 fire Moved
        003 fire Moved
        004 fire Moved
        005 fire Moved

You obviously wouldn’t want to do either of these approaches for every seat. If you need to support any and every seat, I think the best approach would be to have a repeater for your seats. Then you can more easily target the appropriate row in the seat repeater and have one place for your code to handle any seat. Because the seat layout is not a clean repeated array, creating this seat repeater would be difficult–but not impossible. I’ve created some funky repeater layouts before, including a circle that could be rotated (think “Nest thermostat” dial.)

The basic approach would be to place one seat image in your repeater cell, then create a dynamic panel from it. Duplicate the state and replace the image widget with a hotspot of the same dimensions. Use this state to show a gap where there is no seat (e.g., to the right of seat 043. Looks like your seat rows are all lined up vertically, which is nice. If you have “offset” seats (e.g. seat row B starts half a seat width; or in your case, the handicapped seats have a special arrangement) you can add states with hotspots of various widths. Or for these special seats, maybe don’t include them in the repeater and handle them separately–maybe even just as above for the 7 or so handicapped seats.

In the seat repeater datasheet, include a column for the seat number, and a column for “selection state” (avoid using column names of “Selected” or “State” as these terms mean specific things in interaction code syntax; maybe use “Reserved” or “SelState” --something like that.

In the Item Loaded event, add some conditional cases to handle whether to show or hide the seat, and whether to show it as selected or not. (Add additional states as needed, e.g, “unavailable”, “handicapped” “VIP” etc. E.g.,
If "[[Item.SeatNum]]" equals "" Set Panel State of Seat to State2 // a gap
If "[[Item.Reserved]]" equals "true" Set Selected of SeatImage to "true"

Set the style for this seat repeater so the LAYOUT is set to Horizontal; select the Wrap (Grid) option and “Items per column” to the number of seats in the widest “seat row arrangement” (e.g., looks to be the top seat row with 32 seats.) Wherever there is a gap, include a blank row in your repeater datasheet.

Then, to add a seat, just use the Update Rows action with a rule of [[Item.SeatNum == 001]] (or more generically and extensible, set OnLoadVariable to the seat number and a rule of [[Item.SeatNum == OnLoadVariable]] …Then select the “Reserved” column and set the value to “true”. Do the same to remove a seat, setting the value to “false” (for some reason if you set a column value to blank it gets ignored.) Now, when you do this from inside the other repeater (“Selection Repeater”) you’ll need to be careful of syntax. Use “Item.” to refer to the same repeater and “TargetItem.” to refer to columns in another repeater. Place this action before the Delete Rows action. So, something like,
Update Rows
Seat Repeater set Reserved to "false" where [[TargetItem.SeatNum == Item.Seat_Number]]"
Delete Rows
Selection Repeater this row

#3

Thank you!
I’ll try to implement these methods, I’ll keep the forum updated :wink:

#4

Thank you very much for the help!
I’ve managed to use a repeater to activate all the seats. I have one query: When I click on a seat after for the 2nd addition (after I update the rows of the repeater), the images move to the right. Any idea how why it’s happening?

Booking Wizard Solution nearly finished.rp (420.3 KB)

#5

Good job! Looks great.

The repeater is set to “Fit to Content in HTML” (by default) which is usually good, but when you show the “Buttons 0001” group, the repeater cell width then changes to match the width of “Buttons 0001” --which happens to be 5 seat widths (200 px instead of 40 px). …What I don’t understand is why this doesn’t happen for the first seat click! Anyway, since the width of all your “seat states” (Vacant, Chosen, Taken, etc.) are all the same, your repeater cell width doesn’t need to change, so unchecking the “Fit to Content in HTML” option (when the repeater is selected on the page and the STYLE pane is viewed) is a quick fix. I tried this and it works.

You might want to consider using an opaque or partially opaque (not transparent) background for “Buttons 001” (replacing the Hotspot widget with a rectangle widget) so it is easier to see it when selecting seats in the lower rows (where it overlaps with the seats.) Also, when selecting seats to far right, this popup may get shown off-screen, but trying to scroll to the right makes it disappear. A quick fix for this would be just right-aligning the “Buttons 001” to the seat, because you’d always have space to the left. (It’s not out of the question to only do this if the popup would not have enough space to fit in the window, but more complicated to calculate positioning.) When user clicks “Add Seat” there is a lag before the seat repeater gets updated–because the repeater has lots of rows, unfortunately it takes longer to load/update. I added a quick fix by just updating “Add Seat” to “Adding” (and I had to add a Wait action to ensure this happens prior to the Update Repeater action, otherwise it didn’t get shown.) It is worth noting you don’t have to change this text back because it automatically gets reset when the repeater updates.

These “quick fix” suggestions are shown in this updated file:

Booking Wizard Solution nearly finished.rp (432.5 KB)