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").

ComponentSupported FHIR R4 Data Types
FhirHumanNameHumanName
FhirAddressAddress
FhirReferenceReference
FhirCodeableConceptCodeableConcept
FhirCodingCoding
FhirPeriodPeriod
FhirQuantityQuantity, Quantity Variations
FhirRangeRange
FhirStringstring, code, uri, id, url, oid
FhirDateTimedateTime, date, instant
FhirDecimaldecimal
FhirIntegerinteger, positiveInt, unsignedInt
FhirTimetime
FhirBase64Binarybase64Binary
FhirMarkdownmarkdown

Import data type components from the core component package:

import "@commure/components-core/lib/style.css"; // Once at the top of your application
import { FhirHumanName, FhirQuantity } from "@commure/components-core";

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.

Alex Gilmour
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
hidePrefixesfalsebooleanWhether prefixes (Ms, Mr, etc) should render or not.
hideSuffixesfalsebooleanWhether suffixes (Jr, Sr, etc) should render or not.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
nameAssemblyOrderfalsestringThe order in which the name should be displayed, if "F" renders Family name first, else if "G" renders Given name first.
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
preferTextfalsebooleanShould use 'Address.text' field if present.
valuefalseHumanNameHumanName 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.

Galapagosweg 91, Building A, Section C, Den Burg, 9105 PZ, NLD
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
delimiterfalsestringCharacter to use in between address fields.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
preferTextfalsebooleanWhether to use 'Address.text' field if present.
valuefalseAddressPatient 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.

Hide code
Do not resolve reference:
Patient/f2831186-85c1-42af-aab8-61d7c715d57a
Use children to render resolved reference:
Failed to resolve reference:

API Reference

Prop NameRequired?TypeDescription
childrenfalse(resource: Resource) => React.ReactNodeChild function for rendering the resolved resource, if able to resolve. If 'resolveReference' set to false, this prop is ignored.
classNamefalsestringA space-delimited list of class names to pass along to the container element.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalse(resource?: Resource) => voidCallback function to be called when container is clicked on.
resolveReferencefalsebooleanWhether 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.
resolvedResourcePathfalsestringFHIRPath 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.
useCachefalsebooleanWhether 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.
valuefalseReferenceReference 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
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
preferredSystemfalsestringIf provided, favors the display of codings with a matching system.
valuefalseCodeableConceptCodeableConcept 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
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalseCodingCoding 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/2013
Aug 2010 - ongoing
unknown - 2013
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
formatfalsestringThe moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalsePeriodPeriod 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
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringClassName for container element.
inlinefalsebooleanWhether the label should be rendered inline with the children.
noDataElementfalseReact.ReactNodeElement to be rendered if there is no data.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalseQuantityQuantity FHIR type in json format.

FhirRange

300 - 600 milligram
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
unknownfalsestringString to render when one side of range is missing.
valuefalseRangeRange FHIR type in json format.

FhirString

This is an example string
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringClassName for container element.
inlinefalsebooleanWhether the label should be rendered inline with the children.
noDataElementfalseReact.ReactNodeElement to be rendered if there is no data.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalsestringString value to be rendered.

FhirDateTime

06/08/2013 10:57:34
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
formatfalsestringThe moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalsedateTimeDateTime value to be rendered.

FhirDecimal

54.901
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
decimalPlacesfalsenumberFixed number of decimal places to show.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalsedecimalDecimal value to be rendered.

FhirInteger

25
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
formatfalsestringHow the integer should be formatted.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalseintegerInteger value to be rendered.

FhirTime

9:57:34 am
Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
formatfalsestringThe moment.js display format to use. Must be valid in accordance with the value supplied http://momentjs.com/docs/#/displaying/format/.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
valuefalsetimeFHIR time value.

FhirBase64Binary

Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
contentTypefalsestringContent 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.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
renderContentfalsebooleanWhether to try to render the content specified by the binary string.
renderedHeightfalsenumberFixed height for rendered `img` or `iframe`. If `renderContent` set to false, this prop is ignored.
testIdAttributefalsestringTest-id attribute to be applied to the container element.
valuefalsestringbase64Binary value

FhirMarkdown

Hide code

API Reference

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to the container element.
inlinefalsebooleanWhether to render the element inline (span) or as a block (div).
noDataElementfalseReact.ReactNodeElement to render if there is no meaningful data in the supplied 'value' prop.
onClickfalseFunctionCallback function to be called when container is clicked on.
testIdAttributefalsestringTest-id attribute to be applied to the container element.
valuefalsestringMarkdown value

Related Reading

FHIR Data Types