Context and Properties

Introduction
​Context represents a stack of assignments (e.g. [object]="user", operation="create", layout="Inspect"). 

Just like in our example we used inside the src/app/user-detail/user-detail.component.html template.
1
<m-context [object]="object" [operation]="operation" layout="Inspect">
2
  <m-include-component></m-include-component>
3
</m-context>
Copied!
The current values are run against the Meta rule set to compute the effective property map. The property map holds property key/value pairs that directly affects the UI (eg: component="CheckboxComponent", editable="false")
HTML & CSS
This is similar to how CSS works. HTML elements can have classes to provide context. For example:
1
  <div class="box">
2
      <h1>Hey</h1>
3
  </div>
4
  
5
  <div class="X">
6
   <div class="box">
7
      <h1>There</h1>
8
   </div>
9
  </div>
Copied!
Then you have rules that depending on the context and how the elements are nested, you get different styling properties:
1
  .box {
2
     border:1px solid red;
3
     width:100px;
4
     float:left;
5
     color:green;
6
  }
7
  /*
8
     if an element with class "box" that is contained
9
     in an element with class "X",
10
     then applies these properties
11
  */
12
  .X .box {
13
      border:3px solid blue;
14
      background-color:yellow;
15
  }
16
  /*
17
     if a h1 element is contained
18
     in an element with class "box" that is contained
19
     in an element with class "X",
20
     then applies these properties
21
  */
22
  .X .box h1 {
23
      color:orange;
24
  }
Copied!
If multiple rules match, properties are merged and overridden. In this example,the "There" element merged the width and float properties, but overrode the border and color properties from more specific rules.
MetaUI
In MetaUI, context values are set using MetaContextComponent:
1
  <m-context [object]="user" operation="create" layout="Inspect">
2
      <m-include-component></m-include-component>
3
  </m-context>
4
​
5
​
6
  <m-context [object]="user" operation="view" layout="Inspect">
7
        <m-include-component></m-include-component>
8
  </m-context>
Copied!
Then you have rules that depending on the m-context and how they are nested, you get different UI properties:
1
  If selectors [operation=create, field=any]
2
      match the current context values,
3
  then apply the properties
4
      [editing:true]
5
  
6
  If selectors [operation=view, field=any]
7
      match the current context values,
8
  then apply the properties
9
      [editing:false]
Copied!
MetaIncludeComponent  (<m-include-component)and various Meta components takes the effective property map to generate programatically the UI.
​
Create
View
Context keys
Following table shows some of the interesting context keys you can use. You can also come up with your own. 
Remember - Context keys are those you set with <m-context> component
Context Key name
Context Value
module
Global navigation tab
layout
Define a named layout (e.g.: "Inspect", "SearchForm")
operation
"view", "edit", "create", "search", "list"
class
Class name
object
Object instance (e.g. a User object)
action
An action (e.g. could be fired from a button)
field
Current field of class
elementType
 If type is collection, the type of its elements
editing
Currently editing? Derived from operation
trait
Current traits in effect (like CSS classes)
​
Property keys
Following table shows some of the interesting property keys you can use. You can also come up with your own. 
Remember - Property keys are those you set inside your OSS rule file within the context of a selector (after: name).

1
 class=User {
2
   field=description {
3
    after: name;
4
 }
5
}
Copied!
​
General
Property Key
Property Value
trait
List of traits to apply
after
Name of item (or zone) that this item should follow (for layout order)
visible
Should current item be shown
component
Component name to use for current rendering
bindings
Map of bindings to pass to component
wrapperComponent
Name of component to wrap around this component (it also has wrapperBindings)
​
Class
Property Key
Property Value
fieldsByZone
Map of List for the layout zones (e.g. "zTop", "zLeft", ...)
zonePath
Zone key path for sub map to render
zNone
Special zone which makes field invisible
zLeft
Specific named zone that renders fields in the Left zone (the same applies for other zones: zRight, zBottom, zMiddle, zTop)
​
Layout, Module, Field, Action
Property Key
Property Value
label
Display key
​
Field
Property Key
Property Value
editable
Should current field be editable
valid
Is current value valid
​
Layout
Property Key
Property Value
layoutsByZone
List of sub-layout names grouped by zone (zTop, zLeft, ...)
​
Action
Property Key
Property Value
actionResults
Executes js code that can fire any action
Others
Here are some of the interesting context keys that are explicitly set into the context:
Context Key
Context Value
field
set by MetaFormGroupComponent (material, fiori)
action
set by MetaActionListComponent (material, fiori)
actionCategory
set by MetaActionListComponent (material, fiori)
class
set by MetaFormGroupComponent (material, fiori)
object
set by MetaFormGroupComponent (material, fiori)
layout
set by MetaFormGroupComponent (material, fiori) and 
MetaDashboardLayoutComponent (fiori)
module
 set by MetaHomePage (fiori)
However, some are implicitly set by the MetaUI engine. It's time to talk about chaining...