Custom Pages

With custom pages, you can embed a completely self-hosted page in the EMR. The page can be viewed either in the general navigation tab or in the patient chart. You can optionally require authentication for each custom page.

Steps

Step 1: Create a custom page

To create a custom page:

• Go to the EMR (e.g. emr.avonhealth.com)

• Click on the hamburger menu on the top left corner > Settings > Custom Pages

• Click "Create a custom page"

• Set:

  • Name: Name of custom page
  • Description: Description of custom page
  • Location: Whether you want to display the custom page in the patient chart (viewable when you go to Patient > click on a patient's chart) or in the general navigation bar (viewable when you click the hamburger menu)
  • Requires Authentication: Whether or not you want to authenticate the user before they view the page. If you are displaying any patient data, should require authentication of some form.
  • Authentication URL, Client ID, and Client Secret: If the page requires authentication, you will need to fill out these sections. Check Step #2 to view more details.
  • Link: The link to the custom page that you want to display. For pages viewed in the patient's chart, we will automatically append the parameter &id={{patient_id}} to the end of the link so that you know what patient's information to display.
  • Icon: The svg icon you want to display next to the custom page name.

Step 2: Set up authentication (optional)

If you have selected "requires authentication to view", you need to create an endpoint at the authentication URL that you provided.

We will send the following POST request to your authentication url. We will create a bearer token from the client id and secret you have provided us and send it in the headers. Lastly, we will also pass in the user_id of the user viewing the page:

const response = await axios.post({{AUTHENTICATION_URL}}, {
    user: {{USER_ID}},
}, {
    headers: {
        Authorization: `Bearer {{token}}`,
    }
});

If passed a valid client id, client secret, and user id, you need to return us a unique token for that user indicating that the user has been authenticated.

Expected Response (200):

{
    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
}

If the user is invalid or doesn't have permissions to view the custom page, return an unauthenticated error:

Expected Response (401):

{
  "error": "Unauthorized",
  "message": "Authentication required. Please provide a valid user id.",
  "code": 401
}

Add a token parameter to your custom page url (e.g. https://exampleurl.com?token={{token}}) so that we can pass in the user's authenticated token when the user is viewing the custom page. On your end, whenever anyone tries to view https://exampleurl.com, you should inspect the token parameter. If the token is valid, allow the user to view the page. If not, display a message that the user is not authenticated to view the page.

Step 3: View a custom page

To view a custom page:

• Naviate to the general navigation bar or the patient's chart depending on where you want to view the custom page
• Click on the custom page
• If the page doesn't require authentication, it will immediately render the page referenced by custom page url
• If the page does require authentication, it will first make an POST request to your authentication url to retrive the special token for the user and then it'll pass the token to the custom page url