Home

Developer Guide

Fad Provider hero Card

You can find a working version of Fad Provider Hero Card here.

To get started with using the FAD Fad Provider Hero Card on your HTML page, you will need below items:

  1. A script tag with a link to the JavaScript file
  2. A custom element on your HTML page where you want the Fad Provider Hero Card to appear

Once added to the page, your code snippet should look like this:

  <fad-provider-hero-card
      provider='{ "id": "Provider-npi-1285974238-HealthGrades-11467", "npi": 1285974238, "displayLastName": "Misiak", "firstName": "Mary", "middleName": "Frances", "lastName": "Misiak", "displayFullName": "MaryMisiak,FNP-BC", "gender": "F", "onlineBookingAvailability": [{ "supportsOnlineBooking": true, "providerSchedulingId": "mary-misiak", "scheduleId": "0cce2932-d076-42fa-bb4e-39666cd3653e", "officeAddressId": "OY2DLBX", "facilitySchedulingId": "4-500-building", "availableTimes": [{ "date": "2021-02-22T00:00:00", "times": [{ "time": "2021-02-22T10:15:00-07:00", "appointmentTypes": [{ "id": "new-patient-visit-7" } ] } ] } ] } ], "recordNumber": 0, "images": [{ "imageType": "small", "url": "https://d1ffafozi03i4l.cloudfront.net/img/prov/y/5/5/y55txtz_w120h160_vH1H0TRVwG.jpg", "width": 120, "height": 160 } ], "offices": [{ "id": "Y44H8K", "name": "DignityHealthMedicalGroupArizona", "distanceMilesFromSearch": 2.32573075451316, "addresses": [{ "distanceMilesFromSearch": 2.32573075451316, "id": "OY2DLBX", "supportsOnlineBooking": true, "isPrimaryOffice": true, "rank": 1, "addressType": "Office", "phones": ["(602)406-3153"], "faxes": ["(602)406-7176"], "addressHash": "MjkyNyBuIDd0aCBhdmUsIHBob2VuaXgsIGF6", "hash": "a0b1c0473b24fb6f0ac3d5aa08bedf37", "latLongHash": "1e0e17cb1dda965b610253999ae11073", "name": "FamilyMedicine-St.Josephs", "address": "2927N7thAve", "city": "Phoenix", "state": "AZ", "zip": "85013", "latitude": 33.481191, "longitude": -112.083029 } ] } ], "primarySpecialty": "FamilyMedicine", "specialties": ["FamilyMedicine", "FamilyMedicine(NursePractitioner)"] }'
      preferred-provider-select="false"
    ></fad-provider-hero-card>

<script type="text/javascript" src="https://fad.dignityhealth.org/fad-saas.js"></script>

To get started with using the FAD Fad Provider Hero Card on your Angular SPA, you will need below items:

  1. A script sould be inject the part initial load Angualr scripts. (fad-saas.js)
  2. A custom element on your angular component should have element option inside look like this. [attr.provider],
  3. The provider value should be converted to string before passing to [attr.provider] elemnet option.
  4. The Element has two optional event emiters scheduleProvider and preferredProvider, The scheduleProvider will emit the provider details when you click the schedule an appointment button and preferredProvider will emit the npi of current provider when you click the select button.

Once added to the page, your code snippet should look like this:

    <fad-provider-hero-card [attr.provider]="providerData"
      [attr.configuration-url]="https://fad.dignityhealth.org/fad-provider-hero-card/fad-configuration.json" [attr.preferred-provider-select]="true"
      (scheduleProvider)="scheduleProviderHandler($event)" (preferredProvider)="addToFavorite($event)">
    </fad-provider-hero-card>


   ** providerData = "'{ "id": "Provider-npi-1285974238-HealthGrades-11467", "npi": 1285974238, "displayLastName": "Misiak", "firstName": "Mary", "middleName": "Frances", "lastName": "Misiak", "displayFullName": "MaryMisiak,FNP-BC", "gender": "F", "onlineBookingAvailability": [{ "supportsOnlineBooking": true, "providerSchedulingId": "mary-misiak", "scheduleId": "0cce2932-d076-42fa-bb4e-39666cd3653e", "officeAddressId": "OY2DLBX", "facilitySchedulingId": "4-500-building", "availableTimes": [{ "date": "2021-02-22T00:00:00", "times": [{ "time": "2021-02-22T10:15:00-07:00", "appointmentTypes": [{ "id": "new-patient-visit-7" } ] } ] } ] } ], "recordNumber": 0, "images": [{ "imageType": "small", "url": "https://d1ffafozi03i4l.cloudfront.net/img/prov/y/5/5/y55txtz_w120h160_vH1H0TRVwG.jpg", "width": 120, "height": 160 } ], "offices": [{ "id": "Y44H8K", "name": "DignityHealthMedicalGroupArizona", "distanceMilesFromSearch": 2.32573075451316, "addresses": [{ "distanceMilesFromSearch": 2.32573075451316, "id": "OY2DLBX", "supportsOnlineBooking": true, "isPrimaryOffice": true, "rank": 1, "addressType": "Office", "phones": ["(602)406-3153"], "faxes": ["(602)406-7176"], "addressHash": "MjkyNyBuIDd0aCBhdmUsIHBob2VuaXgsIGF6", "hash": "a0b1c0473b24fb6f0ac3d5aa08bedf37", "latLongHash": "1e0e17cb1dda965b610253999ae11073", "name": "FamilyMedicine-St.Josephs", "address": "2927N7thAve", "city": "Phoenix", "state": "AZ", "zip": "85013", "latitude": 33.481191, "longitude": -112.083029 } ] } ], "primarySpecialty": "FamilyMedicine", "specialties": ["FamilyMedicine", "FamilyMedicine(NursePractitioner)"] }"

Please note that the order of the elements is important, and the custom element should come first.

Element Options

There are options available to further customize the behavior of the application. They are added as attributes on the custom element that you included in the browser, and are not required for the component to function.

Attribute Description Type Required Defaults
configuration-url Path to the JSON file that you provide string No Defaults to fad-configuration.json relative to base url.
Best to provider a value.
fad-base-url Path for FAD SaaS application string yes
preferred-provider-select This enable the Select button and emit the current Provider's npi boolean No
provider Json object containing configuration for this instance of the Fad Provider Hero Cards string yes (See below for Json sample provider object)

Input Parameters options

The input parameters Json string contains values. Case is important!

'{ "id": "Provider-npi-1285974238-HealthGrades-11467", "npi": 1285974238, "displayLastName": "Misiak", "firstName": "Mary", "middleName": "Frances", "lastName": "Misiak", "displayFullName": "MaryMisiak,FNP-BC", "gender": "F", "onlineBookingAvailability": [{ "supportsOnlineBooking": true, "providerSchedulingId": "mary-misiak", "scheduleId": "0cce2932-d076-42fa-bb4e-39666cd3653e", "officeAddressId": "OY2DLBX", "facilitySchedulingId": "4-500-building", "availableTimes": [{ "date": "2021-02-22T00:00:00", "times": [{ "time": "2021-02-22T10:15:00-07:00", "appointmentTypes": [{ "id": "new-patient-visit-7" } ] } ] } ] } ], "recordNumber": 0, "images": [{ "imageType": "small", "url": "https://d1ffafozi03i4l.cloudfront.net/img/prov/y/5/5/y55txtz_w120h160_vH1H0TRVwG.jpg", "width": 120, "height": 160 } ], "offices": [{ "id": "Y44H8K", "name": "DignityHealthMedicalGroupArizona", "distanceMilesFromSearch": 2.32573075451316, "addresses": [{ "distanceMilesFromSearch": 2.32573075451316, "id": "OY2DLBX", "supportsOnlineBooking": true, "isPrimaryOffice": true, "rank": 1, "addressType": "Office", "phones": ["(602)406-3153"], "faxes": ["(602)406-7176"], "addressHash": "MjkyNyBuIDd0aCBhdmUsIHBob2VuaXgsIGF6", "hash": "a0b1c0473b24fb6f0ac3d5aa08bedf37", "latLongHash": "1e0e17cb1dda965b610253999ae11073", "name": "FamilyMedicine-St.Josephs", "address": "2927N7thAve", "city": "Phoenix", "state": "AZ", "zip": "85013", "latitude": 33.481191, "longitude": -112.083029 } ] } ], "primarySpecialty": "FamilyMedicine", "specialties": ["FamilyMedicine", "FamilyMedicine(NursePractitioner)"] }'

Here is an example of fad Provider hero card snippet.

  <fad-provider-hero-card
      provider='{ "id": "Provider-npi-1285974238-HealthGrades-11467", "npi": 1285974238, "displayLastName": "Misiak", "firstName": "Mary", "middleName": "Frances", "lastName": "Misiak", "displayFullName": "MaryMisiak,FNP-BC", "gender": "F", "onlineBookingAvailability": [{ "supportsOnlineBooking": true, "providerSchedulingId": "mary-misiak", "scheduleId": "0cce2932-d076-42fa-bb4e-39666cd3653e", "officeAddressId": "OY2DLBX", "facilitySchedulingId": "4-500-building", "availableTimes": [{ "date": "2021-02-22T00:00:00", "times": [{ "time": "2021-02-22T10:15:00-07:00", "appointmentTypes": [{ "id": "new-patient-visit-7" } ] } ] } ] } ], "recordNumber": 0, "images": [{ "imageType": "small", "url": "https://d1ffafozi03i4l.cloudfront.net/img/prov/y/5/5/y55txtz_w120h160_vH1H0TRVwG.jpg", "width": 120, "height": 160 } ], "offices": [{ "id": "Y44H8K", "name": "DignityHealthMedicalGroupArizona", "distanceMilesFromSearch": 2.32573075451316, "addresses": [{ "distanceMilesFromSearch": 2.32573075451316, "id": "OY2DLBX", "supportsOnlineBooking": true, "isPrimaryOffice": true, "rank": 1, "addressType": "Office", "phones": ["(602)406-3153"], "faxes": ["(602)406-7176"], "addressHash": "MjkyNyBuIDd0aCBhdmUsIHBob2VuaXgsIGF6", "hash": "a0b1c0473b24fb6f0ac3d5aa08bedf37", "latLongHash": "1e0e17cb1dda965b610253999ae11073", "name": "FamilyMedicine-St.Josephs", "address": "2927N7thAve", "city": "Phoenix", "state": "AZ", "zip": "85013", "latitude": 33.481191, "longitude": -112.083029 } ] } ], "primarySpecialty": "FamilyMedicine", "specialties": ["FamilyMedicine", "FamilyMedicine(NursePractitioner)"] }'
      configuration-url="https://fad.dignityhealth.org/fad-provider-hero-card/fad-configuration.json"
      preferred-provider-select="false"
    ></fad-provider-hero-card>
<script type="text/javascript" src="https://fad.dignityhealth.org/fad-saas.js"></script>