Customization of the APEX modal page, Redwood

C

Customizing modal page can be tricky, specially if you are doing it for the first time. My main concerns are the header (style) and the width of the window.

Default representation (the header is a bit dull and hard to customize):

Target state (keep just the gray border to move the window around):

Adjusting width

Let's go through steps needed to achieve this. To adjust default width is easy, you just need to set it in Dialog properties on the modal page. I overlooked it and tried to adjust it via Javascript first. Silly.

Adjusting header

Adjusting the original header is a bit difficult. I tried modifing the Modal Dialog template, but the header is just not there. It is most likely part of the Standard page template. Anyway, there is nice moving functionality attached to it and so is the Escape key event to close the dialog. So you really don't want to fully get rid of it. So let's just hide the the header and the button. The trick is that you have to do it on the parent page, not on the modal page!

/* to hide header on modal page put this in CSS on parent page */
.ui-dialog-titlebar {
    border-bottom: 0;
    margin-bottom: 0;
}
.ui-dialog-titlebar > * {
    display: none;
}

Now you can add Hero region with your own header, close button or just the region with your content. That is all up to you, now you have a clean plate. And you will still keep the Escape key alive...

Refreshing parent regions (as a bonus)

Depending on your use case you might want to refresh parent regions when you close the modal dialog. Just attach this code in DA before you close the window:

parent.apex.region('REGION_STATIC_ID').refresh();