Dynamic UI CONTROL FOR A SEAT IN MOVIE TICKET BOOKING SYSTEM.

General
, , , , , ,
1

Respected Learner,

I am having a requirement where I have created a Dynamic UI CONTROL of checkbox which displays 2 images basis it’s status, i.e. a true image and a false image. Now for that I went into the User Interface Rule category and then selected Control rule. There I have deselected Auto generated HTML code and now I want to write a HTML code of my own for the above requirement. Could you please help me in knowing what the HTML code should be? The Attached images are the true image(normal booked) and the false image(normal available).

Thanking You,

EESWARA SAI CHILUKURI.

normal available.jpg

normal booked.jpg

2

@EeswaraSaiC17158782

To create a custom dynamic UI control for a seat in a movie ticket booking system using checkboxes that toggle between two images (available and booked), you can write your own HTML in the Control rule. Here’s a basic example of how the HTML could look. This assumes you have two images (available.png and booked.png) and a boolean property (e.g., .SeatBooked) controlling the state:


 

<input type=“checkbox” name=“seat” value=“true”
onclick=“this.nextSibling.src = this.checked ? ‘booked.png’ : ‘available.png’;”
style=“display:none;”
checked=“<%= tools.findPage(“pyWorkPage”).getBoolean(”.SeatBooked") %>“/>
<img src=”<%= tools.findPage(“pyWorkPage”).getBoolean(“.SeatBooked”) ? ‘booked.png’ : ‘available.png’ %>"
onclick=“this.previousSibling.click();”
style=“cursor:pointer;” />

This code hides the checkbox and toggles the image on click, giving the effect of selecting/deselecting a seat. You’ll need to ensure the images are in the correct location and accessible to the Pega UI. Let me know if you’d like a version that works with Constellation.