Documentation:MDriven Stylesheet

MDriven Stylesheet

This page was created by Alexandra on 2020-11-29. Last edited by Wikiadmin on 2026-08-17.

You can apply Turnkey stylesheet classes to controls in a ViewModel to give buttons, text, tables, search fields, tabs, and page headers a consistent web UI; this page is for MDriven Designer users who configure those classes in the ViewModel Editor.

Use stylesheet classes in a ViewModel

A stylesheet class is a CSS class that controls presentation in the Turnkey web client. Add the class name to the control's style ref in the ViewModel Editor.

For example, apply primary outlined to an action to render it as a primary outlined button. Apply tk-primary to a text-bearing control when you want the text to use the SciFree primary color.

Use the right class family: modifier classes such as primary, outlined, and flat are for buttons and links. Use tk--prefixed classes when styling text, for example tk-primary or tk-bold.

Apply a class

Open the ViewModel in the ViewModel Editor.
Select the control, action, table column, or GroupBox that you want to style.
Enter the required class or classes in its style ref. Separate multiple classes with spaces.
Run the ViewModel in Turnkey and check the result at the target screen size.

A style ref can also be an expression when the class must change with ViewModel state. The search-field example later on uses this approach.

For custom selectors, the rendered Turnkey layout, and control-type CSS classes, see Documentation:Layout and CSS. For defining and assigning your own Turnkey CSS styles, see HowTos:Define and Set CSS Styles in MDriven Turnkey and Documentation:Turnkey Styling.

Text and status emphasis

Use tk--prefixed classes to communicate emphasis in text.

Goal	Style ref example	Example use
Make the main value stand out	`tk-bold`	Apply it to the column that displays an object's primary name.
Use the SciFree primary color	`tk-primary`	Apply it to a status label or a key text column.

You can use chips in a table to make a status or process stage more visible. For example, display a pending status using the applicable chip styling together with the text Pending. Choose colors that communicate a defined state rather than using color as decoration; the state remains understandable when the text is also present.

Available text emphasis classes and their applications:

Status indicator classes for reporting and process stages:



tk-uploading-state tk-primary	tk-processing-state tk-primary	tk-waiting-state tk-primary	tk-success-state tk-success	tk-error-state tk-danger

Buttons and links

Turnkey supports three button forms: default, outlined, and flat. You can combine a color modifier with an optional form modifier in the style ref. Do not add a default class.

Intended appearance	Style ref	Example
Primary default button	`primary`	A main Save action.
Primary outlined button	`primary outlined`	A secondary action next to Save.
Primary flat button	`primary flat`	A low-emphasis action in a compact toolbar.
Danger default button	`danger`	A destructive action where the action text makes the consequence clear.
Danger flat button	`danger flat`	A compact remove action.

Use success where a success color is needed. The available color options belong to the Turnkey Style System; use the system consistently rather than introducing ad hoc color meanings.

You can also use colors like primary (main SciFree color), danger, or success. For more colors, follow the Turnkey Style System.

Special buttons

You can add special-button classes on top of the button modifiers when the stylesheet provides a Material Design icon for that action. For an icon-only action, remove the action name so the button displays the standalone icon without text.

Use icon-only buttons only where the icon's purpose is clear in the surrounding UI. For example, use a remove icon at the end of a listed affiliation, while retaining a text label for a less familiar action.

Examples of special button classes with their style references:

Example	Style reference
	tk-upload-btn primary
	tk-delete-btn primary
	tk-back-btn primary
File:next-btn.png	tk-next-btn primary
File:search-btn.png	tk-search-btn primary
	tk-remove-btn primary flat (standalone icon without text)
	tk-add-btn primary flat (standalone icon without text)
	tk-add-btn primary flat
	tk-info-btn flat

Add icons to other elements

Special icon classes can be applied to elements other than buttons. Apply the relevant icon class in the element's style ref. The available icon-class names must come from the current Turnkey stylesheet.

Available icon classes for use in element style refs:


tk-document tk-primary	tk-location tk-primary

Information banners

An information element can be static or removable. Use tk-info-banner on a GroupBox to create the banner wrapper.

Types of information elements available for different use cases:


tk-info-text (static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)	tk-info-box (static text that can be added anywhere on the page, preferably take less than 6 col, tagged value: HideHeading)	tk-info-banner (special info-help for newbies, removable groupbox, that contains text and action to remove it, can be added at the top of the page, tagged value: HideHeading)

Create a static information banner

Add a GroupBox with one row and 12 columns.
Set the GroupBox style ref to tk-info-banner.
Add Static Text inside the GroupBox and allocate 11 columns to it.
Add a remove action in the remaining one column and set its style ref to tk-remove-btn.

Make the banner removable

Use a Boolean ViewModel variable to track whether the user has dismissed the banner.

Create a Boolean variable, for example vRemoveInfo, with initial value false.
Configure the GroupBox visibility so that the banner is visible while vRemoveInfo is false, and hidden after it becomes true.
Set the remove action's EAL expression to:

vRemoveInfo := true

The visibility rule must be the inverse of the dismissal variable. If the GroupBox is visible only when vRemoveInfo is true, clicking Remove shows the banner instead of hiding it.

Tables, cards, and lists

Use style refs on table columns and GroupBoxes to communicate hierarchy without changing the underlying ViewModel data.

Tables

A table can omit its heading by adding the HideHeading tagged value. Style each column according to its content. For example:

Apply tk-bold to the column that displays the main object.
Apply tk-primary to a column whose value should use the SciFree primary color.

Reporting states can use icon modifier classes. You can leave the icon at its default grey, or combine it with tk-primary, tk-success, or tk-danger when color communicates the state.

Table styling classes and their visual presentation:



tk-table

Both variants can be used without a heading by adding a tagged value: HideHeading.

Card wrappers

Use a GroupBox as a card wrapper by setting its style ref to tk-group-card. Add the HideHeading tagged value when the card does not need a GroupBox heading.

For example, place a person's summary fields inside a card GroupBox and hide the GroupBox heading when the person's name is already shown in the card body.

Lists based on tables

You can present a table as a list. For a list of affiliations:

Set the style ref of the document-name column to tk-document.
Add a remove action to the row.
Set the remove action style ref to tk-remove-btn flat.

This pattern keeps the document name readable and gives each row a compact remove control.

Available list style variants:



tk-items-list--default	tk-items-list--primary

To make a list of affiliations like in the example:

Search with a dropdown of suggestions

Use tk-searchbox to create a search input with a results dropdown and, optionally, an action that adds a selected result to the current object.

Build the search box

Create a GroupBox and set its style ref to tk-searchbox.
Add a search input bound to vSeekParam.
Give the search input one row, add the HideHeading tagged value, and set an appropriate Placeholder tagged value.
Add a table bound to vSeekerResult for the suggestions.
Model the result table as a nested ViewModel class with one or two attributes and an optional action.

Change the input style while results are shown

Set the search input style ref as an expression. This example adds tk-searchbox--searching when the search text is not empty and there are results:

if not vSeekParam.isNullOrEmpty and not (vSeekerResult->size <= 0) then 'tk-searchbox__input tk-searchbox--searching' else 'tk-searchbox__input' endif

Use the actual result collection, vSeekerResult, in the condition. Do not test an unrelated class-wide collection when the dropdown is driven by the nested result table.

Configure the results dropdown

Add the HideHeading tagged value to the results table.
Set the results table style ref to tk-searchbox__results.
Set its visible expression so it is visible only when the search input is not empty and the result collection contains rows:

not vSeekParam.isNullOrEmpty and not (vSeekerResult->size <= 0)

Add the selected suggestion

If the result row has an add action, set its style ref to tk-add-btn primary. The action can select the current result, add it to the current object, and clear the search input:

vCurrent_SearchResultGrid;/*Choose the current row in the results grid*/
vCurrent_Something.Something.add(vCurrent_SearchResultGrid); /*Main action*/
vSeekParam := String.NullValue /*Clean the search input field*/

Replace Something and the collection path with names from your own ViewModel.

You can configure a server-side search action to run every 30 ms only when the search field is not empty. Set its DisabledExpression to:

vSeekParam->isEmpty

Test this interval against the size and cost of your search. The disabled expression prevents calls while the input is empty, but it does not reduce calls while the user is typing.

Tabs made from a GroupBox

You can build a tab group from a GroupBox and actions when each tab opens a separate page or view.

Create a GroupBox for the tab buttons.
Add the HideHeading tagged value and set the GroupBox style ref to tk-tabs-group.
Add one action for each tab and distribute the columns equally across the GroupBox.
Set each tab action's style ref to tk-tab-btn flat.
On the action representing the current tab, set the action state to disabled and use the selected style, for example tk-tab-btn primary flat.
Copy the tab-button GroupBox to every relevant page and change which action is disabled on each page.

For example, on a Details page, disable Details and give it tk-tab-btn primary flat; on a History page, disable History instead. Keeping the same GroupBox structure on each page makes the tab group consistent.

Visual examples of tab group implementation and styling:


tk-tabs-group (every button) tk-tab-btn flat (current tab) tk-tab-btn flat	tk-tabs-group (every button) tk-tab-btn flat (current tab) tk-tab-btn primary (without flat)	tk-tabs-group (every button) tk-tab-btn flat (current tab) tk-tab-btn primary flat

Page headers and subheaders

Create a page header and subheader with two table columns.

Add one table column for the page header and one for the subheader.
Select the header size from h1 through h5 and add it to the page-header column's style ref.
Add tk-sub-header to the subheader column's style ref.

For example, use h1 for a page title such as “Customer” and tk-sub-header for supporting text such as “Review contact details and affiliations”.

Responsive and custom styling

Style refs select classes; custom CSS controls the rules behind those classes. Turnkey also exposes the ViewModel name high in the rendered HTML hierarchy, so custom CSS can target one ViewModel without affecting other views. For example, a rule scoped under a ViewModel named WorkBoard can change the sidebar only for that view. See Documentation:Layout and CSS for the rendered structure and selector guidance.

When you configure theme values with small, medium, and large values, blank values fall back to the existing applicable value. Use this capability for intentional size changes across device categories, and verify the result on mobile, medium, and desktop layouts.

Access the complete stylesheet with all style classes and rules: You can download the CSS file here (stylesheet) that contains all the style data with the latest changes.

Contents