Wednesday, 30 April 2014

Shared authentication across multiple APEX applications

Quite a few times I see a questions regarding how to share authentication between Oracle APEX applications so the user does not need to log in a second time.

As long as your link between the applications share the session ID, the solution is simple - set the cookie name the same across your applications.
Shared components -> Authentication Schemes -> Edit current scheme -> Session cookie attributes -> Cookie Name
Set same cookie name across applications
This can help release management as you can modularise your applications. You could have a simple login/menu application that links to all your other applications.
Possible application map
If you wanted you could provide access to your application suite using different authenication mechanisms.
ie - if you log into application B using DB accounts, you can still hop across to application A.

The drawback I've found is that post-authentication will only fire during your initial login (in the relevant application). This means you need to be aware how to handle and share your authorisation mechanisms.

Divide and conquer!

Edits: 

If you're on 18.1 (5.2), you may be interested in the Social Login feature. Dimitri has a detailed post.

If you're on 18.2, you'll need to set Type to 'Custom', or (carefully) consider the Workspace sharing option.


APEX 18.2 options

(Oct18) I'm currently writing a presentation on this topic, stay tuned.

Tuesday, 22 April 2014

Adding CSS buttons to your report

I've liked this concept ever since I saw the packaged applications use this technique:


I've finally gotten around to posting this in part due to some feedback on my sample application.

Edit May 2018
It's still a great concept, but the Universal Theme allows you to just reference existing classes. Check out an example here.

I used Chrome's inspect element tool to extract the CSS required to create this effect.
According to my notes I first did this when the Bug Tracking application used Theme 24.

You can then modify this to suit your requirements. I've changed the buttons from orange to green in my sample application. You can also change the size of the buttons using the last three attributes (highlighted) - something I've done to suit people's fingers tapping the screen in tablet based applications .

a.uButton.uButtonGreen {
  border: 1px solid #55a955;
  border-bottom: 1px solid #55a955;
  background: #55a955;
}
a.uButton.uButtonGreen span {
  background-color: #e6f0e6;
  background-color: #e6f0e6;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#e6fae6', endColorstr='#e6f0e6');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6fae6', endColorstr='#e6f0e6')";
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e6fae6), color-stop(100%, #e6f0e6));
  background-image: -webkit-linear-gradient(#e6fae6,#e6f0e6);
  background-image: -moz-linear-gradient(#e6fae6,#e6f0e6);
  background-image: linear-gradient(#e6fae6,#e6f0e6);
  color: #404040;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
  padding-bottom:10px;
  padding-top:10px;
  width:85px;
}
You could also rename the classes to help prevent clashes with existing usage.

You can place this CSS within the "Inline" CSS page attributes, or more appropriately in your own CSS file that you would place in your images folder, perhaps in /i/themes/my_app/custom/ or uploaded to your APEX workspace.
Some define their own custom virtual path /c/ in the application server.

You would then include this file in your application from within your page template, conveniently highlighted in red below.
CSS referenced in Page Template

In this case I defined a substitution string in my application properties, that way I only need to define the location once and refer to it in a number of templates.
Shared Components -> Application properties

Now in every report you wish to use the classes you apply the following properties to the link column.
The link text could reference data from the report using the #COLUMN# syntax
<span>#ID#</span>
And the link attributes tag the span with the class you wish to reference.
class="uButton uButtonGreen"

These link attributes are a powerful tool, I use them frequently in conjunction with dynamic actions using jQuery selectors.

Have fun!

Wednesday, 16 April 2014

Show APEX IR detail view by default

Since the Detail/Icon views were introduced to Interactive Reports in Oracle APEX 4.0, I've used the detail view a number of times to represent information in ways that don't even look like your standard columnar reports.

One example you may have seen was the original apexblogs.info - this was a detail view IR showing aggregated posts of APEX bloggers.
It's now hosted at odtug.com/apex and this appears to use an alternative method - Named Column report template. I now feel this is probably more superior and deserves it's own post.

I also thought the APEX 4.2 builder application search was another candidate, but looking under the hood it doesn't appear so. If you were just observing as a user you'd say ifthis wasn't implemented with an interactive report detail view, it certainly could have been.

Trouble is these Detail Views aren't shown by default. Good thing is this has a simple solution, though the mechanism may change in APEX5 or other versions.

All you need is to add this when the page loads, either under page attributes or as a dynamic action.
gReport.data.view('DETAIL');
'ICON' is the other accepted actual parameter.
Page attributes - JavaScript
And you may wish to exclude the IR search bar - allowing you to provide your users with a very customised, dynamic layout as soon as the page opens, and they won't even know it's an IR - though depending on the speed of your browser you may see the standard view rendered before the JavaScript kicks in.

Suggested links

Oracle Docs - Enabling detail view
Understanding detail view [video]
Oracle APEX Techniques - video course that includes this clip

Friday, 4 April 2014

APEX Shortcuts Use Case

Recently Martin described APEX Shortcuts, a shared component that I don't often use - and probably even less now.

APEX wizards create them for the delete process in forms, but I thought I'd describe an example of how you might use one for your own needs.

The sole purpose I've used them is to generate HTML text from PL/SQL - often for links to appear near text items. For example, you could use them to

  1. Provide a quick way to clear the text in a field
  2. Populate a date picker with today's date
  3. Generate a list of quick picks, derived from a ref codes table.
The last one is now superceded by a the Dynamic Quick-Picks plug-in.

To show the simplest example, here is how you can add a link to clear an item. First, define the shortcut as some PL/SQL that simply returns some generated HTML - the link that clears the item. Note we can use #CURRENT_ITEM_NAME# to substitute in the relevant item.

Create APEX Shortcuts from Shared Components
Then we refer to the shortcut name in the Post Element Text of the item. Note the "SHORTCUT_NAME" syntax, which should be in uppercase. This renders the shortcut value after the item.
Item property using an APEX shortcut
The final output will differ depending on your theme, but here is a screenshot from my sample app that uses a bare-bones theme 25.
Final runtime result
Relevant documentation can be found here.

What I would like to know is why they're called shortcuts!?