You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
2.9 KiB
Plaintext
126 lines
2.9 KiB
Plaintext
FORM BUILDER SYSTEM NOTES
|
|
=======================
|
|
|
|
1. Core Components
|
|
-----------------
|
|
- el(): Base function for creating DOM elements with chaining capabilities
|
|
- _ff: Form factory object for creating different types of form inputs
|
|
- addLine(): Function to add form elements to a container
|
|
- addRow(): Function to create complex form rows with multiple inputs
|
|
|
|
2. Form Factory (_ff) Methods
|
|
---------------------------
|
|
a) select()
|
|
- Creates a dropdown select input
|
|
- Features:
|
|
* Bootstrap styling
|
|
* Select2 integration
|
|
* Readonly option
|
|
* Default "Pilih Data" option
|
|
* Dynamic options from data array
|
|
* Value setting capability
|
|
|
|
b) num()
|
|
- Creates a numeric input field
|
|
- Features:
|
|
* Right-aligned text
|
|
* Currency formatting
|
|
* Thousand separator
|
|
* Readonly option
|
|
* Automatic number formatting on keyup
|
|
|
|
c) text()
|
|
- Creates a standard text input
|
|
- Features:
|
|
* Left-aligned text
|
|
* Placeholder text
|
|
* Readonly option
|
|
* Value setting capability
|
|
|
|
3. Element Builder (el) Key Features
|
|
---------------------------------
|
|
- Chaining methods for element manipulation
|
|
- DOM element creation and modification
|
|
- Style manipulation
|
|
- Event handling
|
|
- Child element management
|
|
- Attribute setting
|
|
- Class management
|
|
|
|
4. Usage Example
|
|
--------------
|
|
```javascript
|
|
// Creating a form row
|
|
let formConfig = [
|
|
{
|
|
type: 'num',
|
|
name: 'amount',
|
|
readonly: false,
|
|
val: '0'
|
|
},
|
|
{
|
|
type: 'select',
|
|
name: 'account',
|
|
data: accountList,
|
|
val: selectedAccount
|
|
},
|
|
{
|
|
type: 'text',
|
|
name: 'description',
|
|
val: ''
|
|
}
|
|
];
|
|
|
|
// Adding form elements
|
|
formConfig.forEach(config => {
|
|
addLine(container, config.type, config);
|
|
});
|
|
```
|
|
|
|
5. Key Benefits
|
|
--------------
|
|
- Modular and reusable form components
|
|
- Consistent styling and behavior
|
|
- Easy to extend with new input types
|
|
- Simplified DOM manipulation
|
|
- Clean and maintainable code structure
|
|
|
|
6. Dependencies
|
|
--------------
|
|
- jQuery (for Select2 integration)
|
|
- Bootstrap (for styling)
|
|
- Custom formatting functions (formatRupiah, etc.)
|
|
|
|
7. Best Practices
|
|
----------------
|
|
- Always provide proper configuration objects
|
|
- Handle readonly states appropriately
|
|
- Include proper validation
|
|
- Use consistent naming conventions
|
|
- Implement proper error handling
|
|
- Consider mobile responsiveness
|
|
|
|
8. Common Use Cases
|
|
------------------
|
|
- Dynamic form generation
|
|
- Data entry forms
|
|
- Search forms
|
|
- Filter forms
|
|
- Configuration forms
|
|
- Multi-step forms
|
|
|
|
9. Extension Points
|
|
------------------
|
|
- New input types can be added to _ff
|
|
- Custom validation can be added
|
|
- Additional styling options
|
|
- New event handlers
|
|
- Custom formatting functions
|
|
|
|
10. Performance Considerations
|
|
----------------------------
|
|
- Minimize DOM operations
|
|
- Use event delegation where appropriate
|
|
- Cache DOM selections
|
|
- Optimize event handlers
|
|
- Consider lazy loading for large forms |