Skip to main content

Item Options and Dynamic Templates

Overview​

Item Options and Dynamic Templates provide a powerful system for creating customizable, interactive forms that adapt to user input. This feature allows you to define complex data collection interfaces without requiring programming knowledge.

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.