Tuesday 11 December 2012

Twitter Bootstrap Checkboxes and APEX 4.2

The issue:
I had an APEX application in which I included Twitter Bootstrap during development.  This application was developed prior to the grid layouts and Twitter Bootstrap being shipped with APEX 4.2.  The below fix works successfully for firefox only.
This is what happened on my page in both IE and Firefox.  There is extra white space to the right of my page:

After spending some time looking into this, I realised the issue was related to the checkbox items on this page and the same happened on other pages.
When I looked at the html for the checkbox in firebug, I found the following:
<fieldset class="checkbox_group" id="P11_CK1" tabindex="-1">
<legend class="hideMeButHearMe">test</legend>
<input type="checkbox" checked="checked" value="Y" name="p_v11" id="P11_CK1_0"><label for="P11_CK1_0">Show Planned Spend</label>

</fieldset>
If I then removed the “legend class” from the html, the white space disappeared and my page reverted to the correct size.
As Bootstrap is now shipped with APEX 4.2, my next step was to check the css contained within the original Bootstrap css file I included for the “legend class”.  It contained the following:
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 27px;
  font-size: 19.5px;
  line-height: 36px;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #eee;
}
After this I checked the css shipped with APEX 4.2 and realised there was a conflict so I commented out the “legend class” directly in the originally included Bootstrap css file:
This is line 889 – 901 in the version of the “bootstrap.css” I’m using.
/*
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 27px;
  font-size: 19.5px;
  line-height: 36px;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #eee;
}
*/
The css shipped with APEX 4.2 is then used and the problem resolved.

Wednesday 21 March 2012

It's a Theme Changer

A couple of times recently I have been asked how you can change the colours of APEX report and change the styling of the application without changing the theme.   I created a quick app so I could give example.

The way I tend to do this is create a separate style sheet that overwrites the standard APEX style sheet.  I also use firebug to help me do this as it certainly makes life easier.

If you dont have firebug Its definitely something I would recommend, my preferred browser to use it with is firefox but you can get lite versions for other browsers too.

First of all I would find the styling for what I want to change by inspecting the element in firebug and change it on the fly to preview my changes

Here’s how my homepage looks before any changes with the logo currently been inspected


Next I want to show my current CSS shown in firebug when I have inspected the logo text on my page


Next my CSS after I changed it in firebug on the fly


Now my logo with styling changed


I can then very easily copy and paste my changes I made in firebug into an external CSS file that will be used to overwrite the standard CSS permanently.
I also changed the styling of my employee report and the region title by changing it on the fly then copying it into my file


Once I have created my file I can then either store it on my server or upload to APEX
To upload to to APEX you can navigate to shared components then Cascading Style Sheets and upload the file

By doing this I can then reference the file inside my page template underneath the standard CSS or alternatively on each page by adding to the header text in the page definition


Once I have then linked the file my changes are then included on the page

One thing to be aware of is if you include the CSS in the page template then it will be modified on every page.

Thursday 1 March 2012

Easy Email Example

This ones a very quick post about a regular expression I use all the time to validate email addresses within my applications.
A while a go now I had the need to do this and I believe got the regular expression from http://regexlib.com and added into my application.
The regular expression which hasn’t failed me as yet is:
^((\s*[a-zA-Z0-9\._%-]+@[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,4}\s*[,;:]){1,100}?)?(\s*[a-zA-Z0-9\._%-]+@[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,4})*$
This should let all valid emails through and find all emails which aren’t valid.
This is how it should look when implemented.  Obviously the item its linked to will very depending on the name of your item.

Saturday 25 February 2012

Dynamic Action Hide and Show Example

Recently I have seen a few people posting on the forum asking how you can hide and show items in APEX 4 and above, because of this I thought I would do a quick example.
The example is based on a simple registration form where a user can either choose to complete a private registration or register with company details.
I didn’t require the company information from the user if they was registering privately so I wanted to hide these fields.
So this is what I did, the first thing was to create my page items:



Page 102 is where I created my items and is where they will appear.  The item that determines if they are hidden or shown is the P102_REGISTRATION_TYPE which is a select list item and has the following static values:  STATIC2:Private;PRIVATE,Company;COMPANY
The next step is to create a dynamic action that will hide and show the various items.
First we have to say when it will fire

This states that when the P102_REGISTRATION_TYPE item which is the select list is changed and has a value of COMPANY then we want to the true actions to fire if not then the false actions should fire
The true and false actions can be seen below


So in the true actions I wanted to show the company items but hide the address item as I don’t need both a company and personal address.
In the false action I needed the address but nothing else
I have also checked the box when creating them that states that I want it to fire on page load.
This is a very simple way to hide and show items in a page dynamically without the page needing to be reloaded each time the select list is changed.
Previously jQuery was used to perform such actions but with the inclusion of dynamic actions in APEX 4 this became very simple using the approach above.

Monday 13 February 2012

2011 Highlights

I wanted to detail some of my highlights from 2011:
  • Graduating from Leeds Metropolitan University in July where I graduated in a first class honours degree in computing.
  • Beginning working full time for APEX_Evangelists after finishing university and after having worked part time for them previously.
  • Speaking at Kscope for the second time, it was another fantastic opportunity and experience
  • Speaking at UKOUG for the first time. Having such a large room and so many people interested in what APEX has to offer really shows the growing interest in the product
  • APEX_Evangelists also launched the APEX Quiz which can be found athttp://apex-challenge.com as part of the PL/SQL Challenge website