A customer had the requirement to provide their users with a simple organisation chart that showed the contacts they had within an organisation grouped by department.
Sage CRM's API actually has an Org Chart option. You can read about that within the Developer Guide. This would allow you to build an organisation chart in anyway you want but it would also have the disadvantage that you would need to code it. It would be much nicer if Sage CRM already had a simple chart option that would draw the departmental hierarchy.
But actually Sage CRM has an old feature no longer used within the interface but which the customer could use for this simple purpose.
Below is an example of the screen showing the contacts known about within the company Eurolandia.
This trick uses the in built system action called PersonOrgChart that is added into the Company tab group. It also uses the pers_department field which is included by default in the standard PersonBoxLong.
The PersonOrgChart action is no longer used because it links and references older ways of building relationships which have been superceded by the Relationship Tab. Basically if we were to use the PersonOrgChart directly then it would have buttons and actions that would make no sense and would lead to data being entered into the wrong place.
BUT we can actually easily set this older screen to work very well just by dropping in some additional code into the JavaScript library folder.
The file we need to drop in contains Client Side API calls that change the screen and remove the problem information and at the same time opens up other possibilities for customizing this screen.
To add the OrgChart feature we need to do the following steps
- Add the Tab reference to the Company Tab
- Create the JavaScript file and add to the library
Add the Tab reference to the Company Tab
You need to log on as the System Administrator and the navigate to
Administration -> Customization -> Company
And choose the Tabs option.
Within the Tabs option, you then need to open the Company Tabgroup and add the following new Tab option
- Caption: Org Chart
- Action: other
- System Action: personorgchart
Create the JavaScript file and add to the library
In my example I called the file zzzSageCRMOrgChart05082015.js and dropped into the folder
- C:\Program Files (x86)\Sage\CRM\CRM73\WWWRoot\js\custom
or
- C:\Program Files (x86)\Sage\CRM\[instancename]\WWWRoot\js\custom
Below is the code for the JavaScript file.
[code language="javascript"]
/////////////////////////////////////////////////////////
//Filename: zzzSageCRMOrgChart05082015.js
//Description: Customization of PersonOrgChart action called from Company context.
//Date: 5th August 2015
//Author: Jeff Richards
//Version tested under: 7.3
//////////////////////////////////////////////////
crm.ready(function () {
var contextInfo = crm.getArgs();
if (contextInfo.Act == "424") {
//hide old buttons
crm.hideButton("NewCompany.gif");
crm.hideButton("listview.gif");
crm.hideButton("help.gif");
//change screen title
$( "#ZOOMPOPUP0" ).text(crm.getTrans("Tabnames","CompanyPeople"));
//hide old panels
$( "#ZOOMPOPUP2A" ).hide();
$( "#ZOOMPOPUP1" ).hide();
//add new person button
var newbuttonimage = '..\\Themes/img/color/buttons/new.gif';
var newbuttonaction = crm.url('1202');
crm.addButton(newbuttonimage,'Button','NewPerson',newbuttonaction);
//add relationships button
var relationshipbuttonimage = '..\\Themes/img/color/buttons/help.gif';
var relationshipbuttonaction = crm.url('RelatedEntities.dll-RunREList');
crm.addButton(relationshipbuttonimage,'Tabnames','Relationships',relationshipbuttonaction);
//add print button
var printbuttonimage = '..\\Themes/img/color/buttons/print.gif';
var stringURL = document.location.origin + $("#ZOOMPOPUP4").children("img").attr("src");
var printbuttonaction = {
'href': '#',
click:function(){window.open(stringURL, 'newwindow' , 'toolbar=0 , scrollbars=0, location=0, statusbar=0, menubar=0 , resizable=0, width=1250, height=350, left = 340, top = 200');}
};
crm.addButton(printbuttonimage,'Button','Print',printbuttonaction);
//add help button
var helpbuttonimage = '..\\Themes/img/color/buttons/ExpandSelectedNode.gif';
var helpbuttonaction = crm.installUrl()+"/help/EN/Main%20Menu/Default_CSH.htm#User/AI_AddingNewPersonToExis.htm";
crm.addButton(helpbuttonimage,'Button','Help',helpbuttonaction);
}
})
[/code]
This script does the follow tasks
- It hides the old buttons which do not make sense in this context and within the modern interface.
- It hides some panels at the bottom of the screen which contain links to redundant areas.
- It adds new buttons that can be used to add a new Person and create new Relationships.
It also adds a print button which opens the graphic in a new window so that it can be printed or copied easily into reports.
I would be very interested in hearing your feedback on this idea. Do you think it could be improved? What else would you like to see? It would be a very easy customization to bundle into a component and if there is enough interest I would be happy to provide it as one of the example resources available on this community.