Alfresco中的dhtmlxgantt图表分享

Question

my goal is to generate a Alfresco Share page which contains a dhtmlxgantt Chart, which is generated out of a Alfresco site datalist.

What I've accomplished so far:

• I have a Datalist which contains all necessary Informations for the gantt Chart.

• I have created a repository script which retrieves the necessary values from the datalist, and the .ftl template presents the values like they need to be to get parsed by the dhtmlxgantt parser ie:

{data:[{id:00008,text:'Titel7',start_date:'16-2-2017',duration:6,progress:0.65,open:true}]};

• I've created an Alfresco Share Page that calls the repository script and gets the gantt Ready json.

• I've integrated the dhtmlxgantt plugin into the Alfresco share page

• The called Json gets Parsed by the gantt Parser

The Problem is, that the div where the gantt Bars etc. are in, is so small that only the timeline gets displayed. I don't know how to change the size of the div because it gets generated by the dhtmlxgantt JavaScript file itself.

I can say for sure that the Gantt Bars and the descriptions on the left side are loaded properly, because when I ajust the CSS properties of the div Containers they appear. But when I load the page the div are set to a size like there weren't any gantt Bars.

Here is what I get when I load the page: just loaded page

And that is what i get when I adjust the div sizes in firefox console: loaded and adjusted via firefox

Has anyone else has faced this problem?

EDIT: I have now tried it like @vikash suggested. I have the following page file (generate-gantt.xml) located in ../alfresco/site-data/pages

<page>
<template-instance>generate-gantt</template-instance>
<authentication>user</authentication>
</page>

and the template instance file (generate-gantt.xml) located in ../alfresco/site-data/template-instances

<template-instance>
   <template-type>org/alfresco/<<temp-type>></template-type>
   <components>

      <component>
         <region-id>gantt</region-id>
         <url>/getDatalistValues</url>
      </component>

   </components>
</template-instance>

"/getDatalistValues" is a repository webscript that i've created and works perfectly. It Returns the properly formatted "json" (it's not valid per definition but dhtmlxgantt Needs it in this Format)

{

    data:[
        {
            id:00021,
            text:'Overflow',
            start_date:'1-3-2017',
            duration:2,
            progress:0.45,
            open:true
        },
        {
            id:00008,
            text:'Titel7',
            start_date:'16-2-2017',
            duration:6,
            progress:0.65,
            open:true
        },
        {
            id:00010,
            text:'Nachträglich2',
            start_date:'22-2-2017',
            duration:0,
            progress:0.39,
            open:true
        },
        {
            id:00006,
            text:'Titel5',
            start_date:'19-2-2017',
            duration:7,
            progress:0,
            open:true
        }
    ]

};

Also I have the following component (page.gantt.content.xml) located in ../alfresco/site-data/components

<?xml version="1.0" encoding="utf-8"?>
    <component>
      <id>page.gantt.content</id>
      <scope>page</scope>
      <region-id>gantt</region-id>
      <source-id>content</source-id>
      <url>/getDatalistValues</url>
    </component>

"getDatalistValues" is the same repository webscript I mentioned above.

Last but not least i have the template file (generate-gantt.ftl) located in ../alfresco/templates

<#include "/org/alfresco/include/alfresco-template.ftl" />
    <@templateHeader></@>
    <@templateBody>
       <@markup id="alf-hd">
       <div id="alf-hd">
          <@region scope="global" id="share-header" chromeless="true"/>
       </div>
       </@>
       <@markup id="bd">
        <div id="bd">
            <@region scope="content" id="gantt"/>
        </div>
       </@>
    </@>
    <@templateFooter>
       <@markup id="alf-ft">
       <div id="alf-ft">
          <@region id="footer" scope="global" />
       </div>
       </@>
    </@>

when I load the page via https://localhost:8080/share/page/generate-gantt . It generates the ALfresco Header and Footer, but the component is not displayed. When I take a look at the html code in Firefox, the div where the component should be gets the id "unbound-region-gantt". Do anyone see my mistake? And the orther question is, where do I place the .js file that processes the result of the "/getDatalistValues" script, and parses it to generate the gantt Chart out of the result?

Answer 1

dhtmlxGantt inherits size of its html container unless you specify otherwise, same true for dhtmlxScheduler. Try setting some default height, eg

HTML:

<div id="gantt_here"></div>

CSS:

#gantt_here { 
    height: 600px; 
}

JS:

gantt.init("gantt_here");

If you use relative sizes (eg height:100%) - make sure that the parent element also have some initial height, otherwise you'll get 100% from 0px

Answer 2

to create a surf page refer this link. http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-add-page.html

If you wanted to get display your data in this page so you have to bind your webscript component to this page ex.

ftl file.

<#include "/org/alfresco/include/alfresco-template.ftl" />
<@templateHeader></@>
<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
   </div>
   </@>
   <@markup id="bd">
    <div id="bd">
        <@region scope="template" id="test-id"/>
    </div>
   </@>
</@>
<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global" />
   </div>
   </@>
</@>

template-instance file

<template-instance>
   <template-type>org/alfresco/<<temp-type>></template-type>
   <components>

      <component>
         <region-id>test-id</region-id>
         <url>/components/test-url</url>
      </component>

   </components>
</template-instance>

This tag's ID must be same as your component's id which you have to define in your template-instance files for creating component refer this link

http://docs.alfresco.com/5.2/references/surf-object-xml-reference-component.html http://docs.alfresco.com/5.1/concepts/dev-extensions-share-surf-web-scripts.html

<@region scope="template" id="test-id"/>

refer this link for creation of webscript component

http://docs.alfresco.com/5.1/concepts/dev-extensions-share-surf-web-scripts.html your webscript url must be same as coponent's url

 <url>/components/test-url</url>

from webscripts js you can call your repo wescript by using AJAX or you can call using

 var result = connector.get("/repo-webscript-url");
if (result.status.code == status.STATUS_OK) {
    var siteJSON = jsonUtils.toObject(result);
}

for creating repo webscript refer this http://www.krutikjayswal.com/2016/10/alfresco-webscript-spring-webscript.html