APEX

Hi ,

I am creating a new Gantt chart plugin for APEX (based on Oracle JET Gantt chart). I am aware that 19.1 offers an integrated JEt Gantt chart, but I couldn't show more than one tasks in a row using it. Also I would like to customize a bit and hence preferred to integrate and customize JET Gantt component to APEX.

Version Details :

Oracle Apex : 19.1

Oracle DB : 12.2.0.1.0

Oracle JET : 4.0.0

I am trying to implement a type of Gantt chart in Oracle JET cookbook called Tool Value Formats. I am following Oracle Cookbook version 6.1.0

Normal integration as given in JET cookbook works perfectly, and i got the below result.

When I try implement the same Gantt as a region plugin, I am getting the following error.

" Error: SyntaxError: Unexpected string in JSON at position 197 "

Below is my ajax function of the plugin . The render function of plugin seems to be working fine.

FUNCTION gantt_ajax (

p_region IN APEX_PLUGIN.T_REGION,

p_plugin IN APEX_PLUGIN.T_PLUGIN

)

RETURN APEX_PLUGIN.T_REGION_AJAX_RESULT

IS

l_retval APEX_PLUGIN.T_REGION_AJAX_RESULT;

l_column_value_list APEX_PLUGIN_UTIL.T_COLUMN_VALUE_LIST2;

l_data_type_list wwv_flow_global.vc_arr2;

l_row_id VARCHAR2(50);

l_row_name VARCHAR2(2000);

l_task_id VARCHAR(200);

l_task_from VARCHAR2(50);

l_task_to VARCHAR2(50);

l_task_label VARCHAR2(2000);

l_task_type VARCHAR2(200);

l_task_progress VARCHAR2(200);

l_crlf CHAR(2) := CHR(13)||CHR(10);

l_prev_name VARCHAR2(2000) := NULL;

l_prev_desc VARCHAR(32767) :=NULL;

l_length number;

BEGIN

l_data_type_list(1):=apex_plugin_util.c_data_type_varchar2;

l_data_type_list(2):=apex_plugin_util.c_data_type_varchar2;

l_data_type_list(3):=apex_plugin_util.c_data_type_number;

l_data_type_list(4):=apex_plugin_util.c_data_type_varchar2;

l_data_type_list(5):=apex_plugin_util.c_data_type_date;

l_data_type_list(6):=apex_plugin_util.c_data_type_date;

l_data_type_list(7):=apex_plugin_util.c_data_type_varchar2;

l_data_type_list(8):=apex_plugin_util.c_data_type_number;

l_column_value_list := apex_plugin_util.get_data2(

  p\_sql\_statement  => p\_region.source, 

  p\_min\_columns    => 8, 

  p\_max\_columns    => 8, 

  p\_data\_type\_list => l\_data\_type\_list,

  p\_component\_name => p\_region.name

);

apex_plugin_util.print_json_http_header;

sys.htp.p('[');

  l\_length := l\_column\_value\_list(1).value\_list.count;

FOR x IN 1 .. l_length

LOOP

  l\_row\_id:=   sys.htf.escape\_sc(l\_column\_value\_list(1).value\_list(x).varchar2\_value);

  l\_row\_name := sys.htf.escape\_sc(l\_column\_value\_list(2).value\_list(x).varchar2\_value);

  l\_task\_id:=  to\_char(l\_column\_value\_list(3).value\_list(x).number\_value);

  l\_task\_label := sys.htf.escape\_sc(l\_column\_value\_list(4).value\_list(x).varchar2\_value);

  l\_task\_from :=  serialize\_timestamp(l\_column\_value\_list(5).value\_list(x).date\_value);

  l\_task\_to := serialize\_timestamp(l\_column\_value\_list(6).value\_list(x).date\_value);

  l\_task\_type := sys.htf.escape\_sc(l\_column\_value\_list(7).value\_list(x).varchar2\_value);

  l\_task\_progress := to\_char(l\_column\_value\_list(8).value\_list(x).number\_value);

  if l\_row\_name!=l\_prev\_name or  l\_prev\_name is null then  

    if l\_prev\_name is not null then 

      htp.p( '\]},'); 

    end if;

      sys.htp.p( '{'

      ||apex\_javascript.add\_attribute('id', l\_row\_id, TRUE, TRUE)

     || apex\_javascript.add\_attribute('label', case when l\_row\_name!=l\_prev\_name or  l\_prev\_name is  null then 

            l\_row\_name else ' ' end, TRUE, TRUE)

     || '"tasks": \[');

    l\_prev\_name:=l\_row\_name;

  else  if x>1 then 

    htp.p(','); 

    end if;   

  end if;

  sys.htp.p( '{'

  || apex\_javascript.add\_attribute('id', l\_task\_id, TRUE, TRUE)

  || apex\_javascript.add\_attribute('label', l\_task\_label, TRUE, TRUE)

  || apex\_javascript.add\_attribute('start', l\_task\_from, TRUE, TRUE)

  || apex\_javascript.add\_attribute('end', l\_task\_to, TRUE, TRUE)

   || apex\_javascript.add\_attribute('svgStyle', l\_task\_type, TRUE, TRUE)

   || '"progress": {' || apex\_javascript.add\_attribute('value',l\_task\_progress, True, FALSE) || apex\_javascript.add\_attribute('svgStyle',l\_task\_type, True, false) ||'}'

  || '}');

END LOOP;

if l_length>0 then

htp.p(']}');

end if;

htp.p(']');

RETURN l_retval;

END gantt_ajax;

Is there a way to see the APEX_PLUGIN.T_REGION_AJAX_RESULT before returning, so that i can find what is wrong with the JSON string ? (I tried to display output using DBMS_OUTPUT.PUT_LINE, but it throws me an error, since the datatype of the variable is T.REGION_AJAX_RESULT ).

On inspecting I am getting another error, which is as follows

Uncaught (in promise) Invalid type found for OJ-GANTT property 'rows'. Found: [object Object] of type object, but expected type array<object>|promise.

I got the same error, when i tried to make the required JSON data using SQL-JSON functions. (i.e json_object and json_arrayagg)

In this case, i can see the JSON data reaching till the rows property of oj-gantt. The same JSON data works well to render the Gantt, when i try to integrate the JET chart to APEX app in the normal way. (not as pluign, but in the way described in Oracle JET cookbook).

Thanks for your help in advance.

Ginto