Data Type Displays
Introduction
FHIR Data Type components are the basic building blocks of the Commure FHIR-native component library. Each component distills the concept represented by a given data value into a single human-readable string. FHIR data types range from the very simple ("dateTime") to the very complex ("HumanName").
Import data type components from the core component package:
FhirHumanName
HumanName contains the name of a human with text, parts and usage information. The multiple given parts and family name combine to form a single name. Where a person has alternate names that may be used in place of each other (e.g. Nicknames, Aliases), these are different instances of HumanName.
This component uses the HumanName.text
field if it is present, unless preferText={false}
is set.
Alex Gilmour
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
hidePrefixes | false | boolean | Whether prefixes (Ms, Mr, etc) should render or not. |
hideSuffixes | false | boolean | Whether suffixes (Jr, Sr, etc) should render or not. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
nameAssemblyOrder | false | string | The order in which the name should be displayed, if "F" renders Family name first, else if "G" renders Given name first. |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
preferText | false | boolean | Should use 'Address.text' field if present. |
value | false | HumanName | HumanName FHIR type in json format |
FhirAddress
Address is an address expressed using postal conventions (as opposed to GPS or other location definition formats). This data type may be used to convey addresses for use in delivering mail as well as for visiting locations which might not be valid for mail delivery. There are a variety of postal address formats defined around the world.
This component uses the Address.text
field if it is present, unless preferText={false}
is set.
Galapagosweg 91, Building A, Section C, Den Burg, 9105 PZ, NLD
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
delimiter | false | string | Character to use in between address fields. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
preferText | false | boolean | Whether to use 'Address.text' field if present. |
value | false | Address | Patient Address resource in json format |
FhirReference
Reference contains a reference to
another FHIR resource. The Reference
type contains at least one of a reference
(literal reference),
an identifier
(logical reference), and a display
(text description of target).
FhirReference is a "connected component." If the resolveReference
option is enabled, the component
will attempt to resolve the reference by making a request to the Commure FHIR API. If the
reference is successfully resolved, the children
or resolvedResourcePath
prop is used to render
the Resource.
Do not resolve reference:Patient/f2831186-85c1-42af-aab8-61d7c715d57aUse children to render resolved reference:Failed to resolve reference:
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
children | false | (resource: Resource) => React.ReactNode | Child function for rendering the resolved resource, if able to resolve. If 'resolveReference' set to false, this prop is ignored. |
className | false | string | A space-delimited list of class names to pass along to the container element. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | (resource?: Resource) => void | Callback function to be called when container is clicked on. |
resolveReference | false | boolean | Whether to try to resolve the reference. If enabled, component will try to look up the resource by the `reference` field. If the Resource is not found, falls back to rendering the `display` or `reference` value. If able to find the referenced Resource, the component will either use `children` or `resolvedResourcePath` prop to render the Resource. |
resolvedResourcePath | false | string | FHIRPath used to extract a string from the referenced resource, if able to resolve. The first non-null element of the collection returned from the FHIRPath will be rendered. If no non-null elements are returned, the component will fall back to rendering the Reference.display or Reference.reference. If 'resolveReference' set to false, this prop is ignored. |
useCache | false | boolean | Whether to cache the resolution request (eg "Patient/12345"). If set to true, subsequent renders and instances of this component will not make a network request, and so the data may be stale. The cache is cleared when the browser window is closed. If 'resolveReference' set to false, this prop is ignored. |
value | false | Reference | Reference value |
FhirCodeableConcept
CodeableConcept contains information about a concept as supplied by one or more referenced code systems. Code systems refer to the various terminologies and ontologies that are used in healthcare to encode concepts that could otherwise be misinterpreted without a referenceable definition.
In the following example, the term "NEG" may be used by a local code system to represent a test's failure to show a positive result for condition being tested. It is sent with the code for the same concept represented by a public ontology, SNOMED. Upon receiving this datatype, the CodeableConcept components are capable of displaying the appropriate value and can be configured to show fields from a specific system.
Negative
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
preferredSystem | false | string | If provided, favors the display of codings with a matching system. |
value | false | CodeableConcept | CodeableConcept FHIR type in json format |
FhirCoding
Coding contains a reference to a single concept defined by a code system. Encoded concepts are used in healthcare to standardize the representation of concepts that could otherwise be misinterpreted without a referenceable definition.
In the following example, the term "Negative", a test's failure to show a positive result for condition being tested, is represented in SNOMED public ontology by a coded string. This code can be displayed with the FhirCoding component to configurably include the coded string, display text, and system.
Negative
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | Coding | Coding FHIR type in json format |
FhirPeriod
Period specifies a range of time defined by a start and end date/time. The context of use will specify whether the entire range applies (e.g. "the patient was an inpatient of the hospital for this time range") or one value from the period applies (e.g. "give to the patient between 2 and 4 pm on 24-Jun 2013").
If the start
element is missing, the start of the period is not known. If the end
element is missing, it means that the period is ongoing, or the start may be in the past, and the end date in the future, which means that period is expected/planned to end at the specified time
08/15/2010 - 09/15/2013Aug 2010 - ongoingunknown - 2013
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
format | false | string | The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | Period | Period FHIR type in json format. |
FhirQuantity
Quantity contains information about a measurable value, such as a patient's body temperature, white blood cell count, or the number of patients in a physician's census.
This component supports all Variations on Quantity: Distance
, Age
, Count
, Duration
, and SimpleQuantity
.
<= 300 milligram
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | ClassName for container element. |
inline | false | boolean | Whether the label should be rendered inline with the children. |
noDataElement | false | React.ReactNode | Element to be rendered if there is no data. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | Quantity | Quantity FHIR type in json format. |
FhirRange
300 - 600 milligram
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
unknown | false | string | String to render when one side of range is missing. |
value | false | Range | Range FHIR type in json format. |
FhirString
This is an example string
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | ClassName for container element. |
inline | false | boolean | Whether the label should be rendered inline with the children. |
noDataElement | false | React.ReactNode | Element to be rendered if there is no data. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | string | String value to be rendered. |
FhirDateTime
06/08/2013 10:57:34
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
format | false | string | The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | dateTime | DateTime value to be rendered. |
FhirDecimal
54.901
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
decimalPlaces | false | number | Fixed number of decimal places to show. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | decimal | Decimal value to be rendered. |
FhirInteger
25
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
format | false | string | How the integer should be formatted. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | integer | Integer value to be rendered. |
FhirTime
9:57:34 am
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
format | false | string | The moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
value | false | time | FHIR time value. |
FhirBase64Binary
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
contentType | false | string | Content type to specify the type of media (e.g. "image/png"). If `renderContent` set to false, this prop is ignored. If omitted, the component will render the base64 source in an iframe. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
renderContent | false | boolean | Whether to try to render the content specified by the binary string. |
renderedHeight | false | number | Fixed height for rendered `img` or `iframe`. If `renderContent` set to false, this prop is ignored. |
testIdAttribute | false | string | Test-id attribute to be applied to the container element. |
value | false | string | base64Binary value |
FhirMarkdown
API Reference
Prop Name | Required? | Type | Description |
---|---|---|---|
className | false | string | A space-delimited list of class names to pass along to the container element. |
inline | false | boolean | Whether to render the element inline (span) or as a block (div). |
noDataElement | false | React.ReactNode | Element to render if there is no meaningful data in the supplied 'value' prop. |
onClick | false | Function | Callback function to be called when container is clicked on. |
testIdAttribute | false | string | Test-id attribute to be applied to the container element. |
value | false | string | Markdown value |