|
1 | | -# APEX Plugin dhtmlxGantt |
| 1 | +Please do not download directly this code - this is the development version and can be unstable. You can find the [latest stable version here][1]. |
2 | 2 |
|
3 | | -- This is currently only a proof of concept - everything can change :-) |
4 | | -- Uses [dhtmlxGantt][1] ([docs][2]) |
5 | | -- Because of the used library the license of this plugin is GNU GPLv2 |
6 | 3 |
|
7 | | -[1]: https://dhtmlx.com/docs/products/dhtmlxGantt/ |
8 | | -[2]: http://docs.dhtmlx.com/gantt/ |
| 4 | +# Oracle APEX Region Type Plugin: dhtmlxGantt |
| 5 | + |
| 6 | +* Based on [dhtmlxGantt][2] ([docs][3]) library |
| 7 | + * This is the GPLv2 version of the library with a reduced set of functions |
| 8 | + * If you need all functionality you can buy a Pro version |
| 9 | + * I was asked to create this plugin and I have nothing to do with the company DHTMLX, so please do not complain ;-) |
| 10 | +* Currently supported is only APEX 5.1 |
| 11 | +* Features of the APEX integration: |
| 12 | + * Data can be delivered as XML or JSON string or as JSON object |
| 13 | + * For the XML format there is an own parser integrated to support easy SQL queries - see example below |
| 14 | + * The plugin delivers sample data, if no query is defined |
| 15 | + * There are five events available to react on chart actions: Task Create, Task Double Click, Task Drag (change of progress, start date, duration), Link Create, Link Double Click |
| 16 | + * In the region attributes you can configure some aspects of Gantt chart - for an example the height, the skin, the UI language (30 different delivered by the vendor); There is also the possibility to place custom before and after initialization JavaScript code |
| 17 | + * Everything else can be done with the extensive JavaScript API available from DHTMLX - please refer to the [docs][3] |
| 18 | + |
| 19 | + |
| 20 | +## Links |
| 21 | + |
| 22 | +* [Download][1] |
| 23 | +* [Issues][4] |
| 24 | +* [Online Demo App][5] |
| 25 | + |
| 26 | + |
| 27 | +## How To Use |
| 28 | + |
| 29 | +### The Recommended First Way |
| 30 | + |
| 31 | +1. Download the [latest version][1] |
| 32 | +2. Go to subdirectory `plugin/demo-objects`, unzip demo-app-including-supporting-objects.sql.zip and install this application |
| 33 | +3. Run the demo app and inspect, how it was implemented |
| 34 | + |
| 35 | +### The DIY Second Way |
| 36 | + |
| 37 | +1. Download the [latest version][1] |
| 38 | +2. Install the plugin from the subdirectory `plugin` |
| 39 | +3. On your page create a new region of type `dhtmlxGantt [Plug-In]` |
| 40 | +4. Optionally provide a query to load data from your tables |
| 41 | + * If you provide no query, then the plugin will provide sample data |
| 42 | + |
| 43 | + |
| 44 | +### Example Query |
| 45 | + |
| 46 | +You can deliver JSON or XML. In both cases you need to create a query that returns a single CLOB result. To support also older databases without JSON functionality the example below is a XML query. |
| 47 | + |
| 48 | +No fear, if you look in detail to the example query, you will find out that you have to define only some sort of "standard selects" for the tasks and the links between the tasks. Grab the example, put it in your preferred SQL tool and play around with it. |
| 49 | + |
| 50 | +The result of the query should look like this example (prepared URL's are removed for better readability): |
| 51 | + |
| 52 | +```xml |
| 53 | +<data> |
| 54 | + <task id="1" text="Project #1" start_date="2017-04-01" progress=".6" duration="11" open="true"/> |
| 55 | + <task id="2" text="Task #1" start_date="2017-04-03" progress="1" duration="5" parent="1" open="true"/> |
| 56 | + <task id="3" text="Task #2" start_date="2017-04-02" progress=".5" duration="7" parent="1" open="true"/> |
| 57 | + <task id="4" text="Task #2.1" start_date="2017-04-03" progress="1" duration="2" parent="3" open="true"/> |
| 58 | + <task id="5" text="Task #2.2" start_date="2017-04-04" progress=".8" duration="3" parent="3" open="true"/> |
| 59 | + <task id="6" text="Task #2.2" start_date="2017-04-05" progress=".2" duration="4" parent="3" open="true"/> |
| 60 | + <link id="1" source="1" target="2" type="1"/> |
| 61 | + <link id="2" source="1" target="3" type="1"/> |
| 62 | + <link id="3" source="3" target="4" type="1"/> |
| 63 | + <link id="4" source="4" target="5" type="0"/> |
| 64 | + <link id="5" source="5" target="6" type="0"/> |
| 65 | +</data> |
| 66 | +``` |
| 67 | + |
| 68 | +```sql |
| 69 | +WITH tasks AS ( --> START YOUR TASKS QUERY HERE |
| 70 | + SELECT |
| 71 | + XMLELEMENT( |
| 72 | + "task", |
| 73 | + XMLATTRIBUTES( |
| 74 | + t_id AS "id", |
| 75 | + t_title AS "text", |
| 76 | + TO_CHAR(t_start_date,'yyyy-mm-dd') AS "start_date", |
| 77 | + TO_CHAR(t_progress,'TM9','nls_numeric_characters=''.,''') AS "progress", |
| 78 | + TO_CHAR(t_duration,'TM9','nls_numeric_characters=''.,''') AS "duration", |
| 79 | + t_parent_t_id AS "parent", |
| 80 | + -- For the visualization, if child tasks should be expanded(shown) or not: |
| 81 | + 'true' AS "open", |
| 82 | + -- If you provide here a URL, then this URL is automatically opened by the plugin when a task is double clicked. |
| 83 | + -- This saves you time during development and also extra AJAX calls to the server to prepare the url |
| 84 | + -- in a dynamic action. The triggering element is set her to #my_gantt which is the static id of the |
| 85 | + -- gantt chart region. You get then on this region the event "Dialog Closed". With this event you can |
| 86 | + -- refresh the gantt chart with a dynamic action: |
| 87 | + apex_util.prepare_url( |
| 88 | + p_url => 'f?p=' || :app_id || ':2:' || :app_session || ':::2:P2_T_ID:' || t_id, |
| 89 | + p_triggering_element => 'apex.jQuery("#my_gantt")' |
| 90 | + ) AS "url_edit", |
| 91 | + -- The url to call when the user click a plus sign to create a child task (our task id is here the parent): |
| 92 | + apex_util.prepare_url( |
| 93 | + p_url => 'f?p=' || :app_id || ':2:' || :app_session || ':::2:P2_T_PARENT_T_ID:' || t_id, |
| 94 | + p_triggering_element => 'apex.jQuery("#my_gantt")' |
| 95 | + ) AS "url_create_child" |
| 96 | + ) |
| 97 | + ) AS task_xml |
| 98 | + FROM |
| 99 | + plugin_gantt_demo_tasks |
| 100 | + ORDER BY t_sort_order --< STOP YOUR TASKS QUERY HERE |
| 101 | +), links AS ( --> START YOUR LINKS QUERY HERE |
| 102 | + SELECT |
| 103 | + XMLELEMENT( |
| 104 | + "link", |
| 105 | + XMLATTRIBUTES( |
| 106 | + l_id AS "id", |
| 107 | + l_source AS "source", |
| 108 | + l_target AS "target", |
| 109 | + l_type AS "type", |
| 110 | + apex_util.prepare_url( |
| 111 | + p_url => 'f?p=' || :app_id || ':3:' || :app_session || ':::3:P3_L_ID:' || l_id, |
| 112 | + p_triggering_element => 'apex.jQuery("#my_gantt")' |
| 113 | + ) AS "url_edit" |
| 114 | + ) |
| 115 | + ) AS link_xml |
| 116 | + FROM |
| 117 | + plugin_gantt_demo_links --< STOP YOUR LINKS QUERY HERE |
| 118 | +), special_urls AS ( --> START SPECIAL URL's (optional) |
| 119 | + SELECT |
| 120 | + XMLELEMENT( |
| 121 | + "task_create_url_no_child", |
| 122 | + XMLATTRIBUTES( |
| 123 | + -- The url to call when the user click the first plus sign in the chart to |
| 124 | + -- create a new task (no child, because without parent id): |
| 125 | + apex_util.prepare_url( |
| 126 | + p_url => 'f?p=' || :app_id || ':2:' || :app_session || ':::2', |
| 127 | + p_triggering_element => 'apex.jQuery("#my_gantt")' |
| 128 | + ) AS "url" |
| 129 | + ) |
| 130 | + ) AS special_url_xml |
| 131 | + FROM |
| 132 | + dual --< STOP SPECIAL URL's |
| 133 | +) SELECT |
| 134 | + XMLSERIALIZE(DOCUMENT( |
| 135 | + XMLELEMENT( |
| 136 | + "data", |
| 137 | + (SELECT XMLAGG(task_xml) FROM tasks), |
| 138 | + (SELECT XMLAGG(link_xml) FROM links), |
| 139 | + (SELECT XMLAGG(special_url_xml) FROM special_urls) |
| 140 | + ) |
| 141 | + ) INDENT) AS single_clob_result |
| 142 | +FROM |
| 143 | + dual; |
| 144 | +``` |
| 145 | + |
| 146 | + |
| 147 | +## Changelog |
| 148 | + |
| 149 | +This project uses [semantic versioning][6]. |
| 150 | + |
| 151 | +Please use for all comments and discussions the [issues functionality on GitHub][4]. |
| 152 | + |
| 153 | +### 0.5.0 (2017-03-14) |
| 154 | + |
| 155 | +* First public release |
| 156 | + |
| 157 | +[1]: https://github.com/ogobrecht/apex-plugin-dhtmlx-gantt/releases/latest |
| 158 | +[2]: https://dhtmlx.com/docs/products/dhtmlxGantt/ |
| 159 | +[3]: http://docs.dhtmlx.com/gantt/ |
| 160 | +[4]: https://github.com/ogobrecht/apex-plugin-dhtmlx-gantt/issues |
| 161 | +[5]: https://apex.oracle.com/pls/apex/f?p=116612 |
| 162 | +[6]: http://semver.org |
0 commit comments