Monday, March 16, 2015

Working with multiple Trees on the same APEX Page (4.2/5.0)

Ever tried to put multiple Trees on the same page in APEX 4.2?

Here's my example:


On the left Tree the "Selected Node Link with" is set to hidden item P1_TREE1, on the right Tree the value that sets the tree is set to P1_TREE2. At least it should do that, but by default if you're values are not unique - in this case empno is the value behind both trees - it doesn't work...
Your first tree will be highlighted twice; one time for ALLEN and one time for SCOTT and not as it should be, on the left ALLEN selected and on the right SCOTT selected.

To fix this issue in APEX 4.2, you need to adapt your select statement so you have unique values for both trees. I typically put a meaningful character in front of the value; for example you can concatenate 'N' for new values (new tree) and 'O' for old values (old tree).


So that fixes the issue of the "Selected Node Page Item" issue with non unique values.
Behind the tree implementation in APEX 4.2, jsTree is used. APEX is not using the most recent version and the way the JavaScript is coded doesn't really work that nicely. If you really like jsTree and for example want to search in it, or you have a very large dataset, check out Tom Petrus' tree plugin and explanation.

So what about APEX 5.0? The tree implementation in APEX 5.0 has the same functionalities, but is a lot better. Behind the scenes jsTree is not used anymore, instead the tree that is also used in the Page Designer is used. The issue with unique values is off the table, so no worries anymore in APEX 5.0.


Thursday, March 12, 2015

APEX 5.0: pimping the Login page

When you create a new application in APEX 5.0, the login page probably looks like this:


I love the build-in login page of APEX itself - luckily it's easy enough to build that in our own apps too. Thank you APEX Dev team!

The first step is to change the region type to be of Login Region Template:


We want to add a nice icon on top of the Login text. You can use the Icon CSS Class in the Region options - in this case I opted for fa-medkit:


Next up is making the Login button bigger and make it the complete width like the items.
In APEX 5.0 you can use the Template Options to do that:


Once we stretched the Login button it fits the entire size.

Next up is getting some icons in the username and password field.
For the username we use the "icon-login-username" css class.
Instead of the label we make that hidden and specify a placeholder, so before you start typing you see the word username and when you start typing the text disappears.


For the password field we do the same thing, but for the css class we specify "icon-login-password".


Finally your login screen looks like this:


Great? Absolutely - and so easy with APEX 5.0!

What's next? Is there anything better? Euh... yes, what about live validation?
Sure we can do that in APEX 5.0 without too much hassle :)) Thanks once again APEX Dev Team!

In the item make sure the item is set to Value Required and add in the Post Text following span:


That will give you a nice visual indication if you entered text:


Cool? Creating login pages in APEX 5.0 is ... (you fill in the word)

Interested in more? We're doing an APEX 5.0 UI Training in May.

Tuesday, March 10, 2015

Loading CSV files with special characters in Oracle DB

I often need to load the data of Excel or CSV files into the Oracle Database.

Ever got those annoying question marks when you try to load the data? or instead of question marks you just get empty blanks when the file is using special characters? Here's an example:


My database characterset is UTF-8, so ideally you want to load your data UTF-8 encoded.

With Excel I've not found an easy way to specify the encoding to UTF-8 when saving to a CSV file.
Although in Excel (OSX) - Preferences - General - Web Options - Encoding, I specified UTF-8, it still saves the file as Western (Mac OS Roman).

I've two workarounds I use to get around the issue. Open the file in a text editor e.g. BBEdit and click the encoding option and select UTF-8.


Another way is to open Terminal and use the iconv command line tool to convert the file

iconv -t UTF8 -f MACROMAN < file.csv > file-utf8.csv

If you get a CSV file and you want to import it in Excel first, the best way I found is to create a new Workbook and import the CSV file (instead of opening directly). You can import either by using File - Import or Data - Get External Data - Import Text File. During the import you can specify the File origin and you can see which data format works for you.


After the manipulations in Excel you can save again as CSV as outlines above to make sure you resulting CSV file is UTF-8 encoded.

Finally to import the data you can use APEX, SQL Developer or SQLcl to load your CSV file into your table.

Monday, March 09, 2015

Oracle Database Tools updated - check out SQLcl

Today Oracle released new versions of:

Also Oracle REST Data Services 3 got a new EA2 version.
You may want to check Kris Rice's blog for new features.

I already blogged about all of the tools before, but not yet about SQLcl.
This is a command line tool, I call it "SQL*Plus on steroids" (or as Jeff calls it SQL Developer meets SQL*Plus). It's particularly useful when you're on your server and quickly need to run some queries. Or if you're a command line guy/girl all the time, this tool is for you.

Here's a screenshot how to connect to your database with SQLcl from Linux.


Typing help will show you a list of quick shortcuts.

For example if you type APEX you get a list of your APEX applications


What I really like about SQLcl is that it formats the output so nicely. With SQL*Plus you had to set column widths, page sizes etc. Not with SQLcl, it's smart and formats it nicely.

Next to that you can quickly output your query in JSON format by typing "set sqlformat json":


There're many more features - a good starting point is this presentation and video by Jeff Smith.

Monday, February 23, 2015

APEX 5.0: the way to use Theme Roller

Once you have your new application created using the Universal Theme it's time to customise your theme with Theme Roller.

Run your application and click the Theme Roller link in the APEX Developer Toolbar:


Theme Roller will open. I won't go in every section, but want to highlight the most important sections in Theme Roller in this post:
  1. Style: there're two styles that come with APEX 5.0: Blue and Gray. You can start from one of those and see how your application changes color. It will set predefined colors for the different parts of the templates.

  2. Color Wheel: when you want to quickly change your colors, an easy way to see different options is by using the Color Wheel. You've two modes: monochroom (2 points) and dual color (3 points - see screenshot). By changing one point it will map the other point to a complementary color. Next you can move the third point to play more with those colors.

  3. Global Colors: if the Color Wheel is not specific enough for what you need, you can start by customising the Global Colors. Those are the main colors of the Universal Theme and used to drive the specific components. You can still customise the different components e.g. the header by clicking further down in the list (see next screenshot).

  4. Containers etc. will allow you to define the specific components. A check icon will say it's the standard color coming with the selected style. An "x" means the color was changed and an "!" means the contrast is probably not great.
Original with style After changing colors


This is just awesome... but what if you don't like the changes you did?

Luckily you can Reset either your entire style or you can refresh the specific section by clicking the refresh icon. There's also an undo and redo button. But that is not all... for power users when you hit "ALT" when hovering a color you can just reset that color! (only that color will get a refresh icon in it and clicking it will reset it)

Note that all changes you're making are locally stored on your computer in your browsers cache (HTML5 local storage), so you don't effect other users by playing with the different colors.

Finally when you are done editing your color scheme you can hit the Save As button to save all colors to a new Style. When you close Theme Roller the style will go back how it was.
The final step to apply the new style so everybody sees that version, is to go to User Interface Details (Shared Components) and set the style to the new one.

Note that this blog post is written based on APEX 5.0 EA3, in the final version of APEX 5.0 (or 5.1) you might apply the new style from Theme Roller directly.

Want to know more about Theme Roller and the Universal Theme - we're doing an APEX 5.0 UI Training May 12th in the Netherlands.

Thursday, February 05, 2015

APEX 5.0 Fixed Headings for Interactive Reports

When you click on the Attributes of your Interactive Report there's a neath little new features included called "Heading - Fixed to" with as options: None, Region and Page


We've got this request from many customers and it has always been a pain to get it working in every condition with APEX 4.x, but no hacking anymore - it's there now in APEX 5.0.
When you start to scroll the column header will move up and the content will scroll underneath it.

Here's a quick demo:

Wednesday, February 04, 2015

APEX 5.0 EA3 - Universal Theme Styles - Gray!

In APEX 5.0 theme 42 is included - this is the Universal Theme. The theme comes with two styles: Blue and Gray.


The UI is so much improved in APEX 5, it's really a game changer. When you look at the details for example from such a style you will see it's using a Less file (Less is a CSS pre-processor) behind the scenes. So it's very easy to make changes to the CSS. But you probably even don't need to do that as the development team allows you to make customisations with ThemeRoller which generates JSON (another nice example where JSON is used - interested in JSON - I did some other posts on this blog about JSON).

To change the color for example, below you see the JSON for that.


Note that Theme Roller will generate the JSON for you. Accept from those customisations, the blue and gray style are using the exact same css.

From the Blue style many screenshots have been posted already, but I love the Gray style too, here's a screenshot when you switch the sample application's style to Gray.