String evaluation

Simian string evaluation can be added to component properties containing strings with the following delimiters:

  • evaluate: "{% %}: Content is evaluated, but kept out of the result. Useful for making template content conditional.
  • interpolate: "{{ }}": Content is evaluated and is part of the result. Useful for making content dependent on values of other components.

In the next sections the applications of these string evaluation syntaxes are described.

Filling templates

String templates can be used in the:

String templates may contain JavaScript functionality in "{% %}" evaluation delimiters to add logic to the template. In combination with data tokens this allows for creating dynamic content that changes with the values of other components.

In the example below the HtmlElement content is changed based on the selection in the Checkbox. Note that the refreshOnChange property must be set to the "enableAuto" component key or True to ensure that the HtmlElement component is refreshed when the checkbox value is changed. When setting the property to True, the HtmlElement is redrawn on any value change, whereas setting it to a component key only refreshes it when the value of that component changes.

enable_auto_save = component.Checkbox("enableAuto", form)
enable_auto_save.defaultValue = True
enable_auto_save.label = "Enable auto-save"

element = component.HtmlElement("action", form)
element.refreshOnChange = "enableAuto"
element.content = """
{% if (data.enableAuto === true) { %}
    <p>Auto-save is enabled.</p>
{% } else { %}
    <p>Auto-save is not enabled.</p>
{% } %}
"""

Templates can also embed values of other components by using interpolate delimiters with the data tokens. In the example below the value from the checkbox is converted to a "true" / "false" representation in the HtmlElement.

element.content = """
{% if (data.enableAuto !== undefined) { %}
    <p>Auto-save enabled: {{ data.enableAuto.toString() }}</p>
{% } %} 
"""

Dependent Component properties

Component properties that contain a string value can use string interpolation to make the property depend on changed values of another component. Note that on initialization the raw interpolation string is shown. When the value is changed from the back-end, the dependent property is interpolated and shown as expected.

In the example below the label of the button can be changed by changing the value of the Hidden component from the back-end. The front-end will use the new value to update the label.

button_label = component.Hidden("buttonLabel", form)
button_label.defaultValue = "Click me"

button = component.Button("action", form)
button.label = "{{ data.buttonLabel }}"

Note that evaluation delimiters are shown as-is in the component property.