Fhir Human Name

<ahi-fhir-human-name> | AhiFhirHumanName

The text property will be displayed if it is present. If not, the prefix, given, family, and suffix properties will be displayed.

<ahi-fhir-human-name id="usual-name-1"></ahi-fhir-human-name>
<br />
<ahi-fhir-human-name id="maiden-name-1"></ahi-fhir-human-name>

<script>
  document.getElementById("usual-name-1").humanName = {
    prefix: ["Mrs."],
    family: "Powell",
    given: ["Jane", "Elizabeth"],
    suffix: ["Esq."],
    use: "usual",
  };

  document.getElementById("maiden-name-1").humanName = {
    prefix: ["Ms."],
    family: "Lee",
    given: ["Jane", "Elizabeth"],
    suffix: ["Esq."],
    text: "Miss Jane E. Lee, Esquire",
    use: "maiden",
  };
</script>

Examples

Controlling which properties are shown

To control which properties are shown, set the prefix, given, family, suffix, and/or use properties to "hide" or "show" depending on the desired functionality.

In addition, ignore-text can be used to ignore the HumanName’s text property in favor of its component parts.

Only shows the prefix:
Shows all properties:
Only shows the given and family names:
Even if visibility settings are provided, the text property will still take precedent:

Only shows the prefix:
<ahi-fhir-human-name
  ignore-text
  prefix="show"
  family="hide"
  given="hide"
  suffix="hide"
  class="controlling-properties"
></ahi-fhir-human-name>

<br />

Shows all properties:
<ahi-fhir-human-name
  ignore-text
  use="show"
  prefix="show"
  suffix="show"
  given="show"
  family="show"
  class="controlling-properties"
></ahi-fhir-human-name>

<br />

Only shows the given and family names:
<ahi-fhir-human-name
  ignore-text
  prefix="hide"
  suffix="hide"
  given="show"
  family="show"
  class="controlling-properties"
></ahi-fhir-human-name>

<br />

Even if visibility settings are provided, the text property will still take precedent:
<ahi-fhir-human-name
  prefix="hide"
  suffix="hide"
  family="hide"
  use="show"
  class="controlling-properties"
></ahi-fhir-human-name>

<script>
  const nameElements = document.getElementsByClassName('controlling-properties');
  for (const element of nameElements) {
    element.humanName = {
      prefix: ['Ms.'],
      family: 'Lee',
      given: ['Jane', 'Elizabeth'],
      suffix: ['Esq.'],
      text: 'Miss Jane E. Lee, Esquire',
      use: 'maiden'
    };
  }
</script>

Display Order

The order of the family and given names can be controlled using the order property. By default the given name will be shown first.

Given name first:
Family name first:

Given name first:
<ahi-fhir-human-name order="G" class="order-control"></ahi-fhir-human-name>

<br />

Family name first:
<ahi-fhir-human-name order="F" class="order-control"></ahi-fhir-human-name>

<script>
  const nameElements = document.getElementsByClassName('order-control');
  for (const element of nameElements) {
    element.humanName = {
      prefix: ['Ms.'],
      family: 'Lee',
      given: ['Jane', 'Elizabeth'],
      suffix: ['Esq.'],
      use: 'maiden'
    };
  }
</script>

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/fhir-human-name/fhir-human-name.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/fhir-human-name/fhir-human-name.js';

Properties

Name	Description	Type	Default
`humanName` `human-name`	The HumanName to be displayed	`HumanName`	-
`ignoreText` `ignore-text`	if false the address’s text value will be preferred over displaying its parts. If true the address’s text value will be ignore in favor if its parts.	`boolean`	`false`
`family`	whether to show the name’s family value	`hideOrShow`	`'show'`
`given`	whether to show the name’s given value	`hideOrShow`	`'show'`
`prefix`	whether to show the name’s prefix value	`hideOrShow`	`'show'`
`suffix`	whether to show the name’s suffix value	`hideOrShow`	`'show'`
`use`	whether to show the name’s use value	`hideOrShow`	`'hide'`
`initials`	if true, will only show the first letter of the first Given name and the first letter of the family name	`boolean`	`false`
`order`	Puts the given name first if G, puts the family name first if F	`'F' \| 'G'`	`'G'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.