Microsoft Power Apps - Canvas App integration

[uchimata2]

Is your feature request related to a problem? Please describe. I need an attractive way of presenting hierarchical data in a software implemented using Microsoft Power Apps. All the diagramming alternatives suffer from severe issues, but this solution could bring me all I need. I just need to be able to show the org-chart in a page of my canvas application.

Describe the solution you'd like Let's say there's a utility application which maintains a DB as a catalog of hierarchical data, such as: Company organization, Project teams, Legal entities, etc. One of the function of this application is editing the data via lists and forms, the other one is to present it using this great org-chart. It's very important that the sensitive data should not leave the company's environment, so local or on-prem rendering must be performed.

Describe alternatives you've considered

1. Microsoft Power BI - lack of any org-chart diagram. 3rd party charts are extremely poorly implemented, sharing the data with 3rd party, lack of customizations.
2. PlantUML - An on-prem service must be installed and maintained by IT teams, lack of orgchart-like diagram.
3. Mermaid.js - Lack of orgchart-like diagram.
4. THIS ONE - Simply just perfectly the thing I need, seemingly not less in any manner.

Additional context Canvas applications have the feature to include JS code, but I'm unsure that such extensive library can be integrated. Any workaround or working alternatives are very welcome as well.

---

[bumbeishvili]

Hi, I don't exactly understand what you need, and I am not exactly sure of what is 'Canvas App'.

Org chart is basically a single javascript class . It works with SVG , not with Canvas

[uchimata2]

Hey,

First, thank you for your fast response, I really appreciate it! The Canvas App is not the 'canvas' in JS you are referring to. Microsoft has introduced a technology stack, called Power Platform. Within Power Platform you might create data visualization dashboards using the Power BI toolset, or you can create web applications using Power Apps. Canvas App is one way of implementing a Power Apps application (Model driven is the alternative). Some quick insight: https://www.thepowerpeople.com/microsoft-power-apps/different-types

What I'm looking for is to show an org chart within my application built with Canvas App technology.

Maybe this issue is not a feature request at all, but a "How to do it" guide is which I'm looking for instead. All in all, I'm not a frontend developer with advanced JS knowledge, so I might need some indication to be able to integrate your great tool into my application somehow. I couldn't find any sources, so I reported the need here. Do you have any suggestion please?

[bumbeishvili]

I understand what you mean now.

Ok, so you certainly need a js knowledge to use this library. I am not familiar with the tech you mentioned, but if it can load external libraries and it's possible to use html DOM element, then this ort chart will probably work too.

This is the minimal code which you can copy paste around and check if it works

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-org-chart@2"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-flextree@2.1.2/build/d3-flextree.js"></script>
<div
  class="chart-container"
></div>

<script>
  var chart;
  d3.csv(
    'https://raw.githubusercontent.com/bumbeishvili/sample-data/main/org.csv'
  ).then(data => {
    chart = new d3.OrgChart()
      .container('.chart-container')
      .data(data) 
      .render();
  });
</script>

[uchimata2]

Okay, I'm going to give it a try soon then I'm coming back with some feedback... Thank you for your support!