m
m
metaui.io
Search…
Extend your application
In this chapter we will look how easy is to extend our interface if our domain class has changed. Let's add two more fields to the user.ts class:
src/app/model/user.ts
1
export class User implements Entity {
2
3
constructor(public uniqueName?: string, public name?: string,
4
public description?: string, public created?: Date,
5
public age?: number, public isAngularDeveloper: boolean = false) {
6
}
7
8
identity(): string {
9
return this.uniqueName;
10
}
11
12
13
getTypes(): any {
14
return {
15
uniqueName: String,
16
name: String,
17
description: String,
18
created: Date,
19
age: Number,
20
isAngularDeveloper: Boolean
21
};
22
}
23
24
25
/**
26
* Used by MetaUI to identify the name of the class once everything is minified
27
*/
28
className(): string {
29
return 'User';
30
}
31
32
33
toString(): string {
34
return this.name;
35
}
36
}
Copied!
We want to keep it relatively simple so we added fields age and isAngularDeveloper. We added these field into getTypes()so rules can properly introspect these fields.
Next, we extend our rule file User.oss which tells the framework how and where these new fields should be rendered. Let's show these field in create operation and default one which is view
src/app/rules/User.oss
1
class=User {
2
field=uniqueName {
3
label:"Id";
4
}
5
6
field=name {
7
label:"Name";
8
}
9
10
field=description {
11
trait:longtext;
12
}
13
zNone => *;
14
zLeft => uniqueName => name => description => created => age => isAngularDeveloper;
15
}
16
17
class= User {
18
operation=(edit, create) {
19
zNone => *;
20
zLeft => name => description;
21
}
22
23
operation=(create) {
24
zNone => *;
25
zLeft => name => description => created => isAngularDeveloper;
26
}
27
}
28
Copied!
and also extend our controller to update the instantiated User object.
src/app/user-detail/user-detail.component.ts
1
import {Component, OnInit} from '@angular/core';
2
import {User} from '../model/user';
3
4
5
@Component({
6
selector: 'app-user-detail',
7
templateUrl: './user-detail.component.html',
8
styleUrls: ['./user-detail.component.scss']
9
})
10
export class UserDetailComponent implements OnInit {
11
12
object: User;
13
operation = 'view';
14
15
constructor() {
16
}
17
18
ngOnInit(): void {
19
20
this.object = new User('R0001', 'Frank Kolar', 'This is my user record', new Date(),
21
20, true);
22
}
23
}
24
25
Copied!
Let's recompile and look at the application again
1
npm run compile:oss
2
ng serve
Copied!
You can also run npm run watch:oss that monitors any oss changes and recompile automatically.
Create
View
Untitled
As you can see adding two additional fields was pretty simple. You extend only the domain object User and update a rule file just like you do with your CSS.
Last modified 1yr ago
Copy link