DriveWorks Pro 22

Select the Integration Theme

Select the Integration Theme

The Integration Theme hosts the DriveWorks Live Web API enabling you to embed your DriveWorks Implementation in an existing web site or application.

Here you will find a range of resources to assist you in getting started with the Integration Theme, Server API and Client SDK.

To Select the Integration Theme

To select the Integration Theme:

1. From DriveWorks Live, open the required Group and select Stage 1: Specification> Live.
2. Click the Theme button from the command bar
   
3. Select the Integration Theme from the Theme configuration dialog.

   

4. Click Next.
5. Browse to the location where the static files will be stored.

   We recommend static files be stored on a local (C:\) drive.

   If a network location is required, this must be a UNC location and not a mapped network drive.

   Static files should also be a different location to where the Integration Theme files are stored.

   

6. Copy Client SDK Examples to this folder.
   • Check this option to copy the full Client SDK documentation and examples. A micro-site containing documentation and examples will be served when running the Theme.
   • Leave this option unchecked if Client SDK documentation is not required. A simple landing page will be served when running the Theme.
7. Click Finish.

   If the location specified already contains the files you will be prompted to overwrite them. Click Yes to overwrite any files in that location.

Setup

In order to use the Integration Theme, you must first register your DriveWorks Group(s) in the DriveWorksConfigUser.xml file.

More information about this file can be found in the topic Integration Theme Settings.

Client SDK Examples

We have created a range of basic examples that showcase how the Integration Theme Client SDK can be used.

These interact with the core Server API using pre-written Client SDK methods to create custom web content, powered by DriveWorks.

Please see our public demo site: https://webapi.driveworkslive.com/home.html.

These small examples are a great way to get started, and offer interactive demonstrations of key functionality.

To enable these examples in your own Integration Theme, select the option to Copy Client SDK Examples to this folder during the Integration Theme Configuration setup process.

This will copy the example files to the static files location you selected, and show additional links on the landing page when the theme is started.

To start the Integration Theme and access the landing page:

1. From DriveWorks Live, select Stage 1: Specification > Live.
2. Click Start from the command bar.
3. Click Open Browser from the command bar.
4. Once the default landing page is loaded, select Client SDK Examples in the main navigation.

To configure the Client SDK Examples for your own Group

1. In Windows Explorer, navigate to the root of the static files location selected during setup.
2. Open the config.js file at the root in a code editor.
3. Enter the Server URL for the Integration Theme server - the same URL the landing page is served from.
4. Enter the Group Alias for the Group (this is as configured in the DriveWorksConfigUser.xml file, see: Shared Group Connection).
5. [optional] Enter the Credentials for a valid user (if no default is specified in DriveWorksConfigUser.xml).
6. Enter a Project Name to use across the examples - any of the Projects available to the group.
7. Save the file.
8. Refresh the browser window from any of the examples (Ctrl+F5 to hard refresh).
9. Your own data should now display. If not, check the browser's console for errors (F12)

Each example is designed with code that can be easily copied and modified.

To view the code for an example

To view the code powering an example, either:

1. Use the Developer Tools provided by your browser (F12)
2. View the source code for the page (Ctrl + U)
3. Open the source files from the static files directory

Example Sites

Public Demo Site: https://webapi.driveworkslive.com/example-sites/.

This collection of example sites is another great way to get started.

Each example is freely customizable and ready to use with your existing DriveWorks Projects.

These are enabled by selecting the option Copy Client SDK Examples to this folder during the Integration Theme Configuration setup process.

To preview your Projects in the Example Sites

1. In Windows Explorer, navigate to the root of the static files location you selected during setup.
2. Open the example-sites folder.
3. Open one of the example folders, for example; simple-fullscreen.
4. Open the config.js file for this example in a code editor.
5. Enter the Server URL for your Integration Theme server - the same URL the landing page is served from.
6. Enter the Group Alias for your Group - configured in DriveWorksConfigUser.xml, see: Shared Group Connection).
7. [optional] Enter the Credentials for a valid user (if no default is specified in DriveWorksConfigUser.xml).
8. Some examples may have further configuration options, each with custom inline guidance.
9. Repeat the configuration for each of the examples you wish to use. Each example has it's own config file, to assist with portability.
10. Start the Integration Theme and open the landing page.
11. Navigate to Example Sites.
12. Select one of the configured examples.
13. If the example does not load, check the browsers console for error messages (F12)

These sites are designed to be copied and hosted on your own server.

To copy an example to another location

1. In Windows Explorer, navigate to the root of the static files location selected during setup.
2. Open the example-sites folder.
3. Open the chosen example's folder within the example-sites folder.
4. Copy the entire contents of this folder to the desired location.
5. Ensure the config.js file is pointed to your Integration Theme server url and group.
6. Update the Client SDK <script /> tag at the bottom of each HTML template to load the Client SDK library hosted by your DriveWorks Live server url.

   Before:

   <script src="/DriveWorksLiveIntegrationClient.min.js"></script>

   After:

   <script src="*https://your-server-url.com*/DriveWorksLiveIntegrationClient.min.js"></script>

   Replace *https://your-server-url.com* with the Server URL.

   This is the address hosting the Integration Theme landing page.

Help and Documentation

The landing page also provides optional documentation, if Copy Client SDK Examples was selected during setup:

• Server API - Demo: https://webapi.driveworkslive.com/help/server
• Client SDK - Demo: https://webapi.driveworkslive.com/help/client

See also

Integration Theme Settings

How To: Configure IIS For The Integration Theme

How To: Make Your Website React To Specification Events With The Integration Theme