sp-dev-fx-webparts/samples/vue-js-org-chart/README.md

72 lines
3.8 KiB
Markdown
Raw Normal View History

2020-11-08 22:47:47 -05:00
# Organization Chart using VueJS
2019-05-17 08:12:03 -04:00
## Summary
2023-03-15 01:23:34 -04:00
2021-04-26 02:08:59 -04:00
A simple Organisation Chart web part using Office UI Fabric, VueJS, REST API.
2019-05-17 08:12:03 -04:00
![React Org Chart](./assets/preview.gif)
2021-11-07 01:43:55 -04:00
2022-02-14 02:52:18 -05:00
## Compatibility
2021-11-07 01:43:55 -04:00
| :warning: Important |
|:---------------------------|
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
This sample is designed to be used in the following environments:
2022-10-17 10:21:52 -04:00
2021-11-07 01:43:55 -04:00
![SPFx 1.8.1](https://img.shields.io/badge/SPFx-1.8.1-green.svg)
![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
2022-02-16 00:42:49 -05:00
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
2019-05-17 08:12:03 -04:00
2022-10-17 10:21:52 -04:00
For more information about SPFx compatibility, please refer to https://aka.ms/spfx-matrix
2019-05-17 08:12:03 -04:00
## Applies to
2022-10-24 09:42:45 -04:00
* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
2019-05-17 08:12:03 -04:00
2021-04-26 02:08:59 -04:00
** The SPFx web part will work in local workbench, but not the assets. They can be provisioned only when the app is deployed since they are SharePoint specific.
2019-05-17 08:12:03 -04:00
## Prerequisites
- Office 365 subscription with SharePoint Online.
2022-10-24 09:42:45 -04:00
- SharePoint Framework [development environment](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
2019-05-17 08:12:03 -04:00
- Tenant admin access to the Office 365 subscription and [App Catalog](https://support.office.com/en-ie/article/Use-the-App-Catalog-to-make-custom-business-apps-available-for-your-SharePoint-Online-environment-0b6ab336-8b83-423f-a06b-bcc52861cba0) already setup.
## Minimal Path to Awesome
- Clone this repository.
- Open the command line, navigate to the web part folder and execute:
- `npm i`
- `gulp serve --nobrowser`
- `gulp package-solution`
- [Deploy the package](https://docs.microsoft.com/sharepoint/dev/spfx/enterprise-guidance#management-capabilities-of--sharepoint-framework-solutions) to the app catalog
- [Add the app](https://support.office.com/en-ie/article/Add-an-app-to-a-site-ef9c0dbd-7fe1-4715-a1b0-fe3bc81317cb) to a site
2019-05-17 08:12:03 -04:00
2022-02-16 00:42:49 -05:00
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit https://aka.ms/spfx-devcontainer for further instructions.
2019-05-17 08:12:03 -04:00
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- SPFx provisioning based on the following Elements.xml nodes:
- Custom List Instance with custom list schema.
- Content Types.
- Fields.
- Pre-populated List Data Rows in the Elements.xml.
2021-11-07 01:54:14 -05:00
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
2023-03-12 21:16:15 -04:00
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/vue-js-org-chart" />