Foblex Flow
Introduction
Getting Started
Containers
Flow Canvas
Node
Node Drag Handle
Connectors
Output Input Outlet
Connection
Connection Create Connection Connection Marker
Extends
Drag and Drop Zoom Background Line Alignment Minimap
Layouts & Behaviors
Dagre Tree ELKJS Tree
Pro Examples
Visual Programming Flow DB Management Flow Call Center Flow Scheme Editor
Foblex Flow
v12.6.4

DB Management

Example

This example demonstrates how to use the Foblex Flow to create a database management flow.

Order
Customer
Product
1:N
1:N
1:N
N:N
N:N
1:N
1:N
Customers
Orders
Products
Order Items
Categories
Product Categories
Suppliers
Inventory
Employees
Payments

Possibilities

  • Connect nodes using f-connection-for-create component.
  • Reassign connections.
  • Move nodes.
  • Move canvas.
  • Zoom with the mouse wheel, double click and buttons using fZoom directive.
  • Set the background using the f-background component.
  • Line alignment using f-line-alignment component.
  • Select multiple items using the f-selection component with the mouse and by holding down the Shift key.
  • Minimap using the f-minimap component.
  • Context menu using the material mat-menu component.
  • Material controls mat-select, matInput
  • Form validation
  • Create, update, delete nodes and connections.

Source Code

The source code for this example can be found in our GitHub repository.