Form Controls 속성/컴포넌트 예제 만들기

Forms 2.0의 사용자 정의 속성/컴포넌트를 만들려면 다음 두 Bahmni 저장소를 복제해야 합니다.

• Form Controls
• Implementer Interface

두 저장소는 Forms 2.0의 서로 다른 부분을 담당합니다.

• Form Controls는 form에 배치할 컨트롤을 작성하는 저장소입니다.
• Form Builder는 Implementer Interface 모듈의 일부로 Forms 2.0의 양식 제작 기능을 담당합니다. Form Builder는 사용할 컨트롤을 알아야 합니다.

Form Builder

Form Controls는 Form Builder와 실제 관찰 양식에 렌더링되는 컴포넌트를 나타냅니다.

Designer Control은 Form Builder에서 특정 컨트롤의 설계 시점 속성과 동작을 정의하도록 돕는 컨트롤별 디자이너 컴포넌트입니다.

관찰 양식의 컴포넌트

실제 개발에서는 Form-controls 저장소에 집중하면 됩니다.

Form Controls 저장소의 구조는 다음과 같습니다.

• components
• designers

Designer Controls는 Form Builder에 표시되는 컴포넌트이며 /src/components/designer 디렉터리에 있습니다.

관찰 양식에 표시되는 컴포넌트는 /src/components 디렉터리에 있습니다.

Form Builder Designer Control 생성 단계:

1. /src/components/designer에 적절한 이름의 .jsx 파일을 만듭니다.
2. getJsonDefinition()을 호출합니다.
3. 필요한 추가 로직이나 메서드를 작성합니다.
4. 적절한 render 메서드를 만듭니다.
5. 컴포넌트를 설명하는 descriptor를 만듭니다.
6. Component Store를 사용하여 디자이너 컴포넌트를 등록합니다.관련 문서: Register

위 단계를 마친 뒤 관련 절차에 따라 코드를 컴파일합니다. dist 폴더의 파일을 Implementer Interface 저장소의 node_modules/bahmni-form-controls/dist에 복사합니다. 이어서 Implementer Interface를 컴파일하고 실행하면 변경 사항을 확인할 수 있습니다.관련 문서: herehere

관찰 양식용 컨트롤 생성 단계:

1. /src/components에 적절한 이름, 가능하면 Designer와 같은 이름의 .jsx 파일을 만듭니다.
2. 적절한 render 메서드를 만듭니다.
3. onClick, onChange 등 사용자 동작을 처리하는 함수를 만듭니다.
4. 컴포넌트에 전달되는 propTypes를 확인합니다.
5. Component Store에 컴포넌트를 등록합니다. Designer 컴포넌트를 만들 때와 같은 이름을 사용합니다.관련 문서: register
6. 검증이 필요하면 /src/helpers/controlsHelper.js에 검사 로직을 만듭니다.
7. 마지막으로 /src/helpers/Validator.js에서 해당 검사를 처리합니다. 그러면 코드를 깔끔하게 유지하고 향후 다른 개발자에게도 도움이 됩니다.

예제 컴포넌트는 관련 링크와 저장소를 확인하십시오. 제공된 날짜를 기준으로 미래 날짜를 계산하는 Date Calculator 컴포넌트입니다.

1. Form Builder Designer Component관련 문서: The Form Builder Designer Component
2. 관찰 양식용 Component관련 문서: The Component for Observation Forms