Size of modal dialog in APEX 5.1

I originally wanted to talk about the size of a modal dialog in Apex, but today, looking for Apex books, I found the page, which does use a modal dialog, and I thought it would be a good exercise to rewrite the same page with some modifications.

What the page does is offering a gallery of Oracle books, ordered by date.

Oracle Apex Books

Clicking on any book a modal dialog box is displayed with some information about the title


Building our page

I am using Apex 5.1 (this example runs also on Apex 18.2) and I am creating an application 104. I am putting the images on the first page (Home)

To build our page, we need some images of books, so I saved five screenshots of those shown on the Oracle page. These are books that I either already possess or that I intend to buy.

The screenshots must be uploaded to Shared components-> Static Application files

Coming back to the layout of the Oracle page, we see that there are five books on each row. Let's put four of then on each row, with every book taking 3 columns out of 12.

To have the row evenly subdivided, the solution I prefer is to create four sub-regions of the region BOOKS

To have the regions nicely aligned on a row, the second, third an fourth must have in their grid property "Start New Row" = No.

The fifth image must have "Start New Row" = Yes and so on.

Display Image

For each sub-region I define an item of type "Display Image"; in its Settings I choose "based on" "Image URL stored in Page Item Value". The source will be one of the static files we have just uploaded.

The "Display Image" can also be a table column of type BLOB, but I would say they are better used within a report.

At this point, my page looks like this

Creating the dialog box

Let's create a Desktop page as "Modal Dialog".

The first region "Book overview" is of "Static Content" and I simply cut and pasted the description of the first book of the Oracle page.

At this point we want to click on the first book of our page (Ahmed's one) and have its description opened.

One solution is defining the first "Display Image" as link to (in my case) the second page of the application. in the "Pre Text"* property of the P1_BOOK1 item I add
<a href="f?p=&APP_ID.:2:&APP_SESSION.:NO::::">, putting </a> as Post Text.

What we obtain is:

Changing width and heigth of the modal dialog

We have, finally, arrived at the point that I originally meant for my article, before being carried away by the Oracle Apex page.

A dialog box possesses the property Width and Height, which are expressed in pixels.

I also changed the template Options chosing an Accent 5 (which makes the title of the regon turn to brown)

Two words of conclusion

One could wonder why we had to use Apex for an application that doesn't use a database; you are right, but think of how it would be adding hundreds of images. Originally I wanted to talk about modal dialogs only, but we had the opportunity to talk about "Display Images" and their settings.

I intend to write this same exercise using database table to make it "scalable".