This blog explains how to convert an organizational chart created using Syncfusion’s ASP.NET Core Diagram component to a PPTX file using our .NET PowerPoint Library. The process involves creating an organizational chart, then sending the chart data to the server to generate the PowerPoint file.
Definitions
An organizational chart is a visual representation that illustrates the hierarchy, relationships, and relative ranks of positions within an organization. It provides a clear and concise overview of how various roles and responsibilities are distributed and interconnected.
The Syncfusion ASP.NET Core Diagram library provides tools and components that allow you to create, customize, and interact with organizational charts within your app.
PowerPoint is frequently employed in business settings to convey data, project updates, and reports during meetings. It provides a structured and visually appealing way to present information.
First, create an ASP.NET Core app using this documentation.
Install Syncfusion Essential JS 2 libraries
Install the Syncfusion Essential JS 2 and Syncfusion Presentation packages in your ASP.NET Core app. You can do this via the NuGet Package Manager Console or Visual Studio’s NuGet Package Manager.
Package Name
Description
Syncfusion.EJ2.AspNet.Core
This package provides the Syncfusion Essential JS 2 components for ASP.NET Core. With this, you can create an organizational chart using the Diagram library.
Syncfusion.Presentation.Net.Core
This package contains the Syncfusion PowerPoint Library for working with PowerPoint files and is used to generate PPT files.
Include the required scripts and styles
In the _Layout.cshtml file, include the following necessary Syncfusion Essential JS 2 and CSS files.
In the server-side code, create a C# class named OrganizationalDetails to represent the data for the organizational chart. This class has Id, Role, Color, Manager, ChartType, and Level properties. Additionally, define an action method named Index that retrieves the organizational chart data using the GetData() method from the OrganizationalDetails class. Then, set the chart data in the ViewBag to access it in the view.
In the JavaScript section of the view, define the nodeDefaults, ConnectorDefaults, and getLayoutInfo functions to customize the appearance and layout of the nodes and connectors in the organizational chart.
Creating an organizational chart using the Syncfusion ASP.NET Core Diagram library
Convert diagram to JSON using AJAX
In the JavaScript section of the view, design the convertDiagramToPPTX button by defining the function convertDiagramToJSON(), which will trigger when you click the convertDiagramToPPTX button. This function first retrieves the diagram data from the ejs-diagram instance, then iterates through the nodes and connectors to create a JSON representation of the chart. Finally, it will send the JSON data to the server using AJAX and posts it to the save action method in the controller.
Generate the PowerPoint presentation on the server
In the controller, define the save action method, which receives the JSON data from the client via the AJAX post. The server-side code creates a PowerPoint presentation using the Syncfusion PowerPoint Library.
The save method iterates through the nodes and connectors in the received JSON data. For each node, it adds a corresponding shape to the PowerPoint slide and customizes its appearance based on the node’s properties. For each connector, it adds an elbow connector to the slide and connects the nodes based on the connector’s source and target IDs.
Finally, the server-side code saves the generated PowerPoint presentation as Diagram.pptx file and closes the presentation.
Refer to the following code example.
[HttpPost]
public ActionResult save([FromBody] Dictionary<string, object> NCProperty)
{
//Create an instance for a PowerPoint presentation.
IPresentation pptxDoc = Presentation.Create();
//Add slide to the presentation.
ISlide slide = pptxDoc.Slides.Add(SlideLayoutType.Blank);
//Resize a slide size to diagram canvas size.
slide.SlideSize.Width = 1000;
slide.SlideSize.Height = 1000;
//parse a node collection.
List<DiagramNode> Nodes = JsonConvert.DeserializeObject<List<DiagramNode>>(NCProperty["nodeProperty"].ToString());
foreach (var node in Nodes)
{
//Adds a new shape to the slide.
IShape shape = slide.Shapes.AddShape(AutoShapeType.Rectangle, node.OffsetX, node.OffsetY, node.Width, node.Height);
//Adds a shape id and its level.
shape.Description = node.Id + "&" + node.AddInfo.ToString();
// Apply the color for the shape.
string hexColorCode = GetShapeColorBasedOnLevel(node.AddInfo.ToString());
shape.Fill.FillType = FillType.Solid;
shape.Fill.SolidFill.Color = ColorObject.FromArgb(int.Parse(hexColorCode.Substring(0, 2), NumberStyles.AllowHexSpecifier),
int.Parse(hexColorCode.Substring(2, 2), NumberStyles.AllowHexSpecifier),
int.Parse(hexColorCode.Substring(4, 2), NumberStyles.AllowHexSpecifier));
// Disable the line format of shape.
shape.LineFormat.Fill.FillType = FillType.None;
// Apply VerticalAlignment.
shape.TextBody.VerticalAlignment = VerticalAlignmentType.Middle;
foreach (var annotation in node.Annotations)
{
//get the node label.
string content = annotation.Content;
//Adds a paragraph to the shape.
IParagraph paragraph = shape.TextBody.AddParagraph();
// Apply HorizontalAlignment.
paragraph.HorizontalAlignment = HorizontalAlignmentType.Center;
//Adds a text to the paragraph.
ITextPart textPart = paragraph.AddTextPart(content);
// Apply text properties.
textPart.Font.Color = ColorObject.White;
textPart.Font.FontSize = 10;
}
}
//To get connectors collection.
List<DiagramConnector> Connectors = JsonConvert.DeserializeObject<List<DiagramConnector>>(NCProperty["connectorProperty"].ToString());
//Iterate a connectors.
foreach (var connector in Connectors)
{
IShape sourceShape = GetShapeWithID(connector.SourceID, slide.Shapes);
IShape targetShape = GetShapeWithID(connector.TargetID, slide.Shapes);
if (sourceShape != null && targetShape != null)
{
int targetShapeConnectionPortIndex = GetConnectionPortIndexBasedOnLevel(targetShape.Description.Split('&')[1]);
//Add elbow connector on the slide and connect the endpoints of the connector with specified port positions 0 and 4 of the source and target shapes.
IConnector connectorShape = slide.Shapes.AddConnector(ConnectorType.Elbow, sourceShape, 2, targetShape, targetShapeConnectionPortIndex);
//Adds a connector id.
connectorShape.Description = connector.Id;
//Apply connector line color.
connectorShape.LineFormat.Fill.FillType = FillType.Solid;
connectorShape.LineFormat.Fill.SolidFill.Color = ColorObject.Black;
}
}
//Save the PowerPoint presentation.
pptxDoc.Save("Diagram.pptx");
//Closes the presentation.
pptxDoc.Close();
return null;
}
/// <summary>
/// Gets a shape object with corresponding shape ID.
/// </summary>
/// <param name="id">Represents the id of shape.</param>
/// <param name="shapes">Represents a shapes collection.</param>
/// <returns>Returns shape object with corresponding shape ID.</returns>
private IShape GetShapeWithID(string id, IShapes shapes)
{
foreach (IShape shape in shapes)
{
if (shape.Description.Split('&')[0] == id)
return shape;
}
return null;
}
/// <summary>
/// Gets a connection port index of the target shape based on its level.
/// </summary>
/// <param name="level">Represents a level of shape.</param>
/// <returns>Returns a connection port index of the target shape based on its level.</returns>
private int GetConnectionPortIndexBasedOnLevel(string level)
{
switch (level)
{
case "level2":
case "level4":
return 0;
case "level3":
return 3;
case "level5":
default:
return 1;
}
}
/// <summary>
/// Gets a shape color based on its level.
/// </summary>
/// <param name="level">Represent a level of shape.</param>
/// <returns>Returns a shape color based on its level.</returns>
private string GetShapeColorBasedOnLevel(string level)
{
switch (level)
{
case "level1":
case "level2":
case "level3":
return "71AF17";
case "level4":
return "1859B7";
case "level5":
default:
return "2E95D8";
}
}
Converting an organizational chart diagram to PowerPoint presentation
Thanks for reading! In this blog, we’ve seen how to convert an organizational chart created using Syncfusion’s ASP.NET Core Diagram library to a PPTX file using Syncfusion’s PowerPoint Library. Try out the steps in this blog and provide your feedback in the comments section!
If you want to try the Diagram library, you can download our free trial. You can visit the Diagram control live demo and documentation for detailed explanations.