Everybody loves modal pop-us: perfect when the user wants to enter or view some information without having to leave the current page. They give a desktop application feel to web apps.
However with all this "responsive design" and "mobile-friendly" hype now, they don't seem to be ideal in some cases. What happens if a user opens your apex app on a mobile with a minuscule screen?
Consider for instance the following real-world scenario I am working on now:
- a list of records is displayed on a traditional Apex report
- the user can click on the "edit" icon in a specific record
- a modal popup window appears and the user can enter some notes for that record (using a text area) and click Save or Cancel
Note: It is not an option to use a tabular form because the notes don't have to be displayed all the time, and they can be quite long so a large text area field is required.
This page is part of an application using a theme based on the bootstrap technology and is expected to work on a wide-screen desktop monitor as well as on a tablet or mobile.
What is the best way to implement this in Apex using a responsive theme, if not using modal pop-ups?
(this is a pragmatic question; I am not interested whether modal pop-ups are "conceptually" good or bad etc...)
I considered using a "show and hide" region, i.e. the region is hidden by default. When the user clicks on a record, the region is displayed below the report with that record details. When the user clicks Save or Cancel the region is hidden again. It may work but it is a bit clunky and very cumbersome to implement, as Apex offers no built-in functionality for this to work and all data manipulation has to be done manually (compared to using a table-based form in a popup page).
Another option is simply to make that specific functionality only available for bigger devices using some kind of media selector, so the user has a "cut-down" experience in a small screen device.
Any suggestions/ideas will be welcome.
Thanks
Luis