Skip to main content

Component Inputs

This node defines the inputs for a custom component.

The Component Inputs node acts as the entry point for data passed into a component from its parent.

The Component Inputs node is essential when building reusable components. It allows you to define what properties your component accepts (e.g., "Title", "Image URL", "Is Active"). When you place an instance of your component in another graph, these inputs appear as ports on the component node.

Inputs​

Inputs​

DataDescription
*Dynamic inputs defined in the node inspector. You define the name and type of each input here.

Outputs​

Inputs​

DataDescription
*Dynamic outputs corresponding to the defined inputs. Connect these to the internal logic or UI of your component.

Usage​

Defining Inputs​

  1. Open your custom component graph.
  2. Select the Component Inputs node.
  3. In the properties panel, click "Add Input".
  4. Give it a name (e.g., label) and a type (e.g., String).
  5. A new output port label will appear on the node.
  6. Connect this output to a Text node's Text input.

Using the Component​

  1. Go to another component (e.g., Main Page).
  2. Drag your custom component onto the graph.
  3. You will see an input port named label.
  4. Connect a string "Hello World" to it.
  5. The text inside your component will update to "Hello World".

Detailed Behavior​

  • Types: Supports all standard types (String, Number, Boolean, Color, Image, etc.).
  • Groups: You can organize inputs into groups in the property panel, which will be reflected in the node inspector when using the component.

Troubleshooting​

  • Port Not Updating: If you rename an input in the property panel, you may need to reconnect wires if the internal ID changed (though XFORGE usually handles renaming gracefully).