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
New rule
@action=Save {
label: "Save";
actionResults:${ alert("Record saved : " + object.name) };
visible: ${properties.get("editing")};
buttonType:positive;
}
Complete rule file
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
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:

etting Super Powers

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'