JsonEditor

{
  "fields": [
    {
      "settings": {
        "widget": "GridItemContainer",
        "valueType": "container"
      },
      "attrs": {
        "name": "computeGrid",
        "spacing": 4,
        "primary": "computeRule",
        "secondary": "Sample of how to use computeRule"
      },
      "fields": [
        {
          "settings": {
            "widget": "GridItemContainer",
            "valueType": "container"
          },
          "attrs": {
            "name": "concatGrid",
            "spacing": 4,
            "primary": "concat",
            "secondary": "concat:col1,col2:join character"
          },
          "fields": [
            {
              "settings": {
                "widget": "TextField",
                "valueType": "string"
              },
              "attrs": {
                "name": "firstName",
                "label": "firstName",
                "grid": {
                  "xs": 6
                }
              }
            },
            {
              "settings": {
                "widget": "TextField",
                "valueType": "string"
              },
              "attrs": {
                "name": "lastName",
                "label": "lastName",
                "grid": {
                  "xs": 6
                }
              }
            },
            {
              "settings": {
                "widget": "Display",
                "valueType": "string",
                "computeRule": "concat:lastName,firstName: "
              },
              "attrs": {
                "name": "fullName",
                "label": "fullName"
              }
            }
          ]
        },
        {
          "settings": {
            "widget": "GridItemContainer",
            "valueType": "container"
          },
          "attrs": {
            "name": "sumGrid",
            "spacing": 4,
            "primary": "sum",
            "secondary": "sum:col1,col2"
          },
          "fields": [
            {
              "settings": {
                "widget": "TextField",
                "valueType": "number"
              },
              "attrs": {
                "name": "profits1",
                "label": "first season profits",
                "type": "number",
                "grid": {
                  "xs": 4
                }
              }
            },
            {
              "settings": {
                "widget": "TextField",
                "valueType": "number"
              },
              "attrs": {
                "name": "profits2",
                "label": "second season profits",
                "type": "number",
                "grid": {
                  "xs": 4
                }
              }
            },
            {
              "settings": {
                "widget": "TextField",
                "valueType": "number"
              },
              "attrs": {
                "name": "profits3",
                "label": "third season profits",
                "type": "number",
                "grid": {
                  "xs": 4
                }
              }
            },
            {
              "settings": {
                "widget": "Display",
                "computeRule": "sum:profits1,profits2,profits3"
              },
              "attrs": {
                "name": "total",
                "label": "Total Profits",
                "format": {
                  "type": "digit",
                  "template": "${repl}"
                }
              }
            }
          ]
        },
        {
          "settings": {
            "widget": "GridItemContainer",
            "valueType": "container"
          },
          "attrs": {
            "name": "ageGrid",
            "spacing": 4,
            "primary": "age",
            "secondary": "concat:birthday"
          },
          "fields": [
            {
              "settings": {
                "widget": "TextField",
                "valueType": "string"
              },
              "attrs": {
                "name": "birthday",
                "label": "Birthday",
                "type": "date",
                "grid": {
                  "xs": 6
                }
              }
            },
            {
              "settings": {
                "widget": "Display",
                "computeRule": "concat:birthday"
              },
              "attrs": {
                "name": "age",
                "label": "Age",
                "format": {
                  "type": "age",
                  "template": "{repl} years old"
                },
                "grid": {
                  "xs": 4
                }
              }
            }
          ]
        },
        {
          "settings": {
            "widget": "GridItemContainer",
            "valueType": "container"
          },
          "attrs": {
            "name": "formatGrid1",
            "spacing": 4,
            "primary": "age(by format)",
            "secondary": "format:col1"
          },
          "fields": [
            {
              "settings": {
                "widget": "TextField",
                "valueType": "string"
              },
              "attrs": {
                "name": "birthday2",
                "label": "Birthday2",
                "type": "date",
                "grid": {
                  "xs": 6
                }
              }
            },
            {
              "settings": {
                "widget": "Display",
                "computeRule": "format:birthday2",
                "format": {
                  "type": "age",
                  "template": "{repl} years old"
                }
              },
              "attrs": {
                "name": "age",
                "label": "Age",
                "grid": {
                  "xs": 4
                }
              }
            }
          ]
        },
        {
          "settings": {
            "widget": "GridItemContainer",
            "valueType": "container"
          },
          "attrs": {
            "name": "formatGrid2",
            "spacing": 4,
            "primary": "sex(by format items)",
            "secondary": "format:col1"
          },
          "fields": [
            {
              "settings": {
                "widget": "Select",
                "valueType": "number"
              },
              "attrs": {
                "name": "sex2",
                "label": "Sex2",
                "itemsSource": "Sex",
                "grid": {
                  "xs": 6
                }
              }
            },
            {
              "settings": {
                "widget": "Display",
                "computeRule": "format:sex2",
                "format": {
                  "type": "items",
                  "itemsSource": "Sex",
                  "items": [
                    {
                      "label": "male",
                      "value": 0
                    },
                    {
                      "label": "female",
                      "value": 1
                    },
                    {
                      "label": "other",
                      "value": -1
                    }
                  ]
                }
              },
              "attrs": {
                "name": "age",
                "label": "Age",
                "grid": {
                  "xs": 4
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

computeRule

Sample of how to use computeRule

concat

concat:col1,col2:join character

firstName

lastName

fullName

sum

sum:col1,col2

first season profits

second season profits

third season profits

Total Profits

age

concat:birthday

Birthday

Age

0 years old

age(by format)

format:col1

Birthday2

Age

0 years old

sex(by format items)

format:col1

Sex2

Age

male