Skip to main content

Tips & Tricks

Welcome to the Tips and Tricks section! Here you will find a collection of helpful hints and best practices to help you get the most out of your experience with our product. Whether you're a seasoned user or just starting out, the tips and tricks in this section are designed to make your life easier and help you achieve your goals more efficiently. From shortcuts and hidden features to advanced techniques and creative solutions, these resources are here to help you unlock the full potential of our product.

Our team has curated these tips and tricks based on common user questions and feedback, so you can trust that the information here is relevant and practical. So whether you're looking to streamline your workflow, troubleshoot a problem, or just learn something new, we've got you covered.

So dive in, explore, and discover all the ways you can make the most of our product. And if you have any questions or suggestions for additional tips and tricks, don't hesitate to reach out to our support team. Happy learning!

Put fields on the canvas by double-clicking or dragging and dropping

When you create a new form, you can simply start by adding fields to the canvas and play around with the design to get familiar with the basics. In video below, you can see an example of adding fields, dragging them around to change the layout, changing the position of the fields label and changing size of the fields.

Icons on fields

Fields can have several different icons on them. You can click the icons, and the form builder will take you to the source. For example, if the 'select' field has a warning icon, clicking it will take you to the right panel, where you can add options for the select field simply by entering a value and pressing enter on your keyboard.

The same applies for all other icons on the fields:

  • dependency icon will take you to the bottom panel, where you can add and edit dependencies,
  • script icon will take you to the script panel,
  • error icon will show details when you hover over it...

Adding fields to dependencies with the field picker

When you are creating a dependency, you can add the field to it by using field picker functionality - simply click on the field. This also works within expression assistant.

Expression assistant

Expression assistant is a very powerful tool - you can use it to format text, add calculations and date functions. By clicking on a function, you open a dropdown that shows correct syntax and short explanation of the function.

You can find the expression assistant in most fields where you can configure the value as an expression, this includes setting values in fields via dependencies, API configuration, variable value configuration, default values on fields, widget configurations, list bindings, etc..

It is a good idea to make use of this whenever you need help setting a value that would include some sort of function, most commonly using CONCAT to bind text together, or using CALC and ROUND for numeric field calculation, you can even format dates with it with FORMAT_DATE, and more, give it a try next time you need to configure a value!

Using tags to manipulate multiple fields at once in dependencies

There are numerous use cases where it's necessary to perform an action on a multiple fields at once based on a specific condition. Despite having a field picker, this task can be quite tedious, especially if there are numerous fields involved. Fortunately, you can simplify this process by assigning a tag to all the fields that should be affected by action at once and then use this tag in dependencies to apply it to them.

Tags can easily be added in the property panel, found in the Content tab under the Tags section. This will significantly simplify the entire process, making it much easier to manage.

Here is a video showing how to add tags to the fields:

And how to use the tags in dependencies:

Using mustache notation in Rich text/HTML

Users can dynamically create content by writing it as a template with a so-called moustache notation, using a specific syntax which will render based on variables values. You can use it on rich text and HTML fields. This syntax uses tags. Tag is indicated by the opening delimiter {{ and the closing delimiter }}. Content between the {{ }} delimiters may or may not contain a tag symbol at the beginning following by a tag key that represents a variable name. For example, {{#person}} is a tag with a tag symbol # and a tag key person. There are several types of tags available.

Example of using moustache notation with APIs:

Buttons

Using button to navigate through pages

One of the common uses of buttons is to use them for navigation through multipage forms. You can use it in a dependency on any field and action, but in this example we will show you how to use them on a button click event.

Using button to save a composition

Another common use of buttons is to use them to save a composition. In the example below see how to save a composition inside the form using a button and dependencies.

Labels on forms that were copied from different project

When you copy a form to another project, the labels on the form will be light gray. If you want to add that label to the project, simply click on it.

Using 'CONCAT' to combine text

The best practice when you need to combine text, for example from different sources, is to use the CONCAT function from the expression assistant. The CONCAT function can accept any number of arguments separated by a comma. See example below on how to use it in the expression assistant when combining different sources:

Using 'debounce' to optimize listeners on form elements and variables

A Listener sets up a function that will be called whenever the specified event is delivered to the form element, or triggered on a specified variable. Listeners can be added using the ScriptApi functions addListener and addVariableListener. it is a good practice to use debounce to optimize listeners.

Debounce limits the rate at which a function will be executed by specifying the amount of time in milliseconds that the listener should wait before processing a new event. This is useful for events that are triggered rapidly one after another, such as key presses. The example below shows the difference between using debounce and not using it. Without using debounce, the API is called on each key press, while with debounce, the API is called only after the user stops typing for 400ms, which makes the API calls more efficient.

Using form version numbers to convey the significance of changes

You can use version number sequences to convey the significance of changes between versions, and the decision of which sequence to change between releases is based on the significance of the changes from the previous release, whereby the first sequence is changed for the most significant changes, and changes to sequences after the first represent changes of decreasing significance.

Form version is defined by a three-part version number (Major.Minor.Patch). Risk and functionality are the measures of significance:

  • New, breaking changes are indicated by increasing the major number (high risk or major functionality change)
  • New, non-breaking features increment the minor number (medium risk or medium functionality change)
  • All other non-breaking changes increment the patch number (lowest risk or low functionality change)

These are only guidelines on how you can use version numbers within your team or your development process. Teams or project managers can decide the criteria by which to increase those numbers, and adapt it to better fit their processes.

For example, a project manager can set the guidelines as follows:

  • For any trivial bug fixes on forms that will not affect the overall functionality of the form, increase the Patch part of the version.
  • When you add new functionalities to the form without breaking any existing functionalities, increase the Minor part of the version.
  • If you receive new guidelines from the client that require major changes to the form, increase the Major part of the version.
  • You can jump multiple minor versions at a time to indicate that significant features have been added, but are not enough to warrant incrementing a major version number

Version numbers are unique and must be changed when saving a form. Ehr Studio automatically suggests a new version number by incrementing the Patch part of the version. The default initial version number that Ehr Studio suggests for you is 1.0.0. You can freely change any parts of the version number to reflect the changes you have made.

Creating terminology API connectors (Terminology Adapters)

Medical terminology refers to the words and language used specifically in the medical and health fields. It is important to use the correct terminology when communicating with other medical professionals and patients. The terminology adapter is an API connector that allows you to retrieve terminology from a terminology server and use it in your form.

Each project in your EHR Studio contains an external variable called terminologyUrl. This variable is used to define the URL of the terminology server, for example https://portal-demo.better.care/terminology-adapter/rest/terminology/codesystem/{codeSystem}/entities. Notice how the url contains a placeholder {codeSystem}. This placeholder is used to define the code system that you want to retrieve from the terminology server.

To create a terminology adapter, follow the instructions in the video below:

Summary of the steps shown in the video:

Create a terminology adapter

  • set the url of the terminology server in the terminologyUrl variable
  • create a new API connector and name it Terminology adapter
  • set the Base URL to the terminologyUrl variable
  • add an API call and name it get terminology
  • set the test value to any value that you know will return a terminology from the terminology server. For example Allergens
  • start the test call. Test call will retrieve the terminology from the terminology server and display it in the response body. This enables the API to learn the structure of the terminology and create a schema for it
  • save the API connector

Use the terminology adapter

  • add a generic Select input field to the form
  • set its data source to the Terminology adapter - get terminology API connector call
  • choose a code system from the list of terminology code systems. EHR studio automatically detects that you are using a terminology adapter, and will retrieve a list of all available terminologies