Data Binding

IWML supports both one way and two way data binding to objects, including data obtained and updated by REST.

To bind any IWML property use the syntax:

=<source type>.<source name>.<field name>:<formatter>

Each source type has its own requirements as to which parts are optional or not. Even <source type> is optional as without it, data is the default.

<formattter> is always optional. If not specified, the : is not necessary. Formatters can be used to transform or format the data values.

The leading = is what signifies that the property is to be data bound. If the property is a text value and = is actually needs to be displayed rather than data bound, use == instead and only one = will be displayed. For example:

==This is raw text that starts with a single = and is not data bound.

For some source types, source name is not used.

In MarkDown

Data binding can exist in markdown using the data tag. Any bindings in markdown are one way and read only as markdown has no input.

Properties

If the target of the binding is an IntraWeb property (Atozed.Props.Property<>) then .Value can be used, or omitted and it will be defaults.

For example, these two are identical:

=page.Slider.Max.Value
=page.Slider.Max

Data Source Types

To bind to data, first a source of the data must be chosen, aka a data source. Currently IWML supports the following data sources.

Data source types are not case sensitive. this, THIS, and This are all the same. Field names however are usually case sensitive.

Required components are in bold.

Data

Data sources such as REST and JSON data can be bound to in IWML by specifying the URL source in the data property. The keyword data is used to bind to properties in the code behind object.

=data.<data source name>.<field name>:<formatter>

Field name can specify multiple values in case of embedded objects in the data:

=.users.Address.City

Because this source type is the most commonly used type and a name must also be specified, the tag for this source type can also be an implicit default using an empty string:

=.<data source name>.<field name>

Example:

ACORN 1.0 IWML 1.0
Page
  Data[]
    Dataset:dsUsers https://jsonplaceholder.typicode.com/users
  ]
  Root[]
    SimpleStack[]
      Text [b]Name
      Text =.dsUsers.name
    ]
  ]
]

Page

Page is used to bind to controls on the page. In many cases this is identical to using this, however if the page does not have a code behind file or does not have a member variable representing the control, then page can be used instead.

=page.<prop name>:<formatter>

Example:

=page.Slider.Value

This

This is used to bind to the code behind object.

=this.<prop name>:<formatter>

Example:

export class DataSimple extends DataSimpleGen {
  public MagicNo: number = 22;
}
ACORN 1.0 IWML 1.0
Page
  Root[]
    SimpleStack[]
      Text =this.MagicNo
    ]
  ]
]

URL

The keyword url is used to bind to query values in the URL. URL values are read only one way bindings.

=url.<value name>:<formatter>

Example

http://127.0.0.1/IW17/Apps/Test.html?ID=500
ACORN 1.0 IWML 1.0
Page
  Root[]
    SimpleStack[]
      Text =URL.ID
    ]
  ]
]

Special Values

These are not databound values, but are treated as such to avoid requiring a an additional special notation.

Null

To assign a null value:

=null

Empty String

To assign an empty string:

=”

Those are two occurrences of a single quote, not a single double quote.

Demos

  • DataSimple.iwml