DevOps, CI/CD and Automation

Hi All,

I am trying to build a nice gantt but my gant does not show any data. Can someone help me what I am missing or doing wrong?

My Javascript

requirejs.config(

{

paths:

{

'knockout' : '/i/libraries/oraclejet/6.1.0/js/libs/knockout/knockout-3.4.2',

'jquery': '/i/libraries/oraclejet/6.1.0/js/libs/jquery/jquery-3.1.1.min',

'jqueryui-amd': '/i/libraries/oraclejet/6.1.0/js/libs/jquery/jqueryui-amd-1.12.1.min',

'ojs': '/i/libraries/oraclejet/6.1.0/js/libs/oj/v6.1.0/min',

'ojL10n': '/i/libraries/oraclejet/6.1.0/js/libs/oj/v6.1.0/ojL10n',

'ojtranslations': '/i/libraries/oraclejet/6.1.0/js/libs/oj/v6.1.0/resources',

'text': '/i/libraries/oraclejet/6.1.0/js/libs/require/text',

'promise': '/i/libraries/oraclejet/6.1.0/js/libs/es6-promise/es6-promise.min',

'hammerjs': '/i/libraries/oraclejet/6.1.0/js/libs/hammer/hammer-2.0.8.min',

'signals': '/i/libraries/oraclejet/6.1.0/js/libs/js-signals/signals.min',

'ojdnd': '/i/libraries/oraclejet/6.1.0/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min',

'css': '/i/libraries/oraclejet/6.1.0/js/libs/require-css/css.min',

'customElements': '/i/libraries/oraclejet/6.1.0/js/libs/webcomponents/custom-elements.min',

'proj4': '/i/libraries/oraclejet/6.1.0/js/libs/proj4js/dist/proj4'

}

});

require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojarraydataprovider', 'ojs/ojarraytreedataprovider', 'ojs/ojknockout-keyset', 'ojs/ojknockout', 'ojs/ojgantt', 'ojs/ojknockout-keyset'],

function(oj, ko, $, ArrayDataProvider, ArrayTreeDataProvider, keySet)

{

function viewModel(result, result2) 

{

this.projectStartDate = new Date("Jan 1, 2019").toISOString();

this.projectEndDate = new Date("Dec 31, 2020").toISOString();

this.expanded = new keySet.ObservableExpandedKeySet().add(['WFW5662', 'VSE1697']);

this.tasksDataProvider = new ArrayTreeDataProvider(result, {keyAttributes: "id", childrenAttribute: "subTasks"});

this.dependenciesDataProvider = new ArrayDataProvider(result2, {keyAttributes: 'id'});

};

$(

  function()

  {

var get_data = Promise.resolve(apex.server.process("PP_GET_JSON", {}));

get_data.then(function(result){

var get_data2 = Promise.resolve(apex.server.process("PP_GET_JSON2", {}));

get_data2.then(function(result2){

ko.applyBindings(new viewModel(result, result2), document.getElementById('gantt'));

});

});

  }

);

}

);

My HTML

<div id="sampleDemo" style="" class="demo-padding demo-container">

  \<div id="componentDemoContent" style="width: 1px; min-width: 100%;">

     \<oj-gantt id="gantt"

          start="\[\[projectStartDate\]\]"

          end="\[\[projectEndDate\]\]"

          animation-on-display="auto"

          animation-on-data-change="auto"

          selection-mode="single"

          gridlines.horizontal="visible"

          gridlines.vertical="visible"

          major-axis.scale="months"

          major-axis.zoom-order='\["quarters", "months", "weeks", "days"\]'

          minor-axis.scale="weeks"

          minor-axis.zoom-order='\["quarters", "months", "weeks", "days"\]'

          row-axis.rendered="on"

          row-axis.width="188px"

          expanded="{{expanded}}"

          task-data="\[\[tasksDataProvider\]\]"

          style="width:100%;height:600px">

          \<template slot='rowTemplate' data-oj-as="row">

            \<oj-gantt-row

              label="\[\[row.tasks\[0\].data.label\]\]"

              label-style="\[\[row.tasks\[0\].data.subTasks ? {fontWeight: 500} : {}\]\]">

            \</oj-gantt-row>

          \</template>

          \<template slot='taskTemplate' data-oj-as="task">

            \<oj-gantt-task

              start="\[\[task.data.start\]\]"

              end="\[\[task.data.end\]\]"

              label="\[\[task.data.name\]\]"

              progress.value="\[\[task.data.progress\]\]"

              type="\[\[task.data.subTasks ? 'summary' : 'auto'\]\]">

            \</oj-gantt-task>

          \</template>

          \<template slot='dependencyTemplate' data-oj-as="dependency">

            \<oj-gantt-dependency

              predecessor-task-id="\[\[dependency.data.predecessor\]\]"

              successor-task-id="\[\[dependency.data.successor\]\]"

              type="\[\[dependency.data.type\]\]">

            \</oj-gantt-dependency>

          \</template>

      \</oj-gantt>

  \</div>

\</div>

And my JSON

How it looks now:

Can someone help me?