Customization Guide

Different UI views

`"attributes"` section

Required attributes to display widget in All appointment list view.

configuration-url: used to specify the location for a json file with custom configuration for endpoints, color … .
base-url: used to specify the root location for the widget.

JSON Configuration File

{
  "interfaces": {},
  "endpoints": {
    "userProfile": "users/me",
    "providers": "v2/Providers",
    "userLocation": "v1/location",
    "providerSearch": "v2/providers",
    "users": "v2/users/me",
    "usersV1": "v1/users/me",
    "appointments": "v1/appointments"
  },
  "theme": {
    "fonts": {
      "fontFamily": "CustomFont",
      "fontUrl": "/assets/fonts/TradeGothicNextLTPro-Rg.ttf",
      "fontType": "truetype"
    },
    "colors": {
      "locationPinColor": "#ed711c",
      "locationPinOutline": "#c85200",
      "locationPinLabel": "#fff",
      "badgeValidColor": "#c85200",
      "badgeInvalidColor": "#4d525a",
      "actionContent": "#0079d0",
      "videoBadgeBackground": "#e6f5ff",
      "actionHoverstate": "#005591",
      "videoBadgeContent": "#0061a7",
      "contentBackground": "#fff",
      "bodyContent": "#4d525a",
      "footerBackground": "#f4f4f4",
      "activeProviderOffice": "#e3e1dc",
      "inactiveProviderOffice": "#0079d0",
      "calendarDateDisabled": "#b0a9a1",
      "toolTipBackground": "#fff",
      "toolTipColor": "#666",
      "toolTipBoxShadow": "#ccc",
      "loadingCircleColor": "#ed711c",
      "scheduleAppointmentBoxShadow": "#e7e7e7",
      "callIcon": "#575C65",
      "appointmentInfoTooltip": "#0079d0",
      "dateColorInactive": "#4d525a80",
      "dateColorActive": "#4d525a",
      "whiteColor": "#ffffff",
      "providerSearchIcon": "#ed711c",
      "locationSearchIcon": "#ed711c",
      "dividerColor": "#e3e1dc"
    }
  },
  "morelessPagination": {
    "pageLimitSection": 5
  },
  "ProviderCardParam": {
    "radius": 10,
    "searchTerm": "",
    "heading": "Find Providers near you",
    "subHeading": "This list has been handpicked just for you. You may also search our networks by checking for button below.",
    "numberOfItems": 20
  },
  "bookingBaseUrl": "https://slot2.dev.dignityhealth.org",
  "fadSaasAppFile": "fad-saas.js",
  "fadSaasAppConfig": "example-application/fad-configuration.json",
  "fadSaasRuntimeConfig": "runtime.config.json"
}

Interfaces

Endpoints

Controls endpoints for different services.

userProfile: used to pass the endpoint to users controller containing get actions, default 'api/users/me'
providers: used to pass the endpoint to providerapi controller containing get actions, default 'v2/providers'
userLocation: used to pass the endpoint to users controller containing get actions, default 'v1/location'
usersV1: used to pass the endpoint to users controller containing to remove preferred provider, default 'v1/users/me'
users: used to pass the endpoint to users controller containing to select the preferred provider, default 'v2/users/me'

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