You can download and merge these complete, focused model examples into an existing MDriven model when you want a working starting point for an interactive MDriven Turnkey feature.
These examples are .modlr files. Each provides a self-contained implementation of a specific user-interface scenario that you can inspect, run, and adapt in MDriven Designer. They are intended for merge-in use, not as complete applications with sample data. For complete model-and-data applications that you apply to a Turnkey site, see Documentation:Example Gist.
Before you merge an example
- Download the example file.
- Open the model you want to extend in MDriven Designer.
- Choose Open and Merge Add and select the downloaded
.modlrfile. - Review the diagrams, classes, and ViewModels added by the example.
- Run the model locally in Turnkey and open the menu or ViewModel introduced by the example.
- Adapt the model, ViewModels, styling, and assets to your application before deployment.
MDriven Designer merges model content to avoid duplicate structures where possible. For example, when an incoming model uses a class name already present in your model, its content is copied to your existing class rather than creating a second class. Review the merged result, particularly when your model already contains similarly named classes, packages, diagrams, or ViewModels. For the merge behavior and a walkthrough, see MDrivenStart:MDrivenStart MergeModels and watch the merge walkthrough.
Available examples
| Example | What you can learn and adapt | Download |
|---|---|---|
| SVG â move boxes around | Create objects represented by SVG graphics, respond to mouse events, move the objects on a drawing surface, and save their updated positions. Use this as a starting point for interactive diagrams, floor plans, or other draggable visual objects. | Download SvgInteractionMoveBoxesAround.modlr |
| Google Maps â show and update positions | Place a marker on a Google map, track map settings, and move the marker. For example, you can adapt the marker position to represent the location of a customer, asset, or delivery.
You need your own Google API key for production use. |
Download GoogleMapWithMarkers.modlr |
| Trello-like board | Build a board with cards organized in lists and move cards between lists. Use the example to explore interactions such as moving a card, opening a card, and adding a card. | Download TrelloLikeBoard.modlr |
| Markup editor â TinyMCE | Let users create and edit rich HTML text. For example, you can use this pattern for formatted descriptions, messages, or content that must retain headings, links, and other HTML formatting. | Download HtmlEditor.modlr |
| Interactive Gantt chart | Display and interact with data on a timeline. Use this example when users need to view time-based work, such as scheduled tasks or project activities, and interact with the chart. | Download GanttChartInteractive.modlr |
Choose the right type of example
| If you want to... | Start here |
|---|---|
| Add one focused capability, such as a map, board, rich-text editor, SVG interaction, or Gantt timeline, to your current model | Use an example on this page and merge its .modlr file into your model.
|
| Add a reusable model pattern or extension, such as authentication, password reset, translation, asynchronous work, email queueing, or calendar dimensions | See Documentation:Model Examples Old. |
| Apply a complete sample model and data to a Turnkey site | See Documentation:Example Gist. |
| Study a complete complaint-handling application with model, example data, users, workflows, and user interface behavior | See Documentation:Store complaint handling. |
After merging
Treat a merged example as implementation material, not as a drop-in production feature. Inspect the imported classes and ViewModels to understand their names and dependencies before changing them. Then verify the behavior in your own Turnkey environment.
For example, after merging the SVG example, open its drawing ViewModel, move a box, save, and confirm that the new position remains when the view is reopened. After merging the map example, configure your Google API key before validating marker placement and updates.
If an example relies on supporting JavaScript, CSS, or other assets, keep those assets with the model when you deploy it. Documentation:Turnkey treeview shows an example where an _AssetsTK folder contains JavaScript and CSS that are included during cloud upload.