APEX: Quick Pics. From Replace to Append

Compatibility: APEX 4.2.2, IE 10

Our today topic is about quick picks in APEX. To be precise, here we are going to change the "replace" functionality to "append" so that the picked value could be concatenated to existing item input.

What is this?

My approach to the building apps is "the less typing and clicking end users have to do, the happier they are". Moreover, the developer is also getting happier as the chance of incorrect data in this case is quite low. So, one of the multiple ways to make application users life easier is to provide them a list of predefined values to pick from - Quick Picks.

Easy to set up!

Item Property -> Quick Picks

And they look like this:

The problem is...

To looks great and can be set up easily, isn't it? But there is a problem - their predefined behaviour. Each time you click on it, it replaces everything in the input field with the value defined. So, in case of email address, where logically the value must be added to the username, this functionality must be changed.

Let's investigate

Let's have a look what APEX is doing to quick pick values on the background. 

Open the application page and press F12 to bring up browser developer tools window. Click on the arrow to explore the element:

Pick the element (your quick pick):

As we can see, the quick picks table is being converted to <a> tags with the function $s that is causing the replacement:  

The Solution is...

Actually very easy. We will redefine the function on the page level. So,
Page properties -> JavaScript -> Function and Global Variable Declaration:

function $s(pItem, pValue, pText) {
  var itemSelector = "#" + pItem;
  var currValue = $(itemSelector).val();

  $(itemSelector).val(currValue+pValue); 
}

Note, this the basic solution and it will affect all elements on the page which are using $s function. To narrow down the scope of elements, more specific selectors and/or conditions must be used in the code.

Useful Links
APEX API Reference - $s function 
CSS Selector Reference

Enjoy!