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
@action=Save {
label: "Save";
actionResults:${ alert("Record saved : " + object.name) };
visible: ${properties.get("editing")};
buttonType:positive;
}
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;
};
}
@action=Save {
label: "Save";
actionResults:${ alert("Record saved : " + object.name) };
visible: ${properties.get("editing")};
buttonType:positive;
}
zNone => *;
zLeft => uniqueName => name#required => created => age => isAngularDeveloper => description;
}
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
<div class="page">
<h2>Object Detail</h2>
<button fd-button (click)="operation='create'">Create</button>
<button fd-button (click)="operation='edit'">Edit</button>
<button fd-button (click)="operation='view'">View</button>
<hr/>
<m-context [object]="object" [operation]="operation" layout="InspectWithActions">
<m-include-component></m-include-component>
<ng-template #i18n let-errors>
<span *ngIf="errors?.metavalid">
{{errors.metavalid.msg }}
</span>
<span *ngIf="errors?.required && !errors.metavalid">
Required field
</span>
</ng-template>
</m-context>
{{object | json}}
</div>
You can define different variety of layouts. This layout
InspectWithActions just renders form and actions on top.which creates this rule:
If selectors [class=User declare=action]
match the current context values,
then apply the properties
[action:Save]
If selectors [class=User, action=Save]
match the current context values,
then apply the properties
[
actionResults:${
alert("Record saved : " + object.name)
}
]
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:
/*
Sample definition for operations edit and create
*/
class= User {
operation=edit {
zNone => *;
zLeft => name => description => age;
}
operation=create {
zNone => *;
zLeft => name => description => created => isAngularDeveloper;
}
@action=Save {
label: "Save";
actionResults:${ alert("Record saved !") };
visible: ${properties.get("editing")};
buttonStyle:info;
}
@action=Discard {
label: "Discard Changes";
actionResults:${ alert("All cleared !") };
visible: ${properties.get("editing")};
buttonStyle:info;
}
}
We just defined 2 actions on the class user and we can insert them to the page this like this:
<span style="float: right">
Actions: [
<m-context [object]="object" layout="Links">
<m-include-component></m-include-component>
</m-context>
]
</span>
<m-context [object]="object" [operation]="operation" layout="Inspect">
<m-include-component></m-include-component>
</m-context>
When discard is clicked:
Becoming a super hero is a fairly straight forward process:
$ give me super-powers
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
# Ain't no code for that yet, sorry
echo 'You got to trust me on this, I saved the world'
Last modified 3yr ago