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'
​
Fundamentals - Previous
Visibility, Editability & Validity
Last updated 6 months ago