m
m
metaui.io
Search…
Actions
IN PROGRESS
Action are good way how to add some logic into your application. For example:
  • Show a message dialog
  • Trigger routing
  • Or run some typescript/javascript code
Let's add an action on the User.oss that shows only in editing mode and when clicked it opens an alert with the object.name:
New rule
Complete rule file
1
@action=Save {
2
label: "Save";
3
actionResults:${ alert("Record saved : " + object.name) };
4
visible: ${properties.get("editing")};
5
buttonType:positive;
6
}
Copied!
1
class=User {
2
field=uniqueName {
3
label:"Id";
4
}
5
6
field=name {
7
label:"Full name";
8
trait:required;
9
editable: ${object.isAngularDeveloper};
10
}
11
12
13
field=description {
14
trait:longtext;
15
16
editing=false {
17
visible: ${object.isAngularDeveloper};
18
}
19
}
20
21
field=created {
22
valid:${ object.isValidCreateDate() ? true : "The date cannot be in the future" };
23
}
24
25
field=age editable=false {
26
component:AgeRatingComponent;
27
bindings: {
28
value:$value;
29
};
30
}
31
32
@action=Save {
33
label: "Save";
34
actionResults:${ alert("Record saved : " + object.name) };
35
visible: ${properties.get("editing")};
36
buttonType:positive;
37
}
38
39
zNone => *;
40
zLeft => uniqueName => name#required => created => age => isAngularDeveloper => description;
41
}
Copied!
To be able to see the actiosn let's change our layout to the InspectWithActions inside our user-detail.component.html, so it could look like this:
src/app/user-detail/user-detail.component.html
1
<div class="page">
2
<h2>Object Detail</h2>
3
4
<button fd-button (click)="operation='create'">Create</button>
5
<button fd-button (click)="operation='edit'">Edit</button>
6
<button fd-button (click)="operation='view'">View</button>
7
8
<hr/>
9
10
11
<m-context [object]="object" [operation]="operation" layout="InspectWithActions">
12
<m-include-component></m-include-component>
13
14
<ng-template #i18n let-errors>
15
<span *ngIf="errors?.metavalid">
16
{{errors.metavalid.msg }}
17
</span>
18
<span *ngIf="errors?.required && !errors.metavalid">
19
Required field
20
</span>
21
</ng-template>
22
</m-context>
23
24
{{object | json}}
25
26
</div>
Copied!
You can define different variety of layouts. This layout InspectWithActions just renders form and actions on top.
which creates this rule:
1
If selectors [class=User declare=action]
2
match the current context values,
3
then apply the properties
4
[action:Save]
5
6
If selectors [class=User, action=Save]
7
match the current context values,
8
then apply the properties
9
[
10
actionResults:${
11
alert("Record saved : " + object.name)
12
}
13
]
Copied!
When in editing mode the actions appears under action button placeholder.
When clicked our message appears in alert dialog:
Other way to insert an Action we don't necessary need to change the layout we can keep the existing Inspect layout and use other m-context element and render actions like this:
Let's extend our rules to:
1
/*
2
Sample definition for operations edit and create
3
4
*/
5
class= User {
6
operation=edit {
7
zNone => *;
8
zLeft => name => description => age;
9
}
10
11
operation=create {
12
zNone => *;
13
zLeft => name => description => created => isAngularDeveloper;
14
}
15
16
@action=Save {
17
label: "Save";
18
actionResults:${ alert("Record saved !") };
19
visible: ${properties.get("editing")};
20
buttonStyle:info;
21
}
22
23
@action=Discard {
24
label: "Discard Changes";
25
actionResults:${ alert("All cleared !") };
26
visible: ${properties.get("editing")};
27
buttonStyle:info;
28
}
29
}
Copied!
We just defined 2 actions on the class user and we can insert them to the page this like this:
1
<span style="float: right">
2
Actions: [
3
<m-context [object]="object" layout="Links">
4
<m-include-component></m-include-component>
5
</m-context>
6
]
7
8
</span>
9
10
11
<m-context [object]="object" [operation]="operation" layout="Inspect">
12
<m-include-component></m-include-component>
13
</m-context>
Copied!
When discard is clicked:

etting Super Powers

Becoming a super hero is a fairly straight forward process:
1
$ give me super-powers
Copied!
Super-powers are granted randomly so please submit an issue if you're not happy with yours.
Once you're strong enough, save the world:
hello.sh
1
# Ain't no code for that yet, sorry
2
echo 'You got to trust me on this, I saved the world'
Copied!
Last modified 1yr ago
Copy link