How to make Custom Component

Bo Component 스키마 생성
{ "typeId": "boComponent", "componentId": "common.presentational.SampleCustomComponent", "componentType": "presentational", "componentClass": "SampleCustomComponent", "componentName": "Sample Custom Component", "initProps": true, "componentCategory" : 1600, "relatedValueType": "TEXT,STRING", "componentPropClass": "sampleCustomFieldProp" },

위와 같이 BO Component data 스키마를 작성한다.
a. componentId: frontbuilder 내의 파일 path가 된다.
c. componentCategory: builder에서 보여줄 컴포넌트 카테고리 id(custom은 1600)
d. relatedValueType: TextEditor나 Date같이 데이터 하나를 보여주는 컴포넌트는 관련된 valueType을 작성한다.
(이 외에는 안적어도 상관없음)
e. componentPropClass: 컴포넌트의 옵션 지정. 추가 옵션이 필요 없으면 기존의 prop을 지정해도 상관없다.

.

2. Component Option 스키마 생성

[
  {
    "parentId": "boComponentProp",
    "typeId": "nodeType",
    "tid": "sampleCustomFieldProp",
    "typeName": "Sample Custom Field Prop",
    "repositoryType": "node",
    "eviction": 0,
    "microservice": "backoffice",
    "targetGroup": "boComponentProp",
    "standaloneIndex": false,
    "propertyTypes": [
      {
        "pid": "id",
        "name": "ID",
        "valueType": "INT",
        "defaultComponent": "common.presentational.Hidden",
        "idable" : true,
        "indexable" : true,
        "labelable" : false,
        "required" : false,
        "analyzer": "simple",
        "idType": "hash",
        "orderNo": 10
      },
      {
        "pid": "testBool",
        "name": "TEST Boolean",
        "valueType": "BOOLEAN",
        "orderNo": 20
      }
  ]
  }
]

위와 같이 컴포넌트의 프로퍼티 옵션을 생성한다.

3. Bo Component Class 생성

import React, { Component } from 'react';

class SampleCustomComponent extends Component {

    static displayName = 'SampleCustomComponent';

    constructor( props ) {
      super( props );
      this.state = {
        display: props.testBool,
      };
    }

    render() {
      return (
        <div>
          {
            this.state.display ? <p>display</p> : <p>not display</p>
          }
        </div>
      );
    }
}
export default SampleCustomComponent;

위에서 componentId에서 지정한 id에 맞도록 해당 path에 react component를 생성한다.

ex) frontbuilder/src/components/common/presentational/SampleCustomComponent.js

ICE4 PRODUCT

How to make Custom Component

Analytics

Related content