Understanding KEMIS: Declarative JSON Configuration for MIS Page Development

KEMIS is a generic solution created by Beike for developing Management Information System (MIS) pages, aiming to reduce repetitive UI coding by using fully declarative JSON node configurations to invoke components.

Components are declared with a JSON object that specifies the component type, data, initApi, and body. For example:

{
  "type": "page",
  "data": {"message": "我是利用kemis生成的页面"},
  "initApi": {
    "url": "/proprietor/api/interview/cms/config",
    "method": "get",
    "adaptor": (payload, response, api) => {
      return {
        errno: payload.error_code,
        errmsg: payload.error_msg,
        data: {...payload.data}
      };
    }
  },
  "body": [
    {"type": "tpl", "tpl": "
data配置中的数据
:
$message
"},
    {"type": "tpl", "tpl": "
initApi配置返回的数据
:
$open_city_list.0.label
"}
  ]
}

The initApi attribute is typically used to initialize a component's data domain by fetching data from an API, while the api attribute can update the data domain during interactions.

Data can also be provided directly via the data attribute. When a component cannot find a variable in its own data domain, it searches upward through parent components until the top‑level page node.

Expression‑based attributes ending with On (e.g., visibleOn , sendOn ) allow JavaScript expressions to control visibility, request triggering, and other behaviors based on the component's data.

Advanced attribute extensions such as xxxSpec and xxxExpr support both $ variable syntax and EJS templating, enabling complex logic within component configurations.

Custom components can be registered in React using the @RegisterRenderer decorator. Example:

@RegisterRenderer({
  test: /(^|\/ )cms-button$/,
  name: 'cms-button'
})
export class ButtonRenderer extends React.Component
{
  static defaultProps = {};
  render() {
    const {data, label, className, classnames: cx} = this.props;
    const name = filter(label, data);
    return
{name}
;
  }
}

In summary, KEMIS leverages initApi , data , and parent data to initialize component data domains, uses api to update them, and provides flexible variable access via $ and EJS syntax, while xxxOn , xxxSpec , and xxxExpr enable expressive, condition‑driven component behavior.