1
votes

Does anyone know how to integrate the Oracle Jet Gantt chart into Oracle Apex version 5.1? The research I have done shows either how to integrate Jet components into version 5.0 (but to my understanding, a lot changed between versions 5.0 and 5.1, specifically with regards to the Oracle JET library) or how to integrate a couple of different Oracle Jet components into Apex 5.1, but the code used to integrate these components seems very specific to the components being integrated. I have tried copying and pasting the javascript code and the HTML code from the Oracle Jet Cookbook into the the appropriate sections in the Page Designer on Apex, but nothing shows up when I run the page. Specifically, I'm wondering how to use the Oracle Jet cookbook code for the Gantt chart to create that Gantt chart on a page in my Apex application?

Has anyone tried to do this yet?

Thank you in advance.

2

2 Answers

3
votes

If you do not find a plugin, you can use oracle-jet gantt by making direct references using a CDN to the files on your apex page.

1 - First upload the main.js file to the shared components of your application. He must follow these guidelines https://docs.oracle.com/middleware/jet400/jet/developer/GUID-219A636B-0D0B-4A78-975B-0528497A82DD.htm#JETDG-GUID-219A636B-0D0B-4A78-975B-0528497A82DD

Your main.js look like this:

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

function _getCDNPath(paths) {
    var cdnPath = "";
    var ojPath = "";
    var thirdpartyPath = "";
    var keys = Object.keys(paths);
    var newPaths = {};
    function _isoj(key) {
        return (key.indexOf('oj') === 0 && key !== 'ojdnd');
    }
    keys.forEach(function(key) {
        newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
    });
    return newPaths;
}

require.config({
    paths: _getCDNPath({
        'knockout': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/knockout/knockout-3.4.0',
        'jquery': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jquery-3.1.1.min',
        'jqueryui-amd': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/jquery/jqueryui-amd-1.12.0.min',
        'ojs': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/min',
        'ojL10n': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/ojL10n',
        'ojtranslations': 'https://static.oracle.com/cdn/jet/v4.0.0/default/js/resources',
        'text': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/text',
        'promise': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/es6-promise/es6-promise.min',
        'hammerjs': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/hammer/hammer-2.0.8.min',
        'signals': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/js-signals/signals.min',
        'ojdnd': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/dnd-polyfill/dnd-polyfill-1.0.0.min',
        'css': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require-css/css.min',
        'customElements': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/webcomponents/custom-elements.min',
        'proj4js': 'https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/proj4js/dist/proj4'
    })
})

requirejs.config({
    baseUrl: '',
    // Path mappings for the logical module names
    paths: {
    },
    // Shim configurations for modules that do not expose AMD
    shim: {
        'jquery': {
            exports: ['jQuery', '$']
        },
        'maps': {
            deps: ['jquery', 'i18n'],
        }
    },
    // This section configures the i18n plugin. It is merging the Oracle JET built-in translation
    // resources with a custom translation file.
    // Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
    // a path that is relative to the location of this main.js file.
    config: {
        ojL10n: {
            merge: {
                //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
            }
        }
    }
});

2 - Now you need to load this file (main.js) and require.js on your page. Use the "File URLs" field for this. require.js: https://static.oracle.com/cdn/jet/v4.0.0/3rdparty/require/require.js

enter image description here

3 - In the header of your page you need to include this code:

<link rel="stylesheet" id="css" href="https://static.oracle.com/cdn/jet/v4.0.0/default/css/alta/oj-alta-min.css">
<script>
        if (!document.createElement) {
          document.createElement = document.constructor.prototype.createElement;
          document.createElementNS = document.constructor.prototype.createElementNS;
          document.importNode = document.constructor.prototype.importNode;
        }

        // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
        // will implicitly add a busy state, until the application calls applicationBoostrapComplete
        // on the busy state context.
        window["oj_whenReady"] = true;
</script>

enter image description here

4 - Create a region to place the html of your oracle-jet chart enter image description here

5 - Finally, create a dynamic action to effectively create your gantt chart. The dynamic action event is page loading. It should run a javascript code. This code is the file demo.js on cookbook site.

enter image description here


Ex. https://apex.oracle.com/pls/apex/f?p=145794:23

login on: https://apex.oracle.com/pls/apex/f?p=4550

workspace: stackquestions
user: test
pwd: test
app: 145794
page: 23

Once you make this work, your problem will be how to get the data and update the gantt depending on some filters. I suggest creating a restful service to get this data from your tables. For this you will need some javascript handling to make your data follow the format expected by oracle-jet. You can see the expected format in the ganttData.json file.

Good luck.


I noticed that the css file needed to make the oracle-jet work interferes with the page's css. I tried to use this idea Limit scope of external css to only a specific element? but it did not work completely.

1
votes

why just not take a plugin ? either write your own or look at apex.world for the gantt plugin