Table of Contents


Using the Layout Designer

The Layout Designer is a drag-and-drop interface for configuring page layouts in Magentrix. This tool allows administrators to visually arrange fields, sections, and related lists to create customized user experiences for Entity Detail and Edit pages.

Before You Begin

Requirements

To use the Layout Designer, users must be assigned a security role with the following permissions:

  • Administrator System Role

Accessing the Layout Designer

To open the Layout Designer:

  1. In the Setup Home page:

    • If working with a Magentrix Entity, click Create > Entities.
    • If working with a Salesforce integrated Entity, click Extend > Salesforce.

  2. Click on the Entity containing the layout you want to edit.

  3. Select the Page Layouts tab.

  4. To create a new layout, click New, configure the basic properties, and click Save. The Layout Designer opens automatically.

  5. To edit an existing layout, click the layout name, then click Edit Layout. The Layout Designer opens.

Understanding the Layout Designer Interface

The Layout Designer interface consists of several key areas:

Left Sidebar - Component Palette

Fields Section: Contains all available fields for the entity. Fields can be dragged onto the layout.

Related Lists Section: Contains related lists that can be added to the bottom of the layout.

Search Box: Filter fields or related lists by name for quick access.

Center Canvas - Layout Preview

Layout Canvas: Visual representation of how the layout will appear to users.

Sections: Organized containers holding fields.

Fields: Individual data fields arranged within sections.

Related Lists Area: Bottom section where related list tabs appear.

Top Toolbar - Actions

Cancel Button: Discard changes and return to the previous page.

Properties Button: Access layout-level properties (on some layouts).

Save Button: Save changes and remain in the Layout Designer.

Right Sidebar - Properties Panel

Displays properties for the currently selected section, field, or related list. Click on an element to see its properties.

Working with Sections

Sections organize fields into logical groups on the page layout.

Adding a New Section

  1. In the Layout Designer, locate the position where you want to add a section.

  2. Below an existing section, you'll see an option to add a new section.

  3. Click to add the section.

  4. Configure the section properties (see Configuring Section Properties below).

Configuring Section Properties

  1. Hover over a section header in the Layout Designer.

  2. Click the wrench icon that appears on the left side of the section header.

  3. The Section Properties dialog opens with the following options:

    Section Title: Enter a descriptive name for the section.

    Display Header On:

    • Check Detail Page to show the section header when viewing records
    • Check Edit Page to show the section header when editing records

    Columns: Choose between:

    • 1-Column: Fields stack vertically in a single column
    • 2-Column: Fields appear side-by-side in two columns

    Tab Order: Control how the Tab key moves between fields:

    • Top-Down: Tab moves down the left column, then down the right column
    • Left-Right: Tab moves left to right across rows

    Section Closed on Detail Page: (Available for sections other than the header section) Check to collapse the section by default on detail pages.

    Visibility: (Available for sections other than the header section) Enter a formula that returns true (visible) or false (hidden). The section only appears when the formula evaluates to true.

  4. Click Ok to save section properties.

Reordering Sections

Sections appear in the order they're arranged in the Layout Designer. To reorder:

  1. Click and hold on a section header.

  2. Drag the section to the new position.

  3. Release to place the section.

A blue indicator line shows where the section will be placed.

Deleting Sections

  1. Hover over the section header.

  2. Click the X icon that appears on the section.

  3. The section and all fields within it are removed from the layout.

Note: The first (header) section cannot be deleted.

Working with Fields

Fields display and capture data on the page layout.

Adding Fields to the Layout

  1. Locate the field in the Fields palette on the left sidebar.

  2. Use the search box to filter fields if needed.

  3. Click and drag the field from the palette.

  4. Drop the field into the desired section and position on the canvas.

  5. A blue line indicates where the field will be placed.

  6. Release to place the field.

Tips:

  • Fields can be placed between existing fields
  • In 2-column sections, position the field in the left or right column
  • Required fields appear with a red indicator

Rearranging Fields

  1. Click and hold on a field in the layout canvas.

  2. Drag the field to the new position (within the same section or to a different section).

  3. A blue line indicates where the field will be placed.

  4. Release to place the field.

Tips:

  • Move fields between columns in 2-column layouts
  • Move fields between sections
  • Group related fields together for better user experience

Configuring Field Properties

  1. Hover over a field in the layout canvas.

  2. Click the wrench icon that appears on the field.

  3. The Field Properties dialog opens with the following options:

    Visibility: Enter a formula that returns true (visible) or false (hidden). The field only appears when the formula evaluates to true.

  4. Click Ok to save field properties.

Note: Other field properties (label, required, data type, etc.) are configured in the field definition itself, not in the Layout Designer.

Removing Fields from the Layout

  1. Hover over the field you want to remove.

  2. Click the X icon that appears on the field.

  3. The field is removed from the layout.

Important: Removing a field from the layout does not delete the field from the entity. It only removes it from this specific layout. The field can be re-added at any time.

Understanding Field Indicators

Fields may display various indicators in the Layout Designer:

Red asterisk (*): Required field - users must provide a value

Grayed out: Field may be read-only or have restricted access

Field type icon: Indicates the field type (text, number, picklist, etc.)

Working with Related Lists

Related Lists display child or related records at the bottom of the detail page.

Adding Related Lists

  1. Locate the Related Lists section in the left sidebar.

  2. Find the related list you want to add (e.g., Contacts, Opportunities, Cases).

  3. Drag the related list from the palette.

  4. Drop it into the Related Lists area at the bottom of the layout canvas.

  5. The related list appears as a tab.

Configuring Related Lists

  1. In the Related Lists area at the bottom of the layout, hover over a related list tab.

  2. Click the wrench icon that appears on the header.

  3. The Related List Properties dialog opens where you can configure:

    • Which fields appear in the related list
    • Sort order
    • Number of records per page
    • Available buttons

  4. Click Ok to save related list properties.

Reordering Related Lists

  1. Click and hold on a related list tab.

  2. Drag the tab left or right to the new position.

  3. Release to place the tab.

The order determines how tabs appear from left to right at the bottom of the detail page.

Removing Related Lists

  1. Hover over the related list tab.

  2. Click the X icon that appears on the tab.

  3. The related list is removed from the layout.

Saving Your Work

The Layout Designer provides multiple save options:

Save

  1. Click the Save button in the top toolbar.

  2. Changes are saved and you remain in the Layout Designer.

  3. Continue making additional changes if needed.

Use when: You want to save progress while continuing to work on the layout.

Cancel

  1. Click the Cancel button in the top toolbar.

  2. You are prompted to confirm discarding changes (if unsaved changes exist).

  3. Click OK to discard changes and return to the previous page.

Use when: You want to abandon changes and exit the Layout Designer.

Save and Exit

After clicking Save, you can navigate away from the Layout Designer using:

  • Browser back button
  • Navigation menu
  • Clicking "Back to previous screen" link (if available)

Layout Designer Tips and Tricks

Efficient Field Organization

  • Group related fields: Place fields that users typically fill out together in the same section
  • Use 2-column layouts: Maximize screen space while maintaining readability
  • Place important fields first: Users see key fields without scrolling
  • Minimize scrolling: Keep critical fields and sections above the fold

Using Search Effectively

  1. Click in the search box in the Fields or Related Lists palette.

  2. Type part of the field name.

  3. The list filters to show only matching items.

  4. Drag filtered items onto the layout.

  5. Clear the search to see all items again.

Working with Large Entities

For entities with many fields:

  1. Use search to quickly locate specific fields.

  2. Add fields to sections as you build out workflows.

  3. Create role-specific layouts rather than one complex layout with all fields.

  4. Use visibility formulas to show/hide fields conditionally.

Copying Field Arrangements

When creating similar layouts:

  1. Configure one layout completely.

  2. Create a new layout.

  3. Manually recreate the field arrangement (note: there's no automatic copy function within the Layout Designer).

  4. Adjust specific fields or sections for the new layout's purpose.

Testing Your Layouts

  1. Save the layout.

  2. Assign the layout to a test role.

  3. Log in as a user with that role (or have a test user check).

  4. Navigate to a record and verify the layout appears correctly.

  5. Test both detail view and edit mode.

  6. Return to the Layout Designer to make adjustments.

Common Layout Designer Workflows

Creating a New Layout from Scratch

  1. Create the new layout and open the Layout Designer.

  2. Add sections to organize fields logically.

  3. Drag essential fields onto the layout, starting with the header section.

  4. Add fields to other sections based on workflow or topic.

  5. Add related lists to the bottom of the layout.

  6. Configure section properties (columns, visibility, etc.).

  7. Configure field visibility if needed.

  8. Save the layout.

  9. Assign to appropriate security roles and record types.

Modifying an Existing Layout

  1. Open the existing layout in the Layout Designer.

  2. Review the current field arrangement.

  3. Add new fields as needed.

  4. Remove obsolete or unnecessary fields.

  5. Rearrange fields for better workflow.

  6. Update section properties if needed.

  7. Save the layout.

  8. Test with actual users.

Creating Role-Specific Layouts

  1. Start with a comprehensive layout that includes all possible fields.

  2. Create a copy conceptually (create new layout with similar structure).

  3. Remove fields that the specific role doesn't need.

  4. Rearrange remaining fields to match that role's workflow.

  5. Add role-specific sections or related lists.

  6. Configure visibility for conditional fields.

  7. Save and assign to the appropriate role.

Troubleshooting Layout Designer Issues

Issue: Cannot drag fields onto the layout.

Solution: Ensure you're dragging fields into a section, not between sections. Verify that the section has space for additional fields.

Issue: Field appears in wrong location after dropping.

Solution: Pay attention to the blue indicator line before releasing. The field is placed where the line appears. Try again and release when the line is in the correct position.

Issue: Cannot find a specific field.

Solution: Use the search box in the Fields palette. Verify that the field exists for this entity. Check if the field is already on the layout.

Issue: Section properties not saving.

Solution: Ensure you clicked Ok in the Section Properties dialog, not just closed it. Then click Save in the Layout Designer toolbar.

Issue: Changes not appearing to users.

Solution: Verify that you clicked Save in the Layout Designer. Check that the layout is assigned to the user's security role. Users may need to refresh their browser.

Issue: Cannot delete a section.

Solution: The header section (first section) cannot be deleted. Other sections can be deleted using the X icon.

Issue: Related list not showing in designer.

Solution: Verify that a relationship exists between the entities (Master-Detail or Lookup). Check that the related list has been configured for the related entity.

Issue: Too many fields making layout cluttered.

Solution: Create multiple sections to organize fields. Use visibility formulas to show fields conditionally. Consider creating simpler role-specific layouts.

Issue: Field visibility formula not working.

Solution: Verify formula syntax is correct. Ensure the formula references fields that are on the layout. Test the formula with different field values.

Issue: Layout Designer running slowly.

Solution: For very large entities with hundreds of fields, the Layout Designer may be slower. Save frequently and work in smaller sections.

Best Practices for Using the Layout Designer

  • Save frequently: Click Save regularly to avoid losing work
  • Plan before building: Sketch out the layout structure before opening the designer
  • Use consistent section naming: Apply standard section names across similar entities
  • Test as you build: Preview changes by viewing actual records periodically
  • Keep it simple: Don't overload layouts with too many fields
  • Use sections effectively: Group 5-10 related fields per section
  • Consider field dependencies: Place dependent fields near each other
  • Think mobile: Remember users may view layouts on smaller screens
  • Document complex visibility: Add comments in layout documentation about complex formulas
  • Get user feedback: Have actual users review layouts before finalizing

Tutorial video on the page layout editor

See Also

Jump to Magentrix Entity Checklist

<< Designing Page Layouts | Assigning Page Layouts >>


Privacy & Security StatementTerms & Conditions
Copyright © 2025 by Magentrix Corporation - All rights reserved.
Powered by Magentrix