Canvas and Field Management
This documentation covers how users can manage fields on a window creation canvas, including adding different data types and tools, manipulating fields, and managing inter-system fields. It also introduces the concept of "Containerization" that divides the canvas into 12 columns, allowing fields to take up space accordingly.
Containerization: Dividing the Canvas into 12 Columns
The canvas layout is divided into 12 columns, allowing each field to take up any width between 1 and 12. The remaining space in each column can be left vacant or filled with additional fields. The most common containers are:
- 1 item per row: Field takes up 12 columns (full width of the row).
- 2 items per row: Each field takes up 6 columns (half width of the row).
- 3 items per row: Each field takes up 4 columns (one-third width of the row).
- 4 items per row: Each field takes up 3 columns (one-fourth width of the row).
This layout system makes the window responsive, adjusting automatically based on the screen size. When the window is resized, the fields will re-align themselves according to the available space, ensuring a consistent and user-friendly experience across different devices.
Example:
Given a user named "John Doe" is on the canvas for window creation:
- Action: John Doe decides to place multiple fields on the canvas using containerization. He places one field that takes up the entire width of the row (12 columns), another pair that each take up half the width (6 columns each), and another set of three fields that take up one-third of the row (4 columns each).
- Result: The canvas adjusts accordingly, with the fields being placed in the available space, respecting the 12-column layout.
Dragging and Dropping Different Data Types and Tools
Users can drag and drop various data types and tools onto the canvas.
Example:
Given a user named "John Doe" is on the canvas for window creation:
- Action: John Doe drags and drops data types and tools such as text fields, checkboxes, date pickers, etc.
- Result: The data types and tools are placed on the canvas as draggable elements.
Dragging and Dropping Foreign Key Fields
Users can drag and drop foreign key fields from other windows or systems onto the canvas.
Example:
Given a user named "John Doe" is on the canvas for window creation:
- Action: John Doe drags and drops foreign key fields like "user_id" or "task_id" from other windows or systems.
- Result: The foreign key fields are placed on the canvas as draggable elements.
Dragging and Dropping Enumerations
Users can drag and drop enumerations with predefined options onto the canvas.
Example:
Given a user named "John Doe" is on the canvas for window creation:
- Action: John Doe drags and drops enumerations like "status" with options "Open", "Closed", "Pending."
- Result: The enumeration field is placed on the canvas as a draggable element with dropdown options.
Dragging and Dropping Inter-System Fields
Users can drag and drop fields from other systems onto the canvas.
Example:
Given a user named "John Doe" is on the canvas for window creation:
- Action: John Doe drags and drops fields from other systems like "personnel_id" from "HR System."
- Result: The inter-system fields are placed on the canvas as draggable elements.
Deleting a Field from the Canvas
Users can delete fields from the canvas as needed.
Example:
Given a user named "John Doe" has added fields like text fields, checkboxes, and foreign key fields on the canvas:
- Action: John Doe deletes a field from the canvas.
- Result: The field is removed from the canvas.
Resizing a Field on the Canvas
Users can resize fields to adjust their dimensions on the canvas.
Example:
Given a user named "John Doe" has added fields on the canvas:
- Action: John Doe resizes a field like a text input or checkbox.
- Result: The field changes its size according to the user's action.
Relocating a Field on the Canvas
Users can move fields to new positions on the canvas.
Example:
Given a user named "John Doe" has added fields on the canvas:
- Action: John Doe moves a field like a date picker or enumeration to a new position.
- Result: The field is relocated to the new position on the canvas.