한국어 번역 완료

Forms 2.0

사용 가능한 구성 요소 목록

사용 가능한 구성 요소는 다음과 같습니다.

Name	Description	Important Properties
Label	Responsible for showing up messages on the form.  Can be hidden if required and has internationalization support.  A translationKey can be passed as part of the input metadata.	units,  value, translationKey
TextBox	Shows up a text box on the form.  Performs validations for the input provided.  Accepts a list of validations as input and performs it.  Some out-of-the-box validations are available - like mandatory, allow decimal, min/max and dates are available.  The onChange event can be handled by the parent component by passing in a callback.	enabled,formFieldPath, onChange,
NumericBox	Shows up a numeric box on the form.  Supports min and max and a bunch of validations similar to TextBox.  The onChange event can be handled by the parent component by passing in a callback.  The control accepts lowNormal, hiNormal and shows up on the UI as a range beside the textbox.  It supports 2 kinds of validations - allowRange & minMaxRange	hiAbsolute, hiNormal,lowAbsolute,lowNormal, value, onChange
ComplexControl	A Wrapper component that takes in any registered component by name (props: conceptHandler) and creates a child component.  For e.g. you created a custom component called Disposition, then you can configure it in the form using this WrapperComponent.	addMore, conceptHandler,onChange, showNotification
ObsControl	Represents an Observation in Bahmni Forms.  Takes in associated concept, label to show on the UI and a bunch of properties like mandatory, allowDecimal, position on the form etc.  Leverages the other components like Label, TextBox to form a composite control.  Can be created using a form designer interface	Sample ObsControl
ObsGroupControl	Represents an Observation Group in Bahmni Forms.  Takes in a concept set as input and constructs a bunch of observations represented as a group.   It accepts a controls array which takes in ObsControls and places them on the form based on the relative position of the ObsControl.	Sample metadata looks like this
AutoComplete	This component is a wrapper around react-select which is an auto-complete textbox.  The data source for the autocomplete can be static or dynamic.  A callback of onValueChanged is triggered once the new value is selected by the user.
DropDown	A wrapper around AutoComplete component and is a displays a dropdown in the form.
BooleanControl	A simple "Yes/No" button list that a user can select.  The labels on the button are configurable.  Whenever a value is changed, the onChange callback is triggered to the calling component.
RadioButton	A wrapper around HTML radio button that is "Form Aware".  It can track errors and bubble up to the parent.  The validations can be expressed on while creating the component and the value can be captured using the onValueChange event.
Button	Shows up a button on the form.  Has an option to be configured as a multi-select option button
CodedControl	Shows up a dropdown or auto-complete with a bunch of concept answers for a given concept.   Has an option to choose multi select or single select.  If a property of "autocomplete" is selected as true, an autocomplete control is shown.
Date	Shows up a date control on the form.  Simple wrapper around HTML input field of type date. Supports validation, error highlighting and ability for parent components to handle on change events.
DateTime	Shows up date and time controls on the form. Simple wrapper around HTML input field of type date and time. Supports validation, error highlighting and ability for parent components to handle on change events.
Section	Represents a separator on the form.  It doesn't represent any data that needs to be saved in the database.  Its just a way to visually categorize data on the form.
Image	Represents an image on the form. Supports validation, error highlighting and ability for parent components to handle on change events.
Video	Provides an ability to upload and preview videos in the form. Supports validation, error highlighting and ability for parent components to handle on change events.
Location	A wrapper around AutoComplete that provides an ability to show a bunch of openmrs locations in a dropdown.  A notification message is shown if the location cannot be retrieved.
Provider	A wrapper around AutoComplete that provides an ability to show a bunch of openmrs providers in a dropdown.  A notification message is shown if the providers cannot be retrieved.
FreeTextAutoComplete	This component is a wrapper around react-select which is an auto-complete creatable textbox.  The data source for the autocomplete can be static or dynamic.  A callback of onValueChanged is triggered once the new value is selected by the user.
Container	Represents a form which is a composition of a bunch of other form controls.

Container 구성 요소 이해

Container 구성 요소는 ‘폼’을 나타내며 ObsControl, ObsGroupControl 등 다른 구성 요소로 조합됩니다. 메타데이터 JSON에 따라 기본 구성 요소를 활용해 폼을 만듭니다. React 구성 요소 아키텍처를 이용하여 Container는 ‘Add More’와 검증 같은 이벤트를 props로 자식에게 전달하고 자식이 이를 처리합니다. 메타데이터의 ‘name’ 매개변수에 따라 자식 구성 요소를 동적으로 생성합니다.

맞춤 구성 요소 추가 및 Component Store 이해

직접 React 구성 요소를 작성하고 등록하여 폼에서 사용할 수 있습니다. 구축 환경별 구성 요소를 확장할 수 있는 강력한 기능입니다. window 객체에는 구성 요소를 등록하거나 등록 해제할 수 있는 ComponentStore 객체가 있습니다. 애플리케이션의 전역 window 객체에서 ComponentStore에 접근해 구성 요소를 등록합니다. TextBox 구성 요소가 component store로 등록되는 방식을 참조하십시오.관련 문서: gets registered

Designer 구성 요소

Designer 구성 요소는 ‘Form Designer’에서 폼을 만들 때 ‘Design Mode’에 표시되는 구성 요소입니다. 예를 들어 Numeric Component를 끌어 놓을 수 있습니다(동영상 참조). 따라서 Form Designer에서 끌어 놓고 구성하려는 모든 새 구성 요소에는 Designer 버전이 필요합니다. 이 버전은 끌어 놓은 구성 요소가 전체 폼 정의에 추가될 때 생성할 ‘JSON 부분’을 정의합니다. 각 Designer 구성 요소는 자신을 나타내는 JSON을 반환하는 getJsonDefinition() 메서드를 정의합니다. 메타데이터의 designerProperties.isTopLevelComponent 필드는 해당 폼 요소를 최상위 구성 요소로 구성할 수 있는지 지정합니다. 다른 맞춤 구성 요소와 마찬가지로 앞 절에서 설명한 절차로 Designer 구성 요소를 등록할 수 있습니다.관련 문서: watch the video here

국제화

Forms는 react-intl을 활용하여 국제화를 기본 지원합니다. 예를 들어 label에는 ‘translationKey’라는 메타데이터 속성이 있습니다. 폼을 렌더링하는 Container 구성 요소는 번역 목록을 입력받아 자식 구성 요소의 해당 translationKey를 번역합니다. 다음 Container 명세에서 작동 방식을 확인할 수 있습니다.관련 문서: Container spec

하위 문서

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

원문 정보

Bahmni Wiki · CC BY-SA 4.0

원문 보기 ↗