m
m
metaui.io
Search…
Application Rules

Application Rules

Let's make sure Application.oss (src/app/rules/Application.oss) exists this will be place for our global rules and we have already User.oss (src/app/rules/User.oss) directory we are going to add following
New rule
Complete rule file
1
field=age editable=false {
2
component:AgeRatingComponent;
3
bindings: {
4
value:$value;
5
}
6
}
Copied!
We also added field 'age' to zLeft
1
class=User {
2
field=uniqueName {
3
label:"Id";
4
}
5
field=description {
6
trait:longtext;
7
}
8
9
field=age editable=false {
10
component:AgeRatingComponent;
11
bindings: {
12
value:$value;
13
};
14
}
15
16
zNone => *;
17
zLeft => uniqueName => name => description => created => age => isAngularDeveloper;
18
}
19
20
class= User {
21
operation=(edit, create) {
22
zNone => *;
23
zLeft => name => description => age;
24
}
25
26
operation=(create) {
27
zNone => *;
28
zLeft => name => description => created => isAngularDeveloper;
29
}
30
}
Copied!
As you can see above we are setting custom component for our field age. Todo so we need to create new Angular component AgeRatingComponent.
Run following command:
1
$ ng g c AgeRating --inlineStyle=true --inlineTemplate=true \
2
--project=my-metaui-app --skipTests=true
Copied!
Update the created component to match code below:
src/app/age-rating/age-rating.component.ts
1
import {Component, Input, OnInit} from '@angular/core';
2
import {BaseComponent, Environment} from '@ngx-metaui/rules';
3
4
5
@Component({
6
selector: 'app-age-rating',
7
template: `
8
<span class="w-string-field">
9
{{rating}}
10
</span>
11
`
12
})
13
export class AgeRatingComponent extends BaseComponent implements OnInit {
14
15
@Input()
16
value: any;
17
18
rating: string;
19
20
constructor(protected environment: Environment) {
21
super(environment);
22
}
23
24
ngOnInit(): void {
25
this.rating = (!this.value) ? 'N/A' : ((this.value && this.value <= 20) ? 'Young' : 'Good');
26
}
27
}
Copied!
To be able identify the component type when MetaUI tries to instantiate the AgeRatingComponentthe Type must be known. For this we are going to add export into user-rules.oss
src/app/rules/user-rules.ts
1
/**
2
* Content of this file is automatically populated by oss compiler
3
*/
4
5
export {ApplicationRule} from './ts/Application.oss';
6
7
/** Auto generated export */
8
export {UserRule} from './ts/User.oss';
9
10
export * from '../age-rating/age-rating.component';
11
Copied!
Re-compile and serve:
1
$ npm run compile:oss
2
$ ng serve
Copied!
and let's change age from 20 to 30 and in read-only mode the value renders as Good.
Edit
View
And with that, we just overrode the default component property. To see how MetaUI determine how properties from multiple rules are applied, we need to understand how rules are loaded and ranked...
Last modified 1yr ago
Copy link