Add field_order property to CustomComponent

docs/docs/components/custom.mdx

@@ -94,7 +94,8 @@ The CustomComponent class serves as the foundation for creating custom component
 
   | Attribute Name | Description                                                                   |
   | -------------- | ----------------------------------------------------------------------------- |
-  | _`repr_value`_ | Displays the value it receives in the _`build`_ method. Useful for debugging. |
+  | _`status`_ | Displays the value it receives in the _`build`_ method. Useful for debugging. |
+  | _`field_order`_ | Defines the order the fields will be displayed in the canvas.                  |
 
   <Admonition type="info" label="Tip">
 

src/backend/langflow/interface/custom/custom_component/custom_component.py

@@ -5,7 +5,6 @@ from uuid import UUID
 import yaml
 from cachetools import TTLCache, cachedmethod
 from fastapi import HTTPException
-
 from langflow.interface.custom.code_parser.utils import (
     extract_inner_type_from_generic_alias,
     extract_union_types_from_generic_alias,
@@ -28,6 +27,8 @@ class CustomComponent(Component):
     """The code of the component. Defaults to None."""
     field_config: dict = {}
     """The field configuration of the component. Defaults to an empty dictionary."""
+    field_order: List[str] = []
+    """The field order of the component. Defaults to an empty list."""
     code_class_base_inheritance: ClassVar[str] = "CustomComponent"
     function_entrypoint_name: ClassVar[str] = "build"
     function: Optional[Callable] = None

src/backend/langflow/interface/custom/utils.py

@@ -7,6 +7,8 @@ from typing import Any, Dict, List, Optional, Union
 from uuid import UUID
 
 from fastapi import HTTPException
+from loguru import logger
+
 from langflow.field_typing.range_spec import RangeSpec
 from langflow.interface.custom.code_parser.utils import extract_inner_type
 from langflow.interface.custom.custom_component import CustomComponent
@@ -19,7 +21,6 @@ from langflow.interface.importing.utils import eval_custom_component_code
 from langflow.template.field.base import TemplateField
 from langflow.template.frontend_node.custom_components import CustomComponentFrontendNode
 from langflow.utils.util import get_base_classes
-from loguru import logger
 
 
 def add_output_types(frontend_node: CustomComponentFrontendNode, return_types: List[str]):
@@ -43,6 +44,18 @@ def add_output_types(frontend_node: CustomComponentFrontendNode, return_types: L
         frontend_node.add_output_type(return_type)
 
 
+def reorder_fields(frontend_node: CustomComponentFrontendNode, field_order: List[str]):
+    """Reorder fields in the frontend node based on the specified field_order."""
+    if not field_order:
+        return
+
+    # Create a dictionary for O(1) lookup time.
+    field_dict = {field.name: field for field in frontend_node.template.fields}
+    reordered_fields = [field_dict[name] for name in field_order if name in field_dict]
+
+    frontend_node.template.fields = reordered_fields
+
+
 def add_base_classes(frontend_node: CustomComponentFrontendNode, return_types: List[str]):
     """Add base classes to the frontend node"""
     for return_type_instance in return_types:
@@ -289,6 +302,9 @@ def build_custom_component_template(
         add_base_classes(frontend_node, custom_component.get_function_entrypoint_return_type)
         add_output_types(frontend_node, custom_component.get_function_entrypoint_return_type)
         logger.debug("Added base classes")
+
+        reorder_fields(frontend_node, custom_component.field_order)
+
         return frontend_node.to_dict(add_name=False)
     except Exception as exc:
         if isinstance(exc, HTTPException):

src/backend/langflow/template/template/base.py

@@ -9,6 +9,7 @@ from langflow.utils.constants import DIRECT_TYPES
 class Template(BaseModel):
     type_name: str
     fields: list[TemplateField]
+    field_order: list[str] = []
 
     def process_fields(
         self,