Friday, 13 January 2017

Plug-in for time input for touch devices

In februari 2015 I published a blogpost about a new form of time entry on smart phones. Now I have wrapped this control into an Apex plug-in. 

The essence of the control is that you draw the hands of the clock on your smartphone instead of  entering or choosing the time in digital format.
In my experience it feels much more intuitive. It is also very fast way for entering time values. 



The next link will take you to a page where you can try this control.

http://www.speech2form.com/ords/f?p=opfg:time_input_demo

The control is designed for touch devices. In a desktop browser you can click on the numbers in the analog clock to select the hours or minutes.

If you want to try the control on your phone or tablet you can have an email with a link to the demo page sent to you. Enter your email address below and press the 'Send link by mail'. Your mail client will open and you can send the mail.

Send to email address     Send link by mail
( Your email address is not stored )



How to use the control

Below is an explanation of the control:

  • Touch the clock image next to the time input field and the time input control will appear.
  • In the center is the analog clock in which the hands can be drawn. 
  • Above it you see the digital time with buttons for changing to AM or PM. 
  • Below it are buttons to Accept of Cancel. 
  • You can draw a hand by moving your finger from (approx.) the center of the clock outward toward one of the numbers. 
  • The accuracy of the clock is 5 minutes
  • The active hand and the active part of the digital display are indicated by a red color
To enter 10:15 you start at the center of the clock and swipe towards the 10, then release.
The hour in the digital time display above the clock will display 10 and the minutes will have turned red (=active). Then start in the center of the clock again moving toward the 3 this time. When you release you will notice that the digital clock displays 10:15.
The time is initially interpreted as a value between 7:00 and 19:00.
To change to PM touch the PM button.
If you are satisfied you can press OK to save the time. Cancel returns to the form without saving the time.

Apex Plug-in

This control is now available as an Apex dynamic action plug-in.
You can find it at the plug-in section of apex.world.

The settings of the plug-in allow you to:
- define the output time format ( application attribute )
- define the default time window base ( component attribute), see explanation below

Using a default time window

The analog displays a 12 hour period, while the day consists of 24 hours. This is tackled by the AM/PM indicator. It is however not very user friendly if you have to press the PM button each time you want to enter a time after noon. Therefore the concept of a time window is introduced. In many cases your application will accept times in a certain ranges. For working hours registration this might be between 7:00 and 19:00.
It is possible to interpret the chosen times to that specific period. So hour=8 will yield 8:00 and hour=5 will result in 17:00. In this example the time window is from 7:00 to 19:00 and the time window base is 7.

The time window base can be set as component level attribute. The user can overrule this setting by using the AM or PM buttons. So if the user enter hours=5 and presses the button AM, the resulting time will be 5:00.

I would really like to hear whether you think this control useful. Or maybe you have  suggestions on improving it.

Happy developing,

Tuesday, 10 January 2017

Plug-in for copying to clipboard

It is a hobby of mine to generate code. I use Apex as a shell to enter the parameters and display the result. Usually the result is a text area in which the code is contained. After generating the text I can select the code and copy the result to the clipboard. But I want it to be a bit more comfortable.

So this is why I developed this plug-in. It is a dynamic action plug-in that you can use in any DA, but usually it will be a DA fired from a button. It is used in the page to generate substitution code:



Implementing this functionality is as easy as importing the plug-in and call it in the dynamic action behind the click on the button. Select the item of which the content should be copied and you are off to go:


You can see this plug-in in action on the demo page for this plug-in.

You can find the plug-in on apex.world.

Happy Apexing!

Sunday, 8 January 2017

Plug-in for resizing modal dialogs

Some weeks ago I wrote about automatic resizing of modal dialog to fit the content. Since then my new hobby is Apex plug-in development, so I decided to create a plug-in for this. The plug-in works on Apex 5.0 and 5.1.

New resizing functionality for modal dialogs in Apex 5.1

In reaction to my previous post Shakeeb Rahman tweeted that the resizing was on of his favorite features of UT in Apex 5.1. After getting Apex 5.1 this was of course one of the first things for me to investigate. At first nothing happened, then I realised that the compatibility probably should be set to 5.1 in the Application properties:



And then the modal was indeed resized on load. But not always as I expected, as you see on the demo page http://www.speech2form.com/ords/f?p=opfg:resize_dialog. On this page you can de-activate the plug-in. The application is set to Compatibility 5.1, so you can observe the new behavior. 
The report scales all right, but the dialog with the form items does not. It may be a timing issue, in that the display of the items happens after the setting of the height. 
So on Apex 5.1 the plug-in extends the new resizing functionality. 

The plug-in

Anyway, the Resize Dialog plug-in gives you control over the moment and the way of resizing. 
It is a Dynamic Action plug-in that can be called at Page Load or as in the example below on After Refresh for a report. The plug-in works on Apex 5.0 and Apex 5.1. 

Apart from resizing the plug-in also:
- guards the dialog from running of the page
- enables to define margins around the modal dialog
- enables vertical centering of the dialog

The margin size and the enabling of centering can be set with custom attributes. 



The plug-in can be downloaded on http://apex.world.

Happy Apexing

Sunday, 1 January 2017

Plug-in for Splitting reports into columns

In November I posted about splitting an Apex Report into multiple columns. This solution involved some JavaScript code to be included and called from the Apex page.

One of the comments I got was a question whether the items could also be sorted horizontally. With a small number of rows the current code can result in less columns than specified. I decided to implement this feature:



I also realized that creating a plug-in would make it much easier to implement this functionality. No need to add JS code, call this code at some point and figure out the right value for the parameters...

So here is my first (public) plug-in, Report2columns.
The easiest way to get the plug-in is om the Plug-ins page of  apex.world:


To use it:
  • import the plug-in 
  • create an After Refresh trigger for your report 
  • chose the action report2columns [Plug-In] 
  • enter the number of columns and the sorting direction
That's all there is to it.

 Happy Apexing

Monday, 26 December 2016

New icons in Apex 5.1

Apex 5.1 ships with a large set of icons. These are contained in a font called Font Apex.
This font contains 1000+ icons. Part of the icons are Font Awesome V4.7 based, others are specifically designed for Apex. The Font Awesome based icons are less bold, as you can see in the menu icons below. Original Font Awesome to the left, Font Apex to the right.


Scaleability

Because the icons are less bold they are more suitable for enlargement. Font Awesome icons look a bit bulky after enlargement, the largest one is 3em:



while Font Apex stays elegant :


Applying Font Apex

You can activate Font Apex in the properties of the theme ( Shared Components > Theme > Specific Theme > Icons ):



The HTML to use Font Apex is exactly the same as with Font Awesome. Font Apex also has the classes .fa and .fa-nameBecause Font Apex is a superset of Font Awesome v4.7 you can toggle between the two font as long as you do not use Font Apex icons.

List of icons

You can find a list of available Icons on this page

There are three categories of icons: 
- Font Awesome based: icons based on Font Awesome 4.7 with the same name
- Apex icons: mostly technical icons
- Emoji's: emoji icons




Friday, 23 December 2016

Using APEX_MAIL outside of Apex

Update: This post applies to Oracle schema's that are not assigned to an Apex workspace. When assigned you can use the solution setting the Apex security ID. 

To send mail from your application you can use the package APEX_MAIL. I had created a package to send daily status mails and everything worked fine when called from within the application. So I thought I was almost ready... Then I tried to call the package from SQL Developer :

Error in Send daily mail: ORA-20001: This procedure must be invoked from within an application session.

A Google search quickly revealed the solution. The Apex workspace ID should be set.
Alas, this did not work ( anymore? ).
Update: This solution did not work because the Oracle schema was not asssigned to an Apex workspace.

I did not want to rewrite the logic so I had to figure out a way to call the package from within the Apex context.
It can be done using a public Apex page sending the mail. This page is called from PL/SQL using UTL_HTTP. The use of the page is restricted by using a secret parameter.
Read on to see how it works in detail.

Database

In the database we have a package mail_pck to send the mails. We add the following code to this package:

create or replace package body mail_pck is

  -- autorisation code 
  -- NB do not use special characters for URL's like '?', '&' etc.
  g_aut_code      varchar2(100) := 'secret_string';  
                                  
...

  procedure send_mails_using_apex_mail is
...

  -- return the autorisation code
  function get_aut_code  return varchar2 is
  begin
    return ( g_aut_code ); 
  end;

  -- check the autorisation code
  function check_aut_code ( p_code in varchar2) return boolean is
  begin
    return ( nvl(p_code,'x') = g_aut_code ); 
  end;

  -- calls Apex page from which mail is sent
  procedure batch_send_mails is
    l_url       varchar2(1000) := null;
    l_result    varchar2(4000) := null;
  begin
    l_url    := alg_pck.get_parameter('SERVER_URL')||'/ords/f?p='
                ||alg_pck.get_parameter('APP_ID')
                ||':9000:0::::P9000_CODE:'||get_aut_code;
    l_result := utl_http.request(l_url);
  end;

end mail_pck;


The schema for this package should be granted to execute utl_http.
An ACL should be created to access the Apex server. This ACL should be granted to the schema.

Apex

Create a page in Apex with
Page Number : 9000 ( for this example )
Authentication : Page is public

Create a page item
Name : P9000_CODE
Type: Hidden

Create a branch
This branch fires a redirect when the code is not correct
Name: To login page when code is not valid
Process Point: Before header
Type: Page or URL (Redirect )
Target page: LOGIN_DESKTOP
Condition Type: PL/SQL Expression
PL/SQL Expression: not mail_pck.check_aut_code(:P9000_CODE)


Create a PL/SQL region
This PL/SQL region performs the sending of the mails
Name: Send daily mail
Code:
begin
  mail_pck.send_mails_using_apex_mail;
  sys.htp.p('Mails sent.');
end;
Condition Type: PL/SQL Expression
PL/SQL Expression: mail_pck.check_aut_code(:P9000_CODE)


Happy Apexing!

Thursday, 8 December 2016

Automatic resizing of modal dialogs

The modal dialogs are a very nice feature, easy to use and well integrated in the Apex framework. One thing that annoys me is the vertical sizing of the dialog window.
Normally I will create a page as a Modal dialog. When running it I notice that the window is way too high or not high enough. I go back to the builder and enter a number of pixels for the height and look what the result is. I repeat this process a few times until I am satisfied.



When the page is changed this may  change the height of the page, so... :-(.
This is typically one of these boring jobs I like to automate. So I examined the structure of the Apex modal dialog.
One thing that is counter intuitive is that the header of the modal dialog is part of the calling page. Only the red part is generated from the modal dialog page.


The height of the modal window is defined in the calling page. This is the reason why you have to refresh the calling page when you change the height of the modal dialog.

Inside the red square the height is determined by three div elements: dialog header, dialog body and dialog footer.
The JavaScript code below determines the total height of the dialog and sets the height of the determining element on the calling page to this value.

function resize_dialog()
{
  var header  = $('.t-Dialog-header');
  var height  = parseInt($(header).height());  
    
  var body    = $('.t-Dialog-body');
  var padding = parseInt($(body).css('padding-top')) + parseInt($(body).css('padding-bottom'));
  height += padding;
    
  var container = $(body).children().first();
  height   += parseInt($(container).height());  
    
  var footer    = $('.t-Dialog-footer');
  height   += parseInt($(footer).height());  
  console.log('total height = '+ height );

  parent_container = window.parent.$('.ui-dialog-content');
  $(parent_container).height(height);
}


This code can be called in the On page load section of the dialog page.


It is also possible to call the function in a Dynamic Action that changes the height of the dialog content. Two examples of this behavior can be seen in the example page here. You can change the number of rows or number of items and the dialog is resized automatically.

Happy Apexing!