You can use placing containers in MDriven Designer to arrange the Person ViewModel as a responsive web layout, including a save button and a HistoricOwnership grid that adapts when the browser width changes.

This chapter continues from Chapter 7. You will edit the Person ViewModel and test each change in the web application.

What you will build

You will replace the default column layout of the Person ViewModel with named placing containers. The final layout has:

• A top container for the person fields and Save button that can wrap when space is limited.
• A lower container for the HistoricOwnership grid that grows to use available space.
• A responsive layout inside the HistoricOwnership grid.

A placing container is a ViewModel layout container. Its direction determines whether its immediate children are arranged as a row or a column. Grow controls how a container uses available space, and Wrap allows children in a row to continue on another line when the available width is too small.

Prepare the diagram and open the ViewModel

1. Find the Person ViewModel and drag it onto Diagram 1. Use the placed ViewModel as a quick navigation route: select or open it from the diagram when you need to edit the ViewModel.
2. Rename Diagram1 to Diagram Of Person And Car.
3. Open the Person ViewModel for editing.

Add the root placing container

1. Add a Root Placing container to the Person ViewModel.
2. Review the errors shown after adding it. The existing ViewModel columns are not yet placed inside the new root container.
3. Move the existing ViewModel columns into the root placing container. This removes the placement errors.
4. Save the model and test the web application.

Compare the result with the layout before you added the container. The container now controls the arrangement of its child columns.

Compare row and column direction

1. Select the root placing container and set its direction to Row. Save and test the web application.
2. Change its direction to Column. Save and test again.

In a row, immediate children are displayed beside one another when width permits. In a column, they are displayed vertically. Use the browser window size while testing to see how the layout responds.

Make HistoricOwnership use the available space

1. Ensure that the grid that displays HistoricOwnership is at the bottom of the Person ViewModel.
2. Set the HistoricOwnership element's Grow value to 2.
3. Save and test the web application.

A Grow value of 2 instructs this element to take available space in the layout. Check that the grid fills more of the remaining area than it did before.

Hide the automatic side bar

1. Select the Person ViewModel root.
2. Select Hide-SideBar.
3. Save and test the web application.

The automatically maintained action list on the left is no longer displayed. This gives the placing-container layout the full page width.

Add a Save button

1. Add a new ViewModel column.
2. Name the column Save.
3. Set its expression to selfVM.Save.
4. Move the Save column to the top of the root placing container.
5. Save and test the web application.

The expression invokes Save on the current ViewModel. The button should be available at the top of the layout.

Enable Save only when there are changes

1. Select the Save button column.
2. Set DisableExpression to selfVM.Dirtylist->isempty.
3. Save and test the web application.
4. Change a person's name. Confirm that the Save button becomes enabled, then save the change.

The ViewModel's Dirtylist contains pending changes. Therefore, the button is disabled when that list is empty.

Show Save only when there are changes

1. Set the Save button's VisibleExpression to selfVM.Dirtylist->notempty.
2. Save and test. Change data, confirm that the button appears, and save the change.
3. Clear the VisibleExpression.
4. Select the FollowEnable flag next to VisibleExpression.
5. Save and test again.

With FollowEnable selected, the button visibility follows its enabled state. This removes the need to maintain both expressions separately.

Split the Person layout into top and bottom areas

1. Add two child placing containers inside the root placing container.
2. Move HistoricOwnership into the lower child container.
3. Set the lower child container's Grow value to 2.
4. Set its Direction to Column.
5. Set Align Items on the lower child container to Stretch.
6. Move the remaining Person columns into the top child container.
7. Set Wrap to true on the top child container.
8. Save and test the web application at different browser widths.

The top container can wrap its fields and button onto additional lines. The lower container holds the HistoricOwnership area, grows into available space, and stretches its items across its width.

Align controls in the web application

1. In the web UI, edit the boxes and inspect how the controls align.
2. Set top margins on the buttons as needed to align them with wider controls in the layout.
3. Save and retest after each adjustment.

Use margins for visual alignment only; keep the structural grouping in placing containers.

Name the containers

1. Give each placing container a descriptive name.

For example, name the upper container for person fields and actions, and name the lower container for HistoricOwnership. Names make the layout easier to discuss and maintain.

Make the HistoricOwnership grid responsive

1. Open the HistoricOwnership Grid Nesting.
2. Add a placing container to the grid nesting.
3. Add a child placing container inside that new container.
4. Move the HistoricOwnership columns into the child placing container so that the columns are members of the row layout.
5. Set the HistoricOwnership root placing container's Direction to Column. Save and test to see the row rendering.
6. Change the root placing container's Direction to Row and set Wrap to true.
7. Test with multiple HistoricOwnership rows. Resize the browser window larger and smaller and observe how the row content wraps.

This final comparison demonstrates how direction and wrapping affect repeated grid content. Test with enough rows to see the effect rather than relying on a single row.

Check your work

Before continuing, verify that:

• The Person ViewModel has a root placing container with named top and lower child containers.
• Person fields and the Save button are in the top container, and the top container has Wrap enabled.
• HistoricOwnership is in the lower container, which has Grow set to 2, Direction set to Column, and Align Items set to Stretch.
• The Save button follows the ViewModel dirty state through DisableExpression and FollowEnable.
• The Person ViewModel side bar is hidden.
• HistoricOwnership has its own nested placing-container layout and has been tested at different browser widths.

Next chapter

Continue with Chapter 9.

See also

• Chapter 7
• Chapter 9
• Bootcamp introduction