How to integrate Org Chart

Dear Yuriy,
Im implementing the Org. Chart using Vaadin third party addon Orgchart add on I’m unable to add the component to any container. I’m getting type cast error. Please help me resolving this… I also added an image for better understanding…Untitled
Thank you…

Hi,

Take a look at this manual page: Working with Vaadin Components - CUBA Platform. Developer’s Manual

So, you have to unwrap CUBA component and use Vaadin API if you want to add Vaadin component inside of CUBA layout.

Hi @Narayanan

I don’t have an answer for you but I’ve been looking at the same Orgchart add on. If you get it integrated can you share what you did please?

Hello Yuriy,
I’ve seen the manual page. I find difficult to implement the unwrap. Can you show the sample code for unwrap the OrgChart vaadin addon into cuba platform container…

It is not that hard to include Vaadin component inside of PopupView.

For instance:

<popupView id="popupView"
           minimizedValue="Show custom Vaadin component">
    <vbox id="popupViewInnerBox">

    </vbox>
</popupView>

And we can easily add Vaadin Slider inside of popupViewInnerBox:

@Inject
private VBoxLayout popupViewInnerBox;

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

    com.vaadin.ui.Slider vaadinSlider = new com.vaadin.ui.Slider();
    vaadinSlider.setCaption("Slider");
    vaadinSlider.setWidth("200px");
    vaadinSlider.setMin(0);
    vaadinSlider.setMax(100);

    popupViewInnerBox.unwrap(com.vaadin.ui.Layout.class)
            .addComponent(vaadinSlider);
}

You can use the same technique with Vaadin OrgChart add-on.

I tried and i’m getting the error cannot resolve symbol ‘addComponent’

popupViewInnerBox.unwrap(com.flowingcode.vaadin.addons.orgchart.OrgChart.class).addComponent(component2);

popupViewInnerBox.unwrap(com.vaadin.ui.Layout.class)

VBoxLayout is com.vaadin.ui.Layout wrapper, not the com.flowingcode.vaadin.addons.orgchart.OrgChart.

Do not replace class in unwrap, just pass your Vaadin component instance into addComponent().

Works as expected… Thanks Yuriy… Your support is awesome… Hats-off…
Thank you…

Hi
I tried and my one is also working where I have used CssLayout.
Did you try displaying image of the employee? I need to display employee’s image would welcome any suggestions.

Mortoza

Hello Mortoza,
I tried to implement the Org Chart in popup using hbox, vbox and csslayout. It works well for the first time, then the application going hanged. The application only works after i reload the browser (I think its a css or javascript conflict). Are you also facing the same issue? If no, can you plz share your code… It may help to resolve my issue. And i yet to try display image for the Org Chart… After resolving the issue… i will try to implement the image in org chart…

After i opened the orgchart popup in the screen… If i open any other screen… it shows the below…
Untitled

Hi Vimal
I am not facing any issue, it’s running well.
Here is the codes:

@Inject
private CssLayout cssLayout;
@Inject
private DataManager dataManager;

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

    loadOrganizationChart();


}


private CssLayout loadOrganizationChart() {

    int number = 1;
    OrgChartItem item1 = null;
    OrgChartItem item2 = null;
    OrgChartItem item3 = null;
    OrgChartItem item4 = null;
    ArrayList<Employee> arrayList2 = null;

    LoadContext<Employee> loadContext = new LoadContext<>(Employee.class);
    loadContext.setView("employeeManagers-view");
    loadContext.setQueryString("select e from erp$Employee e where e.manager = :manager")
            .setParameter("manager", null);

    Employee ceo = dataManager.load(loadContext);


    if(ceo !=null){


        item1 = new OrgChartItem(number, ceo.getFirstName()+ ' '+ceo.getLastName(), ceo.getJobTitle());
        OrgChart orgChart = new OrgChart(item1);

        LoadContext<Employee> loadContext2 = new LoadContext<>(Employee.class);
        loadContext2.setView("employeeManagers-view");
        loadContext2.setQueryString("select e from erp$Employee e where e.manager.id = :manager")
                .setParameter("manager", ceo.getId());

        List<Employee> level2List = dataManager.loadList(loadContext2);

        ArrayList<OrgChartItem> obj2 = new ArrayList<OrgChartItem>();
        ArrayList<OrgChartItem> obj3 = new ArrayList<OrgChartItem>();
        ArrayList<OrgChartItem> obj4 = new ArrayList<OrgChartItem>();

        obj2 = new ArrayList<OrgChartItem>();
        for(Employee employee : level2List){

            number++;
            item2 = new OrgChartItem(number, employee.getFirstName()+ ' '+employee.getLastName(), employee.getJobTitle());

            obj2.add(item2);

            LoadContext<Employee> loadContext3 = new LoadContext<>(Employee.class);
            loadContext3.setView("employeeManagers-view");
            loadContext3.setQueryString("select e from erp$Employee e where e.manager.id = :manager")
                    .setParameter("manager", employee.getId());

            List<Employee> level3List = dataManager.loadList(loadContext3);

            obj3 = new ArrayList<OrgChartItem>();

            for(Employee employee3 : level3List){
                number++;
                item3 = new OrgChartItem(number, employee3.getFirstName()+ ' '+employee3.getLastName(), employee3.getJobTitle());

                obj3.add(item3);

                LoadContext<Employee> loadContext4 = new LoadContext<>(Employee.class);
                loadContext4.setView("employeeManagers-view");
                loadContext4.setQueryString("select e from erp$Employee e where e.manager.id = :manager")
                        .setParameter("manager", employee3.getId());

                List<Employee> level4List = dataManager.loadList(loadContext4);

                obj4 = new ArrayList<OrgChartItem>();

                for(Employee employee4 : level4List){
                    number++;
                    item4 = new OrgChartItem(number, employee4.getFirstName()+ ' '+employee4.getLastName(), employee4.getJobTitle());

                    obj4.add(item4);

                }

                item3.setChildren(obj4);
            }

            item2.setChildren(obj3);

        }

        item1.setChildren(obj2);

    }

    OrgChart orgChart = new OrgChart(item1);

    orgChart.setChartTitle("Athena ERP Org Chart Demo");
    orgChart.setChartNodeContent("title");
    orgChart.setChartExportButton(true);
    orgChart.setChartExpandCollapse(true);
    orgChart.setChartZoom(true);

    cssLayout.unwrap(com.vaadin.ui.CssLayout.class).addComponent(orgChart);

    return cssLayout;

}

Hi all,

I’m trying to integrate orgchart into cuba. In Gradle dependency I set:

configure(webModule) {
configurations {
    webcontent
}

dependencies {
    compileOnly(servletApi)
    compile(globalModule)
    compile("org.vaadin.addons:stepper:2.4.0")
    compile("com.flowingcode.vaadin.addons:orgchart-addon:4.0.5")
}

But I get this error:

Loading inherited module 'it.hf.hfc.web.toolkit.ui.AppWidgetSet'
   Loading inherited module 'com.flowingcode.vaadin.addons.orgchart.OrgChart'
      [ERROR] Unable to find 'com/flowingcode/vaadin/addons/orgchart/OrgChart.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?

If I check in the dependency jar I can’t find OrgChart.gwt.xml (how can you see in screenshot).

Schermata 2020-10-15 alle 23.23.55

How can I resolve this issue?

Hi
You should use the following version of org-chart:

compile('com.flowingcode.vaadin.addons:orgchart-addon:2.0.4')

The version you are trying is not compatible with the Vaadin version used (8.x) in CUBA PLATFORM.