In this section, we will walk through overriding templates in the web SDK. The web SDK uses mustache to pass parameters to the html templates.
templates: overrideTemplate,
There are two methods that can be used to override a template
1 . Create a constant that holds the templates, then you pass the constant into the templates parameter as seen above. Ensure the constant is declared above the JourneyContainer
const overrideTemplate = {
'smartCapture': {
type: 'function',
processor: 'mustache',
provider: function() {
return captureTemplate();
}
},
'filesystem': {
type: 'function',
processor: 'mustache',
provider: function() {
return fileSystemTemplate();
}
},
'view': {
type: 'function',
processor: 'mustache',
provider: function() {
return viewTemplate();
}
},
'login': {
type: 'function',
processor: 'mustache',
provider: function() {
return loginTemplate();
}
},
'gateway': {
type: 'function',
processor: 'mustache',
provider: function() {
return gatewayTemplate();
}
},
'liveness': {
type: 'function',
processor: 'mustache',
provider: function() {
return livenessTemplate();
}
}
};
This is the recommended method as it enables better maintainability. Templates can then be passed in as functions that return the template to the overrideTemplates
function fileSystemTemplate() {
return '<h2 class="section-title">{{PROVIDER_TITLE_FILESYSTEM}}</h2>' +
'<div class="info-container">' +
'<p class="info-item journey-state">' +
'<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>' +
'<span data-jcs-element="info__journey__state" class="info-item__value">...</span>' +
'</p>' +
'<p class="info-item journey-action">' +
'<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>' +
'<span data-jcs-element="info__journey__action" class="info-item__value">...</span>' +
'</p>' +
'<p class="info-item journey-action-attempt">' +
'<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>' +
'<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>' +
'</p>' +
'<p class="info-item journey-id">' +
'<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>' +
'<span data-jcs-element="info__journey__id" class="info-item__value">...</span>' +
'</p>' +
'</div>' +
'<form class="file-input--container">' +
'<input data-jcs-element="file__input" class="file-input" id="jcs__file__input" type="file" />' +
'</form>' +
'<label data-jcs-element="file__drop__box" class="file-input--alternatives" for="jcs__file__input">' +
'<span class="file-input--click">{{FILESYSTEM_SELECT}}</span>' +
'<span data-jcs-element="file__drop__label" class="file-input--drag">{{FILESYSTEM_DROP_IMAGE}}</span>' +
'</label>';
}
2 . Add the templates directly to the templates parameter in the JourneyContainer
templates: {
[GBG.Idscan.Templates.Filesystem]: {
type: GBG.Idscan.TemplateType.String,
processor: GBG.Idscan.PreProcessor.Mustache,
provider: `
<h2 class="section-title">{{PROVIDER_TITLE_FILESYSTEM}}</h2>
<h2 class="section-title">File System new Template</h2>
<div class="info-container">
<p class="info-item journey-state">
<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
</p>
<p class="info-item journey-action">
<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
</p>
<p class="info-item journey-action-attempt">
<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
</p>
</div>
<form class="file-input--container">
<input data-jcs-element="file__input" class="file-input" id="jcs__file__input" type="file" />
</form>
<label data-jcs-element="file__drop__box" class="file-input--alternatives" for="jcs__file__input">
<span class="file-input--click">{{FILESYSTEM_SELECT}}</span>
<span data-jcs-element="file__drop__label" class="file-input--drag">{{FILESYSTEM_DROP_IMAGE}}</span>
</label>
`
},
[GBG.Idscan.Templates.View]: {
type: GBG.Idscan.TemplateType.String,
processor: GBG.Idscan.PreProcessor.Mustache,
provider: `
<h2 class="section-title">{{PROVIDER_TITLE_VIEW}}</h2>
<h2 class="section-title">View new template</h2>
<div class="info-container">
<p class="info-item journey-state">
<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
</p>
<p class="info-item journey-action">
<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
</p>
<p class="info-item journey-action-attempt">
<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
</p>
</div>
<div class="image-preview--container">
<img data-jcs-element="view__preview" class="image-preview">
</div>
<form class="button-container">
<input data-jcs-element="view__retry" class="button button--secondary" type="button" value="{{VIEW_RETRY}}" />
<input data-jcs-element="view__begin__crop" class="button button--secondary" type="button" value="{{VIEW_CROP}}" />
<input data-jcs-element="view__upload" class="button button--primary" type="button" value="{{VIEW_UPLOAD}}" />
</form>
<div data-jcs-element="view__status">
<p data-jcs-element="view__status__message"></p>
</div>
`
},
}
This will work just as well as method one; only that maintainability might become slightly more challenging.
The different types of Templates can be found here, as well as the different mustache elements.
When using the below method, the name of the template can be passed in as lowercase.
'liveness': {
type: 'function',
processor: 'mustache',
provider: function() {
return livenessTemplate();
}
Templates.Camera = ‘camera’
Templates.Cropper = ‘cropper’
Templates.Filesystem = ‘filesystem’
Templates.Gateway = ‘gateway’
Templates.Liveness = ‘liveness’
Templates.Login = ‘login’
Templates.Result = ‘result’
Templates.Scanner = ‘scanner’
Templates.View = ‘view’
Templates.SmartCapture = ‘smartcapture’
Templates.JourneySelect = ‘journeyselect’