@ticatec/uniface-flexi-form

A flexible form framework for Svelte applications with dynamic field types, criteria panels, and modular components.

Features

• 🚀 Dynamic Form Generation: Create forms dynamically from JSON schemas
• 🎨 Multiple Field Types: Support for text, number, date, select, multi-select, and more
• 🔍 Criteria Panel: Advanced search and filtering capabilities
• 📱 Responsive Design: Mobile-friendly and adaptable layouts
• 🧩 Modular Architecture: Easily extensible with custom components
• 🎯 Type Safety: Full TypeScript support with comprehensive type definitions
• 🎭 Svelte 5 Ready: Built for the latest Svelte version

Installation

npm install @ticatec/uniface-flexi-form @ticatec/dyna-js

Note: @ticatec/dyna-js is required for dynamic code execution features used internally by some components.

Quick Start

import { FlexiForm, registerFormFieldBuilder } from '@ticatec/uniface-flexi-form';
import '@ticatec/uniface-flexi-form/uniface-flexi-form.css';

// Register form field builders
registerFormFieldBuilder();

// Define your form schema
const formSchema = {
  id: 'user-form',
  title: 'User Information',
  fields: [
    {
      id: 'name',
      type: 'text-editor',
      label: 'Name',
      required: true
    },
    {
      id: 'email',
      type: 'text-editor',
      label: 'Email',
      required: true
    },
    {
      id: 'birthDate',
      type: 'date-picker',
      label: 'Birth Date'
    }
  ]
};

<script>
  import { FlexiFormPage } from '@ticatec/uniface-flexi-form';
  
  export let formSchema;
  export let formData = {};
</script>

<FlexiFormPage 
  schema={formSchema} 
  bind:data={formData} 
/>

Available Field Types

The framework supports various field types out of the box:

• text-editor - Text input field
• memo-editor - Multi-line text area
• number-editor - Number input field
• unit-number-editor - Number input field with unit support
• date-picker - Date selection field
• datetime-picker - Date and time selection field
• options-selector - Single select dropdown
• options-multi-selector - Multi-select dropdown
• cascade-options-selector - Cascading select field
• input-options-selector - Select with input capability
• - - Break line / separator
• unknown-type - Fallback for unknown field types

Core Components

FlexiForm

The main form component that renders dynamic forms based on schemas.

import { FlexiForm } from '@ticatec/uniface-flexi-form';

FlexiFormPage

A page-level component for full-page forms.

import { FlexiFormPage } from '@ticatec/uniface-flexi-form';

FlexiFormDialog

A dialog/modal component for forms.

import { FlexiFormDialog } from '@ticatec/uniface-flexi-form';

CriteriaPanel

Advanced search and filtering panel.

import CriteriaPanel from '@ticatec/uniface-flexi-form/criteria-panel';

Schema Structure

interface FlexiFormSchema {
  mode?: LayoutMode;
  arrangement?: Arrangement;
  props?: any;
  elements: FormElements;
  label$style?: string;
  variant?: 'filled' | 'outlined' | '';
  actions?: Array<FormActionSchema>;
  style?: string;
}

interface FlexiCardSchema {
  title?: string;
  mode?: LayoutMode;
  props?: any;
  arrangement?: Arrangement;
  label$style?: string;
  attrs?: any;
  fields: Array<FlexiFieldSchema | FlexiCompositeFieldSchema>;
  readonly?: boolean;
  disabled?: boolean;
  variant?: 'filled' | 'outlined' | '';
  foldable?: boolean;
  actions?: Array<ActionSchema>;
}

interface FlexiCompositeSchema {
  type?: 'block';
  title?: string;
  fields: Array<FlexiFieldSchema>;
  readonly?: boolean;
  disabled?: boolean;
  label$style?: string;
  variant?: string;
  mode?: LayoutMode;
  props?: any;
  arrangement?: Arrangement;
}

interface FlexiCompositeFieldSchema {
  type: "composite";
  keyField?: string;
  name: string;
  composite: string;
  cell?: any;
}

interface FlexiFieldSchema {
  type: string;
  keyField: string;
  name: string;
  dictName?: string;
  label: string;
  variant?: "" | "outlined" | "filled";
  readonly?: boolean;
  disabled?: boolean;
  required?: boolean;
  events?: Record<string, string>;
  cell?: any;
  props?: any;
}

Advanced Usage

Custom Field Registration

import { ComponentBuilder } from '@ticatec/uniface-flexi-form/flexi-form/lib/ComponentBuilder';

const componentBuilder = ComponentBuilder.getInstance();

// Register a custom field type
componentBuilder.register('custom-field', (schema, dictLoader) => ({
  component: CustomFieldComponent,
  props: schema.props
}));

Form Validation

Note: Form validation is currently in development. The framework has the infrastructure for validation with error tracking in FlexiField, but full validation implementation is not yet complete. Future versions will integrate with @ticatec/web-bean-validator for comprehensive validation support.

// Basic field definition (validation features coming soon)
const fieldSchema = {
  type: 'text-editor',
  keyField: 'email',
  name: 'email',
  label: 'Email',
  required: true,
  props: {
    placeholder: 'Enter email address'
  }
};

Styling and Theming

The framework comes with default styles that can be customized:

@import '@ticatec/uniface-flexi-form/uniface-flexi-form.css';

// Override default styles
.flexi-form {
  --primary-color: #your-brand-color;
  --border-radius: 8px;
  --spacing: 16px;
}

API Reference

Core Exports

// Main module
import FlexiContext from '@ticatec/uniface-flexi-form';

// Form components
import { 
  FlexiForm, 
  FlexiCard, 
  FlexiField, 
  FlexiComposite,
  FlexiFormPage, 
  FlexiFormDialog,
  ComponentBuilder,
  registerFormFieldBuilder 
} from '@ticatec/uniface-flexi-form/flexi-form';

// Schema types
import type { 
  FlexiFormSchema, 
  FlexiCardSchema, 
  FlexiCompositeSchema, 
  FlexiCompositeFieldSchema, 
  FlexiFieldSchema 
} from '@ticatec/uniface-flexi-form/flexi-form/Schema';

// Type definitions
import type { 
  LayoutMode, 
  Arrangement, 
  Visibility 
} from '@ticatec/uniface-flexi-form/flexi-form/lib';

// Criteria panel
import CriteriaPanel, { 
  FlexiCriteriaSet, 
  FlexiCriteriaField 
} from '@ticatec/uniface-flexi-form/criteria-panel';

// Utilities
import utils from '@ticatec/uniface-flexi-form/utils';

Development

Building the Library

npm run build

Development Mode

npm run dev

Type Checking

npm run check

Contributing

We welcome contributions! Please read our contributing guidelines and submit pull requests to our repository.

License

MIT License - see LICENSE file for details.

Support

For support and questions, please open an issue on our GitHub repository.