3.10 View layout and master-details view

So far, the search and details views that we have been generating were using a default layout, with fields arranged in two columns flowing vertically, details views popping up as modal dialogs, error panel positioned under the criteria panel in list views and at the top of details view, and the first level child panels organized using tabs. Xomega allows you to configure some of the layout parameters for each view, and also share such configurations between multiple views. Let's open up the global_config.xom file, and expand the ui:layout-config section to view the initial named layouts that were pre-configured in the model by default.

As you can see, we have a “standard” layout that is set as default for all views, with the configuration that we described above, as well as a “master-details” layout, which inherits from the standard layout, and overrides the details-mode for list screens.

In order to provide a layout configuration for a specific view, you need to add a ui:layout element to the corresponding ui:view element, set a named layout to inherit the configuration from in the base attribute, and/or override any specific layout settings inside of that element.

Let's demonstrate this by adding a layout configuration to the SalesOrderView. We will derive it from the standard layout, set the size for the view, change the flow of the fields to be “horizontal” across columns and make the error panel show at the bottom of the screen, as follows.

Let’s build the model to regenerate the views and run the application, then navigate to the Sales Order list screen and click the New link to create a new sales order. If you look closely, you'll notice that the fields are now flowing horizontally across the columns instead of vertically, as indicated by the green zigzag lines on the screenshot below. This layout setting doesn't work particularly well on this screen, so we'll go ahead and revert it back to "vertical" in the model.

If you click Save without populating all required fields, you’ll also notice that the errors summary panel is now shown at the bottom of the screen, and not at the top, as we saw in the beginning of this tutorial.

A more interesting thing to show is how to change the Sales Order List screen to use master-details layout. So let’s add the layout configuration to the Sales Order List View, which will be derived from the “master-details” layout, and set the size for the view as follows.

After we build the model and run the application, here is what the screen will look like.

As you see, the details view opens up as a collapsible side panel now, which still has a view title that includes the sales order number and is formatted based on our custom logic.

You have learned that Xomega gives you a number of ways to customize the UI - both in the model (custom controls, labels, read-only fields, etc.), and in the customized view models, objects and code behind. You can also set up your own global application layout in the MainLayout.razor for the header, navigation menus and the footer, and also customize the styles for various controls and their states.

If you still cannot make your screen look the way you need to using all these options, then you can directly edit the generated .razor view, and then set the custom attribute to “true” on the view’s layout to prevent Xomega generators from overwriting your changes, as follows.

This also means that your view will not be updated when you make the changes to the model and regenerate the views, so you’ll need to make any further updates to the view manually.

Next: 4. Implementing security >