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.

<m-context [object]="object" [operation]="operation" layout="Inspect">
<m-include-component></m-include-component>
</m-context>

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:

<div class="box">
<h1>Hey</h1>
</div>
<div class="X">
<div class="box">
<h1>There</h1>
</div>
</div>

Then you have rules that depending on the context and how the elements are nested, you get different styling properties:

.box {
border:1px solid red;
width:100px;
float:left;
color:green;
}
/*
if an element with class "box" that is contained
in an element with class "X",
then applies these properties
*/
.X .box {
border:3px solid blue;
background-color:yellow;
}
/*
if a h1 element is contained
in an element with class "box" that is contained
in an element with class "X",
then applies these properties
*/
.X .box h1 {
color:orange;
}

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:

<m-context [object]="user" operation="create" layout="Inspect">
<m-include-component></m-include-component>
</m-context>
<m-context [object]="user" operation="view" layout="Inspect">
<m-include-component></m-include-component>
</m-context>

Then you have rules that depending on the m-context and how they are nested, you get different UI properties:

If selectors [operation=create, field=any]
match the current context values,
then apply the properties
[editing:true]
If selectors [operation=view, field=any]
match the current context values,
then apply the properties
[editing:false]

MetaIncludeComponent (<m-include-component)and various Meta components takes the effective property map to generate programatically the UI.

Create
View
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).

class=User {
field=description {
after: name;
}
}

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...