Portal Search Workflow

Overview

The OneRecord Portal Search Workflow allows a user to search for patient portals with OneRecord API Directory Services v0.1.x.

Usage

To understand how to use this web component, let's first look at integrating a Workflow into a project that does not make use of a frontend framework:

Vanilla JS

// arbitraryJavaScriptFile.js
import '@onerecord/workflows/dist/OneRecordPortalSearchWorkflowModal';

const OneRecordPortalSearchWorkflow = document.querySelector('onerecord-portal-search-workflow-modal')

// We need to set "properties" via JavaScript
// Set required getAuthorizationHeaderValue callback
OneRecordPortalSearchWorkflow.getAuthorizationHeaderValue = () => YOUR_AUTHORIZATION_HEADER_VALUE

// Set optional onSuccess callback
OneRecordPortalSearchWorkflow.onSuccess = (data) => console.log('onSuccess: ', data)

// See "Available Attributes & Properties" for the full list of available properties.
<!-- arbitraryHTMLFile.html -->
<!-- We can set "attributes" directly in the HTML -->
<!-- See "Available Attributes &amp; Properties" for the full list of available attributes. -->
<onerecord-portal-search-workflow-modal
	api-origin="yourapi.com"
	google-maps-api-key="123ABC"
	return-url="https://yourwebsite.com">
</onerecord-portal-search-workflow-modal>

React

const OneRecordPortalSearchWorkflow = () => {
	const element = useRef(null)

  useEffect(() => {
    if (elementRef.current) {
      elementRef.current.getAuthorizationHeaderValue = () => YOUR_AUTHORIZATION_HEADER_VALUE
    }
  }, [elementRef.current])

	useEffect(() => {
		element.current.onSuccess = () => console.log('onSuccess: ', data)
	}, [element])

	return (
		<onerecord-portal-search-workflow-modal 
			api-origin="yourapi.com"
			google-maps-api-key="123ABC"
			ref={element}
			return-url="https://yourwebsite.com">
		</onerecord-portal-search-workflow-modal>
	)
}

SolidJS

const getAuthorizationHeaderValue = () => YOUR_AUTHORIZATION_HEADER_VALUE;

const OneRecordPortalSearchWorkflow = () => {
	const onSuccess = (data) => console.log('onSuccess', data);

	return (
		<onerecord-portal-search-workflow-modal 
			attr:api-origin="yourapi.com"
			attr:google-maps-api-key="123ABC"
			attr:return-url="https://yourwebsite.com"
			prop:getAuthorizationHeaderValue={() => getAuthorizationHeaderValue()}
			prop:onSuccess={() => onSuccess()}>
		</onerecord-portal-search-workflow-modal>
	)
}

Vue

<template>
  <onerecord-portal-search-workflow
    :api-origin.attribute="apiOrigin"
    :getAuthorizationHeaderValue.prop="getAuthorizationHeaderValue"
    :google-maps-api-key.attribute="googleMapsApiKey"
    return-url="https://yourwebsite.com">
  </onerecord-portal-search-workflow>
</template>

<script lang="ts">
  import '@onerecord/workflows/dist/OneRecordPortalSearchWorkflow';

  const getAuthorizationHeaderValue = () => import.meta.env.PUBLIC_AUTHENTICATION_HEADER_VALUE;

  export default {
    data: () => ({
      apiOrigin: "yourapi.com",
      getAuthorizationHeaderValue,
      googleMapsApiKey: "123ABC",
    }),
  }
</script>

Available Attributes & Properties

Note that the "Required" attributes and properties are necessary for the Workflow to do anything. The Workflow will be visible without them set, but it will remain in a loading state until it times out and switches to a failure state.

Please view the integration examples above to understand how your framework of choice integrates with web components. Note that web components are a web standard so Workflows will work with any framework, even if not detailed in the integration examples.

Attributes

NameRequiredDescription
api-originOneRecord API origin. Limited to same-origin requests.
google-maps-api-keyGoogle Maps API key. Request an API key.
return-urlURL returned to after a user attempts to connect to a patient portal.

Properties

NameRequiredDefaultDescription
getAuthorizationHeaderValue() => ""A function that returns the appropriate Authorization header value for your authentication system
onCancel() => {}When a user abandons/exits the session.
onMount() => {}When the workflow initializes.
onCleanup() => {}When the workflow terminates.
onFailure(response) => {}When a user search does not return patient portals. Returns the response.
onSelection(organization) => {}When a user selects a patient portal. Returns an organization.
onSuccess(organizations) => {}When a user search returns patient portals. Returns an array of organization(s).

References

Organization type

{
  name: "string",
  city: "string",
  state: "string",
  zip: "string",
  vendor: "string",
  endpointStatus: "string",
  disposition: "string",
  dataType: "string",
  derivedAuthUri: "string",
  latitude: "number|string",
  longitude: "number|string",
  location: {
    latitude: "number|string",
    longitude: "number|string",
  },
  _id: "string",
  parent_org: "string",
}