WednesdayWithMDriven: InplacePopup

This tutorial shows how to implement an InplacePopup in MDriven applications, allowing for a dynamic and compact user interface by conditionally displaying UI elements. It includes setup instructions for both MDriven Turnkey and WPF, covering styling and action management.

Implementing InplacePopup in MDriven Applications

The InplacePopup feature in MDriven enables developers to create a dynamic user interface by displaying UI elements only when needed. This tutorial guides you through setting up an InplacePopup in both MDriven Turnkey and WPF applications.

Prerequisites

Before implementing the InplacePopup, ensure you have:

• MDriven Designer installed.
• Basic understanding of ViewModel UX Patterns (Seeker, Dashboard, Forms).
• Familiarity with Layout and CSS for styling.

Step 1: Define the Domain Model

Begin by defining a simple domain model in MDriven Designer. We'll use a class named Sled with attributes like RegistrationNumber and a collection of Box objects.

1. Open MDriven Designer and create a new class named Sled.
2. Add an attribute RegistrationNumber of type String.
3. Create a class Box and establish a one-to-many association with Sled.

Step 2: Create a ViewModel

Create a ViewModel to represent the UI layout where the InplacePopup will be used.

1. Define a ViewModel rooted in Sled.
2. Add a nesting for the Box collection.
3. Set the nesting to use a PlacingContainer for rendering.

Step 3: Implement InplacePopup

The InplacePopup allows you to hide UI elements until a user action triggers them.

1. Add a button to the ViewModel that will trigger the InplacePopup.
   • Use the Action property to define the behavior when the button is clicked.
2. Define the InplacePopup by setting the nesting to render as an action.
   • Set the Presentation property of the nesting to Action.

Step 4: Style the InplacePopup

Styling ensures the InplacePopup integrates seamlessly with your application's UI.

1. Create a new style in the model targeting the PlacingContainer.
2. Set properties such as background color and border to enhance visibility.
3. Apply the style to the InplacePopup using the StyleExpression property.

self.VMStyles->select(s | s.Name = 'NewStyle1')->first

Step 5: Test the InplacePopup

Run your application to test the InplacePopup functionality.

1. Ensure that the popup appears only when the designated button is clicked.
2. Verify that the popup content is rendered correctly and that the styling is applied.

The InplacePopup feature in MDriven provides a flexible way to manage UI space by displaying elements only when necessary. By following this tutorial, you can enhance your application's user experience with dynamic content presentation.

For further exploration, consider reviewing Creating CustomControl that Shows Data in a Gantt Chart and PlacingContainer for additional customization options.

Source

Based on the MDriven video WednesdayWithMDriven: InplacePopup.