Getting Started
Confirming your NavVis IVION Version
Setting Up
Note: We recommend using a modular package management system and code bundler. We are using Node Package Manager (NPM) and Webpack as examples here.
Checking the Code
Open
./src/index.ts
in your code editor.You should see:
// index.ts
import "./index.scss";
import {getApi, ApiInterface} from "@navvis/ivion";
class TestApp
{
public ivApi: ApiInterface;
constructor()
{
getApi("https://iviondemo.iv.navvis.com/")
.then((iv: ApiInterface) => {
this.ivApi = iv;
// Code added here will execute after NavVis IVION is completely loaded.
})
}
}
(<any>window).TestApp = new TestApp();
Initializing NavVis IVION
To initialize NavVis IVION, run:
getApi("https://iviondemo.iv.navvis.com/").then((iv: ApiInterface) => { /* run after IV loads. */ });
getApi(instanceUrl [, configuration])
instantiates NavVis IVION and returns a promise, which is used to run code after NavVis IVION is completely loaded.
The first argument of getApi()
is the URL of your NavVis IVION instance.
The second, optional argument allows you to configure the behavior and appearance of NavVis IVION on startup. For example, if you want NavVis IVION to be in German, set the option to:
getApi("https://iviondemo.iv.navvis.com/", { "lang=de"}).then((iv: ApiInterface) => { /* run after IV loads. */ });
Embedding NavVis IVION
Open
./src/index.html
in your code editor.You should see: The
<!DOCTYPE html>
<html>
<head>
<title>IV API Testing App</title>
</head>
<body>
<ivion></ivion>
</body>
</html>
<ivion>
tag is used by NavVis IVION to bootstrap and dynamically inject DOM elements and scripts into your application. This tag can be placed anywhere within your DOM structure.Running the Application
If you are using the scaffold project, run: This will compile your code, start your default browser, and load the application.
$ npm run serve
Fetching Failed
If you receive an error similar to the following, your NavVis IVION instance is not reachable.
Verify that:
- The instance URL is correct.
- You have network access to the instance.
CORS Disabled
If you receive the following error, you have to revise your CORS security settings.
- Go to Instance Settings > Instance Configuration.
- Revise your CORS security settings.