Item Options

Item Options are customizable properties that can be attached to items in your inventory system. They allow you to:

• Extend Standard Properties: Add custom fields beyond the default item attributes.

• Capture Specialized Data: Collect industry-specific or business-specific information.

• Create Variant Options: Define variations of products (size, color, material, etc.).

• Support Complex Pricing: Enable price adjustments based on selected options.

Dynamic Templates

Dynamic Templates are the design blueprints for how Item Options are presented and collected. They offer:

• Visual Form Builder: Drag-and-drop interface to design forms without coding.

• Responsive Layouts: Create forms that work across different screen sizes.

• Conditional Logic: Show/hide fields based on user selections.

• Data Validation: Ensure collected information meets required formats and constraints.

• Real-time Updates: Fields can update dynamically as users make selections.

Key Benefits

Flexibility

Create exactly the data collection interface your business needs without being limited to predefined fields.

Consistency

Ensure data is collected in a standardized format across your organization.

User Experience

Guide users through complex data entry with intuitive forms that only show relevant fields.

Data Quality

Improve data accuracy with validation rules and constraints.

Business Logic

Embed business rules directly into your forms with conditional logic.

Common Use Cases

• Manufacturing: Collect specifications, materials, and production details.

• Retail: Define product variations like size, color, and style.

• Food Service: Specify ingredients, preparation instructions, and nutritional information.

• Healthcare: Record specialized equipment details and maintenance requirements.

• Construction: Document materials, dimensions, and installation specifications.

How It Works

1. Create a Template: Design your form layout using the Options Builder.

2. Assign to Items: Link the template to relevant items in your inventory.

3. Collect Data: When users interact with these items, they'll see your custom form.

4. Process Information: The collected data becomes part of the item's properties.

Component Field Instructions for Item Option Template Editor

Below is a comprehensive guide for each component field in the Item Options Builder. This documentation explains the purpose and usage of each field to help users create effective form components.

Basic Fields

Type

• Purpose: Defines the type of component to be rendered.

• Usage: Select from dropdown menu. Each type has different properties and behaviors.

• Options: Text, Box, TextInput, NumberInput, DateInput, Switch, Chip, CheckBox, Select, NumberSelect, MultiSelect, AutoComplete, List

Label

• Purpose: The text displayed as the component's label or content.

• Usage: Enter descriptive text that identifies the purpose of the field.

• Note: For display components like Text, this is the actual content shown.

Show Label

• Purpose: Controls whether the label is displayed alongside the component.

• Usage: Toggle on to show the label, off to hide it.

• Note: Useful when the field's purpose is self-explanatory or when space is limited.

Positioning and Sizing

X Position

• Purpose: Horizontal position of the component from the left edge.

• Usage: Enter a numeric value in pixels.

• Tip: Use arrow keys for fine adjustments when component is selected.

Y Position

• Purpose: Vertical position of the component from the top edge.

• Usage: Enter a numeric value in pixels.

• Tip: Use arrow keys for fine adjustments when component is selected.

Width

• Purpose: The horizontal size of the component.

• Usage: Enter a numeric value in pixels.

• Note: Some components have minimum width requirements.

Height

• Purpose: The vertical size of the component.

• Usage: Enter a numeric value in pixels.

• Note: Some components have minimum height requirements.

Z Index

• Purpose: Controls the stacking order of overlapping components.

• Usage: Higher values appear on top of components with lower values.

• Default: 0

Behavior Settings

Required

• Purpose: Makes the field mandatory for form submission.

• Usage: Toggle on to make the field required, off to make it optional.

• Note: Required fields are marked with an asterisk (*).

Omit JSON

• Purpose: Excludes the field's value from the final JSON data.

• Usage: Toggle on to exclude from data submission, off to include.

• Note: Useful for display-only or helper fields.

Default Value

• Purpose: Pre-fills the component with an initial value.

• Usage: Enter the value that should appear when the form is first loaded.

• Note: Format depends on component type (text, number, boolean, etc.).

Tab Index

• Purpose: Controls the order of focus when using the Tab key.

• Usage: Set numerically in the Component Order modal.

• Note: Lower numbers are focused first.

Validation and Constraints

Min Value

• Purpose: Sets the minimum allowed value for NumberInput.

• Usage: Enter a numeric value or leave blank for no minimum.

• Note: Only available for NumberInput components.

Max Value

• Purpose: Sets the maximum allowed value for NumberInput.

• Usage: Enter a numeric value or leave blank for no maximum.

• Note: Only available for NumberInput components.

Selection Options

Choices

• Purpose: Defines the available options for selection components.

• Usage: Enter one option per line.

• Note: For NumberSelect, only numeric values are allowed and will be automatically sorted.

• Applies to: Select, NumberSelect, MultiSelect, AutoComplete components.

Conditional Logic

Active Condition

• Purpose: Controls when the component is enabled/visible.

• Usage: Enter a logical expression based on other field values.

• Format: fieldName=value, fieldName!=value, fieldName:contains:value, fieldName:true, fieldName:false

• Combining: Use || for OR, && for AND conditions.

• Example: status=active || type=premium

Value Condition

• Purpose: Dynamically sets the component's value based on other fields.

• Usage: Define rules for automatic value changes.

• Format: ComponentName=value:resultValue,ComponentName=anotherValue:anotherResultValue

• Example: PaymentType=credit:30,PaymentType=cash:0

Styling

Style

• Purpose: Applies custom CSS styling to the component.

• Usage: Enter valid JSON object with CSS properties.

• Format: {"color": "red", "fontWeight": "bold"}

• Note: Use camelCase for CSS properties (e.g., backgroundColor not background-color).

Special Component Notes

Text

A static text display component. Use for headings, instructions, or labels.

Box

A container element that can be used for visual grouping or decoration.

NumberSelect

A select dropdown specifically for numeric values. Values are automatically validated and sorted numerically.

MultiSelect

Allows selection of multiple options from a list. Values are stored as comma-separated strings.

List

Allows entry of multiple text items, similar to a simple spreadsheet column.

Tips for Effective Form Design

• Logical Grouping: Place related fields near each other.

• Consistent Spacing: Maintain even spacing between components for a professional look.

• Clear Labels: Use concise, descriptive labels that clearly indicate the field's purpose.

• Validation Feedback: Use required fields and min/max values to guide users to enter valid data.

• Conditional Logic: Hide irrelevant fields to reduce form complexity using Active Condition.

• Tab Order: Set a logical tab order to improve keyboard navigation.