Create SharePoint Solution In Visual Studio
Add Layout Folder in That solution
Download below files and paste that file into /Layout/Organization/ folder
Create Visual Web part
Add below Code in web part Design page
<script src="../_layouts/15/Organization/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../_layouts/15/Organization/prettify.js" type="text/javascript"></script>
<script src="../_layouts/15/Organization/jquery.jOrgChart.js" type="text/javascript"></script>
<link href="../_layouts/15/Organization/custom.css" rel="stylesheet" type="text/css" />
<link href="../_layouts/15/Organization/jquery.jOrgChart.css" rel="stylesheet"
type="text/css" />
<link href="../_layouts/15/HRMS.EmployeeManagement/OrganizationalUnit/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
//alert('here');
$("#org").jOrgChart({
chartElement: '#chart',
dragAndDrop: true
});
});
var mynode;
function fnExpand(node) {
var image = node.find("img");
//alert(image);
//alert(image.attr("src"));
if (image.attr("src") == '../_layouts/15/images/HRMS.EmployeeManagement/Collapse.png') {
image.attr("src", '../_layouts/15/images/HRMS.EmployeeManagement/Expand.png')
}
else {
image.attr("src", '../_layouts/15/images/HRMS.EmployeeManagement/Collapse.png')
}
}
</script>
<asp:Label ID="lblChartHtml" runat="server" Text=""></asp:Label>
<div id="chart" class="orgChart">
</div>
Add below Code in Webpart Code behind Page
List<SPListItem> listItems = null;
string childRecords = string.Empty;
string image = string.Empty;
string orgDOMstart = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
BuildOrgChart();
}
/// <summary>
/// Method will build the org chart html, which will be used by the JQuery plugin to rendered the org chart UI.
/// </summary>
private void BuildOrgChart()
{
string orgBody = string.Empty;
string orgDOMEnd = "</ul></li></ul>";
string spWebUrl = SPContext.Current.Web.Url;
//Get the OrgChart list items
SPSite objSite = SPContext.Current.Site;
using (SPWeb objWeb = objSite.OpenWeb())
{
string Title = objWeb.Title;
orgDOMstart = "<ul id=\"org\" style=\"display:none\"><li>" + Title + " Chart<ul>";
var list = objWeb.Lists.TryGetList("Employees");
listItems = GetListItemsAsList(list.Items);
}
//Get tol level nodes(employees), whom managers are not assigned.
//var topLevelNodes = listItems.Where(i => ((i["Manager"] == null) ? "" : i["Manager"].ToString()) == "").ToList<SPListItem>();
var topLevelNodes = listItems.Where(i => ((i["Manager"] == null) ? "" : i["Manager"].ToString()) == "" || GetIdValueFromLookup(i["Manager"]) == Convert.ToString(i["ID"])).ToList<SPListItem>();
listItems = listItems.Where(i => GetIdValueFromLookup(i["Manager"]) != Convert.ToString(i["ID"])).ToList<SPListItem>();
foreach (var item in topLevelNodes)
{
//For each top node recursively build the html
GenerateChilRecords(item);
orgBody = orgBody + childRecords;
childRecords = string.Empty;
}
//Assign the HTML to a Label text.
lblChartHtml.Text = orgDOMstart + orgBody + orgDOMEnd;
}
/// <summary>
/// Method used to recursively to build the chart html
/// </summary>
/// <param name="item"></param>
private void GenerateChilRecords(SPListItem item)
{
//Get the reportees
var empReportees = listItems.Where(i => GetIdValueFromLookup(i["Manager"]) == Convert.ToString(item["ID"])).ToList<SPListItem>();
//var empReportees = listItems.Where(i => ((String.IsNullOrEmpty(GetStringValueFromLookup(i["Manager"]))) ? "" : (GetStringValueFromLookup(i["Manager"]))) == (item["Full Name"].ToString())).ToList<SPListItem>();
//Add the collpase image, if there are any reportess for the employee
if (empReportees.Count > 0)
{
image = "<img class='image' src='../../../_layouts/15/OrgChart/Img/Collapse.png'></img>";
}
//childRecords = childRecords + "<li>" + image + " <span style='font-size: .9em'><u>" + item["Employee"] + "</u></span><br><span style='font-size: .8em'> " + item["Designation"] + "</span>";
childRecords = childRecords + "<li> <span style='font-size: .9em'><u>" + GetStringValueFromLookup(item["Full Name"]) + "</u></span><br><span style='color:black; font-size: .8em'> " + (String.IsNullOrEmpty(Convert.ToString(item["Job_x0020_Roles"])) ? "" : Convert.ToString(item["Job_x0020_Roles"]).Split('#')[1]) + "</span><span style='color:black; font-size: .8em'> " + (String.IsNullOrEmpty(Convert.ToString(item["Org_x0020_Unit"])) ? "" : (", " + Convert.ToString(item["Org_x0020_Unit"]).Split('#')[1])) + "</span>";
//if there are any reportess for the employee, call the method recursively to check if reportees have any reportess under them.
if (empReportees.Count > 0)
{
childRecords = childRecords + "<ul>";
foreach (var employee in empReportees)
{
GenerateChilRecords(employee);
}
childRecords = childRecords + "</ul></li>";
}
else
{
childRecords = childRecords + "</li>";
return;
}
}
/// <summary>
/// Method returns list of SPListItem, upon which we can use LINQ queries
/// </summary>
/// <param name="liCol"></param>
/// <returns></returns>
private List<SPListItem> GetListItemsAsList(SPListItemCollection liCol)
{
List<SPListItem> toReturn = new List<SPListItem>();
foreach (SPListItem li in liCol)
{
toReturn.Add(li);
}
return toReturn;
}
public string GetStringValueFromLookup(object lookupValue)
{
if (string.IsNullOrEmpty(Convert.ToString(lookupValue))) return string.Empty;
if (isLookup(lookupValue))
{
var value = Convert.ToString(lookupValue).Split(new[] { ";#" }, StringSplitOptions.None)[1];
return value;
}
else
{
return Convert.ToString(lookupValue);
}
}
public string GetIdValueFromLookup(object lookupValue)
{
if (string.IsNullOrEmpty(Convert.ToString(lookupValue))) return string.Empty;
if (isLookup(lookupValue))
{
var value = Convert.ToString(lookupValue).Split(new[] { ";#" }, StringSplitOptions.None)[0];
return value;
}
else
{
return Convert.ToString(lookupValue);
}
}
public bool isLookup(object lookupval)
{
bool retflag = false;
int indexcolon = Convert.ToString(lookupval).IndexOf(';');
int indexhash = Convert.ToString(lookupval).IndexOf('#');
int diff = indexhash - indexcolon;
if (indexcolon > 0 && indexhash > 0 && diff == 1)
retflag = true;
return retflag;
}
In this Code I have Used one list "Employees"
In this List I have Created below fields
Full Name
Manager ----Look-up of "Full Name"
Job Roles --- Look-up with another list
Org Unit --- Look-up with another list
After Creating List You can Deploy and add web-part in Site-Page.
It will come as below
Hi Kittu,
ReplyDeleteArticle is fine and awesome but these files not able download
/jquery-1.8.3.min.js
prettify.js
Hi Srinivas,
DeleteCould you please check now, you can able to download it.
Hi Kittu, How complex examples can be created this way? Can you check these examples and let me know whether they can be created using vs. These are drawn with a creately org chart tool (can be exported to XML)
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHi D V Siva Krishna (kittu),
ReplyDeletethank you, for your contribution!
I do not have access to Visual Studio. I have referred to the libraries within my Sharepoint Page.
Can I help me ?
I have a problem with the code:
Add below Code in Webpart Code behind Page
List listItems = null;
string childRecords = string.Empty;
string image = string.Empty;
string orgDOMstart = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
BuildOrgChart();
}
etc....