How to Add Gantt Charts (JSGantt) to Feng Office

[gain]

I've no lab tab and I dunno how to make a new tab... I'll try the WiZaxx way soon...

Accessing directly to the index.php seems work.

What "Do this in a new window" must do? I've understood that opens the Gantt chart in a new window, but it opens the empty form in a new window...

Have I misunderstood this functionality?

[allenlook]

I include here for your reference my settings to make the integrated tab work in Feng Office.  I reiterate however that it is *not* necessary to integrate jsGantt as a tab in Feng Office, you simply need to use the index.php I've supplied as a normal web page, and give it access to your Feng Office database.  Your integrated tab after this exercise will be called "Labs".

First copy the attached file 'LabController.class.php' into your 'application/controllers' folder.

Second, you should already have copied all my jsGantt-related files into an 'application/views/lab' folder that you create.

Third, you add the tab to the tab panel by adding the following section to 'public/assets/javascript/og/layout.js'.  Add it just BEFORE the following line of code: og.panels.reporting = new og.ContentPanel({

Code: [Select]

// AEL - Begin mod to add lab panel to Feng Office
og.panels.lab = new og.ContentPanel({
title: lang('labs'),
id: 'labs-panel',
iconCls: 'ico-labs',
refreshOnWorkspaceChange: false,
defaultContent: {
type: 'html',
data: '<iframe style="width:100%;height:100%;border:0" src="application/views/lab/index.php"></iframe>'
}
}),
// AEL - End mod to add lab panel to Feng Office
Fourth, you want to set up your label for your new tab.  You want to paste the following code into your 'language/en_us/lang.js' file, just AFTER the following line of code: addLangs({

Code: [Select]

// AEL - Begin mod to add lab panel to Feng Office
'labs': 'Labs',
// AEL - End mod to add lab panel to Feng Office
For completeness, I added this line of code to every lang.js file for every language shown under the 'languages' folder, but if you only use English you don't need to do this.

Fifth, you can set up your icon for your application.  I cheated and re-used the magic wand icon from templates.  This probably isn't necessary per-se, but I wanted a nifty little icon like the rest of the tabs.  To do that I copied the file 'public/assets/themes/default/images/16x16/template.png' to 'lab.png' in the same directory.  Then I added the following code in 'public/assets/themes/default/stylesheets/general/layout.css' in the same general section the other icons were defined (ico-tasks, ico-documents, etc.).

Code: [Select]

/* AEL - Begin mod to add labs to Feng Office */
.ico-labs {
background-image: url(../../images/16x16/lab.png) !important;
}
/* AEL - End mod to add labs to Feng Office */
That is what it took to make the tab work for me.  Again, I'm not a tab expert, I really started the thread more to share our work with jsGantt, and having it on a tab is kind of just a nice thing to do.

[allenlook]

What "Do this in a new window" must do? I've understood that opens the Gantt chart in a new window, but it opens the empty form in a new window... Have I misunderstood this functionality?

Opening the Gantt chart in a new window does several things.  It allows you to compare two Gantt charts side by side, and because it opens the Gantt chart in its own window, there is no frame wrapper around it, so you can see the code more easily, print preview more easily, and apply development and formatting tools more easily without the Feng Office constructs being in the way.

[mangoman]

Thanks, allenlook.

I removed the suggested line from the VIEW line of the query, but got the same error:
#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'DROP FUNCTION IF EXISTS tedxdfo_oficina.my_GetWorkSpaceName; CREATE FUNCTION te' at line 18

It's stalling at the "te" of the database name, so wouldn't it be on line 18?
DROP FUNCTION IF EXISTS database_name.my_GetWorkSpaceName;

Still confused, and frustrated, that this hasn't worked - yet. 
John

[mangoman]

Went back to run the query a 2nd time before exiting PHPMyAdmin - and it worked!

I then continued to add the tab - successfully!

I then opened the Gantt tab and ran a sample display - successfully!

Here are 3 observations:

#1 - Spelling error:
do that I copied the file 'public/assets/themes/default/images/16x16/template.png' to 'labs.png' in the same
...should be:
do that I copied the file 'public/assets/themes/default/images/16x16/template.png' to 'lab.png' in the same

#2 - UTF8:
The text in the Gantt window shows "weird" characters when it should show é o ó (diacritical marks) that I use for Spanish.

#3 - Database Errors?:
These error messages appear when I attempt to optimize the database:
     'tedxdfo_oficina.my_jsgantt' is not BASE TABLE
     Corrupt
(These tables don't have the og_ prefix.)

Other than these superficial notes, I'm so very happy that I can show & share this with the team.

Thanks,
John

[allenlook]

Good for you!    I'm glad you got it working.

I will fix the typo right now, thank you for noticing!

I think the funny characters showing is something that will have to be fixed in jsGantt?

I don't know what OPTIMIZE does, but I do know that my_jsgantt is not a table, it is a view, so maybe that has something to do with it?

UPDATE: I think the typo was actually in the css portion, where it called labs.png, and where it should have been lab.png, instead of the other way around...

[mangoman]

Sorry and yes - the spelling in #1 was inversely cited. It should read:

do that I copied the file 'public/assets/themes/default/images/16x16/template.png' to 'lab.png' in the same
...should be:
do that I copied the file 'public/assets/themes/default/images/16x16/template.png' to 'labs.png' in the same

Regarding MySQL, those errors are displayed because there are several new tables now in the database squema; if they don't do any damage, I would hate to remove them and then have to start over - so then they can remain there!! 

Hmm, yes, I suppose the UTF8 errors are in jsGantt; if you tell me what files & where, maybe I could add UTF encoding code at the top and see if it improves the layout.

Thanks,
John

[allenlook]

I believe there is only one file, that being jsGantt.js, in the application/views/lab directory.

[allenlook]

Sorry and yes - the spelling in #1 was inversely cited.

John, in order to honor the naming convention set by the rest of Feng Office, I've fixed it inversely to how you may have, so I left the file named lab.png, and I changed the .CSS file to refer to it correctly, eg. without the 's' on the end.

[mangoman]

In the end, whatever works is OK as long as the naming convention is consistent.

Adding <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> to the jsGantt.js didn't make a difference to the output and I still get the ? whenever an accent mark is required for  characters. I suspect that I would need to change the Workspaces names (and use ASCII/HTML codes) - or is there another way to edit/correct those special characters in the Workspace titles? (The MySQL db shows utf8_unicode_ci FWIW.) I'll do a bit more research and then leave it alone. 

BTW, I renamed the tab "Gantt" so that it's clearer to our users.

Thanks,
John

[allenlook]

You may notice in the PHP code (in index.php) that I put in some code borrowed from WordPress to "escape" the input fields, eg. I wanted to make sure that they were valid data and not attempts to SQL-inject the program.

I'll take a look at the PHP function htmlentities().  That may do what you want.

This page http://www.webmonkey.com/2010/02/special_characters/ as a good list of what's possible.

We're still working hard on the correct sort function - MySQL is throwing curve balls at us every single step of the way.  This seems like a good thing to do though, and I can get to it later, or if someone writes up the function I'd be glad to paste it into the central code.

[allenlook]

I've added PHP htmlentities() to the data selection form, adding it to the javascript for the Gantt chart may be harder.

UPDATE: As expected, names with special characters are showing up as blanks...  This will take some work.

[allenlook]

Apparently, special characters such as e-acute and e-grave are not valid in UTF-8 and the htmlentities() function returns a null, so I had to set the character set for names to be ISO-8859-15 for my testing.  It can be set to other values which can be found with a simple Google search.  Now the accents show up on the names, as well as the Euro, etc.

I've set the code to UTF-8 in the final code, but you'll have to test it when I post the next version to see if it works for you.

[mangoman]

OK, thanks - I'll test it in the next version then.
John

[allenlook]

You're very welcome.