Wednesday, January 17, 2018

Custom Confirm Dialog Button Labels

Some time ago, someone on the apex.world Slack channel asked a question about the APEX confirm dialog. The question was if it was possible to change the labels of the confirm dialog buttons from "Cancel/Ok" to "No/Yes".

If we look at the JavaScript APIs documentation we can see that there are three different ways that we can display a confirmation dialog:
  • apex.confirm
  • apex.page.confirm
  • apex.message.confirm
Note
The confirm function from the page namespace is different from the one in the confirm namespace. They both render the same confirmation dialog though.

apex.confirm: Alias for the apex.page.confirm function.

apex.page.confirm: Displays a confirmation dialog showing a message (pMessage) and OK and Cancel buttons. Depending on the user's choice, submits the page setting the request value to pRequest, or does not submit the page.

apex.message.confirm: Displays a confirmation dialog showing a message (pMessage), and OK and Cancel buttons. The callback function passed as the pCallback parameter is called when the dialog is closed, and passes true if OK is pressed and false otherwise.

The following JavaScript code:
apex.message.confirm( "Are you sure?", function( okPressed ) {
    console.log(okPressed ? 'Ok' : 'Cancel');
});

Would display this dialog:


Now, back to the original question. What if we would like to change those button labels.

If we have a look at the JavaScript code of the apex.message.confirm function, we can see that the labels are based on some apex.lang messages (APEX.DIALOG.OK and APEX.DIALOG.CANCEL) and that there is no built-in way to change the labels.

But...

What we can do is change the values (using the JavaScript API of the apex.lang namespace) of the two messages and then call the confirm function. We should also revert the changes to the messages after that so that everything remains as it was initially.

Ok, so let's create a wrapper function on apex.message.confirm (the same also works for apex.page.confirm)  and add two parameters for the button labels.

The function could look like this:
function customConfirm( pMessage, pCallback, pOkLabel, pCancelLabel ){
    var l_original_messages = {"APEX.DIALOG.OK":     apex.lang.getMessage("APEX.DIALOG.OK"),
                               "APEX.DIALOG.CANCEL": apex.lang.getMessage("APEX.DIALOG.CANCEL")};

    //change the button labels messages
    apex.lang.addMessages({"APEX.DIALOG.OK":     pOkLabel});
    apex.lang.addMessages({"APEX.DIALOG.CANCEL": pCancelLabel});

    //show the confirm dialog
    apex.message.confirm(pMessage, pCallback);

    //changes the button labels messages back to their original values
    apex.lang.addMessages({"APEX.DIALOG.OK":     l_original_messages["APEX.DIALOG.OK"]});
    apex.lang.addMessages({"APEX.DIALOG.CANCEL": l_original_messages["APEX.DIALOG.CANCEL"]});
}

Then, calling our function:
customConfirm( "Are you sure?", function( okPressed ) {
    console.log(okPressed ? 'Ok' : 'Cancel');
}, "Yes", "No");

Would result in this:

or anything you want, like this:

You can have a look at it in action in my Demo Application

Enjoy!

Monday, September 25, 2017

Auto Expanding Menu on Hover

Today someone on the apex.world Slack asked a question about having the side navigation menu auto-expand when hovering it. So I thought I would share this with others as well.

It can be easily be done using only a couple of JavaScript lines of code:
(function(ut, $) {

var TREE_NAV_WIDGET_KEY = 'nav';

$(window).on('theme42ready', function() {
    /* Make sure that the navigation menu is collapsed on page load */
    if (ut.toggleWidgets.isExpanded(TREE_NAV_WIDGET_KEY)){
        ut.toggleWidgets.collapseWidget(TREE_NAV_WIDGET_KEY);
    }

    /* Expand on mouse over, collapse on mouse out */
    $('.apex-side-nav.js-navCollapsed .t-Body-nav').hover(
        function(){
            ut.toggleWidgets.expandWidget(TREE_NAV_WIDGET_KEY);
        },
        function() {
            ut.toggleWidgets.collapseWidget(TREE_NAV_WIDGET_KEY);
        }
    );
});

})(apex.theme42, apex.jQuery);
First thing we need to do is make sure that the side navigation is collapsed.
Then we add a hovering handler using the jQuery .hover() on the navigation menu container.

You'll end up with something like this:

Have fun

You can have a look at it in action in my Demo Application
Edit 09-27
Now triggers the custom navigation menu event.
Also calls the delayResize function so that any sticky headers get resized correctly when the side navigation menu is expanded and collapsed.

Edit 09-28
Rewrote to use namespacing, wrapped using the "theme42ready" event and replaced the collapsed/expand calls with the universal theme functions.

Friday, September 8, 2017

APEX Items the Application Builder Style

The APEX application builder has the items look and feel different compared to what you get in a regular application.


You might think that they are looking good and that you would like to display them the same way in your application.

Here's the CSS you can use to do just that:
/* Removes borders from items */
.t-Form-inputContainer input[type="text"],
.t-Form-inputContainer input.text_field,
.t-Form-inputContainer input.password,
.t-Form-inputContainer input.datepicker,
.t-Form-inputContainer span.display_only,
.t-Form-inputContainer input.popup_lov,
.t-Form-inputContainer select,
.u-TF-item--text,
.u-TF-item--datepicker,
.u-TF-item--select,
.a-IRR-selectList[size="1"],
.t-Form-inputContainer select.selectlist[size="1"],
.t-Form-inputContainer select.yes_no,
.u-TF-item--select {
   background-color: transparent;
   border-top-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
}

/* Removes decoration of the popup lov button */
.a-Button.a-Button--popupLOV {
    background-color: transparent;
    box-shadow: none;
}
.a-Button.a-Button--popupLOV:hover {
    background-color: #f8f8f8;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) inset;
}

/* Removes borders when displaying inline error  */
.t-Form-inputContainer input[type="text"].apex-page-item-error,
.t-Form-inputContainer input.text_field.apex-page-item-error,
.t-Form-inputContainer input.password.apex-page-item-error,
.t-Form-inputContainer input.datepicker.apex-page-item-error,
.t-Form-inputContainer span.display_only.apex-page-item-error,
.t-Form-inputContainer input.popup_lov.apex-page-item-error,
.t-Form-inputContainer select.apex-page-item-error,
.u-TF-item--text.apex-page-item-error,
.u-TF-item--textarea.apex-page-item-error,
.u-TF-item--datepicker.apex-page-item-error,
.u-TF-item--select.apex-page-item-error{
   border-top-color: transparent;
   border-left-color: transparent;
   border-right-color: transparent;
}

/* Removes borders when displaying inline error (required with valid state) */
.t-Form-inputContainer input[type="text"].apex-page-item-error:required:valid,
.t-Form-inputContainer input.text_field.apex-page-item-error:required:valid,
.t-Form-inputContainer input.password.apex-page-item-error:required:valid,
.t-Form-inputContainer input.datepicker.apex-page-item-error:required:valid,
.t-Form-inputContainer span.display_only.apex-page-item-error:required:valid,
.t-Form-inputContainer input.popup_lov.apex-page-item-error:required:valid,
.t-Form-inputContainer select.apex-page-item-error:required:valid,
.u-TF-item--text.apex-page-item-error:required:valid,
.u-TF-item--textarea.apex-page-item-error:required:valid,
.u-TF-item--datepicker.apex-page-item-error:required:valid,
.u-TF-item--select.apex-page-item-error:required:valid {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}

/* Fix the select list error border color */
.t-Form-inputContainer select.apex-page-item-error{
    border-color: #eb6562;
}

Basically, the CSS will hide the top, left and right border of the items, while keeping the bottom border as well as the border's defined color. When the item is focused, all borders will be displayed as usual.

You'll end up with something like this:

Have fun

You can have a look at my Demo Application

Friday, February 24, 2017

Overriding the Default Properties of Inline Dialogs

When using inline modal, you can display them using the openModal JavaScript function.

That function is wrapping the jQuery UI Dialog Open method.
/* **********************************************
     From Theme42.js
********************************************** */
window.openModal = function(pDialogId, pDialogTriggerId, pSetFocusId, pClear) {
        $("#" + pDialogId).dialog("open")
    }

What we can do to override the default properties is to set them either on page or right before calling the Open method.

Let's say we would like to have a smaller dialog (e.g. height of 200px)


Option 1

On page load
$('#INLINE_REGION_STATIC_ID').dialog('option', 'height', 200);

Then you can use
openModal('INLINE_REGION_STATIC_ID');
or
$('#INLINE_REGION_STATIC_ID').dialog('open');

Option 2

When openning the Dialog:
$('#INLINE_REGION_STATIC_ID').dialog('option', 'height', 200).dialog('open')

For more information, you can have a look at the Dialog Widget documentation

Friday, February 3, 2017

Using Font Apex in Apex 5.0


Apex 5.1 introduced Font Apex, a new icon library designed to complement Universal Theme and to replace Font Awesome. The same "fa" prefix for the icons was kept so that it's easier to move from Font Awesome to this entirely new icon library.

Font APEX comes with a number of customizations built-in, enabling us to easily control the size, animation, rotation, and even add modifiers on top of icons. You can try customizing your icons using the Icon Builder in the Universal Theme sample application.

What if you are still on Apex 5.0 and would like to use it?

Don't worry you are able to do so.
Here's how you can do it.

First let's get the Font Apex library files.
You can get them from the Apex 5.1 installation file under the "images\libraries\font-apex" folder (or from here)
Then you will need to import these files in your application (let's do it using the Static Application Files for the sake of simplicity, but you could also import them in the Static Workspace Files or copy them on your web server).

Note: zipping the font-apex folder will enable us to upload only that zipped file instead of every single file from the folder using the zip file will also keep the folder structure.




You will end up with the following files:



Then, let's remove the Font Awesome and include the Font Apex.



Notes:
Step 4 removes the Font Awesome reference.
Step 5 uses the Font Apex CSS file reference from above step. Notice that the .min was replaced by #MIN#
From help text:
If you provide a minified version of your file you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode. 

At this point, if you try to run your application, you should be able to see most of the Font Apex icons.

There are some tweaks we still need to do so that everything is displayed nicely.
First, there is still a class that uses the "font-family: font-awesome;", which is used by the expand/collapse navigation menu button.

The other thing we need to change is the height of the icons.
Font Awesome uses 14x14 icons whereas Font Apex uses 16x16 icons. Some icons might not be displayed correctly. The expand/collapse navigation menu button is also one of those.

Here's the CSS that is required to fix these.

.t-Icon[class*=' fa-'],.t-Icon[class^=fa-]{
    font-family: font-apex!important;
    font-size: initial;
}

.t-TreeNav .a-TreeView-node--topLevel>.a-TreeView-content .fa{
    font-size: initial;
}

Enjoy Font Apex in your Apex 5.0 applications!

Edit 1: The Custom Prefix Class attribute needs to be set to "fa"

Edit 2: Scott Wesley has a nice followup to this: http://www.grassroots-oracle.com/2017/03/font-apex-between-versions.html

Friday, December 2, 2016

Overlay Side Navigation Menu

In the last couple of weeks, I've been playing with the side navigation menu. By default, the side navigation menu "pushes" the page content back and forth as it expands and collapses.
Which looks just like this:


By overriding the Universal Theme's CSS related to the side navigation menu, I was able to make the menu display as an overlay.

I've also tested the solution on the Apex 5.1 EA2 and noticed that the html markup of the menu changed quite a bit in order to handle RTL applications.

You can retrieve both CSS here:
https://github.com/maxime-tremblay/apex-css-overlay-sidemenu

Then will need to include the corresponding CSS file either in the theme roller's custom CSS attribute or as an external file in your application's CSS files.

Additionally, by default, the side navigation menu remembers the previous state it was in. So if on a page you expand the menu and refresh it, the menu will be rendered as expanded.

What we can do to prevent that from happening is have some JavaScript code execute on page load that is going to collapse the menu if it's expanded.
$('.t-PageBody.js-navExpanded #t_Button_navControl').click();

That code can be executed as a dynamic action on page 0 or in a global JavaScript file so that it's going to affect all pages in the application.

You will get something that looks like this:


If you would like to have the menu be fullscreen you can simply uncomment the fullscreen part at the end of the CSS file.

You can have a look at my Demo Application

Thursday, November 24, 2016

Right Side Column Page and Validation Error Message Region

If you ever used the "Right Side Column" page template, you might have noticed that the validation error message region is displayed under the right side region's expand/collapse trigger button.


As you can see above, the expand/collapse trigger button is on top of the close notification "X" button.

There are two ways to go in order to fix that, both using CSS only.

The first method is to add some right margin to the notification region.

.js-rightExpanded .t-Body-content .t-Body-alert,
.js-rightCollapsed .t-Body-content .t-Body-alert {
    margin-right: 40px; /* Width of the right side region's trigger button */
}

It will then look like this:

The second method is to reposition the notification region on top of the right side region's trigger button.

.js-rightExpanded .t-Body-content .t-Body-alert,
.js-rightCollapsed .t-Body-content .t-Body-alert {
    position: relative; /* Need to position the div for the z-index to work */
    z-index: 500; /* z-index of right side column is 490 */
}

It will then look like this: