One of the great features of APEX is the possibility to import JavaScript plugins and css libraries into the application, just by referencing an external link or uploading a .js file.
There are several JavaScript plugins available online that can be used to easily add new functionality to you application. When you add a JavaScript library to a page or application, you usually do the following steps:
As an example, I will use a simple but very useful JavaScript plugin to create real-time masks (https://github.com/igorescobar/jQuery-Mask-Plugin)
1. Upload the files to the Static Application or Workspace files
2. Load these files on application or page level (I will do it page level)
3. Call the JavaScript function.
Next, I will show how to implement this same functionality as an APEX plugin. The advantages of having APEX plugins comes since no JavaScript knowledge is required to used it, and they can be easily exported and imported across different applications.
Now, you must define a PL/SQL anonymous block that contains a function for rendering, validating, execution and Ajax callbacks for the plug-in. This can also be stored in the database.
/* When you create an item plugin, you must create the following interface. */
PROCEDURE render_mask_field (p_item in apex_plugin.t_item,
p_plugin in apex_plugin.t_plugin,
p_param in apex_plugin.t_item_render_param,
p_result in out nocopy apex_plugin.t_item_render_result
)
IS
/* Here we define a plugin attribute used by the developer to set the item mask */
lv_format_mask varchar2(100) := p_item.attribute_01;
/* We need to call the following function to allow APEX to map the submitted value to the actual page item in session state.
This function returns the mapping name for your page item. If the HTML input element has multiple values then set p_is_multi_value to TRUE.*/
lv_item_name varchar2(1000) := apex_plugin.get_input_name_for_page_item(false);
Begin
/* This outputs the necessary HTML code to render a text field*/
sys.htp.p('<input id="'||p_item.name||'" class="text_field apex-item-text '||p_item.element_css_classes||'" name="'||lv_item_name||'" size="'||p_item.element_width||'" type="text" value="'||sys.htf.escape_sc(p_param.value)||'" placeholder="'||p_item.placeholder||'" />');
/* Here we call the javascript to set the mask to the item $('#P1_TOTAL').mask('000.000.000.000.000,00'); */
apex_javascript.add_onload_code('$("#'||p_item.name||'").mask("'||lv_format_mask||'")');
End render_mask_field;
4. Now we set the name of render function
5. Supported for: We must define where the plugin is supported, where it is available in the Builder, Page Items and/or Interactive Grid Columns. Also if the plug-in is displayed in the Builder as a supported component for desktop and/or mobile.
6. Standard Attributes: For Item type plug-ins, identify the attributes that apply to this plug-in:
7. Now we must save, so APEX will identify the plugin type and add some plugin options, we must create the format mask custom attribute.
8. JavaScript Files: basically, what are we going to do next is similar of what we do to use JavaScript on a page level, upload and load the JavaScript File.
Finally, we can save and use the plugin. Just create a page item and change the item type to the plugin that we just created.
Author: Rodrigo Mesquita
Job Title: Oracle APEX Development Consultant
Bio: Rodrigo is an Oracle ACE and APEX Developer Expert certified by Oracle and is an experienced software engineer with emphasis in analysis, design and development of bespoke Oracle applications utilising development tools such as PL/SQL, APEX and Forms for a variety of international businesses. Rodrigo speaks regularly at Oracle community events and enjoys creating APEX plugins and writing blogs.
