Home

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

"colors" section

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

MoreLessPagination

Controls pagination on my care team listing.

• pageLimitSection: used to specify the number of providers to display when no filter is applied.

bookingBaseUrl

Controls routing for appointment booking.

• bookingBaseUrl: used for navigate to appointments booking page.

isCaptchaEnabled

Configuration to enable Captcha in schedule an appointment.

• isCaptchaEnabled: used to enable/disable capture in schedule an appointment.

ProviderCardParam

Controls for fad-saas provider-card components settings.

• ProviderCardParam: configurable setting for provider card widget.

apiEndpointTimeout

Defines the configuration for the end point request's turn around time. By default it was defined as 45000 (45 secs), it can be increased or descreased based on business requirements.

supportContactDefaults

Configs used to make configurable exception messages and the contact info

• heading: used to specify heading for friendly exception messages.
• chatUrl: used to specify chatUrl for friendly exception messages.
• contactNumber: used to specify contactNumber for friendly exception messages.

enableSkeletonInDashboard

Configs used to enable skeleton view's for the widget in dashboard

• enableSkeletonInDashboard: used to turn on skeleton view for my care team widget on dashboard.

**Under Development**