Actions

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!
​
Fundamentals - Previous
Visibility, Editability & Validity
Last modified 1yr ago
Copy link
Contents
etting Super Powers