Adding Computer Vision to a Digital Journey

There are two ways to add a Computer Vision processor to a digital journey: with a custom processor step or manually.

Add Computer Vision to a Journey with Custom Processor Steps (No Code)

This no-code approach is the easiest way to add Computer Vision to your journey. Use a custom processor step to create a dedicated flow step that triggers the processor.

Add Computer Vision to a Journey Manually

  1. Use the UI Designer to create a button in the user interface that calls the processor.
  2. Add the following code in the After Events window:
    Copy
    // For Ecosystem SysPack 2.5.0 and later, use:
    var dfpHelper = ebs.importClientScript('FTOS.ECOS.Utils');

    // Prior to Ecosystem SysPack 2.5.0, use:
    // var dfpHelper = ebs.importClientScript('FTOS.DFP');

    // For simplified OCR component configuration, use:
    var componentName = "FTOS_ECOS_OCR";

    // For advanced OCR component customizations, use:
    // var componentName "FTOS_DFP_OCR";


    var params = {};
    params.flowSettingsName = '<generic processor settings group name>';
    params.processorSettingsType = 'OCR';
    params.processorSettingsName = '<processor settings name>';

    $('<Computer Vision button name>').click(function () {
        ebs.callActionByName("FTOS_DFP_FlowProcessorSettingsByType", params, function (f) {
            var processorSettingsId = f.UIResult.Data.ProcessorSettingsId;
            dfpHelper.loadComponent(componentName, processorSettingsId, ebs.getCurrentEntityId(), false);
        });
    }
    NOTE  
    The FTOS_ECOS_OCR component can be customized using the FTOS.OCR.Component.Capture and OCR.Translations client script libraries.
    The FTOS_DFP_OCR component can be customized using the FTOS.OCR.Controls, FTOS.OCR.Component, and OCR.Rresources libraries.
  3. If the Computer Vision automation processor is called in an insert form (to create a new record, not edit an existing record), also add the following code in the After Events window:
    Copy
    var ocrResult = sessionStorage.getItem("ocrResult");
    ocrResult = JSON.parse(ocrResult);
     
    if (ocrResult) {
        ebs.setFormAttributeValue("ebsContainerContent", "<form field 1 name>", ocrResult.updateObject.<form field 1 name>); 
        ebs.setFormAttributeValue("ebsContainerContent", "<form field 2 name>", ocrResult.updateObject.<form field 2 name>);
        ................
        sessionStorage.removeItem("ocrResult");
    }

    This code populates the form fields with the scanned values according to the automation processor's mappings (see Computer Vision Mappings for details) and clears the scan results from session storage.

  4. Click Save and Close to save your form step.

Examples

In this example:

  • We are inserting a record in a generic processor settings group called Test Flow Setting 1.
  • The name of the Computer Vision automation processor is OCR_1.
  • The name of the form button that calls the automation processor is btnOCR1.
  • The Computer Vision automation processor populates the following form fields: lastName, firstName, and gender.
Copy 
var dfpHelper = ebs.importClientScript('FTOS.DFP');
var componentName = 'FTOS_DFP_OCR';

var params = {};
params.flowSettingsName = "Test Flow Setting 1";
params.processorSettingsType = 'OCR';
params.processorSettingsName = 'OCR_1';

$('#btnOCR1').click(function () {
    ebs.callActionByName("FTOS_DFP_FlowProcessorSettingsByType", params, function (f) {
        var processorSettingsId = f.UIResult.Data.ProcessorSettingsId;
        dfpHelper.loadComponent(componentName, processorSettingsId, ebs.getCurrentEntityId(), false);
    });
});
                    
var ocrResult = sessionStorage.getItem("ocrResult");
ocrResult = JSON.parse(ocrResult);
 
if (ocrResult) {
    ebs.setFormAttributeValue("ebsContainerContent", "lastName", ocrResult.updateObject.lastName); 
    ebs.setFormAttributeValue("ebsContainerContent", "firstName", ocrResult.updateObject.firstName);
    ebs.setFormAttributeValue("ebsContainerContent", "gender", ocrResult.updateObject.gender);
    sessionStorage.removeItem("ocrResult");
};

In this example:

  • We are editing a record in a generic processor settings group called Test Flow Setting 2.
  • The name of the Computer Vision automation processor is OCR_2.
  • The name of the form button that calls the automation processor is btnOCR2.
  • Since this is an edit form, the Computer Vision automation processor automatically populates the form fields defined in the processor's mapping (for details, see Computer Vision Mappings).
Copy 
var dfpHelper = ebs.importClientScript('FTOS.DFP');
var componentName = 'FTOS_DFP_OCR';

var params = {};
params.flowSettingsName = "Test Flow Setting 2";
params.processorSettingsType = 'OCR';
params.processorSettingsName = 'OCR_2';

$('#btnOCR2').click(function () {
    ebs.callActionByName("FTOS_DFP_FlowProcessorSettingsByType", params, function (f) {
        var processorSettingsId2 = f.UIResult.Data.ProcessorSettingsId;
        dfpHelper.loadComponent(componentName, processorSettingsId2, ebs.getCurrentEntityId(), false);
    });
});

In this example:

  • We are editing a record in a generic processor settings group called Test Flow Setting.
  • The form fields are populated in two stages, by two different Computer Vision automation processors called OCR_1 and OCR_2.
  • The names of the form buttons that call the automation processors are btnOCR1 and btnOCR2.
  • The parameter objects for the automation processors are called params1 and params2.
  • Since this is an edit form, the Computer Vision automation processor automatically populates the form fields defined in the processor's mapping (for details, see Computer Vision Mappings).
Copy 
var dfpHelper = ebs.importClientScript('FTOS.DFP');
var componentName = 'FTOS_DFP_OCR';

var params1 = {};
params1.flowSettingsName = "Test Flow Setting";
params1.processorSettingsType = 'OCR';
params1.processorSettingsName = 'OCR_1';

$('#btnOCR1').click(function () {
    ebs.callActionByName("FTOS_DFP_FlowProcessorSettingsByType", params1, function (f) {
        var processorSettingsId2 = f.UIResult.Data.ProcessorSettingsId;
        dfpHelper.loadComponent(componentName, processorSettingsId2, ebs.getCurrentEntityId(), false);
    });
});
                    
var params2 = {};
params2.flowSettingsName = "Test Flow Setting";
params2.processorSettingsType = 'OCR';
params2.processorSettingsName = 'OCR_2';

$('#btnOCR2').click(function () {
    ebs.callActionByName("FTOS_DFP_FlowProcessorSettingsByType", params2, function (f) {
        var processorSettingsId2 = f.UIResult.Data.ProcessorSettingsId;
        dfpHelper.loadComponent(componentName, processorSettingsId2, ebs.getCurrentEntityId(), false);
    });
});