Git Product home page Git Product logo

spfx-org-chart's Introduction

org-chart

SharePoint Framework (SPFx) webpart to display organization hierarchy.

Big tiles SPFx-org-chart-big-tiles

Small tiles SPFx-org-chart-small-tiles

Building the code

git clone the repo

npm i

npm i -g gulp

gulp

This package produces the following:

  • lib/* - intermediate-stage commonjs build artifacts

  • dist/* - the bundled script, along with other resources

  • deploy/* - all resources which should be uploaded to a CDN.

Build options

Create Development server

gulp serve

Use this url to test on any sharepoint Online site: /_layouts/15/workbench.aspx

Create .sppkg package

gulp bundle --ship

gulp package-solution --ship

Configurations

Config SharePoint list

  • There is a config list deployed as default for you to configure, add items to the list to start building your organizational chart.
  • Start with adding a few items before setting the My Reportees field.

Config list SPFx-org-chart-big-tiles

Webpart Property Pane configurations

Setting Description
Use AD data to build the org chart Use the Microsoft Graph API to generate your organizational tree.
Select Org Config List Select a config list to generate your organizational tree.
Select user to start building the Org-Chart from the config list Select a user from the selected configuration list to use as starting point for your organizational tree.
Select user to start building the Org-Chart from AD data Select a user from the AD to use as starting point for your organizational tree.
Use small tiles Use only pictures/persona to display the nodes
Create Configuration List button Will display a dialog to create a new Configuration list

Webpart properties SPFx-org-chart-big-tiles

spfx-org-chart's People

Contributors

dependabot[bot] avatar vansyork avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

marconildo sachchinannam nareshkun rajatsahani chitusnair dteague86 fringie navedosmani grozzer anoopt richardsonjf krward2 nateforsyth green-haxe

spfx-org-chart's Issues

Error when running npm i

Hi all, i'm getting the following error when running npm i command
npm ERR! code 1
npm ERR! path C:\Users\laptop\SPFx-Org-Chart\node_modules\deasync
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node ./build.js
npm ERR! Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
npm ERR! C:\Users\laptop\SPFx-Org-Chart\node_modules\deasync\build\deasync.vcxproj(20,3): error MSB4019: The imported project "C:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp http GET https://nodejs.org/download/release/v16.15.0/node-v16.15.0-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.15.0/node-v16.15.0-headers.tar.gz
npm ERR! gyp http GET https://nodejs.org/download/release/v16.15.0/SHASUMS256.txt
npm ERR! gyp http GET https://nodejs.org/download/release/v16.15.0/win-x64/node.lib
npm ERR! gyp http GET https://nodejs.org/download/release/v16.15.0/win-x86/node.lib
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.15.0/win-x86/node.lib
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.15.0/win-x64/node.lib
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.15.0/SHASUMS256.txt
npm ERR! (node:15852) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use node --trace-deprecation ... to show where the warning was created)
npm ERR! gyp info spawn C:\Users\laptop.windows-build-tools\python27\python.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args 'C:\Users\laptop\SPFx-Org-Chart\node_modules\node-gyp\gyp\gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'msvs',
npm ERR! gyp info spawn args '-G',
npm ERR! gyp info spawn args 'msvs_version=2015',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\Users\laptop\SPFx-Org-Chart\node_modules\deasync\build\config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\Users\laptop\SPFx-Org-Chart\node_modules\node-gyp\addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\Users\laptop\.node-gyp\16.15.0\include\node\common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=C:\Users\laptop\.node-gyp\16.15.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=C:\Users\laptop\SPFx-Org-Chart\node_modules\node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=C:\Users\laptop\.node-gyp\16.15.0\<(target_arch)\node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=C:\Users\laptop\SPFx-Org-Chart\node_modules\deasync',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'C:\Users\laptop\SPFx-Org-Chart\node_modules\deasync\build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp info spawn C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args 'build/binding.sln',
npm ERR! gyp info spawn args '/clp:Verbosity=minimal',
npm ERR! gyp info spawn args '/nologo',
npm ERR! gyp info spawn args '/p:Configuration=Release;Platform=x64'
npm ERR! gyp info spawn args ]
npm ERR! gyp ERR! build error
npm ERR! gyp ERR! stack Error: C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onExit (C:\Users\laptop\SPFx-Org-Chart\node_modules\node-gyp\lib\build.js:262:23)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Windows_NT 10.0.22621
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\laptop\SPFx-Org-Chart\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
npm ERR! gyp ERR! cwd C:\Users\laptop\SPFx-Org-Chart\node_modules\deasync
npm ERR! gyp ERR! node -v v16.15.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\laptop\AppData\Local\npm-cache_logs\2022-10-17T21_15_17_581Z-debug-0.log

Enhancement: Add Link to SP-Site

Could it be possible to add the ability to add a link to a separate sharepoint site to each entry?

I want to organize a department org chart not for people and every department has separate sp-site

Not populating data when selection made to AD

Hi, I am facing some issues when deploying it. When I choose that "Use AD data to build the org chart" it will not be populated. I already approved API access. But no luck. Please can you guide me if am iI missing any configuration step in between this?
image
After published It stays like this :
image

Please help.

Set limit reportees depth from AD

The current application will generate nodes "unlimited" until it finds no more reportees.
Create a setting to limit the depth of the nodes

Org Chart size, layout

Would be nice to have option for different layout, ref. Reportees - e.g. like with functional structure for a Project Team Org Chart. Option to choose a layout type for shape/square - to render/draw accordingly. With 2-3 reportees, and 5 under each the current solution is not optimal. Please consider, this for next release or update (ref. image).

download

npm i fails in Dec 2022 due to missing python2

npm i fails

There seems to be a dependency (not in package.json) on a deprecated version of node-sass
"

[email protected] install /home/tonydiep/Projects/SPFx-Org-Chart/node_modules/node-sass
node scripts/install.js
Downloading binary from https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-83_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.12.0/linux-x64-83_binding.node":
"

then a script tries to run python2 which is no longer available.

Vincent:

Could you update the dependencies please?

Thank you very much.

Color option

Might be usefull to add color pickers so people can adjust the org chart to their SharePoint theme.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.