* Tech support is not provided for JavaScript and CSS customizations
Although the following site is not operated by our company, there may be articles that can serve as a reference for customizations you wish to implement. Please note that this site is not supported and any use is at your own risk.
Kintone Developer Program
Style changes to individual fields should be done with only JavaScript and no CSS.
An event is defined as an array to a specific property of the global variable "fb". By doing so, multiple JavaScript handlers can be executed when an event occurs.
The handler's argument is given by the "state" object that tracks the current status.
*If you wish to change the DOM by changing the state, the state must be changed by an event prior to DOM generation.
eg.
(function() {
"use strict";
fb.events.form.created = [function (state) {
console.log(state);
state.form.title = 'edit form title';
state.fields[0].hide = true;
state.record.string1.value = 'edit string data';
return state; // not returning the changed state may cause changes to not appear
}];
})();
Trigger: before the DOM is generated for the form
Trigger: after the DOM is generated for the form
*Changes made to the status sometimes may not be reflected in the DOM.
Trigger: before moving from the form to the confirmation screen
Trigger: before moving from the form to the completion screen
Trigger: before the DOM is generated for the confirmation screen
Trigger: after the DOM is generated for the confirmation screen
*Changes made to the status sometimes may not be reflected in the DOM
Trigger: before moving from the confirmation screen to the completion screen
Trigger: before the DOM is generated for the completion screen
Trigger: after the DOM is generated for the completion screen
*Changes made to the status sometimes may not be reflected in the DOM
Trigger: before going back in a step form
Trigger: before progressing forward in a step form
Trigger: before the DOM is generated for the field indicated by {fieldCode}
Trigger: after the DOM is generated for the field indicated by {fieldCode}
*Changes made to the status sometimes may not be reflected in the DOM
Trigger: when data is changed in the field indicated by {fieldCode}
Trigger: when a row is added to the table field indicated by {fieldCode}
A message can be displayed in the upper right with an event by throwing an object with a specific structure within the event.
Possible message types: success, warning, info, error
eg.
(function() {
"use strict";
fb.events.form.mounted = [function (state) {
throw {
type: 'error',
title: 'mounted error',
message: 'mounted error message'
};
return state;
}];
})();
Validation can also be added to an event.
eg.
(function () {
'use strict';
fb.events.form.created.push(function (state) {
state.fields[0].validations.push({
params: [],
rule: 'custom_validation1'
});
state.fields[1].validations.push({
params: [],
rule: 'custom_validation2'
});
return state;
});
fb.addValidators = function (state) {
return {
custom_validation1: {
getMessage: function (fieldCode, params) {
return 'Custom message1';
},
validate: function (value, params) {
return /^[0-9]*$/i.test(value);
}
},
custom_validation2: {
getMessage: function (fieldCode, params) {
// if using the multilingual function
return Translator.trans('Custom message2');
},
validate: function (value, params) {
// if using a Promise
return new Promise(function (resolve) {
resolve({valid: /^[a-z]*$/i.test(value)})
});
}
}
};
};
})();
Outputting HTML form is not supported but you can use it with your own customization. In the example below, please change "change_me", code in #based-data's attribute, to code of form of which you want to output HTML. Code is a strings that contains randomized number and letters (without #). Form is created in #app. Please note that this HTML might not work properly if other JavaScript or CSS file conflicts.
eg.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://form.kintoneapp.com/static/css/outside-form.css" rel="stylesheet" type="text/css" charset="UTF-8">
</head>
<body>
<div id="app"></div>
<div id="based-data" locale="ja" host="https://form.kintoneapp.com" code="change_me"></div>
<script src="https://form.kintoneapp.com/js/outside-form.js" type="text/javascript" charset="UTF-8"></script>
<script src="https://form.kintoneapp.com/bundles/bazingajstranslation/js/translator.min.js" type="text/javascript" charset="UTF-8"></script>
<script src="https://form.kintoneapp.com/js/translations/config.js" type="text/javascript" charset="UTF-8" async></script>
<script src="https://form.kintoneapp.com/js/translations/messages/ja.js" type="text/javascript" charset="UTF-8" async></script>
<script src="https://form.kintoneapp.com/js/translations/messages/en.js" type="text/javascript" charset="UTF-8" async></script>
<script src="https://form.kintoneapp.com/js/translations/messages/cn.js" type="text/javascript" charset="UTF-8" async></script>
<script src="https://form.kintoneapp.com/static/js/fetch-data.js" type="text/javascript" charset="UTF-8"></script>
</body>
</html>