This sample lets MDriven Turnkey developers study multiple HTML5 presentations of the same model data, including a board, bouncing balls, a map, and an interactive Gantt-style timeline.
Get the sample
The Board Map Balls Gantt sample is available as an application model through Documentation:Example Gist.
- Log in to the MDriven portal.
- Request a demo site.
- On the demo site, apply the Turnkey sample Board Map Balls Gantt sample.
- Open the sample and compare its views while changing the same underlying objects.
The sample is intended for exploration and for learning how custom HTML5 controls can participate in a Turnkey application. For downloadable, focused model examples, including an interactive Gantt chart, see Documentation:Complete model examples.
What the sample demonstrates
The sample is a playground for custom HTML5 component development in MDriven Turnkey. Its central idea is that several UI components can show and update the same data at the same time.
For example, a board can organize cards into lists such as A, B, and C. The same detail objects can also appear as colored balls. When you move a card to a different board list, the balls update to reflect the changed organization because both views use the same objects.
| View | What you can study | Example |
|---|---|---|
| Board | A drag-and-drop presentation of objects arranged in lists. | Move green cards to one list and blue cards to another; the corresponding objects change in the other views. |
| Bouncing balls | A graphical HTML5 presentation of the detail objects. | A ball's color represents the same color value used by the related card and map marker. |
| Map | A map-based presentation of objects with positions and colors. | Changing an object's color can update the corresponding marker; moving a draggable marker can update its stored position. |
| Gantt-style timeline | An interactive timeline presentation of model data. | Study how timeline data is supplied by Turnkey and presented by a custom component. |
A ViewModel defines the data available to a Turnkey view. In this sample, the board cards and the balls represent the same detail objects. The board lists represent the higher-level grouping objects.
This shared-data pattern means that you do not need separate data for each visual control. Instead, each control reads the properties it needs from the ViewModel and reacts when those properties change.
For example:
- The board uses an object's list membership to determine where its card appears.
- The balls use the object's color to determine how it is drawn.
- A map marker can use the same color property as its icon selection.
- A map marker can use latitude and longitude properties as its position.
When a user changes one of these values through one view, the other views can reflect the changed value. The Board and Balls walkthrough shows cards being reorganized on the board while the balls are sorted from the same data.
Study custom HTML5 components
Use this sample to examine the EXT_Components approach for adding custom HTML5 controls to Turnkey. A custom component receives data exposed by the ViewModel and renders its own HTML5 behavior while remaining connected to the Turnkey data flow.
When you investigate a component, identify these parts:
- The ViewModel data: Find the rows and properties the component needs, such as color, board membership, latitude, and longitude.
- The component rendering: Find how the component creates its visual elements from the rows it receives.
- Change handling: Find what the component does when a watched property changes. For example, a marker can be refreshed when its color changes.
- User interaction: Find how a drag, move, or other interaction writes changed values back to the object.
A map is a useful example of this pattern. A component can create a marker when a new row becomes available. It can watch the row's color and position-related values, then update that marker when the values change. If a user drags a marker and releases it, the component can write the new latitude and longitude to the corresponding object. The map component walkthrough demonstrates this interaction pattern and the use of a ViewModel property as the client-side value a component watches.
Explore the sample effectively
Use the following sequence when you learn from the sample:
- Start with one object in one view, such as a colored board card.
- Locate the same object in the balls, map, or timeline view.
- Change one property through the first view. For example, move the card to a different board list or change its color.
- Confirm which other views update and identify the property responsible for each update.
- Inspect the ViewModel data available to the Turnkey view. The development support in a local Turnkey installation can show the available data and binding expressions for a view.
- Read the custom component implementation to see which ViewModel rows and properties it consumes.
This approach keeps the model as the source of truth while allowing different controls to provide different ways to work with the same objects.
Use the sample as a starting point
Use the techniques in this sample when your application needs more than a standard form or list presentation. Typical uses include:
- A work board that groups cards by status or owner.
- A map that displays and updates the locations of domain objects.
- A timeline that lets users inspect and interact with scheduled work.
- A graphical view that provides immediate visual feedback when a property such as color changes.
Do not treat the board, balls, map, and Gantt views as isolated features. Their value is in showing how multiple custom components can work against a shared ViewModel and persistent model data.
For a step-by-step board customization example, including local Turnkey development, script inclusion, view overrides, and connection to an MDrivenServer, see Documentation:A Trello like Board In MDrivenTurnkey. For another sample that collects HTML5 components and advanced features, see Documentation:Turnkey sample ProjectPlanner.