We can change the requested field through the configuration record, for the input type, text, checkbox, and number.
Configuration JSON:
{
"type": "object",
"subtab": {
"id": "MyCoolModule",
"group": "extensions",
"title": "MyCoolModule",
"description": "To show Login-Registation configuration recoeds in the SC configuration"
},
"properties": {
"MyCoolModule.CurrentSuppliers": {
"group": "extensions",
"subtab": "loginRegister",
"type": "array",
"title": "Current Suppliers",
"items": {
"type": "object",
"properties": {
"label": {
"type": "string",
"title": "Input Label"
},
"type": {
"type": "string",
"title": "Input Type",
"enum": ["text", "checkbox", "select"]
},
"required": {
"type": "boolean",
"title": "is required"
},
"fieldId": {
"type": "string",
"title": "Field Id"
},
"validation": {
"type": "string",
"title": "validation Message"
}
}
}
}
}
}Entry point
_.extend(LoginRegisterRegisterView.prototype, {
initialize: _.wrap(LoginRegisterRegisterView.prototype.initialize, function initialize(fn) {
fn.apply(this, _.toArray(arguments).slice(1));
console.log('TIS', LoginRegisterRegisterView.prototype);
console.log('TIS2', AccountRegisterModel.prototype);
_.each(SC.CONFIGURATION.MyCoolModule.CurrentSuppliers, (input)=>{
LoginRegisterRegisterView.prototype.bindings['[name="'+ input.fieldId + '"]'] = {
"observe": input.fieldId,
"setOptions": {
"validate": input.required,
"silent": input.required
},
"events": [
"blur"
]
}
AccountRegisterModel.prototype.validation[input.fieldId] = {
msg : input.validation,
required : input.required
}
})
}),
View file
return Backbone.View.extend({
template: jj_loginregister_mycoolmodule_tpl
, initialize: function (options) {
this.model = new jjloginregisterMyCoolModuleModel();
}
, getContext: function getContext()
{
var customInputs = SC.CONFIGURATION.MyCoolModule.CurrentSuppliers;
_.each(customInputs, (input)=>{
input.isCheckbox = input.type === "checkbox" ? true: false;
})
return {
customFields : customInputs
};
}
});Template
{{#each customFields}}
{{#if isCheckbox}}
<div class="login-register-register-form-controls-group">
<label class="login-register-register-form-label" for="{{fieldId}}">
<input type="{{type}}" name="{{fieldId}}" id="{{fieldId}}" >
{{label}} {{#if required}}<small class="login-register-register-form-required">*</small>{{/if}}
</label>
</div>
{{else}}
<div class="login-register-register-form-controls-group" data-validation="control-group">
<label class="login-register-register-form-label" for="{{fieldId}}">
{{label}} {{#if required}}<small class="login-register-register-form-required">*</small>{{/if}}
</label>
<div class="login-register-register-form-controls" data-validation="control">
<input type="{{type}}" name="{{fieldId}}" id="{{fieldId}}" class="login-register-register-form-input"
{{#if required}} aria-required="true" {{/if}}>
</div>
</div>
{{/if}}
{{/each}}
