Biding variables to queries

VisionR Forms are based on Angular5 components, created in a way that allows complete use of reactive development.

This article presents the basic approach to using variables and binding them with other dynamic components such as queries.

Forms Variables

<variable #uname></variable>

A variable is a dynamic placeholder for data. What makes it dynamic is the fact that upon any change a variables will ‚pump‘ the new data dynamically to all places where it is referenced.

A triavial example is like this:

<div>
    Hello, ... {{ uname.value }}
</div>

Please note that while a variable looks quite a lot like it’s classic programming language cousin, the VR/Forms variable is more like a dynamic placeholder for information.

Considering the fact that a variable may also hold a list of values, we need (in the trivial example above) to explicitly state that we need the value being held, and not some other meta-property of the variable (such as .length)

Using the variable to get the value from an input field is done by enabling the Angluar two-way biding by attribute expression such as [(value)]="uname.value", which produces a dynamic „glue“ that ties the value of the uname var to the value attribute of the <input-varchar> component.

please note that the <input-varchar> component is a VR/Forms enhanced input field, and not a direct HTML5 field, and thus can consume some additional VR-specific annotations such as placeholder attribute in the following example:

<div>
    <input-varchar 
        placeholder='Pls, place your name here: '
        [(value)]="uname.value"></input-varchar>
    <br/>
    <button mat-button>Find me!</button>
</div>

A variable can be tested against with the *ngIf and similar directives, and variables can be used in the context of the current component directly, while some may be exported/imported to other components.

Forms Queries

The most typical use for variable (appart from the obvious printing – see above), is to query objects based on a data held in var.

<query schema="contacts.person" 
    properties="id, code" 
    where="code = :CODE" 
    [params]="{CODE: uname.value}"    
    *ngIf="uname.value">
    <result #res>
        <div *ngIf="res.objects.length">
            OK, we know u!
        </div>
    </result>
</query>

The query is comprised of <query> tag and a <result> tag which allows us to react to the query result and do something with it – being a code or some markup.

Parameters of the query are:

  • schema – relational path. typically MODULE.OBJECTDEF
  • properties – a string list of properties to be selected
  • where – query condition in respect to the schema path provided earlier.
  • [params] – a dynamic property which gets a structure (Hashref) mapping placehilders to values.

As other Angular components, the <query> can have a *ngIf annotation designating conditions triggering the execution.