|
| 1 | +--- |
| 2 | +id: version-2.2.0-getting-started |
| 3 | +title: Getting started |
| 4 | +original_id: getting-started |
| 5 | +--- |
| 6 | + |
| 7 | +The SAS Visual Analytics SDK enables you to use the power of SAS Visual Analytics in your own websites and HTML applications. |
| 8 | +You can embed entire reports with the `<sas-report>` custom HTML element, embed a single object with the |
| 9 | +`<sas-report-object>` element, or connect to your reports with our JavaScript API. |
| 10 | + |
| 11 | +## Installation |
| 12 | + |
| 13 | +### NPM |
| 14 | + |
| 15 | +The <a target="_blank" href="https://www.npmjs.com/package/@sassoftware/va-report-components">`@sassoftware/va-report-components`</a> library is published to NPM and can be installed by running the `npm install` command as shown below. `va-report-components` does not support ES6 imports. Therefore, the contents of the `va-report-components/dist` folder must be deployed with your page, and then loaded using a `script` tag. |
| 16 | + |
| 17 | +```bash |
| 18 | +# From the root directory of your project |
| 19 | +npm install @sassoftware/va-report-components |
| 20 | + |
| 21 | +# Copy the contents of the package to an asset folder for deployment |
| 22 | +cp -r ./node_modules/@sassoftware/va-report-components ./sdk-assets |
| 23 | +``` |
| 24 | + |
| 25 | +The library can then be loaded out of the deployed assets folder using a `script` tag. |
| 26 | + |
| 27 | +```html |
| 28 | +<script async src="./sdk-assets/dist/umd/va-report-components.js"></script> |
| 29 | +``` |
| 30 | + |
| 31 | +### CDN (Content Delivery Network) |
| 32 | + |
| 33 | +Accessing the `va-report-components` library from the SAS Developer CDN is easy. It does not require installation or |
| 34 | +hosting of the library code and assets. Here is an example of loading the latest version of `va-report-components` from the CDN using an HTML `script` tag. |
| 35 | + |
| 36 | +```html |
| 37 | +<script async src="https://cdn.developer.sas.com/packages/va-report-components/latest/dist/umd/va-report-components.js"></script> |
| 38 | +``` |
| 39 | + |
| 40 | +When the library is used in production, consider pinning it to an explicit version. This is done with a URL like `https://cdn.developer.sas.com/packages/va-report-components/${VERSION}/dist/umd/va-report-components.js`, where `${VERSION}` is the full `major.minor.patch` semantic version. |
| 41 | + |
| 42 | +## SAS Viya setup |
| 43 | + |
| 44 | +The SAS Visual Analytics SDK requires either connecting directly to SAS Viya or exporting a SAS Report Package. Server setup requirements for connecting to SAS Viya are covered in the [SAS Viya Setup Guide](guides/viya-setup.md). |
| 45 | + |
| 46 | +## Create a custom HTML tag |
| 47 | + |
| 48 | +To build the custom HTML tag that you will embed in your web page: |
| 49 | + |
| 50 | +1. Open a report in SAS Visual Analytics. |
| 51 | +1. Open the menu in the report toolbar (which is displayed in the image below) or right-click an individual object, and then select Copy Link. The Copy Link window is displayed. |
| 52 | +1. If you are using guest access, expand the Options heading and select the Guest access check box. |
| 53 | +1. Click Copy Link. |
| 54 | + |
| 55 | + |
| 56 | + |
| 57 | +Once the report link or object link has been copied to your clipboard, paste it below, and the output will show a custom HTML |
| 58 | +tag that is ready to use. |
| 59 | + |
| 60 | +<link rel="stylesheet" href="/sdk/va/css/copy-link-translator.css"> |
| 61 | +<form> |
| 62 | + <textarea id="vdk-slt-input" |
| 63 | + rows="5" |
| 64 | + style="resize: none; width: 100%;" |
| 65 | + placeholder="Paste the link from SAS Visual Analytics here." |
| 66 | + aria-label="Paste the link from SAS Visual Analytics here." |
| 67 | + ></textarea> |
| 68 | + <pre><code id="vdk-slt-output" class="hljs" data-hide="true"></code></pre> |
| 69 | +</form> |
| 70 | +<script type="module" src="/sdk/va/js/copy-link-translator.js"></script> |
| 71 | + |
| 72 | +For a complete list of options, see the documentation for [`SASReportElement`](api/SASReportElement.md) and |
| 73 | +[`SASReportObjectElement`](api/SASReportObjectElement.md) |
| 74 | + |
| 75 | +## See our examples |
| 76 | + |
| 77 | +<a target="_blank" href="https://github.com/sassoftware/sas-viya-sdk-js/blob/main/sdk/va-report-components/examples">Our examples</a> demonstrate a few different |
| 78 | +ways to start using the SAS Visual Analytics SDK in your HTML application. |
0 commit comments