SolidComponents Toolbox™ - API
Table of Contents
...
This is a living document and the information provided here cannot be considered static. Although we constantly strive that information will always be accurate, sometimes can changed conditions require changes. It is the customer’s responsibility to ensure the use of proper documentation.
Introduction
SolidComponents Toolbox™ is a JavaScript library that enables seamless integration of CAD support from SolidComponents into the customers own web page.
SolidComponents Toolbox™ may be used to integrate CAD support for static products as well as configurable products.
SolidComponents Toolbox™ may be used to integrate CAD support for static products as well as configurable products.
Technology
SolidComponents Toolbox™ is a client-server-system that is based on JavaScript and Ajax-communication with web-services which are running on SolidComponent’s webservers. By implementing Toolbox Light™ customer never needs to handle the actual communication with SolidComponents servers since this is entirely handled by Toolbox Light™.
SolidComponents Toolbox™ uses JavaScript-library jQuery and the customer needs to import it as well in order to enable the communication.
SolidComponents Toolbox™ uses JavaScript-library jQuery and the customer needs to import it as well in order to enable the communication.
Objective
The goal with SolidComponents Toolbox™ is in a very simple way provide our customers with advanced functionalities for their web pages where traditional methods are both time-consuming and expensive.
Object in SolidComponents Toolbox™
SolidComponents Toolbox™ is a collection of object types which provide different types of functionality. Each object type provide in many cases variety of configurations to suit different types of implementation.
Layout and Design
SolidComponents Toolbox™ has been developed for our customers in order to offer them possibility of seamless implementation of functionalities, namely so it may be based on customer’s own design and layout as much as possible.
To ensure this, the various components in SolidComponents Toolbox™ have been made as design-neutral as possible to provide developers with greater freedom.
To ensure this, the various components in SolidComponents Toolbox™ have been made as design-neutral as possible to provide developers with greater freedom.
Note:
Since system is based on JavaScript it is technically possible to bypass some static design aspects, e.g. icons. This is not permitted and it is very important that this is followed since any deviation from the standards created by SolidComponents may jeopardize the future functionality.
The area that is represented by components from SolidComponents Toolbox™ should only be handled as if it is “owned” by the component. It is therefore not permitted to add layers above the component in order to change it visually or functionally. The components are designed to be forward compatible, which means that some of the existing fields may not be in use today and are created to add future features.
Since system is based on JavaScript it is technically possible to bypass some static design aspects, e.g. icons. This is not permitted and it is very important that this is followed since any deviation from the standards created by SolidComponents may jeopardize the future functionality.
The area that is represented by components from SolidComponents Toolbox™ should only be handled as if it is “owned” by the component. It is therefore not permitted to add layers above the component in order to change it visually or functionally. The components are designed to be forward compatible, which means that some of the existing fields may not be in use today and are created to add future features.
Possible limitations
SolidComponents Toolbox™ has been developed for the purpose of providing an easy way to integrate SolidComponents online CAD support with the component suppliers’ own web pages. For this reason, SolidComponents Toolbox™ is based entirely on HTML and JavaScript.
While JavaScript enables simple integration, its main weakness is its dependency on respective browser as well as the browser version. Different browsers may interpret the same HTML and JavaScript code differently and this interpretation may also change over time when new browser versions are launched.
While we do our very best to make sure that SolidComponents Toolbox™ is compatible with all major browsers on the market, it is each customers own responsibility to assure that SolidComponents Toolbox™ works in their environment. All our customers are using the same version of SolidComponents Toolbox™ and we will not make any customer specific implementations.
While JavaScript enables simple integration, its main weakness is its dependency on respective browser as well as the browser version. Different browsers may interpret the same HTML and JavaScript code differently and this interpretation may also change over time when new browser versions are launched.
While we do our very best to make sure that SolidComponents Toolbox™ is compatible with all major browsers on the market, it is each customers own responsibility to assure that SolidComponents Toolbox™ works in their environment. All our customers are using the same version of SolidComponents Toolbox™ and we will not make any customer specific implementations.
White-List
To avoid misuse of SolidComponents Toolbox™ it's needed to add all URL:s that is going to use this API to a white-list before any calls to SolidComponents servers can be made.
Implementation
SolidComponents Toolbox™ is a client-server solution and therefore needs to be implemented on all the web pages that are going to use its functionalities. It can either be implemented on the static web pages, manually, or on the dynamic web pages, with ASP, .NET, PHP etc.
The workflow to activate the most basic functionality can be described as following;
The workflow to activate the most basic functionality can be described as following;
- Include jQuery
- Include SolidComponents Toolbox™ JavaScript files
- Include SolidComponents Toolbox™ CSS file
- Add CAD-formats menu on the desired location
- Add a percentage counter or a progress bar
- Add the download container icon
- Add CAD-links, PDF-links or a configurator
Initialize SolidComponents Toolbox™
SolidComponents Toolbox™ uses jQuery that can be stored and imported from the customer’s own web server. Files listed below need to be included inside the HEAD-tag.
<script type="text/javascript" src="https://toolbox.solidcomponents.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolbox.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolboxAPI.js"></script>
<link rel="stylesheet" type="text/css" href="https://toolbox.solidcomponents.com/SCToolbox.css" />
Note:
SCToolbox.js and SCToolboxAPI.js must be obtained directly from the SolidComponents server.
The final document, SCToolbox.css, may be stored on the customer’s own server and modified. Although caution should be exercised since SolidComponents will make future changes and customer needs to be mindful of this and from time to time download the updated version of the original document.
SCToolbox.js and SCToolboxAPI.js must be obtained directly from the SolidComponents server.
The final document, SCToolbox.css, may be stored on the customer’s own server and modified. Although caution should be exercised since SolidComponents will make future changes and customer needs to be mindful of this and from time to time download the updated version of the original document.
Initialize the company
In order to activate the support for SolidComponents Toolbox™ on own company web page it needs to be approved by SolidComponents server. It is done with initialization command and the key. Notice that this key might change at different points of time. The key needs to be approved by SolidComponents and connected to an approved domain for initialization to work.
Initialization of SCToolbox must be the last operation that runs inside the HEAD-tag. Therefore the code below must be placed just before the closing HEAD-tag. This is very important.
Initialization of SCToolbox must be the last operation that runs inside the HEAD-tag. Therefore the code below must be placed just before the closing HEAD-tag. This is very important.
<script type="text/javascript">
SCInit("SCCXX00XX");
</script>
Note:
SCInit may NOT be called from the document’s OnLoad-event since it adds functionality to the OnLoad-event.
SCInit may NOT be called from the document’s OnLoad-event since it adds functionality to the OnLoad-event.
Add CAD-formats menu
A CAD-formats menu is drop-down menu that contains the different 2D and 3D formats for the CAD-model that a user wishes to download.
<span class="SCCADFormatMenu"></span>Add progress field
A progress field is a percentage counter that shows the progression of generating a CAD-file.
There are two versions of the progress field;
Progress, only the percentage counter:
There are two versions of the progress field;
Progress, only the percentage counter:
<span class="SCProgress"></span>
Progress bar, a percentage counter with an animated bar:
<div class="SCProgressbar" style="width: 100px; height: 16px;"></div>Add DownloadContainer
A DownloadContainer is an element where the created CAD-file appears and can be downloaded from by clicking on it. It consist of a disk icon that is deactivated (dimmed) as long as there are no downloadable CAD-files.
<span class="SCDownloadcontainerIcon"></span>Add CAD-links
CAD-links can be added in number of ways depending on the desired way of presenting them and the current technical solution. Use one of following;
CAD link with text only:
<span class="SCCADLink">12345</span>
CAD link with text and Icon:
<span class="SCIconCADLink">12345</span>
CAD link with custom text:
<span class="SCAttrCADLink" partno="12345">Text</span>
CAD link with custom text and icon:
<span class="SCAttrIconCADLink" partno="12345">Text</span>
CAD link with only icon:
<span class="SCAttrIconCADLink" partno="12345"></span>
Or if all part numbers already belongs to a own CSS class.
This method is the preferred way and can be used for "SCCADLink" and "SCIconCADLink".
This method is the preferred way and can be used for "SCCADLink" and "SCIconCADLink".
In <head>:
<script type="text/javascript">
SCTranslateClass("SCCADLink", "pnr");
SCInit("SCCXX00XX");
</script>
In <body>:
<span class="pnr">12345</span>Add PDF-links
PDF-links can, in the same way as CAD-links, be added in number of ways depending on the desired way of presenting them and the current technical solution. Use one of following;
PDF link with text only:
<span class="SCPDFLink">12345</span>
PDF link with text and Icon:
<span class="SCIconPDFLink">12345</span>
PDF link with custom text:
<span class="SCAttrPDFLink" partno="12345">Text</span>
PDF link with custom text and icon:
<span class="SCAttrIconPDFLink" partno="12345">Text</span>
PDF link with only icon:
<span class="SCAttrIconPDFLink" partno="12345"></span>
Or if all part numbers already belongs to a own CSS class.
This method is the preferred way and can be used for "SCPDFLink" and "SCIconPDFLink".
In <head>:
This method is the preferred way and can be used for "SCPDFLink" and "SCIconPDFLink".
In <head>:
<script type="text/javascript">
SCTranslateClass("SCPDFLink", "pdf");
SCInit("SCCXX00XX");
</script>
In <body>:
<span class="pdf">12345</span>Add configurators
A configurator is a form with set of rules that is used to choose right product or to configure a customized version of it.
A configurator has a fixed height and width. The information regarding its size is retrieved from SolidComponents servers. The DIV where the configurator is automatically placed will receive the right size. Since the enclosing elements will be stretched to fit the configurator a SPAN should be used.
Each configurator has it’s own ID at SolidComponents and is used to identify the configurator that will be included in SolidComponents Toolbox™.
A configurator has a fixed height and width. The information regarding its size is retrieved from SolidComponents servers. The DIV where the configurator is automatically placed will receive the right size. Since the enclosing elements will be stretched to fit the configurator a SPAN should be used.
Each configurator has it’s own ID at SolidComponents and is used to identify the configurator that will be included in SolidComponents Toolbox™.
<span class="SCConfigurator">2-112</span>
Note: The configurator IDs can be obtained from SolidComponents.
Add product table
A complete product table with data and CAD-links. Parameters "cad" and "pdf" can be "true" or "false".
<span class="SCProductTable" cad="true" pdf="true">Lifting_eyes_PLE</span>
Note: The product table IDs can be obtained from SolidComponents.
Add 3D viewer
A panel containing a 3D preview that displays the models that the user generates directly on the page.
The viewer fills the containing element and can be added in custom size by setting width and height of its parent element.
The viewer fills the containing element and can be added in custom size by setting width and height of its parent element.
<div class="SC3DViewer"></div>Important
Security
SolidComponents Toolbox™ is a client server solution that depends entirely on JavaScript. This means that the source code is available to anyone who wants to access it. While SolidComponents Toolbox™ shouldn’t handle any sensitive data, one should still be aware of the fact that all data is sent unencrypted.
SolidComponents Toolbox™ has been created with simplicity as its main objective and security comes second. Having this said, we have taken a number of measures to make any implementation of SolidComponents Toolbox™ as safe as possible.
SolidComponents Toolbox™ has been created with simplicity as its main objective and security comes second. Having this said, we have taken a number of measures to make any implementation of SolidComponents Toolbox™ as safe as possible.
Doctypes
We have noticed that the use of some doctypes may under some circumstances affect the size of some elements in a way that differs from the specified size.
The JavaScript library Prototype
We have noticed that the use of the JavaScript library Prototype may conflict with SolidComponents Toolbox™ under some circumstances. This is related to the fact that SolidComponents Toolbox™ depends on the framework jQuery. We recommend customers to use jQuery instead of Prototype in order to avoid these conflicts.
Examples
CAD links with translate class
This method is the preferred way and can be used for "SCCADLink" and "SCIconCADLink" if all part numbers on page has its own CSS class.
Source
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- SCToolbox START -->
<script type="text/javascript" src="https://toolbox.solidcomponents.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolbox.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolboxAPI.js"></script>
<link rel="stylesheet" type="text/css" href="https://toolbox.solidcomponents.com/SCToolbox.css" />
<script type="text/javascript">
SCTranslateClass("SCCADLink", "pnr");
SCInit("SCCAA00BI");
</script>
<!-- SCToolbox END -->
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><SPAN class="SCCADFormatMenu"></SPAN></TD>
<TD><SPAN class="SCProgress"></SPAN></TD>
<TD><SPAN class="SCDownloadcontainerIcon"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
<br />
<span class="pnr">11.410381701000</span><br />
<span class="pnr">11.410381702000</span><br />
</body>
</html>Basic CAD links
This example shows the most basic way to add CAD links to a page.
Source
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- SCToolbox START -->
<script type="text/javascript" src="https://toolbox.solidcomponents.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolbox.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolboxAPI.js"></script>
<link rel="stylesheet" type="text/css" href="https://toolbox.solidcomponents.com/SCToolbox.css" />
<script type="text/javascript">
SCInit("SCCAA00BI");
</script>
<!-- SCToolbox END -->
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><SPAN class="SCCADFormatMenu"></SPAN></TD>
<TD><SPAN class="SCProgress"></SPAN></TD>
<TD><SPAN class="SCDownloadcontainerIcon"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
<br />
<span class="SCIconCADLink">11.410381701000</span><br />
<span class="SCIconCADLink">11.410381702000</span><br />
</body>
</html>Configurator
This example shows how to add a configurator to a page.
Source
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- SCToolbox START -->
<script type="text/javascript" src="https://toolbox.solidcomponents.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolbox.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolboxAPI.js"></script>
<link rel="stylesheet" type="text/css" href="https://toolbox.solidcomponents.com/SCToolbox.css" />
<script type="text/javascript">
SCInit("SCCBC27TO");
</script>
<!-- SCToolbox END -->
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><SPAN class="SCCADFormatMenu"></SPAN></TD>
<TD><SPAN class="SCProgress"></SPAN></TD>
<TD><SPAN class="SCDownloadcontainerIcon"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
<br />
<span class="SCConfigurator">Sliding_Door_Configurator</span>
</body>
</html>Product table
This example shows how to add a product table to a page.
Source
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- SCToolbox START -->
<script type="text/javascript" src="https://toolbox.solidcomponents.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolbox.js"></script>
<script type="text/javascript" src="https://toolbox.solidcomponents.com/SCToolboxAPI.js"></script>
<link rel="stylesheet" type="text/css" href="https://toolbox.solidcomponents.com/SCToolbox.css" />
<script type="text/javascript">
SCInit("SCCAA00BI");
</script>
<!-- SCToolbox END -->
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><SPAN class="SCCADFormatMenu"></SPAN></TD>
<TD><SPAN class="SCProgress"></SPAN></TD>
<TD><SPAN class="SCDownloadcontainerIcon"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
<br />
<span class="SCProductTable" cad="true" pdf="true">Lifting_eyes_PLE</span>
</body>
</html>3D Viewer
This example shows the how to add a 3D-viewer to the page.
Source
Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- SCToolbox START -->
<script type="text/javascript" src="https://www.solidcomponents.com/toolbox/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://www.solidcomponents.com/toolbox/SCToolbox.js"></script>
<script type="text/javascript" src="https://www.solidcomponents.com/toolbox/SCToolboxAPI.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.solidcomponents.com/toolbox/SCToolbox.css" />
<script type="text/javascript">
SCInit("SCCAA00BI");
</script>
<!-- SCToolbox END -->
</head>
<body>
<TABLE>
<TBODY>
<TR>
<TD><SPAN class="SCCADFormatMenu"></SPAN></TD>
<TD><SPAN class="SCDownloadcontainerIcon"></SPAN></TD>
</TR>
</TBODY>
</TABLE>
<br />
<span class="SCIconCADLink">11.410381701000</span><br />
<span class="SCIconCADLink">11.410381702000</span><br />
<br />
<br />
<div style="width: 600px; height: 256px;"><div class="SC3DViewer"></div></div>
</body>
</html>