Runtime Layout Customization in ASP.NET Core Blazor Applications
- 4 minutes to read
XAF ASP.NET Core Blazor applications support View Item layout customization in a Detail View at runtime.
You can customize the layout in a simple Detail View and Split Layout.
Enable Layout Customization
This functionality is available by default.
To activate customization mode, right-click an empty space in the Detail View you want to edit and select the Customize Layout option in the context menu.
The invoked Customization Form contains a structured view of all View Items available in the Detail View and a list of View Items hidden in the Detail View.
To deactivate customization mode, close the Customization Form or right-click an empty space and select the Hide Customization Form option from the context menu.
Disable Layout Customization
To disable runtime layout customization in a specific Detail View: open the Model Editor, navigate to the Views | <Namespace> | <Class>_DetailView node, and set the CustomizationEnabled property value to false.
To disable runtime layout customization in all Views, open the Model Editor, navigate to the Options | LayoutManagerOptions node, and set the CustomizationEnabled property to false.
Persist Layout Customization For Individual Users
A user can customize a Detail View’s layout according to their needs. XAF stores the changes in the user differences layer of the Application Model independently for each user. The next time a user invokes a customized View, XAF applies the most recent changes.
XAF supports this behavior by default if you used the Solution Wizard and selected the Standard Authentication option on the Choose Options page. For more information on how to enable this behavior in an existing application, refer to the following topic: Store Application Model Differences in the Database.
The following article describes how users can share changes made during runtime layout customization: Enable the Administrative UI to manage End-User Settings in the Database.
Supported Scenarios
Change a View Item’s Position
Drag a View Item and drop it at the required position. A blue line indicates where you can place the View Item.
Note
If an item group becomes empty as a result of this action, it disappears from the layout.
Resize a View Item
Drag a vertical splitter between adjacent View Items.
Note
When you release the splitter, it sticks to the nearest 1/12th of the container width because of Blazor’s Form Layout Structure. You can use nested groups with hidden captions to resize View Items with more precision.
Hide a View Item
You can use either of the following options:
Right-click an item and select the Hide Item option in the context menu.
Drag an item to the Hidden Items list in the Customization Form.
Note
If you hide an entire group, all its View Items become hidden and the group itself disappears from the layout.
Display a Hidden View Item
Drag a View Item from the Customization Form and drop it at the required position.
Create a Group
Right-click a View Item you want to add to a group and select the Group option in the context menu.
Use the context menu to ungroup View Items.
Create a Tabbed Group
Right-click an item or a group’s caption and select the Create Tabbed Group option in the context menu.
Convert a Group To a Tab
Click a group, then right-click a tabbed group’s header and select the Convert Selected Group to Tab option in the context menu.
Reset View Item Layout
If you need to revert your changes, right-click an empty space in a Detail View at runtime and select the Reset Layout option in the context menu.
Limitations of Runtime Layout Customization
XAF does not support runtime layout customization in the following elements:
- Pop-up Window
- Dashboard View
- Dashboard View Item
- Detail Property Editor
- Split Layout for Collection Properties
It is also not available on smartphones or mobile devices with small displays.