You can show modeled data in a MDriven Turnkey user interface as ordinary values, tables, rendered HTML, images from URLs, or custom visualizations; this page helps ViewModel designers choose the right display approach.

Choose how to display the data

Start with the kind of value you have and what the user needs to do with it.

Data and user need	Display approach	Example
A value the user should read	Show the value through a ViewModel column or widget.	Show a car's registration number or a customer's name.
Multiple objects the user must browse, search, or order	Show a table and design the query, filtering, ordering, and pagination for the size of the result.	Show matching customers after the user searches for Adam.
A string containing markup that must become browser content	Mark the column as static and set DataIsHtml=True.	Show a generated <div> containing a small bar-chart fragment.
A string containing the URL of an image	Set Column.DataIsImageUrl.	Show a product image hosted outside the database.
A specialized layout or visualization	Generate the required content or override the Turnkey view where needed.	Show an SVG chart or a custom master-detail table.

Show ordinary values and related objects

A ViewModel defines the data that the user interface works with. Use an expression on a column to show an attribute, an association value, or a calculated value.

For example, in a ViewModel for cars, a column can use the following expression to show the name of the car's brand:

self.BrandOfCar.Name

Keep the expression aligned with the type of the column. When an expression changes the shape of the data, the columns that refer to it may need to derive their type from the referring column. This is particularly important when you transform a collection with OCL.

For example, this expression groups all cars by brand:

Car.allInstances->groupby(c|c.BrandOfCar)

Each group has a brand and a list of cars. A referring column can display the number of cars in that group with:

self.List->size

Use calculated display values when the calculation belongs to the presentation. If a value represents a lasting business fact or you need to change an attribute's type, follow Attribute or Data Type Conversion instead of treating the display expression as a data migration.

Show lists in tables

Tables are appropriate when users need to inspect many similar objects. Decide first whether the list comes from an existing object on screen or from a search across a large database.

• For objects related to the current context, you may be able to load the collection and order it on the client.
• For a search that can return many objects, query only the subset that must be displayed. Searching, filtering, ordering, and pagination must work together.
• When the server supplies only a page of a larger result, changing the sort order must rerun the server-side search. Sorting only the rows already present in the browser does not produce the correctly ordered result set.

For example, a search for Adam might find more than 1,000 people while the interface displays 100. If the user switches the ordering from first name to last name, the application must order the full matching result in the database and then return the appropriate page.

Read Tables, search and ordering for the search, filter, ordering, OCLps, and pagination design that applies to tables.

Render a string as HTML

By default, a string is data, not markup. If an expression returns <div>Hello</div>, configure the column explicitly when you want the browser to render the markup.

1. Select the column that supplies the HTML string.
2. Set IsStatic = True.
3. Add the tagged value DataIsHtml=True.
4. Make the column expression return the HTML as a string.
5. Save and test the rendered result in the application.

For example, an expression can construct a styled cell from a fixed HTML fragment and an attribute value:

'<div class="tk-data-table__cell NewStyle1">Halloj</div>'+self.Attribute2

Use quotes carefully in OCL string constants. OCL uses single quotes to delimit a string. If the HTML or CSS also needs a single quote, escape it with a backslash, or use double quotes in the HTML where appropriate.

Use this option only when the value is intended to be HTML. Render data as html explains the setting and the AngularJS handling required for trusted HTML.

Show an image from a URL

Use an image URL when the image is not stored in the database and your data is a string that points to a valid image URL.

1. Add or select the column whose expression returns the image URL.
2. Enable Column.DataIsImageUrl.
3. Ensure that the expression returns a valid URL rather than HTML markup.
4. Save and verify that the browser can reach the image.

For example, a value such as https://example.invalid/images/car-42.png is an image URL value. It is not a Blob image field. Do not use DataIsHtml to display this kind of value.

Build calculated visualizations

You can prepare display values with OCL and inject them into generated HTML or SVG. This is useful when a standard table does not communicate a comparison clearly.

For example, the percentage of all cars represented by one grouped brand can be calculated as:

(100*self.List->size/Car.allinstances->size).Round(0).asstring+'%'

A collection can also be transformed into tuples containing a brand name and its percentage:

Car.allInstances->groupby(c|c.BrandOfCar)->collect(tuple|tuple.BrandOfCar.Name,(100*tuple.List->size/Car.allinstances->size).Round(0).asstring+'%')

When you build markup from these values, test it with fixed example data first. Then replace the fixed values with the calculated values and create a new object to confirm that the visualization updates. Remove helper columns from the final view so users see the visualization rather than its intermediate data.

For a worked bar-chart and SVG exercise, see Training:Bootcamp:Chapter 13. For chart-specific guidance, see Using Google Charts.

Use a custom Turnkey view when columns are not enough

MDriven Turnkey is an HTML and JavaScript application, so a custom view can bind directly to ViewModel data when the standard presentation does not fit the requirement.

For example, a custom table can repeat over a root collection and bind fields such as name, length, and genre. In a master-detail interface, currency is represented by the ViewModel class's vCurrent value. If the current object is further down the ViewModel hierarchy, obtain it through:

root._Admin.GetCurrentForVMClass('EditOneCar')['RegistrationNumber']

This avoids assuming that a value is available directly on root when it belongs to a nested ViewModel class. See Overriding AngularJS MDriven Turnkey Views for the custom-view binding pattern.

Check the result

Before you publish a view, verify the following:

• The column expression returns the expected type and value.
• A table that represents a large search result uses server-side search, ordering, and pagination consistently.
• HTML is rendered only on columns configured with IsStatic = True and DataIsHtml=True.
• Image values are valid URLs and use DataIsImageUrl.
• A calculated chart or HTML fragment changes when you add or change underlying data.
• Helper columns and development-only fields are removed or hidden from the final presentation.

See also

• Documentation:Tables, search and ordering
• Documentation:Render data as html
• Documentation:Column.DataIsImageUrl
• Training:Bootcamp:Chapter 13
• Documentation:Overriding AngularJS MDriven Turnkey Views