Let's continue by adding some advanced rules. We want to hide the description field when we are not editing (View mode) and isAngularDeveloper
is false
with the visibility property. Plus we will simplify the rule and we remove specific selectors for each operation (view, edit and create). All will be the same (zLeft only).
field=description {trait:longtext;​editing=false {visible: ${object.isAngularDeveloper};}}
class=User {field=uniqueName {label:"Id";}​field=description {trait:longtext;​editing=false {visible: ${object.isAngularDeveloper};}}​field=age editable=false {component:AgeRatingComponent;bindings: {value:$value;};}​zNone => *;zLeft => uniqueName => name => created => age => isAngularDeveloper => description;}
If you look closer we have simplified the rule to work only with one colum layout zLeft
. You can always apply specific rule for a operation
which creates this rule:
If selectors [class=User, field=description, editing=false]match the current context values,then apply the properties[visible:${object.isAngularDeveloper}]
Expressions are wrapped in ${...}
and when used in property value, the "this" is the Context object - key paths reference assignments in context
The context also has special keys for the following:
object: The current object instance set on the context by the object context key
value: The field value from evaluating the current field on the current object in the context
properties: The current property map access as properties.get('<property name>')
Remember turn run npm run compile:oss
after you change rule fules. Or you can start npm run watch:oss
to start automatic compilation.
Next we validate the created
field to ensure our date is not in the future. We will add also helper method to our domain class.
field=created {valid:${ object.isValidCreateDate() ? true : "The date cannot be in the future" };}
class=User {field=uniqueName {label:"Id";}​field=description {trait:longtext;​editing=false {visible: ${object.isAngularDeveloper};}}​field=created {valid:${ object.isValidCreateDate() ? true : "The date cannot be in the future" };}​field=age editable=false {component:AgeRatingComponent;bindings: {value:$value;};}​zNone => *;zLeft => uniqueName => name => created => age => isAngularDeveloper => description;}
and let's add our validation method to domain class user.ts
:
isValidCreateDate(): boolean {const dateNow = new Date();return (this.created && this.created < dateNow);}
export class User implements Entity {​constructor(public uniqueName?: string,@Property.Properties('label:"Full Name"')@Trait.Traits(['required'])public name?: string,public description?: string, public created?: Date,public age?: number, public isAngularDeveloper: boolean = false) {}​identity(): string {return this.uniqueName;}​​getTypes(): any {return {uniqueName: String,name: String,description: String,created: Date,age: Number,isAngularDeveloper: Boolean};}​isValidCreateDate(): boolean {const dateNow = new Date();return (this.created && this.created < dateNow);}​​/*** Used by MetaUI to identify the name of the class once everything is minified*/className(): string {return 'User';}​toString(): string {return this.name;}}
which creates this rule:
If selectors [class=user, field=created]match the current context values,then apply the properties[valid:${object.isValidCreateDate()}]
When you select future date our custom error message appears.
Let's add a rule to prevent the editing the name
field if the value isAngularDeveloper
is not true.
field=name {label:"Full name";trait:required;editable: ${object.isAngularDeveloper};}
class=User {field=uniqueName {label:"Id";}​field=name {label:"Full name";trait:required;editable: ${object.isAngularDeveloper};}​​field=description {trait:longtext;​editing=false {visible: ${object.isAngularDeveloper};}}​field=created {valid:${ object.isValidCreateDate() ? true : "The date cannot be in the future" };}​field=age editable=false {component:AgeRatingComponent;bindings: {value:$value;};}​zNone => *;zLeft => uniqueName => name#required => created => age => isAngularDeveloper => description;}
which creates this rule:
If selectors [class=User, field=name]match the current context values,then apply the properties[editable:${object.isAngularDeveloper}]
Switch to create operation and uncheck isAngularDeveloper
and we see that it the name
(Full name) is not editable. Now check isAngularDeveloper
back switch to edit and field is editable again.
Current limited implementation of the read-only
field does not broadcast any changes to parent form-field so it does not switch back to text field.