137
Views
11
Comments
Solved
[Hierarchical Organizational Chart] How do I implement this kind of "add node button" on the orgachart?
hierarchical-organizational-chart
Reactive icon
Forge asset by Sylvain Billot
Application Type
Reactive

I'm using this forge. (HierarchicalOrganizationalChart)

I have what I want in addtion and I want to implement this kind of "add node button" on the OrgaChart tree like the below image. It's like there is each "plus mark button" on each node .



Once you press the button, a new node is added and you can edit the node there like this.


I mean, I want to be able to add nodes on this Orgachart, also it'd be nice if we could delete nodes as well.

I think we need to use Javascript to do this but I'm stuck on that implementation.

Doos anyone have any ideas on this?

I'd appreciate it if you could give me how to implement this kind of function.

I look forward to your advice.

Best,


2019-11-04 15-29-58
Sylvain Billot
Solution

Hi Yoshikawa san,

The main issue was here:

I attach an oml with this modifation and a working link to the good diagram from the [OrgaChartList].

(I'm no more in vaccation, so i will be a little bit less reactive with my answers)

Regards

CloneOfOrgCharts.oml
UserImage.jpg
Tsubasa Yoshikawa

Hi,

I appreciate your help. I got what I wanted thanks to you.

I'll make the best of your module, going forward.

I'm sorry to trouble you despite the fact that you are having a vacation.....

Thank you so much.

Regards,

2019-11-04 15-29-58
Sylvain Billot

Hello Yoshikawa san,

To create a "Add" button you have to generate an HTML tag like that or the equivalent in Javascript:

"<a class='like-a-button-CSS-Class' href='/MyApplication/MyAddScreen?parentRecordId=" + Records.current.Id +  "'>+</a>"

To do a delete button, I use a similar way :

"<a class='like-a-button-CSS-Class' href='/MyApplication/MyDeletionScreen?RecordId=" + Records.current.Id +  "'>-</a>" 
The tips is to use a "Fetch Data From another source" in the MyDeletionScreen that curently delete the selected record.

In the futur, I will add those king of things in the demo of [Hierarchical Organizational Chart]
I hope that I have answered to your questions.

Regards
Sylvain

UserImage.jpg
Tsubasa Yoshikawa

Hi Sylvain ,

Thank you. Sorry to ask a beginner question but, where shoud I write that HTML tags ?

I just thought I add html tag here...


I'm trying to do like this here but I suppose this may be wrong.... I haven't publish and test it yet, though.

Red is "add" button. Blue is "delete" button.


[Add button]

"<a class='like-a-button-CSS-Class' href='/HierarchicalOrganizationalChartDemo/DemoOrgaChart?parentRecordId=" +RecordsList.Current.Records.Id +  "'>+</a>" 

[Delete button]

"<a class='like-a-button-CSS-Class' href='/HierarchicalOrganizationalChartDemo/DemoOrgaChart?RecordId=" +RecordsList.Current.Records.Id+  "'>-</a>" 



Also, as you mentioned that you will add those kind of things in the demo of [Hierarchical Organizational Chart] , I'm really counting on you. Appreciated! I look forward to that demo module.

Best,

UserImage.jpg
Benedetta Sferrella

What If I want to bound this button to a popoup opening? How can I call from this HTML this action? 

2019-11-04 15-29-58
Sylvain Billot

Hi Yoshikawa san,

The location to add HTML tags is the content of the node :

It is not ended, but it looks like that :

The result can be like that:

It must be completed to have real button look; the css used for that:
 

Regards
Sylvain

UserImage.jpg
Tsubasa Yoshikawa

Hi Sylvain,

Thank you for telling me exactly. I did it.

The rest is to make those actual functions and something ?.

In fact, In order to add or edit or delete the node on the screen when pressing each button, then refresh  the entity ,  I’m taking a trial-and-error approach however I haven't reached the implementation.

I'm trying some ways with Javascript stuff and Client action but I'm in trouble...

I guess we maybe need to CreateDemo, UpdateDemo, DeleteDemo action of Demo Entity...I'm not confident.


Regards


2019-11-04 15-29-58
Sylvain Billot

Hi Yoshikawa san,
Good news: now the update of the demo file is ended and I have just uploaded it on the forge.

I guess that if you download it, may be it will be more explicit.

In the demo I use just simple HTML tags without javascript and because my entity is in the Demo module I don't need to create CreateDemo UpdateDemo DeleteDemo server actions.


In fact for Creation and Update, it's just a link to the good screen
For Deletion, it's a link to a "ghost" screen that do the job and go to the diagram again.


I let you watch the demo file and I am at your disposal for any question about it.

Regards 
 

UserImage.jpg
Tsubasa Yoshikawa

Hi Sylvain,

Thank you for the update of the demo file!  This is so useful. I got what you mean.

With all due respect, actually I have something I want if possible in this module.

Currently, we can have only one orgchart but I want to be able to manage multiple orgcharts and edit each orgchart.

I tried to arranged the demo module but I'm facing some issues.


What I want is,

for instance, let's say I have multi orgcharts. I can see a orgchart( below example: orgchart1).

If you click "switch to another orgchart" button, you move to Orgchart List screen. You can see every orgchart you have created. 


click the link, you can open another orgchart if you like. (below example: orgchart2)


In order to implemet this kind of stuff, Firstly, I created one more new entity for orgchart list and then I tried several things but it doesn't work.


Is it possible to implement this function in this Forge module?

Do you have any ideas?  I was wondering if you could give me some advice.

I'm attaching my oml I tweaked for your reference...it's not still completed, though.

Best,

MyOrgChartArranged.oml
2019-11-04 15-29-58
Sylvain Billot

Hi Yoshikawa san, 

Your approch to display separatly each organigram is good : you have to attach each node of an organigram [Demo] to a unique [OrgaChartList].

  1. To do that you have to modify the HierarchyDetail Form to add the OrgaChartListId and you have to invent something to be sure that each node of an organigram have the same OrgaChartListId.
  2. Modify that Agregat to filter by OrgaChartListId 



I use an another way to display separate Organigrams, but I am limited with the number of level to display because OutSystems don't have recursive statment.

  1. I consider all Demos with parentid=nullidentifier() as head of an organigram, so i don't need an [OrgaChartList] entity
  2. In my GetDemoes aggregat i do somethinh like that for a four levels diagram:


I send you a demo in attachment
Regards

Hierarchical Organizational Chart -Demo.oap
UserImage.jpg
Tsubasa Yoshikawa

Hi Sylvain, 

Thank you for your idea. I took a look at the attachement. Your suggestion is great.


For now, I cloned your demo and I'm addressing my way. (the way to attach each node of an organigram [Demo] to a unique [OrgaChartList]. )

However, 

As you said, I did the below two things.

  1. To do that you have to modify the HierarchyDetail Form to add the OrgaChartListId and you have to invent something to be sure that each node of an organigram have the same OrgaChartListId.
  2. Modify that Aggregate to filter by OrgaChartListId


and  I'm just implementing it with my idea that i said the previous post but i'm facing a issue here. It'd be greatful if you could give me any good clue.

I can move from orgChartList to each Orga Chart,

but when I moved to the orgachart , nothing shows up like this. I have the same issue when linking to others.(orgchart1, orgchart3) 


I created some data in Demo List like this. "which orgchart"  column means [OrgaChartList] Chartname attribute. The OrgaChartListId  shows, though...


I am wondering where I am missing... How can i solve it?

It'd ne nice if you could tell me about good solution to do my way.

I hope I can make th most of your expertise. 

I send you my clone module in attachment . You could check for the details.

Regards,

CloneOfOrgCharts.oml
2019-11-04 15-29-58
Sylvain Billot
Solution

Hi Yoshikawa san,

The main issue was here:

I attach an oml with this modifation and a working link to the good diagram from the [OrgaChartList].

(I'm no more in vaccation, so i will be a little bit less reactive with my answers)

Regards

CloneOfOrgCharts.oml
UserImage.jpg
Tsubasa Yoshikawa

Hi,

I appreciate your help. I got what I wanted thanks to you.

I'll make the best of your module, going forward.

I'm sorry to trouble you despite the fact that you are having a vacation.....

Thank you so much.

Regards,

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.