Org Chart

Support
#1

I am looking for a good organization chart that I can use in my CUBA application. After doing a search, found Google charts has a Org Chart component. Is it possible we can use it in CUBA, how? Apart from google charts, is there any other option suggested?

#2

Hi,

You can integrate third party Org Chart if you create server side API for your javascript library using Vaadin. You can read more about creating Vaadin APIs for JS components here:

Also there is a support for creating of CUBA custom components integrated to Studio: Using a JavaScript library - CUBA Platform. Developer’s Manual. It is based on Vaadin approach and API.

I would recommend a couple of JS libraries that you can use to create organisation charts in your application:

#3

Hi Yuriy
Thank you so much for those references and sorry being late responding / asking question again on this.

I am trying to learn how to use javaScript component in CUBA. Here I am now trying to using the component from here as suggested: GitHub - dabeng/OrgChart: It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

The sample source code that I see on that website as follows:


// sample of core source code
var datasource = {
  'name': 'Lao Lao',
  'title': 'general manager',
  'children': [
    { 'name': 'Bo Miao', 'title': 'department manager' },
    { 'name': 'Su Miao', 'title': 'department manager',
      'children': [
        { 'name': 'Tie Hua', 'title': 'senior engineer' },
        { 'name': 'Hei Hei', 'title': 'senior engineer' }
      ]
    },
    { 'name': 'Hong Miao', 'title': 'department manager' },
    { 'name': 'Chun Miao', 'title': 'department manager' }
  ]
};

$('#chart-container').orgchart({
  'data' : datasource,
  'depth': 2,
  'nodeContent': 'title'
});

I have followed the slider sample to configure this orgchart work but being new in using javaScript in CUBA, I might have made mistake and getting following exception:


:orgChartApp-web:compileJavaD:\Studio Projects\demo\orgchart\modules\web\src\com\company\orgchart\web\organizationchart\Organizationchart.java:20: error: method does not override or implement a method from a supertype
    @Override
    ^
D:\Studio Projects\demo\orgchart\modules\web\src\com\company\orgchart\web\organizationchart\Organizationchart.java:35: error: cannot find symbol
            orgchart.setValue(new String[] {getItem().getName(), getItem().getManager()});
                                                     ^
  symbol:   method getName()
  location: interface Entity
D:\Studio Projects\demo\orgchart\modules\web\src\com\company\orgchart\web\organizationchart\Organizationchart.java:35: error: cannot find symbol
            orgchart.setValue(new String[] {getItem().getName(), getItem().getManager()});
                                                                          ^
  symbol:   method getManager()
  location: interface Entity
D:\Studio Projects\demo\orgchart\modules\web\src\com\company\orgchart\web\organizationchart\Organizationchart.java:40: error: cannot find symbol
                getItem().setName(newValue[0]);
                         ^
  symbol:   method setName(String)
  location: interface Entity
D:\Studio Projects\demo\orgchart\modules\web\src\com\company\orgchart\web\organizationchart\Organizationchart.java:41: error: cannot find symbol
                getItem().setManager(newValue[1]);
                         ^
  symbol:   method setManager(String)
  location: interface Entity
Note: D:\Studio Projects\demo\orgchart\modules\web\src\com\company\orgchart\web\organizationchart\Organizationchart.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
5 errors
 FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':orgChartApp-web:compileJava'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

I have attached the sample project and if you please help where i am making the mistake that will be appreciated. (after fixing, if you want to post it to sample applications page that may help some developers)

orgchart.zip (51.2M)

#4

It seems that you are trying to open Editor screen from the menu, it cannot be done without passed instance.

Also in Organizationchart screen you have missed typing of AbstractEditor, it should be:


public class Organizationchart extends AbstractEditor<Employee> {
}

Please see Java compiler output you have attached to fix the remaining issues in this screen.

#5

Hi Yuriy
Sorry, for that simple mistake. I have now included it

There is no more exceptions but there is no org chart displayed. If you please have a look at the attached sample project codes that my help where is the issue!

Thank you in advance.

orgchart.zip (463.8K)

#6

Hi,

First of all, you have to fix OrgChartComponent definition and include all the required JavaScript files to @JavaScript annotation and CSS files to @StyleSheet annotation:


@JavaScript({
        "jquery.orgchart.js",
        "orgchartcomponent-connector.js"
})
@StyleSheet({"jquery.orgchart.css"})
public class OrgChartComponent extends AbstractJavaScriptComponent {

Next, you have to provide data for your Org Chart, as described in the manual of https://github.com/dabeng/OrgChart:


com_company_orgchart_web_toolkit_ui_orgchartcomponent_OrgChartComponent = function() {
    var connector = this;
    var element = connector.getElement();

    var datasource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer' }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager' }
      ]
    };

    var orgchart = $(element).orgchart({
      "data" : datasource,
      "depth": 2,
      "nodeContent": "title"
    });
}

And finally you can add the component to the layout to test its functionality:


public class ExtAppMainWindow extends AppMainWindow {
    @Override
    public void init(Map<String, Object> params) {
        super.init(params);

        Layout layout = workArea.getInitialLayout().unwrap(Layout.class);

        OrgChartComponent component = new OrgChartComponent();
        component.setSizeFull();

        layout.addComponent(component);
    }
}

I’ve uploaded your sample project with my fixes so you can try it in action.

Please follow Vaadin instructions to integrate your components with server side properly:

orgchart.zip (50.2K)

Integration with open source ZK Spreadsheet control
#7

Wonderful! Thank you.
Is it possible we can pass the datasource (most likely Hierarchy data source) while initiating the code below:


        OrgChartComponent component = new OrgChartComponent();

or any better thought to let the orgChart work with the data from an Entity instead of static data?

#8

If you want to bind your custom component to a datasource you have to implement all the data binding logic yourself. You can pass a datasource to your component but actual logic should be implemented according to features of a concrete component.

Note that, JavaScript code cannot be connected to a datasource directly. Client side implementations support only primitive data types i.e. you have to serialize complex state in Vaadin server side component to String / JSON string and send it to your javascript. Cuba Platform does not provide any integration mechanisms for JavaScript thus you have to use Vaadin API.

#9

A post was split to a new topic: How to integrate Org Chart