Nextcloud Gantt Chart Integration with Deck App

The Nextcloud Deck app adds kanban project management features to your personal cloud storage solution. The deckGantt JavaScript application enables you to track kanban activities within a true Nextcloud gantt chart. 

NxDeckGantt isn’t an official Nextcloud app but a third party application hosted on GitHub. If you have any concerns about the integration, audit the code for reassurance.

• NxDeckGantt Configuration
  • Editing Nextcloud Gantt Charts
• Gantt Chart Customization
  • Changing the deckGantt Language

NxDeckGantt Configuration

1. First, ensure that your Nextcloud cards tasks have a due date set so they will display in the gantt chart software.

   

2. Log into SSH (or cPanel Terminal).
3. Navigate to your Nextcloud root directory (e.g. public_html/ or var/www/html/).
4. Clone the deckGantt GitHub repository, replacing “deckgantt” with your preferred subdomain for the gantt chart application:

   git clone https://github.com/jeobz/NxDeckGantt.git deckgantt

5. Visit your deckGantt instance in the browser (e.g. example.com/deckgantt).
6. At the top enter the Api URL to receive all kanban boards, replacing “example.com” with your Nextcloud domain:

   https://example.com/index.php/apps/deck/api/v1.0/boards

   
   Add a board ID number to only call one board (you can get this by checking the number at the end of the Nextcloud board URL):

   https://example.com/index.php/apps/deck/api/v1.0/boards/[number]

7. Enter your Nextcloud username and password.
8. Select the “Connect” on the right.
9. Select the board title to display the Nextcloud gantt chart.

   

Editing Nextcloud Gantt Charts

By default, each gantt chart task will have the start date set one day before the due date. Drag the left or right edge of an activity to change the start and due dates. Changing the due date in deckGantt updates the task in Nextcloud. 

Refresh Nextcloud to see updates from the gantt chart. If you update your kanban board, select the board title at the top of deckGantt to update the gantt chart without having to login again.

Start dates aren’t configurable in the Nextcloud Deck app version 1.5.3. deckGantt compensates for this by modifying the tasks description. 

The format for the start date will be “d:[number]:d.” If the start date is one day before the due date, the code will state “d:1:d.” 

You can edit this info in Nextcloud card descriptions to update the gantt chart without issue.

Task progression is also unavailable in Nextcloud. You must add the progression code to a card’s description before you can edit it in the gantt chart. The format is “p:[number]:p.”

Afterwards, you can update the progress bar within the gantt chart by dragging the bottom of it.

Task dependencies in gantt charts can only be set in the Nextcloud card description. Format: “w:[number1],[number2]:w” with card ID numbers to set as dependencies in the parent task. Select a card in Nextcloud to see the card ID at the end of the URL. This cannot be modified in the gantt chart.

Gantt Chart Customization

There are four options for customizing a card’s bar color in deckGantt: 

c:bar-blue:c

c:bar-red:c

c:bar-green:c

c:bar-default:c 

“Default” is grey.

You can create more CSS classes in the includes/deckGantt.css file.

Changing the deckGantt Language

The default language for some deckGantt text is French (e.g. months). Follow these steps to change the text language.

1. Log into SSH and navigate to your deckGantt directory.
2. Search for the language line in the JavaScript file:

   cat -n includes/deckGantt.js | grep language

   
   The output will state the line number first: “219 language: ‘fr’,.”
3. Edit the file. For Nano, directly to the line:

   nano +219 includes/deckGantt.js

4. Change ‘fr’ to ‘en’ and save changes.

Edit the kanban board menu text in the index.html file (line 45). You’ll see the following line:

<div class="board_view_title"> Tableau(x) disponible(s) </div>

Change “Tableau(x) disponible(s)” to your preference and save changes.

Have fun with your new deckGantt Nextcloud integration.