Customizing Screen Layouts and Fields

This guide details how administrators can customize the layout of screens by adding, editing, and deleting custom fields, and organizing them into sections or tabs. The Customize Screen interface provides robust tools for tailoring user interfaces to specific project or organizational needs.

📝 Navigating to the Customize Screen

To access the customization features for a specific screen, navigate to the relevant project or application section in the left menu. From there, locate the desired screen and activate the customization mode. The URL /projectscreen/index/14 indicates you are currently customizing a project screen with the ID 14.

📊 Understanding the Customize Screen Interface

The Customize Screen is designed to provide a visual representation of the screen's layout. It allows you to interact directly with fields and sections to modify their properties and positions.

➕ Adding Custom Fields

To add a new custom field to the screen:

  1. Locate the 'Add Field' or similar button within the interface. This typically opens a modal dialog.
  2. In the modal, provide the necessary details for the new field, such as its name, data type (e.g., text, number, date, dropdown), and any validation rules.
  3. Once configured, the new field will appear on the screen, ready for positioning.

✏️ Editing Existing Fields

To modify an existing custom field:

  1. Hover over the field you wish to edit on the screen layout. An Edit (pencil icon) or Settings (gear icon) button will appear.
  2. Click the Edit button to open a modal dialog containing the field's current properties.
  3. Adjust the field's name, type, options (for dropdowns), default values, or visibility settings as required.
  4. Save your changes to apply the updates to the field.

🗑️ Deleting Custom Fields

To remove a custom field from the screen:

  1. Hover over the field you wish to delete. A Delete (trash can icon) button will become visible.
  2. Click the Delete button. A confirmation prompt will appear.
  3. Confirm the deletion. Be aware that deleting a field may result in data loss if that field contained unique information.

➡️ Reordering Fields with Drag and Drop

The Customize Screen supports intuitive drag-and-drop functionality for arranging fields and sections:

  • Drag/Drop into Section Top/Bottom/Left/Right/Center: To reposition a field, click and hold the field element. Drag it to the desired location within an existing section. Drop zones will typically highlight to indicate where the field can be placed:
    • Top/Bottom: Positions the field above or below other fields within a section.
    • Left/Right: Positions the field horizontally, allowing for multi-column layouts within a section.
    • Center: Depending on the section configuration, this might center the field or place it as the primary element in a smaller, focused section.

📑 Splitting into Tabs

When a screen contains numerous fields, it can become cluttered. The system allows for organization into tabs to improve usability:

  1. Adding a New Tab: Look for an 'Add Tab' or 'New Tab' option within the screen customization interface. This will create a new, empty tab.
  2. Renaming Tabs: Click on a tab's title to rename it to something descriptive (e.g., 'General Information', 'Advanced Settings', 'Attachments').
  3. Moving Fields to Tabs: Use the drag-and-drop mechanism to move existing fields or entire sections into different tabs. Drag a field and drop it onto the desired tab header, then reposition it within that tab's content area.
  4. Reordering Tabs: Tabs themselves can often be reordered by dragging their headers left or right.