Working with the APEX tree

TREE

Working with the APEX tree

Von Tobias Arnhold → 6.27.2018

Out of a coincidence I haven't used the APEX tree region for years. Now I got the task to create a customizable tree in my application. Since APEX 5 there is a new tree type called "APEX tree" which supports some really cool functions.

Anyway I had to look around to find out what the APEX tree is actually capable of. First of all start with the APEX "Sample Trees" application which you find in the packaged application area.

Morten Braten took that example and described the features really well:
https://ora-00001.blogspot.com/2016/01/working-with-the-apex-5-treeview.html

John Snyders from the APEX team also created 2 blogposts about the "APEX tree":
APEX 5.0 Converting to the new APEX Tree
Add Checkbox Selection to APEX Tree Region

And as he mentioned there is a Javascript library behind it "libraries/apex/widget.treeView.js." which is documented since APEX 18.1 or at least I think it is. Anyway here is a link which I also have to further investigate:
JS Doc: Widget: treeView

German users can read this document provided by MT AG:
http://files.xmasman.de/20160216_MeetupNRW_TillAlbert_WiePflanzeIchEinenBaumApex.pdf

After the party is before the party

SVG

After the party is before the party

Von Tobias Arnhold → 10.20.2017

Now two months after the #pougtrip everything went back to normal. Except the planning for the next events.

The DOAG #NextGEN is currently starting a "roadshow" at German universities.

Start is the 07.11.2017 at the Trier University of Applied Sciences. We will have 3 presentations covering different technologies: SQL, JS, JSON, SVG, PL/SQL, REST and APEX.
But see for yourself: Oracle Vorträge an der Hochschule Trier

As you can see the agenda is made with APEX :). Inspired by the #pougtrip we plan free beer for all students!

This is our first test run to find out what it takes to get as much students as possible to listen to Oracle related technologies.

From my perspective the question is: What can an Oracle expert contribute to young professionals?

For example: handling real life problems and sharing the experience while using modern technologies. But I think most important is devotion.
You get inspired by an expert mostly depending on how dedicated this person is delivering the information. This event gives us the chance to inspire young professionals to see Oracle in a new light. See the possibilities and feel the devotion by the people who are working with the technology.

BTW: This event wouldn't be possible without two dedicated students. Thanks Rebecca and Abby!

#orclapex Europe tour

POUG

#orclapex Europe tour

Von Tobias Arnhold → 8.16.2017

From Tuesday, the 29. of August until the 02. September, I will meet the best experts around Oracle.

But first some background:

Last year I was in Sweden and held a presentation at a meetup in Stockholm about APEX. I met Mathias Magnusson an Oracle specialist who is organizing all kinds of Oracle usergroup events in Sweden. I was lucky to meet him again at DOAG 2017 and introduced him to Joel Kallman. During the discussion came the idea to make an APEX day in Sweden. Mathias prepared everything and invited some well-known experts who may join the party as speakers. In the email, he also was asking Heli Helskyaho. She is one of the world most known speaker about Oracle related technology at the moment.

She liked the idea to join in and asked if we could combine it. One event in Helsinki (Finland) and one in Stockholm (Sweden). And that is not all. Mathias put the date of the event shortly before the POUG in Poland. Conclusion: My Oracle #orclapex Europe tour was set up.

Out of my perspective the Nordic APEX days should look like this: 

We need to show the people what APEX can do and how it is used in production. If an Oracle employee or a consultant is talking about how great the tool is then maybe not everyone will believe it. So, I asked the experts from Deutsche Bahn (SmallSolutions-Team) to join the party and they did!

So, this is what happens now:

1. Monday I will fly to Helsinki with Richard from Deutsche Bahn. Last preparations with Matthias and Richard (SmallSolutions-Team) for the event.
1. Having the Oracle/Miracle APEX-Day in Helsinki (Finland): Oracle / Miracle APEX - Day
1. Including nice talks with Heli, Carsten, Shakeeb and hopefully a lot of APEX interested end users.
1. After the day we will take the cruiser ship over night to Stockholm including some drinks and talks and "Finnish Tango".
1. Having the SWEOUG APEX day in Stockholm (Sweden): #SweougApex17
1. Including nice talks with Patrick, Mathias and hopefully a lot of APEX interested end users. Hopefully a couple of beers in the evening.
1. Next morning take the plain to Berlin and preparing with Matthias (Small Solutions-Team) for POUG
1. Meet the students at Berlin main station and take the rented bus to POUG in Kraków.
1. Getting to know the student group including some activities during the bus trip.
1. Hotel check-in and dinner with the students
1. POUG conference starts: #POUG17
1. Including to meet the best Oracle database experts and get the students to meet them and drink a few beers with Kamil.
1. POUG Party
1. POUG conference second day
1. Evening dinner and taking the bus home

Let me say it in short words:

3 conferences, holding 3 presentations, meeting lots of experts and meeting even more new faces!

In case you are curios and want to get to know the flair from the conferences then follow me at Twitter: @tobias_arnhold / #APEXgoesEurope / #pougtrip / #SewougApex17 / #orclapex

I will write as I have never written before. :)

JET pie chart in APEX with absolute numbers as data labels

Oracle JET

JET pie chart in APEX with absolute numbers as data labels

Von Tobias Arnhold → 5.02.2017

The new APEX pie charts only allows percent values as data labels. Luckily the APEX team added an great example in the "Sample Chart" application which shows how to add custom data labels including absolute values by adding custom JavaScript code.

For German applications I prefer to display 10k (10000) like this: 10.000.
Thanks to APEX and JET it is easy to implement.

function( options ){
    this.donutSliceLabel = function( dataContext ){
        var value_ger;
       
        value_ger = dataContext.value.toLocaleString('de-DE', {
                      minimumFractionDigits: 0
                    });
       
        return value_ger;
    } 
    options.dataLabel = donutSliceLabel;
    return options;
}

Info: Technical updates in the JavaScript area are not supported by APEX updates. For example: A future JET version could have some engine changes which will not accept my JS example anymore.

Interactive Report Download Button only for a certain Authorization Role

Interactive Report

Interactive Report Download Button only for a certain Authorization Role

Von Tobias Arnhold → 4.27.2017

The Interactive Report has this great download feature where you can export everything you can see.
Anyway there are circumstances where the customer doesn't want that feature open for everyone.

In APEX you can only choose if you want the download button or not.

Even so APEX can't do it out of the box. There is a way to make your application able to do it.

Since APEX 5 you can't download when the "Download" is disabled. If you try an almost empty page occurs. Ok that means the "Download" functionality must be activated an I have to disable it manually.

You need to focus on three steps:
 1. Add an authorization scheme.
 2. Hide the download button in the front end. (Visualization)
 3. Disable the download functionality in the back end. (Security)

1. Add an authorization scheme
The authorization scheme will handle the rights that only the correct person is allowed to download from the Interactive Report.
I my case I call it "ROLE_DOWNLOAD" and it works like that:
Type: PL/SQL Function Returning Boolean 
Function Body: return security_pkg.has_role(:APP_USER,'ROLE_DOWNLOAD');
Validate: Once per session

2. Hide the download button
Add a static report id

Add a new "Dynamic Action" on "Click".
jQuery Selector: #STATIC_REPORT_ID_actions_button
Event Scope: Dynamic
Security > Authorization: {Not ROLE_DOWNLOAD}

Add some Javascript to remove the button:
$('#STATIC_REPORT_ID_actions_menu .icon-irr-download').parent().parent().parent().remove();

3. Disable the download functionality
When APEX is exporting something from an "Interactive Report" itjust does a simple redirect on the same page and adds a REQUEST for the specific download type. In my case it is the request "CSV" I want to block.

Add a "Branch" executed "Before Header":

And to disable the download I just redirect on the same page without any request. The trick is to add the right PL/SQL Condition. In this example check for the request and the authorization scheme.

Code:
:REQUEST = 'CSV' and APEX_UTIL.PUBLIC_CHECK_AUTHORIZATION('ROLE_DOWNLOAD') = false

 
In my mind this is simple and secure and shows how flexible APEX really is.

An introduction into the APEX 5.1 Layout View

Universal Theme

An introduction into the APEX 5.1 Layout View

Von Tobias Arnhold → 4.04.2017

Many of you are still using the old "Component View" but the "Page Designer" introduced in APEX 5 made the developer life much easier.

The top 5 most time saving abilities for me are:
 1. Easy access on all page elements (without any page refresh)
 2. Copy&Paste of items, regions, dynamic actions, ... 
 3. Drag&Drop moving of items and regions
 4. Multi edit of items
 5. Since APEX 5.1: The ability to customize your own personal Page Designer View

The functionality "Layout" introduced in APEX 5 was not in my focus and as I remember I had some issues with it. So I just ignored it.

In APEX 5.1 I started a rerun on it using the "Universal Theme" and I must say it is a real help when you create a complex form page with a lot of page items. It feels different in APEX 5.1 and works almost flawless.

To get in touch with it I prepared a little example for you to help understanding the feature and may get inspired to use it, too.
We start with a page including 16 page items which should be visualized on 3 rows. Some of them are conditional and they are from different types (Text Field, Radio Group, Select List, Textarea).

All items are now displayed one below the other.

What do I aim for in the first step?
1. All items should have the label set to be "above". (Do not use the region template option for that)
2. I want to edit 8 page items split on two rows
3. Items 1-3 per row should be displayed over 2 columns
4. Item size must be adjusted

In between I made a Dynamic Action to make the "detail group" item conditional based on "Organization" if it is null or not.

I did the same for the category selector but I needed some Javascript code to make it right.


Code:

apex.item( "P9_CAT1_NAME_A" ).hide();
apex.item( "P9_CAT1_NAME_B" ).hide();
apex.item( "P9_CAT2_NAME" ).hide();
apex.item( "P9_CAT3_NAME" ).hide();
apex.item( "P9_CAT4_NAME_V1" ).hide(); 
apex.item( "P9_CAT4_NAME_V2" ).hide(); 
apex.item( "P9_CAT4_NAME_V3" ).hide();    

if ( $v("P9_CATEGORY_SELECTOR") == '1' ) {
    apex.item( "P9_CAT1_NAME_A" ).show();
    apex.item( "P9_CAT1_NAME_B" ).show();     
}
if ( $v("P9_CATEGORY_SELECTOR") == '2' ) {
    apex.item( "P9_CAT2_NAME" ).show();  
}

if ( $v("P9_CATEGORY_SELECTOR") == '3' ) {
    apex.item( "P9_CAT3_NAME" ).show();  
}
if ( $v("P9_CATEGORY_SELECTOR") == '4' ) {
    apex.item( "P9_CAT4_NAME_V1" ).show();
    apex.item( "P9_CAT4_NAME_V2" ).show();   
    apex.item( "P9_CAT4_NAME_V3" ).show();       
}

In my final move I finished the page by adjusting the other items.

The page looked like that:


But as always it could be a little bit better and luckily I used APEX. I just had to make a little change on it:

That's it. Hope you will give the "Layout"-View a chance to proof itself. :)


Info:
In case your Page Designer mentions problems in applying some multi update settings. Just refresh the page and try again.

Customize your Interactive Report with CSS

Interactive Report

Customize your Interactive Report with CSS

Von Tobias Arnhold → 3.28.2017

A lot of you are using jQuery to customize visual parts of an APEX application. I probably to often do so myself but there is a much more elegant way:   CSS

Nowadays you are able to add different kind of rules into your CSS styles. In this example I will show you how to get into the topic by changing an Interactive Report (IR). In my example I want to change the typical group by visualization.


Before


After


First of all you need to give your IR a unique name or class to identify it properly.
IR > Appearance > CSS Classes: irCustomStyles



Now you need to add the customized CSS code in your page:
Page > CSS > Inline

.irCustomStyles .a-IRR-table td {
    border-top: 0 solid #ffffff !important;
}

.irCustomStyles table.a-IRR-table th:first-child.a-IRR-header:not(.a-IRR-header--group) {
  background-color: white !important;
}

.irCustomStyles table.a-IRR-table tr:has( .a-IRR-header ) {
    border-bottom: medium none white !important;
    border-top: medium none white !important;
}

1. Rule: Takes the border from the TD elements away. Standard CSS probably most of you have done like this before. 
2. Rule: This one changes only the first TH element and when they are not referenced with class ".a-IRR-header--group"
3. Rule: The "has"-clause only applies if the result is true. In this case if a class called "a-IRR-header" exists.

Fore more details check those sources:
:not(s) - By Sara Cope
Selecting Parent Elements with CSS and jQuery - by Thoriq Firdaus

Run dynamic action from report row and pass multiple variables

Dynamic Actions

Run dynamic action from report row and pass multiple variables

Von Tobias Arnhold → 2.23.2017

Execute a "Dynamic Action" by clicking on a button/link inside a report row is mostly handled by some triggering HTML class.

It actually works in 95% of all cases. But it is not the best way to do it. It is much more effective to execute the "Dynamic Action" with a custom event.

Reason is simple: You don't need to allocate unnecessary elements via a class by jQuery. You execute the "Dynamic Action" in the moment when it is needed. Like calling explicitly a Javascript function.
This matters if you show maybe 500 rows or more on a single page or you handle several dynamic actions in one report.

Running a dynamic action from inside a report is actually an old hat because there are a few guys which have been written about it. Anyway I'm still searching for it every time I need it and some of the code pieces are not up to date anymore. So I will show you the way I handle it today and probably tomorrow, too. :)

First I must thank Jeff Eberhard for his examples about this topic. He really inspired me using the technique in one of my projects where I had to suffer with many rows inside a report.

Blog posts (www.eberapp.com/ords/f?p=BLOG):
Run Dynamic Action from JavaScript
Execute Dynamic Action From Report Column Link
Pass Multiple Values from Report to Dynamic Action

I prefer this way:

1. Set up a "Dynamic Action":
Custom Event: setIemsFromReport
Selection Type: Javascript Expression
Javascript Expression: document

1.1 Now add some action from type: "Execute Javascript Code"
In my example I set up three APEX items with data from my report row.

Code:
apex.item( "P1_DEVICE" ).setValue( this.data.device_name );
apex.item( "P1_IP" ).setValue( this.data.ip );
apex.item( "P1_KOST" ).setValue( this.data.kost );

Info:
As you see the parameters are forwarded with specific variable names. The example came from Matt Nolan. I prefer it mostly because it is exact and it makes it easier to understand (maintainability).

1.2 To get the values into your APEX database session you add one more action from type: "Execute PL/SQL Code":

2. Report column
Inside my report I define a link column which looks like that:

Type:
Link

Target:
javascript:apex.event.trigger(document, 'setIemsFromReport', [{device_name:'#NAME#', ip:'#IP#', kost:'#KOST#'}]);void(0);

Info
apex.event.trigger executes the "Dynamic Action". 
[{...}] defines the variables to forward.
void(0) prevents the browser to do further actions.

Link Text:
<span class="fa fa-edit"></span> 

Link Attributes (not required):
style="font-size:16px;color:#ICON_COLOR#;display:#ICON_DISPLAY#"

Info:
By using some columns with case when clause I'm able to add some custom attributes like hide/show. Example:
  case
    when SUBSTR(DEVICE,1,1) = 'T'
    then 'inline-block'
    else 'none' 
  end as ICON_DISPLAY

That is all you need to hand over attributes from your report row towards one or more APEX items on your page.