Styling Task Results

KosmicTask Help

Styling Task Results

Complex results can be styled using a selection of standard CSS properties and values. An element within a dictionary result can be styled using the kosmicStyle dictionary key. The styling defined by this key will be applied to the other values in the dictionary and will cascade down to any child items until overridden by another style key. To view all tasks that use styling enter "kosmicStyle" into the application search field. All scripting languages support styling.

The following example generates a list of the planets:

from mugginsoft import KosmicTaskController

# build array of planets
planets = ["Mercury", "Venus", "Earth"]

planets.append("Mars")
planets.append("Jupiter")
planets.append("Saturn")
planets.append("Uranus")
planets.append("Neptune")

# print native object as YAML
KosmicTaskController.printObject(planets)

Without any styling applied this result displays as below:

Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune

To style any element in a result we replace the element with a dictionary that tags the original item with the kosmicData key. The kosmicStyle key defines the style that will be applied to the data item as shown in the following example:

from mugginsoft import KosmicTaskController

# build array of planets
planets = ["Mercury", "Venus", "Earth"]

# style Mars
mars = {'kosmicData': "Mars", 'kosmicStyle': 'color:red; font-weight:bold;'}

planets.append(mars)
planets.append("Jupiter")
planets.append("Saturn")
planets.append("Uranus")
planets.append("Neptune")

# print native object as YAML
KosmicTaskController.printObject(planets)

This styled result displays as:

Mercury
Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune

Styling can be applied to any number of elements and styles defined at lower levels override those that cascade down from higher levels. The example below applies styling both to the entire result and to separate individual elements within it:

from mugginsoft import KosmicTaskController

# style earth
earth = {'kosmicData': "Earth", 'kosmicStyle': 'color:blue; font-weight:bold; font-size:200%;'}

# build array of planets
planets = ["Mercury", "Venus", earth]

# style Mars
mars = {'kosmicData': "Mars", 'kosmicStyle': 'color:red; font-weight:bold;'}

planets.append(mars)
planets.append("Jupiter")
planets.append("Saturn")
planets.append("Uranus")
planets.append("Neptune")

# style planets
result= {'kosmicData': planets, 'kosmicStyle': 'color:green;'}

# print native object as YAML
KosmicTaskController.printObject(result)

This styled result displays as:

Venus
Earth
Mars
Jupiter
Saturn
Uranus
Neptune

Supported CSS Styling Properties

The following CSS properties and values are supported within kosmicStyle strings. Each style string consists of one or more property assignments separated by semicolons.

color, background-color
Named colors. white, black, aqua, blue, gray, green, fuchsia, lime, maroon, navy, olive, purple, red, silver, teal, yellow.
Hex color values. eg: #FFFFFF, #808080, #000000.
RGB color values. eg: rgb(255,255,255), rgb(128,128,128), rgb(0,0,0).
font-size, line-height
Values. pt, px, em, %.
font-weight
Values. normal, bold.
font-style
Values. normal, italic.
text-decoration
Values. none, underline.