Home

Developer Guide

Full Application

You can find a working version of the full application here.

To get started with using the FAD SAAS application on your HTML page, you will need three 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 SAAS application to appear
3. A path where the application will live relative to the site root. For example, if you are hosting the app at https://www.example.com/search/doctors, the path you will need would be /search/doctors.

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

<fad-saas configuration-url="/site-assets/fad-configuration.json" base-url="/search/doctors"></fad-saas>
<script type="text/javascript" src="https://fad.dignityhealth.org/fad-saas.js"></script>

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.

For information about the contents of the configuration JSON, please see the documentation in our Customization Guide.

Routing

Since the full application involves routing to providers and search results, you will likely have concerns about refreshing pages but not losing your place. The solution to this problem is to add a rewrite rule to your server:

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/search/doctors" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

Notice the <action /> node has its url attribute set to the same value as base-url in the fad-saas custom html element. This way, both deeplinking to the application and page refreshes will result in the expected display.

Provider Details Component

You can find a working version of the provider details component here.

Provider Details

To get started with using the Provider Details component on your HTML page, you will need three items:

1. A script tag with a link to the JavaScript file
2. A custom element on your HTML page where you want the Provider Details to appear
3. A valid NPI for the provider you want to display

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

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

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 provider details component. They are added as attributes on the custom element that you included in the browser, and are not required for the component to function.

With all the options added, your code snippet should look like this:

<fad-provider-details npi="1234567890" configuration-url="/path/to/configuration.json" referring-url="/search-results"></fad-provider-details>
<script type="text/javascript" src="https://fad.dignityhealth.org/fad-saas.js"></script>