1) How to Use NodeFlow

🔧 Prerequisites

• OutSystems Reactive Web App
• Tree-structured data in JSON format

⚙️ Step-by-Step Setup

1. Install from Forge: Download and install NodeFlow from OutSystems Forge.
2. Prepare Your Data: Your hierarchical data should be structured as a nested array of JSON objects:

const nodeData = {
  label: 'Social Media',
  collapsed: true,
  children: [
    {
      label: 'Platforms',
      collapsed: true,
      children: [
        {
          label: 'Meta',
          collapsed: true,
          children: [
            { label: 'Facebook', link: 'https://facebook.com' },
            { label: 'Instagram', link: 'https://instagram.com' }
          ]
        },
        {
          label: 'X (Twitter)',
          collapsed: true,
          children: [
            { label: 'X (Web)', link: 'https://x.com' },
            { label: 'TweetDeck', link: 'https://tweetdeck.x.com' }
          ]
        }
      ]
    }
  ]
};

3. Drag the Component into Your Screen: Use the NodeFlow Web Block in your Reactive screen and bind it to the data.
4. Bind the Input Parameter: Pass your nodeData structure to the component using a text input or data action.

Optional Enhancements

• Add coloring based on node types
  
  

🧩 Use Cases

• Visualizing menu/category structures
• Creating dynamic permission trees
• Rendering decision-making paths
• Building drill-down dashboards
• Designing file/folder hierarchy views
• Knowledge base navigation systems
  
  

🎨 Customization

The component includes a default dark-themed UI with:

• Circular glowing nodes
• Curved connecting lines
• Smooth expand/collapse effects

You can customize:

• background color
• node border color
• node glow color
• node glow shadow
• node bg
• node hover bg
• node label color
• node label shadow
• node-link-border
• node-link-glow
• node-link-shadow
• curve color
• Icon Color

Any issues/changes needed: kindly contact admin