// get your configuration unique id (The unique ID of your organization)
var staticConfigurationUniqueId = 'ab123ab1-1a1a-1ab1-1234-11abc12';
// Create a JSONObject variable to pass to the app
var captureData = {};
captureData.configurationUniqueId = staticConfigurationUniqueId;
captureData.data = {};
captureData.data.uuid = createUUID();
Use the following intent address to start the application and pass data to it
// ANDROID:
window.location = 'intent://mobilecapture2cumuluspro/#Intent;scheme=mobilecapture2cumuluspro;package=com.cumuluspro.mobilecapture;B.web=true;S.webData=' + JSON.stringify(captureData) + ';end';
// iOS:
window.location = 'mobilecapture2cumuluspro://web?r=' + document.URL + '&webData=' + JSON.stringify(captureData);
// We use Android only for this example
var isAndroid = /Android/i.test(navigator.userAgent);
var isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
// Disable the ‘Scan Declaration’ / ‘Start application’ button when not on a mobile device
if (!isAndroid && !isIOS) {
// Disable button
}
// The organization’s unique ID
var staticConfigurationUniqueId = 'ab123ab1-1a1a-1ab1-1234-11abc12';
// Use this next step only if you want to retrieve uploaded images. The correct effektifURL is needed here. If you do not want to retrieve images, you only have to pass the configuration unique ID to step 2.3
// Using JQuery we get the correct adminpanel environment based on the configuration unique ID
$.get('https://iconnector-configuration.cumuluspro.net/v2.2/ConfigurationService.svc/json/EnvironmentURLsForUniqueId?configurationUniqueId=' + staticConfigurationUniqueId, function (environmentResult) {
if (environmentResult != null) {
// Store session data in sessionStorage as JSON for later usage. Only configurationId is required for the application here. Name is for the website, effektifURL is for retrieving images in the website.
var loginData = {
name: 'Anonymous',
configurationId: staticConfigurationUniqueId,
effektifURL: environmentResult.EffektifConnectorURL
}
sessionStorage.setItem('session', JSON.stringify(loginData));
}
});
// Using JQuery we first get the correct environment based on the login name. Using the correct environment, we build an authorization url to log in.
// Get the email and password from an input field
var email = ‘’;
var pass = ‘’;
$.get('https://iconnector-configuration.cumuluspro.net/v2.2/ConfigurationService.svc/json/EnvironmentURLsForAccount?loginName=' + email, function (environmentResult) {
if (environmentResult != null) {
var configurationURL = environmentResult.ConfigurationURL;
var effektifConnectorURL = environmentResult.EffektifConnectorURL;
var authURL = configurationURL + "v2.0/AuthService.svc/json/Login";
$.ajax({
url: authURL,
method: 'post',
data: JSON.stringify({ LoginName: email, Password: pass, Application: 'Scan+' }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
accept: 'application/json',
success: function (loginResult) {
if (loginResult != null && loginResult != '') {
if (loginResult.ErrorMessage != null) {
// Show error message
} else {
var name = loginResult.Name;
var oneTimeKey = loginResult.OneTimeKey;
var sessionId = loginResult.SessionId;
var userIdentifier = loginResult.UserIdentifier;
var configurationId = loginResult.ConfigurationUniqueId;
// Store session data in sessionStorage as JSON. configurationId and sessionId are required for the application. Name is used in the website, oneTimeKey is irrelevant, userIdentifier is irrelevant, effektifURL is used for retrieving uploaded images.
var loginData = {
name: name,
oneTimeKey: oneTimeKey,
sessionId: sessionId,
userIdentifier: userIdentifier,
configurationId: configurationId,
effektifURL: effektifConnectorURL
}
sessionStorage.setItem('session', JSON.stringify(loginData));
}
}
},
failure: function (error) {
// login unsuccessfull. Also see if (loginResult.ErrorMessage != null).
}
}).done(function() {
// .done allready handled by success (.done comes after success)
}).fail(function(error) {
// login POST failed
});
}
}).fail(function () {
// Environment get failed
});
// At this point we should have a String in JSON format in sessionStorage containing ATLEAST a configurationUniqueId. We do not need to use sessionStorage, we just need to get the configuration unique id (and the session id when using login) to the application.
// Setup an empty object which we pass to the application as JSON
var captureData = {};
// Set the configuration unique id.
// There are multiple options here. If you are following this example closely, you should use the sessionStorage as follows:
var sessionJSON = JSON.parse(sessionStorage.getItem('session'));
captureData.configurationUniqueId = sessionJSON.configurationId;
// You can also just set this field directly using your own unique id:
captureData.configurationUniqueId = 'ab123ab1-1a1a-1ab1-1234-11abc12';
// Or use a previously defined staticConfigurationUniqueId (basically the same as above):
captureData.configurationUniqueId = staticConfigurationUniqueId;
// If using login (Email+Password), also set the session ID (This will filter the document types in the app since not every user has to have rights to every document type)
// If no anonymous user is setup in the organization settings (AdminPanel – Organization settings – Standard (Anonymous) Account), All document types will be available and the application will, by default, select the first.
if (sessionJSON.sessionId != null) {
captureData.sessionId = sessionJSON.sessionId;
}
// The application needs a UUID generated by the website.
// uuid is a unique key passed to the application used to indentify the uploaded document (it links the website entry to the application upload. When we want to retrieve uploaded images, we use this uuid again). We generate a uuid by using the following function:
// Reference: http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
function createUUID() {
var d = new Date().getTime();
if (window.performance && typeof window.performance.now === "function") {
d += performance.now(); //use high-precision timer if available
}
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
return uuid;
}
// The application expects data to be in: captureData.data. captureData.data is a JSONObject which can look as followed: captureData.data = { uuid: ‘1234ab-253b-123etc’, documentName: 'JPG', fields: [{Name: ‘strReq’, Value: ‘value entered in website input field’, Hidden: false}] }
You can select a specific document type by setting it's Name value in documentName.
captureData.data.documentName = 'JPG'
The documentName value has to match the Admin Panel Document Type Name
Passing this documentName is optional but note that the application will select a random document type if multiple are available
// The application expects index field data to be in: captureData.data.fields
// captureData.data.fields is an array of objects containing keys: Name, Value, Hidden
// Name is a String which has to match the Name given in the AdminPanel document type index field
// Value is a String which is the data passed from the website to the index field in the application.
// Hidden is a Boolean which indicates if the user will visually see the index field in the application.
// Example data can look as followed:
// captureData.data = { uuid: ‘1234ab-253b-123etc’, fields: [{Name: ‘strReq’, Value: ‘required value entered in website input field’, Hidden: false}, {Name: ‘strSecond’, Value: ‘more data from website’, Hidden: false}, {Name: ‘webUpload’, Value: ‘This document is initiated from our website’, Hidden: true}] }
If you wish to open the application directly into the 'Message List', make sure captureData contains the key 'openMessageList' with value true (Boolean) as followed:
captureData.openMessageList = true;
You can ignore this key or send false if you wish the open the application directly into the camera as usual.
// We use our isAndroid and isIOS booleans defined in step 1 to determine how to start the application
if (isAndroid) {
window.location = 'intent://mobilecapture2cumuluspro/#Intent;scheme=mobilecapture2cumuluspro;package=com.cumuluspro.mobilecapture;B.web=true;S.webData=' + JSON.stringify(captureData) + ';end';
}
else if (isIOS) {
window.location = 'mobilecapture2cumuluspro://web?r=' + document.URL + '&webData=' + JSON.stringify(captureData);
}
// The website will generate a UUID using the function createUUID() and pass this to the application. This is what links the website entry to the application upload.
// Retrieving images requires the effektifURL set in step 2.1 or 2.2. The effektifURL is in the loginData object in sessionStorage.
// NOTE: When saving the uuid to localStorage or sessionStorage, be aware that the page will always immediately try to load the image associated to that uuid. For example when saving the new uuid to localStorage: localStorage.setItem('UUID', '123-abc-456-xyz'); Make sure to clear the cookie for a new capture: localStorage.removeItem('UUID');
var effektifURL = JSON.parse(sessionStorage.getItem('session')).effektifURL;
// The complete URL for image loading
var imageSrc = effektifURL + 'ConnectorService.svc/json/Image?configurationUniqueId=' + uuid;
// This will look something like: https://effektif-connector-dev.azurewebsites.net/ConnectorService.svc/json/Image?configurationUniqueId=f0c50122-1839-41ca-a023-13d1ccac66ff&page=1 where the effektif-connector-dev.azurewebsites.net is the environment url and configurationUniqueId is the uuid generated by the website using createUUID(). Also, &page=1 is optional.
// We can now use the imageSrc variable for our HTML img tag. Insert the variable into the src field using JQuery or other solutions.
<img id="image" src="" />
// JQuery example:
$('#image').attr('src', imageSrc)
.on('load', function () { // Unhide the image? })
.on('error', function () {
var self = this;
setTimeout(function () {
reloadImg($(self))
}, 1000)
});
function reloadImg(img) {
img.attr('src', img.attr('src'));
};