Seats/Lots Reservation Design

[benlim]

Hi Expert,

I have received such requirement on developing custom fiori app for seats/lots reservation. I would like to know does this type of design is do-able using SAPUI5?

If it's possible, how could I achieve this objective?(what type of control/element to use)

If it's not possible, is there any alternative solutions which can achieve the same objective?

Thanks.

Regards,

-Ben-

[benlim]

Hi Expert,

I've a new requirement regarding the design of the lots(The design can be dynamic and the current design is drawn based on excel) . Let's say we have a design whereby the value of each lot will be embedded in the excel template.

How could I render this design and display to the user. The user will able to click each of the lot to view each of the respective information.

Currently my solution of using pdf to display the design/images(due to the user has prepared it in excel template, so I tried to render it in PDF with hyperlink, but this solution was not applicable as I'm not able to capture the value in each lot, it opens a new tab for url navigation).

Hope I can get some ideas/hints from you guys for the architecture design.

Thanks.

Regards,

-Ben-

[irfan_gokak]

Hi,

Yes it's possible. You can go with creating custom control / try the answer shared by Jun Wu that's very easy.

[benlim]

Hi Irfan,

I'm new to SAPUI5 development. Can you provide some example on what type of custom control can be created to achieve the above requirement?

Regards,

Ben

[bertrand_delvallee]

Hello,

Here is my humble opinion as I have no experiences yet with SAPUI5 but I did some Flex architectures.

Basically you just deal with a list of seats so separate strictly display from processing. Your architecture should be able to display all seats as a simple list. Click on a row should start processing. When all processing is good you can chose how to render seats.

If your client is a theater or a travel company you will have to deal with room changes and fresh design (as customers experience is very important). So, it may be an overkill but the Map Container seems to fit well. Create a map for each physical room versions (work in progress, special event, new rows added several months later,...), apply some custom restrictions (like zoom amplitude) and bound seats with a geographic position (precise frontiers or just a rectangular/circle around a dot).

It will be more difficult to start with that renderer (in particular if there are lot of rooms) but you will have a lot of advantages in maintenance. In particular you will be able to improve design as you wish (for example with HD texture in background) without caring of media support (phones,4K PC,...). With that renderer, chose a seat on phones with be a piece of cake.

https://sapui5.netweaver.ondemand.com/explored.html#/sample/sap.ui.vk.sample.MapContainerMapSwitch/p...

-Edit-

Indeed, it's an overkill.

Best regards

Bertrand

[benlim]

Hi Bertrand,

Appreciate for your detail explanation. My requirement would be need to deal with event for each cells like your explanation for theater scenario. From what I understand on map container, it is deal with geographical location but I do not need this feature at this moment. How can map container fit to this scenario? Is it possible to design custom layout and render using map controller?

Regards,

Ben

[bertrand_delvallee]

Hello,

I did a few researchs. Actually it seems Map element needs an exterior map provider. You can't easily pass a bunch of vector elements.

My bad, I was too much enthusiastic. I would be too much work for few useful functionalities.

You should have a look on custom controler/renderer. One renderer for seat (start with a button or a clickable image) and one for the room. The room renderer should take a list of seat as data provider and place it on fix position. In simple HTML/CSS point of view, the room is a DIV with attribute POSITION = RELATIVE and seats are DIV with POSITION = ABSOLUTE, TOP = y, LEFT = x as children of room.

https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.RenderManager.html

https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f1703b6f4d1014b6dd926db0e91070.html

Best regards,

Bertrand

[junwu]

if it is still tabular, you just have to apply some css to the cell, doesn't seem to be big deal.

[benlim]

Hi Jun Wu,

By applying css will served visualization purpose, but will this allow user to make changes to each of the cells(events like making reservation/cancel reservation, view the cells details, etc)?

Regards,

Ben