Thank you for the question Shubham, it is easier than you think!
In Form Builder expand Advanced Tools, there you'll find JSON Definition. Click on it.
Notice how there are 3 element keys (line 15, 17, 19). What will impact the design and preview of the form is the element key in line 19, that is the line which content we must fill.
Inside of the squared brackets, paste the following code:
{ "className": "org.joget.apps.form.lib.TextField", "properties": { "encryption": "", "readonly": "true", "style": "", "label": "ID Generator", "readonlyLabel": "", "storeNumeric": "", "id": "id_generator", "value": "", "maxlength": "", "validator": { "className": "", "properties": {} }, "requiredSanitize": "", "placeholder": "", "size": "", "workflowVariable": "", "disableIncrementDecrementArrow": "", "permissionHidden": "" } }, { "className": "org.joget.apps.form.lib.CustomHTML", "properties": { "autoPopulate": "", "label": "", "id": "unique_id_script", "value": "<script>\n$(document).ready(function() {\n function generateUniqueId() {\n let letters = '';\n let numbers = '';\n const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n\n for (let i = 0; i < 4; i++) {\n letters += alphabet.charAt(Math.floor(Math.random() * alphabet.length));\n }\n\n for (let i = 0; i < 4; i++) {\n numbers += Math.floor(Math.random() * 10);\n }\n\n return letters + numbers;\n }\n\n setTimeout(function() {\n var $field = $('#id_generator');\n if ($field.length && $field.val().trim() === '') {\n $field.val(generateUniqueId());\n }\n }, 500);\n});\n</script>", "requiredSanitize": "" } }
Format the previous code to look neatly with the rest of the code, it should look something like this:
Do note that the Label and ID of each element are just examples, you could rename as you see fit.
Preview the form and there we have it! A text field that generates random 8 digits code, with 4 digits of alphabetical characters followed by 4 other numeric characters.
Hi,
The question is not clear, if there is more context it would be great.
You can still achieve a unique ID with a specific Prefix using the ID generator; otherwise if you are trying to add records into a table with a particular format of ID using Custom HTML, then that can be done another way. Please elaborate.
I just new in Joget and I using the textField instead of using ID Generator because it's generating the increment value in the format I gave in that. But I want to generate the value like IIFE3566 OR AEJI9732 as we open the form. here is the my code (from ChatGPT) :
here also using the url: '/jw/web/json/your-app-id/form/custom_code_check', // I don't know to whom replace this,
<script>
function generateRandomCode() {
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let randomLetters = '';
for (let i = 0; i < 4; i++) {
randomLetters += letters.charAt(Math.floor(Math.random() * letters.length));
}
const randomNumbers = Math.floor(1000 + Math.random() * 9000);
return `${randomLetters}-${randomNumbers}`;
}
function checkCodeUnique(code, callback) {
$.ajax({
url: '/jw/web/json/your-app-id/form/custom_code_check', // replace this
method: 'POST',
data: { code: code },
success: function(response) {
callback(response.isUnique === true);
},
error: function() {
callback(false);
}
});
}
function generateAndSetUniqueCode() {
let attempts = 0;
function tryGenerate() {
const code = generateRandomCode();
checkCodeUnique(code, function(isUnique) {
if (isUnique) {
$('#random_code').val(code).attr('placeholder', code);
} else if (attempts < 5) {
attempts++;
tryGenerate();
} else {
alert("Unable to generate a unique code. Try again.");
}
});
}
tryGenerate();
}
$(document).ready(function() {
generateAndSetUniqueCode();
});
</script>
What are you trying to achieve here? Maybe it is better if you can elaborate on your business use case.