In this tutorial we will create a simple design for the Doctor template from Part IV of this series. It should eventually contain a list of all patients of the doctor, but for now we will limit ourselves to one patient. The doctor can then click on a name, and the symptoms data for the patient (from the previous tutorials) will appear. He or she can then attempt to make a diagnosis, or pass the patient to another doctor. The list of patients should have a variable length, depending on how many patients the doctor has. We will handle this in later tutorials. First, we are going to make sure that we can display the symptoms form data on a template. Let’s do it!

Configuring the template

First, create a new template in the template hierarchy of the navigation bar template, like we have done many times in previous tutorials. Choose a fitting name and icon in the Template properties menu. Now we have something like this:

Add an authorization rule so only doctors can access this page:

Template authorization is covered in detail in Part IV of this series.

Obviously it’s impossible to make a new template for every single patient that fills in a symptoms form. If we make use of template parameters, we only need to make one template that can display any symptoms form. In the Template parameters tab, add the following parameters:

These correspond with the fields in our symptoms data-format (the images are left out for now). Their names don’t have to be the same as the JSON fields.

Next, add the following components to the template:

• A plane with a border to contain the symptoms information.
• A title with the text Patient {{Patient name}}’s symptoms. The double curly brackets with a parameter name in it instruct NoCode-X to display a given template parameter, in this case Patient name. How to pass these parameters to a template will be discussed later in this tutorial.
• 3 text blocks with their desired contents in double curly brackets, again using the template parameters.
• 3 titles describing what’s in each text block.

The result might look something like this:

The text blocks will stretch according the length of the text behind the parameters.

Passing template parameters through the URL

We will now demonstrate the first way to pass parameter values to a template. Click the preview button, and look at the page’s URL. It probably looks similar to this:

We can manually add parameter values by editing it. Add a question mark at the end of the URL, followed by the name of the parameter, followed by an equality sign, followed by the value you want to assign to the parameter. Multiple parameters are separated using ‘&’ (without the quotation marks). Here’s an example for the current template:

The three dots (…) below will obviously be your applications domain name. Certainly don’t be afraid to use spaces for the parameters; Your browser will automatically replace them, after pressing enter, with the correct URL character for spaces:

The parameter values will now be passed to the template. Let’s check in preview:

It worked! Obviously this approach is useless for our current application, but it can be useful during the development stages of your applications for quick tests.

Passing template parameters through actions

Now let’s explore a way that is feasible for our current application to pass parameter values to a template: with actions! Roughly speaking, this will be our approach:

1. Add buttons that each represent a patient on the Doctor page (this is a different page from the symptoms page). We will design the list of buttons in a later tutorial. Right now we only place one button on the template, representing one patient.
2. Assign a new action to these buttons. It takes in the name of the patient (which corresponds with the name of the data item that contains their symptoms), requests the data item and finally routes the doctor to the symptoms page with the correct parameters provided.
3. When the doctor presses the button, the action will execute and the doctor ends up on the right page.

This is the simplified design for our doctor page:

Click the button component and add a new action to it in the Actions tab:

Add the following function calls and name the action appropriately:

Configure the Get data function call to fetch the data of our example patient John Johnson, and choose a fitting variable name for the resulting data. In later tutorials we will make the patient’s name variable, so we can reuse this action for every button on the doctor page.

Select the correct template and the fields from our new data in the Arguments tab of the Route to page function call. They must be selected from the scope:

Done! Start a preview for the Doctor template and see whether the button leads to the correct page, with the correct text displayed.

Up next

In the next tutorial, we will update the Doctor template so the buttons displayed depend on a list of all pages who have submitted their symptoms.