---
description: >-
  This article outlines the basic steps to start designing form in Aidbox Code
  Editor in browser
hidden: true
---

# Aidbox Code Editor (/Deprecated)

## Overview

{% hint style="warning" %}
We strongly recommend using our UI Form Builder based on FHIR SDC (Structured Data Capture), which we are continuously developing. The current solution will remain supported but will not receive further development at this time.
{% endhint %}

This tool is based on domain-specific language (DSL) which gives flexibility and composability, with which you can describe layer-by-layer any forms with complex logic, integrate them in your current solution to capture data and store it in FHIR storage.

We have presented the form as a layered structure. To design the form, you need to describe the necessary layers using DSL.

<figure><img src="../../../.gitbook/assets/8590de2b-148a-48ef-a986-5400aa020e5f.png" alt="Layered form architecture diagram showing different DSL layers"><figcaption></figcaption></figure>

**Each** **layer** is responsible for solving a **specific problem**:

* How structured data will be stored - **Data Model layer** (Document DSL)
* How a form will be rendered - **Layout layer** (Layout DSL)
* How to prefill a form with existing data and set the conext - **Prefill layer** (Launch DSL)
* How data will be itemized & extracted to FHIR resources - **FHIR mapping layer** (Finalize DSL)
* How data will be validated and how to put constraints on the fields - **Validation layer** (FinalizeConstrains DSL)
* How to bind all layers for specific form - **Form layer** (Form DSL)

One layer is required - **Data Model** layer, the rest are optional depending on needs of your practice.

## Getting started

* Open [http://localhost:8080/ ](http://localhost:8080/), using login / passwod - admin / admin
* Go to forms by pressing the button `Aidbox Forms` (or by visiting [http://localhost:8080/ui/sdc](http://localhost:8080/ui/sdc) )
* Go to the `Forms` page
* Press on `Create Template` button

You have two options available:

* [Create form in Code Editor (from scratch)](./#create-form-in-code-editor-from-scratch)
* [Import Questionnaire (from FHIR Questionnaire)](./#import-questionnaire-from-fhir-questionnaire)

## Create form in Code Editor from scratch

* Before creating new form you need to give a form title and namespace
* After that new form template will be generated and you will be redirected to the `Aidbox editor` page
* You need to describe some schemas to complete the form

Form DSL

Document DSL

Layout DSL

Launch DSL

Finalize DSL

FinalizeConstrains DSL

{% hint style="info" %}
Created form will be saved to local file sysem in your repository
{% endhint %}

{% hint style="warning" %}
Don't forget to import the created form into the forms.edn file so that the form is loaded after restarting the program.
{% endhint %}

Example

```
{ns forms
 import #{forms.vitals
          forms.phq2phq9
          forms.gad-7
          forms.allergies
          forms.ros
          forms.physical-exam
          forms.annual-wellness-visit}
 }
```

## Import Questionnaire (from FHIR Questionnaire)

* You can import the FHIR Questionnaire file from your local computer or import from json
* After that new form will be generated and you will be redirected to the `Aidbox editor` page
* You can customize the form and all changes will be saved to the local file system in you repository

{% hint style="info" %}
While converting FHIR Questionnaire to the Aidbox form basic extractions will be generated by default
{% endhint %}

{% hint style="warning" %}
Don't forget to import the created form into the forms.edn file so that the form is loaded after restarting the program.
{% endhint %}