Customization Guide

JSON Configuration File

The JSON configuration file helps control customizations for the FAD SAAS application so that you can fine tune certain colors and content to fit your organization. It consists of two parts: the interfaces and the theme. An example is provided for your reference:

{
  "interfaces": {
    "search": {
      "locationSearchCookieName": "exampleName",
      "medgroupDictionary": [
        {
          "code": "medGroup1",
          "identifiers": "med-group-1|medgroup1",
          "title": "CommonSpirit - Medgroup1",
          "city": "Phoenix",
          "state": "AZ",
          "latitude": "33.448261",
          "longitude": "-112.075768"
        },
        {
          "code": "medGroup2",
          "identifiers": "med-group-2|medgroup2",
          "title": "CommonSpirit - Medgroup2",
          "city": "",
          "state": "",
          "latitude": "",
          "longitude": ""
        }
      ]
    },
    "tenant": {
      "tenantCode": "tenant-code"
    },
    "suggestAnEdit": {
      "enabled": true,
      "linkScheme": "/forms/suggestedit?Npi={0}"
    },
    "emergencyCare": {
      "enabled": true,
      "linkScheme": "https://www.commonspirit.org/emergency-care"
    },
    "quickLinks": {
      "enabled": true,
      "categories": [
        "Video Visits",
        "Primary Care",
        "Cardiology",
        "Gynecology"
      ]
    },
    "myProviders": {
      "enabled": true,
      "linkScheme": "https://www.commonspirit.org/profile/myproviders"
    },
    "helplineNumbers": {
      "enabled": true,
      "heading": "Prefer to talk to someone? We're here, 24/7",
      "numbers": [
        {
            "heading": "Arizona",
            "phone": "(855) 697-0781"
        },
        {
            "heading": "California",
            "phone": "(866) 914-3627"
        },
        {
            "heading": "Nevada",
            "phone": "(866) 984-3627"
        }
      ]
    },
    "landingPage": {
      "landingPageHeader": "Find a doctor"
    },
    "errorLinks": [
      {
        "title": "Find a doctor",
        "url": "https://www.dignityhealth.org/ourdoctors"
      },
      {
        "title": "For physicians",
        "url": "https://www.dignityhealth.org/for-physicians"
      },
      {
        "title": "Patient Portal",
        "url": "https://www.dignityhealth.org/my-home/my-care-dignity-health"
      },
      {
        "title": "Emergency care",
        "url": "https://www.dignityhealth.org/emergency-care"
      },
      {
        "title": "Pay a bill",
        "url": "https://dignityhealth.mysecurebill.com"
      },
      {
        "title": "Working for Dignity Health",
        "url": "https://www.dignityhealthcareers.org"
      }
    ],
    "videoVisitsBanner": {
      "enabled": true
    },
    "guidedFlowButton": {
      "enabled": true
    },
    "filters": {
      "onlineScheduling": {
        "enabled": true
      },
      "videoVisits": {
        "enabled": true
      },
      "acceptingNewPatients": {
        "enabled": true
      },
      "availability": {
        "enabled": true
      },
      "specialty": {
        "enabled": true
      },
      "medicalGroup": {
        "enabled": true
      },
      "gender": {
        "enabled": true
      },
      "insurance": {
        "enabled": true
      },
      "language": {
        "enabled": true
      },
      "searchRadius": {
        "enabled": true
      }
    }
  },
  "theme": {
    "fonts": {
      "fontFamily": "CustomFont",
      "fontUrl": "/assets/fonts/custom-font.ttf",
      "fontType": "truetype"
    },
    "colors": {
      "locationPinColor": "#ed711c",
      "locationPinOutline": "#c85200",
      "locationPinLabel": "#fff",
      "badgeValidColor": "#c85200",
      "badgeInvalidColor": "#4d525a",
      "actionContent": "#0071C2",
      "videoBadgeBackground": "#e6f5ff",
      "actionHoverstate": "#005591",
      "videoBadgeContent": "#0061a7",
      "contentBackground": "#fff",
      "bodyContent": "#4d525a",
      "footerBackground": "#f4f4f4",
      "activeProviderOffice": "#e3e1dc",
      "inactiveProviderOffice": "#0071C2",
      "calendarDateDisabled": "#b0a9a1",
      "toolTipBackground": "#fff",
      "toolTipColor": "#666",
      "toolTipBoxShadow": "#ccc",
      "loadingCircleColor": "#ed711c",
      "scheduleAppointmentBoxShadow": "#e7e7e7",
      "datePickerDivider": "#e3e1dc",
      "datePickerTextDisabled": "#4d525a80",
      "datePickerTextEnabled": "#4d525a",
      "callIcon": "#575C65",
      "appointmentInfoTooltip": "#0071C2",
      "dateColorInactive": "#4d525a80",
      "dateColorActive": "#4d525a",
      "appointmentTypeText": "#fff",
      "whiteColor": "#ffffff",
      "dividerColor": "#e3e1dc",
      "providerSearchIcon": "#ed711c",
      "locationSearchIcon": "#ed711c",
      "filterButtons": "#0071C2",
      "filterButtonsHover": "#005591",
      "filterCount": "#c85200",
      "errorHeader": "#ec7423"
    }
  }
}

You can also find another example as raw JSON here.

Interfaces

This section of the JSON controls certain items like links, medical groups, and search behavior.

`"search"` section

locationSearchCookieName: when a user enters their location, a cookie is set so that it can be quickly retrieved once they return to the site. This value controls the name of that cookie.
medgroupDictionary: array of objects that helps to define the possible medical groups that a user can search for providers. Each object in the array has the following specification:

Key Description Required

code Medical group code yes

identifiers Pipe-delimited alternate identifiers yes

title Title for search results heading yes

city City for the medical group no

state State for the medical group no

latitude Latitude for the medical group no

longitude Longitude for the medical group no

Key	Description	Required
`code`	Medical group code	yes
`identifiers`	Pipe-delimited alternate identifiers	yes
`title`	Title for search results heading	yes
`city`	City for the medical group	no
`state`	State for the medical group	no
`latitude`	Latitude for the medical group	no
`longitude`	Longitude for the medical group	no

`"tenant"` section

Controls tenant-specific data for API requests

tenantCode: tenant identifier used in the request headers of Provider Search API requests

`"suggestAnEdit"` section

Controls destination and appearance of the Suggest an Edit link on the provider details page.

enabled: toggles the Suggest an Edit link on/off
linkScheme: provides a format to help link providers to an edit form. The component will attempt to replace {0} with the NPI of that provider

`"emergencyCare"` section

Controls the destination and appearance of the Emergency Care link found below the quicklinks section on the search landing page.

enabled: toggles the Emergency Care section on/off
linkScheme: the URL of the Emergency Care link

`"quickLinks"` section

Controls the terms and appearance of the quicklinks on the search landing page.

enabled: toggles the quicklinks section on/off
categories: string array of search terms

`"myProviders"` section

Controls the destination and appearance of the link to a user's saved providers.

enabled: toggles the saved providers section on/off
linkScheme: the URL to navigate to a user's saved providers

`"helplineNumbers"` section

Controls the contact numbers and appearance of regional helpline numbers.

Key Description Required

enabled Toggles the regional helplines section on/off yes

heading Heading section for regional helplines no

numbers Array of objects, with each object having a required heading and phone section no

Key	Description	Required
`enabled`	Toggles the regional helplines section on/off	yes
`heading`	Heading section for regional helplines	no
`numbers`	Array of objects, with each object having a required `heading` and `phone` section	no

`"landingPage"` section

landingPageHeader: large text that appears above the search boxes on the search landing page

`"errorLinks"` section

Array of objects that controls the helpful links that appear on the application error page. Each object has the following properties:

title: link text
url: link destination

`"videoVisitsBanner"` section

Controls whether the blue CTA banner appears on the search results page to indicate that a user can refine their search based on providers who offer video visits.

enabled: toggles the CTA on/off

`"guidedFlowButton"` section

Controls whether the Schedule an Appointment button launches the guided appointment booking flow or not.

enabled: toggles the behavior of the button. true will enable the guided appointment booking experience

`"filters"` section

Controls the appearance of filters on the search results page. Each object corresponds to the filter it controls, and has one property:

enabled: toggles the given filter on/off

Theme

This section of the JSON controls color schemes and fonts for the application.

`"fonts"` section

Here you can define your own custom font to be used throughout the page.

Key Description Required

fontFamily Name of the custom font you are providing yes

fontUrl URL of the font binary file yes

fontType Format of the font you are providing yes

Key	Description	Required
`fontFamily`	Name of the custom font you are providing	yes
`fontUrl`	URL of the font binary file	yes
`fontType`	Format of the font you are providing	yes

`"colors"` section

Here you can define colors for the various components within the application.

**Under Development**

Customization Guide

JSON Configuration File

Interfaces

"search" section

"tenant" section

"suggestAnEdit" section

"emergencyCare" section

"quickLinks" section

"myProviders" section

"helplineNumbers" section

"landingPage" section

"errorLinks" section

"videoVisitsBanner" section

"guidedFlowButton" section

"filters" section