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
src/app/model/user.ts
export class User implements Entity {
constructor(public uniqueName?: string, 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
};
}
/**
* Used by MetaUI to identify the name of the class once everything is minified
*/
className(): string {
return 'User';
}
toString(): string {
return this.name;
}
}

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
src/app/rules/User.oss
class=User {
field=uniqueName {
label:"Id";
}
field=name {
label:"Name";
}
field=description {
trait:longtext;
}
zNone => *;
zLeft => uniqueName => name => description => created => age => isAngularDeveloper;
}
class= User {
operation=(edit, create) {
zNone => *;
zLeft => name => description;
}
operation=(create) {
zNone => *;
zLeft => name => description => created => isAngularDeveloper;
}
}

and also extend our controller to update the instantiated User object.

src/app/user-detail/user-detail.component.ts
src/app/user-detail/user-detail.component.ts
import {Component, OnInit} from '@angular/core';
import {User} from '../model/user';
@Component({
selector: 'app-user-detail',
templateUrl: './user-detail.component.html',
styleUrls: ['./user-detail.component.scss']
})
export class UserDetailComponent implements OnInit {
object: User;
operation = 'view';
constructor() {
}
ngOnInit(): void {
this.object = new User('R0001', 'Frank Kolar', 'This is my user record', new Date(),
20, true);
}
}

Let's recompile and look at the application again

npm run compile:oss
ng serve

You can also run npm run watch:oss that monitors any oss changes and recompile automatically.

Create
View
Untitled
Create
View

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.