In the previous tutorials of this series we have created the basis for our medical platform: a navigation bar, a way for users to register and login and different account types (patients, doctors and admins).

In this tutorial we will create a secure form, allowing patients to report their symptoms. The information will then be stored as data.

Designing the form

We start by designing the symptom reporting form. It is very similar to the forms we designed in Part I and Part II of this series. Create a new template based on the navigation bar (see Part I), then add the following components:

• Titles, to explain what the user needs to enter in the input fields.
• A large text field, so the user can describe their symptoms in detail.
• An input field for the duration the patient has been suffering from the symptoms.
• A selection box, where the user has to indicate whether they have already consulted with a doctor regarding these symptoms.
• A file uploader, so the patient can add images. Make sure to configure this component to only accept image file types. This is shown in the first image below.
• A submit button.

Refer to the All components page for more details about each component. The second image below shows the final result.

Making a data-format for our form

Before we make our form functional using actions, we must think about how we want to store the form’s data. In Part I, this wasn’t an issue because we could just use the Create user function and NoCode-X would handle the user data. This is no longer the case. We must create a JSON data-format, and then create data using certain function calls. For detailed information, we refer to the data section of the documentation.

Each data item, corresponding with a submitted symptoms form, needs to have the following fields:

• The name of the patient
• The description of the symptoms
• The duration of the symptoms
• Whether or not they have visited a doctor regarding these symptoms
• Optionally some images

This can be translated into the following JSON-schema, also known as a data-format in NoCode-X:

Notes:

• Duration is currently a string. You could also replace it by a date (the date when the symptoms started) or a number (for example representing the amount of days the patient has had the symptoms). This could make it easier to sort the data.
• Images is an array of strings. The strings represent the name of each image file.
• Images are not required, so we do not add the images field to to the required list.

Let’s place this JSON schema into NoCode-X through the following steps:

1. Go to the Data-formats tab in the menu on the left.
2. Press the New button.
3. Edit the General information for the data-format. An example is shown in the first image below.
4. Go to the Format tab and copy the data-format into the black code editor. The result can be seen in the second image below.
5. You can optionally add actions when operations are performed involving this data-format, in the Actions tab. We will not be needing this in this tutorial.
6. Click Save. Done!

Reading and storing the form data

Our data-format has been created, so now we can implement the functionality of the form. Go back to the symptoms form template we made in the beginning of this tutorial. Click the Submit button component and go to the Actions tab in the component’s menu:

Press the plus button to create a new action, and add the necessary function calls as shown in the image below:

We will handle the images in the next tutorial. The order of the first four function calls (after Start) does not matter. For each of them, select the correct form component from the scope in the Arguments tab, and choose a fitting variable name in the Result tab:

Now create the necessary fields in the Arguments tab of the Create JSON function call:

Choose the corresponding variables from the scope for each field:

Don’t forget to enter a variable name in the Result tab.

Finally, configure the arguments of the Create data function call. Select the data-format from earlier in this tutorial, choose a name for the data (here we have chosen the current user ID, to guarantee a unique data item name per user). Finally select the JSON file we just created in the Body field.

It is recommended to add a Route to page function call at the end of the action we just created, otherwise the patient may think something went wrong.

Done! Try to fill in the form in the template preview:

Finally, check whether a new data item appears in the Data section.

You may have noticed that we haven’t done anything with the image uploader yet. This will be handled in the next tutorial!