You can use the ViewModel Designer to place ViewModel columns, find their corresponding widgets quickly, and let an existing widget invoke a ViewModel action; this page is for MDriven Designer users designing a ViewModel layout and interaction pattern.
A ViewModel defines the information and behavior available for one use case. The designer presents that definition as a logical grid: you place columns and nestings in rows and columns, while a renderer interprets those placement hints for the running application. A ViewModel layout is not the complete implementation of a user interface.
Watch the ViewModel Designer updates walkthrough.
Work with the logical grid
Each placed widget has grid placement values:
| Value | Meaning | Example |
|---|---|---|
| Row | The zero-based grid row that contains the widget. | A widget with Row 0 is in the first row.
|
| Column | The zero-based grid column that contains the widget. | A widget with Column 1 is in the second column.
|
| Span | The number of columns occupied by the widget. | Change a widget's span from 1 to 3 to make it occupy three columns.
|
For example, place a customer name at Row 0, Column 1. Move it one position to the right and its Column value becomes 2. Increase its span when the value needs more horizontal space.
The designer places a label before a placed widget by default. Its caption is based on the column name, with casing adjusted where possible. Override the label when the column name is not the text that a user should see.
Place and resize widgets
- Select the widget in the designer.
- Move it to the required grid location. The designer updates its Row and Column placement values.
- Change the span value to change how many columns it occupies, or drag the resize handle on the widget.
- Check the resulting layout before adding more widgets.
When you add a widget, its default position is one row below the last widget you placed. This is useful when adding a vertical series of fields. If you plan to add several widgets in another area, first place the initial widget in that area; subsequent additions continue below it.
Selecting a widget in the design surface highlights its corresponding item in the ViewModel definition, and selecting the definition highlights the corresponding widget. If the selected item is outside the visible area, the designer pans to it. Use this behavior to locate a column in a large ViewModel rather than searching manually.
Use the zoom controls and Fit to inspect a large layout. The screen-size marker controls the size used by the prototyper. For example, changing the marker from 1920 x 1080 to 800 x 600 makes a newly started prototype use the smaller size. This is a global setting.
The ViewModel also has a suggested zoom value that is streamed with its other data. The walkthrough describes this as implemented for the WPF client when a screen is too large for the user's monitor; do not rely on it as a cross-renderer layout solution.
For column and row counts, dimensions, nestings, and the effect of minimum-size settings, see Documentation:ViewModel settings.
Keep the layout valid
Do not save or run a ViewModel with overlapping placed widgets. When two widgets occupy the same grid space, the designer reports a warning that a column occupies the same space as another item. The same issue is reported by model validation during save.
An overlap makes selection ambiguous and is not a supported layout. Move one of the widgets until the warning is gone. Treat an empty warnings list as a release requirement for the ViewModel.
Use actions in the designer
A ViewModel action handles an interaction such as saving data, navigating to another ViewModel, or changing state. Open the Actions tab and double-click an action to open its action dialog.
Navigation actions can show an icon that identifies their destination. Select the action to see the target ViewModel and use that navigation to move through the application's ViewModels during design.
An action column is an ordinary ViewModel column with the is action checkbox selected. With is action selected, it renders as an action control, such as a button. If you clear the checkbox, the same column renders as a normal value control, such as a text box.
Render an action through another widget
Use Rendered By when the action should be invoked through a widget that already represents the data, rather than through a separate action button. The action remains the behavior; the selected column becomes its visible interaction surface.
For example, you can make a product image open a product-detail ViewModel, or make a static text column act as a navigation link.
- Create the action that performs the required behavior. For example, create an action that navigates to a detail ViewModel.
- Add the widget that the user should click, such as an image column or a static label/value column.
- Select the action and set its Rendered By value to that widget's column.
- Save and test the ViewModel in the relevant renderer.
After you set Rendered By, the action column no longer has its own visual representation. The chosen widget invokes the action instead. For example:
- If an action is rendered by an image column, double-clicking the image invokes the action.
- If an action is rendered by a static string column, the renderer can show that string as a hyperlink-like interaction.
If one displayed value must invoke two different operations, create two separate actions. One action cannot provide two independent behaviors through the same rendered interaction.
Design a compact pick-list pattern
Rendered By supports a compact alternative to a two-grid pick/remove layout. Instead of showing one grid of available records, a second grid of selected records, and arrow actions between them, show a selection indicator in each row.
For example, a nested list of details can contain a Picked column whose expression tests whether the current detail is in the owning object's selected-details association. The walkthrough uses an expression equivalent to testing whether the current detail occurs in that collection:
self.<owning object>.PickedDetails->indexOf(self) > -1Render an action through that selection column so the user changes the selection by interacting with the indicator in the row. The expression determines whether the row is currently picked; the action performs the pick or remove behavior. Keep the expression and action aligned so that the indicator reflects the model state after the action runs.
Renderer considerations
The walkthrough demonstrates Rendered By for the WPF rendering engine and states that support was being added to Turnkey rendering engines. Verify the behavior in the renderer and MDriven version you deploy before making it part of a required workflow. The older WinForms rendering engine is shown as a preview style in the walkthrough, but the walkthrough does not recommend it for new work.