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
:
@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:
<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, sorryecho 'You got to trust me on this, I saved the world'
​