Generating forms from JSON
Create forms automatically from simple JSON objects where field types and structure are determined automatically based on data context and values:
- analyze JSON data and determine appropriate field types (Api/CreateTextForm, Api/CreateCheckBoxForm, Api/CreateComboBoxForm);
- generate form fields with intelligent type detection (ApiDocument/Push, ApiParagraph/AddElement);
- create labels and initial values from JSON structure (Api/CreateParagraph, ApiParagraph/AddText).
- Code
- Result
let doc = Api.GetDocument();
// Sample JSON data from different sources
let employeeData = {
"name": "Alice Johnson",
"email": "alice.johnson@company.com",
"phone": "+1-555-0123",
"start_date": "2024-09-01",
"department": "Engineering",
"salary": 75000,
"is_manager": false,
"subscribe_newsletter": true,
"emergency_contact": "Bob Johnson",
"notes": "Experienced software developer with React expertise",
"years_experience": 5,
"remote_work": true
};
let projectData = {
"project_name": "Mobile App Redesign",
"description": "Complete redesign of the mobile application user interface",
"start_date": "2024-10-15",
"end_date": "2025-03-30",
"budget": 150000,
"priority": "High",
"is_confidential": true,
"team_size": 8,
"client_email": "client@example.com",
"requires_approval": false
};
// Function to analyze value and determine field type
function determineFieldType(key, value) {
// Check by value type first
if (typeof value === 'boolean') {
return 'checkbox';
}
if (typeof value === 'number') {
return 'number';
}
if (typeof value === 'string') {
// Check key patterns for more specific types
let lowerKey = key.toLowerCase();
if (lowerKey.includes('email')) {
return 'email';
}
if (lowerKey.includes('phone') || lowerKey.includes('tel')) {
return 'phone';
}
if (lowerKey.includes('date')) {
return 'date';
}
if (lowerKey.includes('password')) {
return 'password';
}
if (lowerKey.includes('url') || lowerKey.includes('website')) {
return 'url';
}
if (lowerKey.includes('description') || lowerKey.includes('notes') || lowerKey.includes('comment')) {
return 'textarea';
}
// Check for predefined options based on key
if (lowerKey.includes('priority')) {
return 'select';
}
if (lowerKey.includes('department')) {
return 'select';
}
// Check string length for textarea vs text
if (value.length > 100) {
return 'textarea';
}
return 'text';
}
return 'text'; // Default fallback
}
// Function to generate human-readable label from key
function generateLabel(key) {
return key
.replace(/_/g, ' ') // Replace underscores with spaces
.replace(/([A-Z])/g, ' $1') // Add space before capital letters
.replace(/\b\w/g, l => l.toUpperCase()) // Capitalize first letter of each word
.trim();
}
// Function to get placeholder text based on field type and key
function generatePlaceholder(key, fieldType) {
let lowerKey = key.toLowerCase();
switch (fieldType) {
case 'email':
return 'Enter email address';
case 'phone':
return 'Enter phone number';
case 'date':
return 'DD.MM.YYYY';
case 'number':
if (lowerKey.includes('salary') || lowerKey.includes('budget')) {
return 'Enter amount';
}
if (lowerKey.includes('year')) {
return 'Enter year';
}
return 'Enter number';
case 'textarea':
return 'Enter detailed information...';
case 'url':
return 'https://example.com';
case 'password':
return 'Enter password';
default:
return `Enter ${generateLabel(key).toLowerCase()}`;
}
}
// Function to get select options based on key
function getSelectOptions(key) {
let lowerKey = key.toLowerCase();
if (lowerKey.includes('priority')) {
return ['Low', 'Medium', 'High', 'Critical'];
}
if (lowerKey.includes('department')) {
return ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'];
}
if (lowerKey.includes('status')) {
return ['Active', 'Inactive', 'Pending', 'Completed'];
}
return [];
}
// Function to create form field based on type
function createFormField(key, value, fieldType) {
let label = generateLabel(key);
let placeholder = generatePlaceholder(key, fieldType);
switch (fieldType) {
case 'checkbox':
return Api.CreateCheckBoxForm({
key: key,
required: false,
tip: `Toggle ${label.toLowerCase()}`,
checked: Boolean(value)
});
case 'select':
let options = getSelectOptions(key);
return Api.CreateComboBoxForm({
key: key,
required: false,
placeholder: placeholder,
editable: false,
autoFit: true,
items: options
});
case 'textarea':
return Api.CreateTextForm({
key: key,
required: false,
placeholder: placeholder,
maxCharacters: 500,
multiLine: true,
autoFit: true
});
case 'number':
return Api.CreateTextForm({
key: key,
required: false,
placeholder: placeholder,
maxCharacters: 20,
multiLine: false,
autoFit: true
});
default: // text, email, phone, date, url, password
return Api.CreateTextForm({
key: key,
required: false,
placeholder: placeholder,
maxCharacters: fieldType === 'email' ? 80 : 100,
multiLine: false,
autoFit: true
});
}
}
// Function to generate form from JSON data
function generateFormFromJSON(jsonData, formTitle) {
// Create form title
let paragraph = doc.GetElement(0);
paragraph.AddText(formTitle);
paragraph.SetFontSize(18 * 2);
paragraph.SetBold(true);
paragraph.SetJc("center");
// Add form generation info
paragraph = Api.CreateParagraph();
paragraph.AddText(`Auto-generated from JSON (${Object.keys(jsonData).length} fields)`);
paragraph.SetFontSize(12 * 2);
paragraph.SetJc("center");
paragraph.SetColor(128, 128, 128);
doc.Push(paragraph);
// Add spacing
paragraph = Api.CreateParagraph();
paragraph.AddText("");
doc.Push(paragraph);
let fieldCount = 0;
let fieldTypes = {};
// Process each key-value pair
for (let [key, value] of Object.entries(jsonData)) {
let fieldType = determineFieldType(key, value);
let label = generateLabel(key);
fieldTypes[key] = fieldType;
fieldCount++;
// Create label paragraph
paragraph = Api.CreateParagraph();
if (fieldType === 'checkbox') {
// For checkboxes, create the checkbox first, then add label text
let checkboxForm = createFormField(key, value, fieldType);
paragraph.AddElement(checkboxForm);
paragraph.AddText(` ${label}`);
} else {
// For other fields, add label text first, then the form field
paragraph.AddText(`${label}: `);
let formField = createFormField(key, value, fieldType);
paragraph.AddElement(formField);
}
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
// Set initial value if not checkbox
if (fieldType !== 'checkbox' && value !== null && value !== undefined) {
let forms = doc.GetFormsByKey(key);
if (forms.length > 0) {
let form = forms[0];
if (fieldType === 'select') {
// For select fields, set the value if it exists in options
let options = getSelectOptions(key);
if (options.includes(String(value))) {
form.SetText(String(value));
}
} else {
form.SetText(String(value));
}
}
}
}
return { fieldCount, fieldTypes };
}
// Generate form from employee data
let employeeResult = generateFormFromJSON(employeeData, "Employee Information Form");
// Add spacing and analysis section
let paragraph = Api.CreateParagraph();
paragraph.AddText("");
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("Form Generation Analysis");
paragraph.SetFontSize(16 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
// Step 1: Data Analysis
paragraph = Api.CreateParagraph();
paragraph.AddText("Step 1: JSON Data Analysis");
paragraph.SetFontSize(14 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText(`✓ Processed ${employeeResult.fieldCount} fields from JSON`);
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("✓ Analyzed data types and key patterns");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
// Step 2: Field Type Detection
paragraph = Api.CreateParagraph();
paragraph.AddText("Step 2: Automatic Field Type Detection");
paragraph.SetFontSize(14 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
let typeCount = {};
for (let fieldType of Object.values(employeeResult.fieldTypes)) {
typeCount[fieldType] = (typeCount[fieldType] || 0) + 1;
}
for (let [type, count] of Object.entries(typeCount)) {
paragraph = Api.CreateParagraph();
paragraph.AddText(`• ${type}: ${count} field${count > 1 ? 's' : ''}`);
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
}
// Step 3: Form Generation
paragraph = Api.CreateParagraph();
paragraph.AddText("Step 3: Dynamic Form Creation");
paragraph.SetFontSize(14 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("✓ Generated labels from JSON keys");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("✓ Applied initial values from JSON data");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("✓ Created appropriate placeholders for each field type");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
// Add second example with project data
paragraph = Api.CreateParagraph();
paragraph.AddText("");
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("Second Example: Project Data");
paragraph.SetFontSize(16 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
let projectResult = generateFormFromJSON(projectData, "Project Information Form");
// Add implementation guide
paragraph = Api.CreateParagraph();
paragraph.AddText("");
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("Implementation Guide:");
paragraph.SetFontSize(14 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("1. Data Reception");
paragraph.SetFontSize(12 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Accept JSON from user input, API, or database");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Validate JSON structure and data types");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("2. Analysis and Interpretation");
paragraph.SetFontSize(12 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Analyze value types (string, boolean, number)");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Use key patterns for intelligent field type detection");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Consider context and business logic");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("3. Form Generation");
paragraph.SetFontSize(12 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Create appropriate form fields based on detected types");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Generate human-readable labels from keys");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Set initial values and appropriate placeholders");
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
// Add field type detection rules
paragraph = Api.CreateParagraph();
paragraph.AddText("");
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("Field Type Detection Rules:");
paragraph.SetFontSize(14 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
let detectionRules = [
"Boolean values → Checkbox fields",
"Number values → Number input fields",
"Keys containing 'email' → Email fields",
"Keys containing 'phone' → Phone fields",
"Keys containing 'date' → Date fields",
"Keys containing 'description/notes' → Textarea fields",
"Keys containing 'priority/department' → Select fields",
"Long strings (>100 chars) → Textarea fields",
"Default → Text input fields"
];
for (let rule of detectionRules) {
paragraph = Api.CreateParagraph();
paragraph.AddText(`• ${rule}`);
paragraph.SetFontSize(10 * 2);
doc.Push(paragraph);
}
// Add benefits
paragraph = Api.CreateParagraph();
paragraph.AddText("");
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("Benefits:");
paragraph.SetFontSize(14 * 2);
paragraph.SetBold(true);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Rapid form prototyping from existing data");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Automatic field type detection reduces manual work");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Consistent form generation across applications");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);
paragraph = Api.CreateParagraph();
paragraph.AddText("• Easy integration with APIs and databases");
paragraph.SetFontSize(12 * 2);
doc.Push(paragraph);