sp-dev-fx-webparts/samples/react-visio/README.md

# React Visio Embed

## Summary

This sample shows how the [Visio JavaScript APIs](https://dev.office.com/reference/add-ins/visio/visio-javascript-reference-overview) can be used within a web part. For sample purposes, this web part will display the name and the hyperlinks of a Visio shape when the user selects it.

![Demo](./assets/Preview.PNG)

## Used SharePoint Framework Version

![drop](https://img.shields.io/badge/drop-1.7.1-green.svg)

## Applies to

- [SharePoint Framework](https:/dev.office.com/sharepoint)
- [Visio JavaScript APIs](https://dev.office.com/reference/add-ins/visio/visio-javascript-reference-overview)

## Prerequisites

- Office 365 subscription with SharePoint Online licence
- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.

## Solution

| Solution    | Author(s)      |
| ----------- | -------------- |
| react-visio | Joel Rodrigues |

## Version history

| Version | Date            | Comments             |
| ------- | --------------- | -------------------- |
| 1.3     | April 4, 2019   | Update readme        |
| 1.2     | January 4, 2019 | Update to SPFx 1.7.1 |
| 1.1     | October 3, 2018 | Update to SPFx 1.6.0 |
| 1.0     | August 23, 2018 | Initial release      |

## 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.**

---

## Minimal Path to Awesome

- clone this repository
- in the command line run:
  - `npm install`
  - `gulp serve --nobrowser`
- upload a sample Visio file to a SharePoint document library
- open the file on the Visio web client and copy the Url from the browser
- navigate to the hosted version of SharePoint workbench, eg. https://contoso.sharepoint.com/sites/test/_layouts/15/workbench.aspx
- add the url on the web part properties field and the EmbeddedSession will start and display the diagram

## Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

- Using the Visio JavaScript APIs to embed a diagram on a page
- Using the Visio JavaScript APIs to interact with the Visio diagram and data available
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00			`# React Visio Embed`

			`## Summary`

			`This sample shows how the [Visio JavaScript APIs](https://dev.office.com/reference/add-ins/visio/visio-javascript-reference-overview) can be used within a web part. For sample purposes, this web part will display the name and the hyperlinks of a Visio shape when the user selects it.`

			`![Demo](./assets/Preview.PNG)`

			`## Used SharePoint Framework Version`

Update react visio 1.7.1 (#741) * remove non required reference to sass file * update to SPFx 1.7.1 * update readme 2019-01-07 07:44:19 -05:00			`![drop](https://img.shields.io/badge/drop-1.7.1-green.svg)`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`## Applies to`

update readme (#828) 2019-04-08 05:38:57 -04:00			`- [SharePoint Framework](https:/dev.office.com/sharepoint)`
			`- [Visio JavaScript APIs](https://dev.office.com/reference/add-ins/visio/visio-javascript-reference-overview)`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`## Prerequisites`

update readme (#828) 2019-04-08 05:38:57 -04:00			`- Office 365 subscription with SharePoint Online licence`
			`- SharePoint Framework [development environment](https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment) already set up.`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`## Solution`

update readme (#828) 2019-04-08 05:38:57 -04:00			`\| Solution \| Author(s) \|`
			`\| ----------- \| -------------- \|`
			`\| react-visio \| Joel Rodrigues \|`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`## Version history`

update readme (#828) 2019-04-08 05:38:57 -04:00			`\| Version \| Date \| Comments \|`
			`\| ------- \| --------------- \| -------------------- \|`
			`\| 1.3 \| April 4, 2019 \| Update readme \|`
			`\| 1.2 \| January 4, 2019 \| Update to SPFx 1.7.1 \|`
			`\| 1.1 \| October 3, 2018 \| Update to SPFx 1.6.0 \|`
			`\| 1.0 \| August 23, 2018 \| Initial release \|`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`## Disclaimer`

update readme (#828) 2019-04-08 05:38:57 -04:00			`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.`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`---`

			`## Minimal Path to Awesome`

update readme (#828) 2019-04-08 05:38:57 -04:00			`- clone this repository`
			`- in the command line run:`
			- `npm install`
			- `gulp serve --nobrowser`
			`- upload a sample Visio file to a SharePoint document library`
			`- open the file on the Visio web client and copy the Url from the browser`
			`- navigate to the hosted version of SharePoint workbench, eg. https://contoso.sharepoint.com/sites/test/_layouts/15/workbench.aspx`
			`- add the url on the web part properties field and the EmbeddedSession will start and display the diagram`
React visio javascript APIs web part sample (#606) * Add new project files * Add office-js package * update strings * add Visio service - still missing types * Embed visio file * remove non required package * move import of officejs to web part file * remove fixed width * use delegate functions to pass values to component * Display links on right panel * Update property description and web part icon * add comment * load document when url is provided * Add readme * Fixed broken image 2018-08-30 05:19:13 -04:00
			`## Features`

			`This Web Part illustrates the following concepts on top of the SharePoint Framework:`

update readme (#828) 2019-04-08 05:38:57 -04:00			`- Using the Visio JavaScript APIs to embed a diagram on a page`
			`- Using the Visio JavaScript APIs to interact with the Visio diagram and data available`