Elements

Photon Elements are a set of prebuilt UI-components that can be used to add prescribing functionality into any web-based clinical tool.

Elements are built using WebComponent technology and can be used in any frontend app - regardless of framework. Elements do not use outdated iframe technology!

Elements automatically handle authentication and ensure that only authorized prescribers can send prescriptions. The UI is designed to be responsive across various screen sizes and can be easily styled.

1708

This UI can be embedded directly in your clinical app.

<photon-client 
  id="YOUR_CLIENT_ID"
  org="YOUR_ORG_ID"
>
  <photon-prescribe-workflow/>
</photon-client>

Get Started

First install our elements package from NPM:

npm i @photonhealth/elements

If using a framework like React, you'll need to dynamically import the package. This will register the custom elements with the browser's CustomElementRegistry.

import("@photonhealth/elements")

You can also import within head tag in HTML:

<script src="https://cdn.rx.dev/elements/@latest/dist/index.js" type="module"></script>

Client Element

Next, add the photon-client element toward the top level of your application.

id - a public identifier registered to your application (with whitelisted URLs)
org - identifies which organization to use for authentication

These values can be found in the settings page of the Photon App, or in the Sandbox App.

All photon- elements must be contained within the photon-client to function correctly.

In non-prod environments, you can pass the dev-mode="true" flag to photon-client. Be sure you're using the client id and organization id from the sandbox environment too.

Prescribe Element

The photon-prescribe-workflow can be added anywhere within the photon-client and renders a basic prescribe workflow. It accepts the following props:

PropertyDescription
patient-idID of the patient receiving the prescription
template-idsTemplates that should be pre-selected
enable-orderEnables the selection of a pharmacy
pharmacy-idSet a preselected pharmacy (enable-order set to true is a prerequisite for this to take effect)

Here's an example of a Photon Element that enables orders to a preselected pharmacy.

<photon-prescribe-workflow
  patient-id="pat_9876zyxw"
  enable-order="true"
  pharmacy-id="phr_1234abcd"
/>

Events

Event payloads will be on detail.

document.addEventListener('photon-order-created', (e) => {
  console.log('Order Info: ', e.detail.order);
});
Event NameDescriptionDetail
photon-prescriptions-createdFired after prescriptions have been successfully created.{ prescriptions: Prescription[] }
photon-order-createdIf the enable-order flag is set and the prescriber selects to "Send Order", this will be fired after successfully creating the prescription and order.{ order: Order }
photon-prescriptions-errorFired upon errors creating prescriptions.{ errors: GraphQLError[] }
photon-order-errorFired upon errors creating the order.{ errors: GraphQLError[] }

Framework Support

Below you'll find example integrations for React, Angular, and Vue.

import("@photonhealth/elements").catch(() => {});
import { createRef, useEffect, useState } from "react";

function App() {
  const photonPrescribeRef = createRef();

  useEffect(() => {
    const log = () => {
      console.log("treatment prescribed!");
    }
    if (photonPrescribeRef.current) {
      photonPrescribeRef.current.addEventListener("photon-prescribe-success", log);
      const removal = () => photonPrescribeRef.current.removeEventListener("photon-prescribe-success", log);
      return () => removal()
    }
  }, [])

  return (
    <div>
      <photon-client
        id="CLIENT_ID"
        org="ORGANIZATION_ID"
      >
         <photon-prescribe-workflow ref={photonPrescribeRef} />
      </photon-client>
    </div>
  );
}

export default App;
import { Component } from '@angular/core';
import('@photonhealth/webcomponents').catch(() => {});

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';

  public log() {
    console.log("treatment prescribed!");
  }
}

...

<div>
  <photon-client
      id="CLIENT_ID"
      org="ORGANIZATION_ID"
    >
      <photon-prescribe-workflow (photon-prescribe-success)="log()"></photon-prescribe-workflow>
    </photon-client>
</div>
<script setup lang="ts">
import("@photonhealth/webcomponents").catch((err) => {});

const log = () => {
  console.log("treatment prescribed!");
}
</script>

<template>
  <div>
    <photon-client
      id="CLIENT_ID"
      org="ORGANIZATION_ID"
    >
      <photon-prescribe-workflow v-on:photon-prescribe-success="log()" />
    </photon-client>
  </div>
</template>