Photon Elements

Add prescribing flows to your app with Photon Elements

🚧

Heads up!

This is a new and actively developing product, so the content below is subject to change. If you're interested in getting access to Photon Elements, contact us at [email protected]

Photon Elements are a set of prebuilt UI-components that can be used to add prescribing workflows into clinical tools. Elements are built using WebComponent technology and can be used in any frontend app - regardless of framework.

Elements support:

  • Automatic input validation as users type
  • Responsive design to fit seamlessly on any screen size
  • Custom styling rules so you can match the look and feel of your site
  • Management of user permissions, notably validating authorized prescribers

Get Started

First, add the following within head tag:

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

You can also use import("@photonhealth/webcomponents") if using a framework like React.

Next, add a top level photon-client tag to your application. All Elements must be contained within this tag. The id is a public identifier unique to an application registered with Photon (with whitelisted URLs). The org property 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.

<photon-client
  id="CLIENT_ID"
  org="ORGANIZATION_ID"
>
  <photon-prescribe-form />
</photon-client>
12901290

The code to the left will render a view like this

If you want to test, you can pass the dev flag in when creating the client. You’ll want to be sure you're using the client id and organization id from the sandbox settings page

Form Elements

Some elements provide whole workflows, allowing you to quickly implement features such as prescribing and ordering.

Photon Prescribe Form

<photon-client ... >
  <photon-prescribe-form />
</photon-client>

The Prescribe Form allows doctors to prescribe treatments to patients, and includes all necessary inputs to create a prescription. It has a number of optional parameters to facilitate more streamlined flows, saving time by not requiring the doctor to select specific information

patient - The id of the patient being prescribed to

treatment - The id of the treatment being prescribed

Photon Order Form

<photon-client ... >
  <photon-order-form />
</photon-client>

The Order Form allows users to create orders for patients, giving them the ability to select a patient, prescriptions and a pharmacy. It has a number of optional parameters to facilitate:

patient - The id of the patient the order is being created for

prescriptions - The id of the prescriptions being ordered

pharmacy - The id of the pharmacy being prescribed to

📘

The order creation flow can also be automated by your backend, check out our integration guide for more details.

Individual Elements

The Photon Workflow Elements are built using smaller, more specific elements that can be used individually to have more fine grained control over design of the page and workflow of the user.

Patient Select

The Patient Select element can be used to select a patient.

Treatment Select

The Treatment Select element can be used to select a specific treatment.

Integrating with Frameworks

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

import("@photonhealth/webcomponents").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-form 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-form (photon-prescribe-success)="log()"></photon-prescribe>
    </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-form v-on:photon-prescribe-success="log()" />
    </photon-client>
  </div>
</template>