Thursday, 13 July 2017

Oracle APEX at KSCOPE17

APEX at KSCOPE17

Why is it so damn good! :)

Summary of thoughts  

Yet another great conference by APEX community - what else can you say when you have such a busy program and abundance of awesome speakers presenting.
 
 
I loved it yet again. Great people above all, location and content.

This was my third time and again I came back with loads of notes and things to try out when I get back. Not more can you wish for.

There were talks if this year was as good as previous one, but overall I think people from ODTUG hit the mark again (at least for me).

Overview and my takeaway
Lots of great ideas/features from the team for APEX 5.2 release.

Universal theme - Shakeeb

-       Inline help text for form customizations
-       Ability to adjust region dialog size
-       Declarative touch events like swap
-       Improve responsive styles
-       Improve loading performance
-       HD version of icons – Font APEX HD
-       Floating labels modernizing UI
-       New Card templates like header and media
-       Improvements on theme rolling with additional styles and options
-       APEX Spotlight
-       Effortless navigation


JET charts – Marc S.

-       Improvements in customization over 5.1.2 version
-       Ability to use select * from table as source of your queries
-       Zoom in zoom out functionality
-       Adjusting series colours either as query column or using advance JS configuration similar how IG is done now
-       Ability to change orientation using DA
-       New chart types like Gant charts, pyramid or box plot

Interactive Grid – John S.

-       Application available for download from John's blog IG Cookbook with John’s latest tips for IG
-       Resize advanced configure options; globally as well on each column to be declarative in 5.2
-       Context menu on click instead of action row menu
-       Demo on listening to modal changes and acting based on it
-       Ideas to double model same data to compare data or similar
-       Example of Split grid in form multi view demo
Normal form populated with DA by subscribing to changes on modal grid; extra option is multiple selections and editing
-       Awesome example of IG customization of detail view being a standard view and changing to use Card templates with changes to buttons
-       IG API documentation will be included
-       Select cell range copy down or copy to clipboard functionality to be added


Other features

-       New property panel search functionality that will search all fields and values
-       Exposing advanced calendar configurations (FullCalendar)
-       Blueprint and Features functionality to help you build your apps
-       Interesting was a mention of further improvements on APEX “talking” to external REST APIs.

Other speaker tips:

-       Great intro session by P. Raganitsch for all who want to dig deeper into Electron JS; installation and features like reading system files or access to printing engine

-       When building your apps make sure your CSS scripts are loaded before JavaScript as this puts importance on visual over functional part of your page first

-       If you are not using region caching, maybe time to consider learning about this great feature; great tip is to display date region last refreshed using apex_util.cache_get_date_of_region_cache

-       Ever had problem with LOV reloads when your page are loading – loadash.js library to the rescue. It can help you control number of reloads needed when cascading LOVs are involved

-       Using substitution strings in your query like &SESSION. Performance wise it is better to use concatenation. -> ‘f?p=……’|| :SESSION

-       apex_debug.log_debms_output outputs all dmbs_output in your session

-       Everyone is talking about Docker – great tips from Roel H. on how to setup one for your APEX environments and things you need to know

-       If you ever hit limitations with JSON size when working with images check out Dimitri’s presentation on Java from 12.2 database and all the tips here using Nashhorn

-       One of my favourite was Simon’s Hunt – Automated testing framework demonstration session; if you ever wanted to do testing right and simple definite worth checking. We still have to see how this will work out but thumbs up for making this available to the community 

-       I have to mention great APEX Nitro please check more details on OraOpenSource. Great way to speed up you development work

-       APEX Generator; awesome idea how to optimize your project work by rendering your apex pages directly from PL/SQL; another great work by friends from MT-AG; look forward when this will be publicly available to try it out

-       Good practice is to document your PL/SQL work so why not use https://github.com/OraOpenSource/plsql-md-doc



For last something we all need that was demoed by Joel Kallman from APEX team is Quick SQL sample application. It is now so easy to create dummy data or mock-up models for your applications. Please check sample packaged applications and you will never look back.


To summarize, I know I will see you next year in Orlando for KScope18. 

Thanks to all who made my stay in San Antonio so great. 


Happy Apexing,
SLino 

In case you missed it, you can join ODTUG and view all recorded sessions online otherwise join us for free AUSOUG 2017 webinar series with some of KScope17 presenters.

Thursday, 15 June 2017

APEX Universal theme auto hide success message

APEX 5.1 auto hide success message

Auto Client side error messages handling

Follow up post on few posts out there


Recently I noticed few blog posts on this problem and lazy me said cool something interesting and useful that I would want to reuse. Then I noticed few issues and wanted to write this blog in order to complete the picture.

Situation 
We have form or interactive grid where we can edit and save some data. Excellent but why does not this success message that confirms all went well auto retrieves. How do we sort that?

 

 As you see user has to click in order to close the mesage.

Solution 
There are few blog posts out there dealing with the same issue but none were complete or better said they worked perfectly in certain situation. At least we were getting still some issues so we decided to merge them into one. :)

Marko's blog explains in detail how to sort this out on IG type of page which is awesome. But what happens if you by accident set this up

apex.message.setThemeHooks({
  beforeShow: function(pMsgType, pElement$){
    setTimeout(function() {
      $('.t-Alert').fadeOut('slow');
    }, 3000);  
  }
});

to be executing on page load on your Page 0 global page. It breaks some of modal page functionality if modal page gives throws any error. So make sure you use
if (pMsgType=='success'){
condition. Also it did not seem to sort issues with regular Form submits.

Other one was from Mark

Which on the other hand sorts the problem of saving the regular form by auto dismissing the message. But it would get stuck if user would click on 'X' trying to manually close the message.

All credentials go to original posters of course. For my future reference this was what worked for me

apex.jQuery(document).ready(function() {
    
    var opt = {
        autoDismiss: true,
        duration: 3000 // Optional. Default value is 3000
    }

    // this only applys configuration when base page has a process success message ready to display
    apex.theme42.configureSuccessMessages(opt);

    if (apex.theme42.configureSuccessMessages.options === undefined) {
     

        apex.theme42.configureSuccessMessages.options = opt;
    }

 //Marko code
 apex.message.setThemeHooks({
   beforeShow: function(pMsgType, pElement$){
   if (pMsgType=='success'){ 
     setTimeout(function() {
    $('.t-Alert').fadeOut('slow');
     }, 3000);
   }   
    }
 });
 
 
 //Additional
 $('.t-Button--closeAlert').click( function(){
   $('.t-Alert').fadeOut('slow');
         //console.log('clicked'); 
    });
 
 
});
Only in this combination things seems to work.

Happy Apexing,
SLino 

Tested on internal and apex.oracle.com on APEX version 5.1.1.00.08 

Tuesday, 23 May 2017

APEX 5.1 IG toolbar customization

APEX 5.1 IG customization

Hacking APEX Interactive grid

IG toolbar custom configuration changes


APEX 5.1 brought us some cool features and among all the mighty interactive grid. After a day or so working on a project client ideas come into the play. 

This is where these customization tips might be of help. 

Idea here is: you want to use IG but want to be able to control what will be available to the users in terms of toolbar items and menus. APEX by default offers an ability to turn the toolbar on and off but sometimes this might not be enough.

In an image below you see how standard look and feel of your IG toolbar looks like. You have a section to filter column followed by Actions menu button then Edit, Save and Add Row buttons. 

What if I only want to use Save and/or Add Row or any combination that you suits you.  

Again I can not emphasize how helpful was John Snyders blog to understand IG inside out so thank you John.


If you read through John's blog you will pick up all necessary details for you to be able to construct your own IG toolbar

There is nothing more than
function(config) {

    var toolbarActions = $.apex.interactiveGrid
                        .copyDefaultToolbar()
                        .toolbarFind
("actions1");
    var toolbarSearchIcon = $.apex.interactiveGrid
                            .copyDefaultToolbar()
                            .toolbarFind("column_filter_button");

    config.toolbarData = [
        { //SEARCH TOOLBAR FUNC
            groupTogether: true,
            controls: [
                toolbarSearchIcon,
                {
                    type: "TEXT",
                    id: "search_field",
                    enterAction: "search"
                },
                {
                    type: "BUTTON",
                    action: "search"
                }
            ]
        },
        //ACTIONS DOES NOT WORK
        toolbarActions,
        { //SAVE BUTTON  
            //   align: "end",
            controls: [{
                type: "BUTTON",
                action: "save",
                iconBeforeLabel: true,
                hot: true
            }]
        },
        { //ADD ROW BUTTON 
            //  align: "end",
            controls: [{
                type: "BUTTON",
                action: "selection-add-row",
                iconBeforeLabel: true
            }]
        },
        { //RESET BUTTON
            align: "end",
            controls: [{
                type: "BUTTON",
                action: "reset-report",
                iconBeforeLabel: true
            }]
        },
        /*{ // FILTER BUTTON from Action menu directly
            controls: [
                {
                    type: "BUTTON",
                    action: "show-filter-dialog",
                    iconBeforeLabel: true
                }
            ]           
        },*/

        { //MY CUSTOM BUTTON
            controls: [{
                type: "BUTTON",
                action: "my-refresh-region",
                label: "Cancel"
            }]
        }
    ];

    //adding action to custom button
    config.initActions = function(actions) {
    // can modify state of existing actions or add your own
    // can also pass in an array of actions to add
        actions.add({
            name: "my-refresh-region",
            action: function(event, focusElement) {
                apex.region("event_docs").refresh();
            }
        });
    }
    return config; 
    }

This should give you ability to construct your own IG toolbars without digging into another option which is to use CSS to show/hide elements of your interactive grids. 

Please note line of code highlighted in yellow. With this functionality you can find and inject commands and controls as you want them. Isn't this great. 

Also I added a little Cancel functionality to replace a simple Hello World example with something more interesting. 

All that is missing is to to add this JS code into JavaScript Code section of your Interactive grid.
 


Hope this helps. If anyone knows how to manually construct action menus and Search Icon menu this would complete the whole picture. Or do we go to John again? ;)
 
Thanks,
SLino