This tutorial walks through how to use JavaScript to add any HTML elements – including form elements – directly into a page in your prototype. 

It is an alternative way of creating interface elements  like radio buttons or checkboxes in Atomic, without having to import or natively draw them. This method directly injects HTML into the DOM using JavaScript, but you don’t need to be an engineer to follow this tutorial! 

Using this method, you can add a placeholder element on the canvas in Atomic, which will be replaced with any HTML you define through JavaScript (e.g. buttons, built in functionality, text labels etc) at runtime, when the prototype is previewed.

Here is a sample that demonstrates it in action: https://app.atomic.io/d/MoSPoGiRSROC

There are four examples in this tutorial:

  • Slider
  • Radio buttons
  • Checkboxes
  • Date picker

Currently, this is the best way to display a slider that needs to be adjustable to multiple levels. 

If you’d prefer to build radio buttons using drawn elements, check out our tutorial on adding radio buttons

If you’d prefer to build checkboxes using drawn elements, check out our tutorial on adding checkboxes

The principle in this tutorial can also be used to create date pickers, colour pickers, and even search fields. Open the sample to see these in action, or explore the other attribute values available.
 

Range slider HTML element

Step 1: Add a Text Input element to the canvas

Select the Text Input tool or press 'F'. Place the text input wherever you’d like the slider to be on the canvas. The text input acts as a placeholder for the slider. 

Change the insert to ‘0’. 

Step 2: Add JavaScript to be triggered when the page is displayed

Add an action to the current page of type “After a set time”. Set the wait time to be 1ms, the action to be “Script expression” then add the following JavaScript code:

const rangeInput = document.getElementsByClassName('node-ID-goes-here')[0];
rangeInput.type = 'range';
rangeInput.max = 100;
rangeInput.min =  10;
rangeInput.step = 5;

Step 3: Copy the node ID 

Click to select the element you just added. In the properties panel to the right, under the Custom CSS section select and copy the node ID. 

Paste this into the code, replacing the text that says ‘node-ID-goes-here’. 

Step 4 (optional): Apply styling 

Adjust the styling of the text input to change the slide track. For example, edit the fill and radius to give the slide track the colour you prefer and rounded corners.  

You can adjust the max, min and step values to match the behavior you desire. You could also set the default value for the slider by adding rangeInput.value in the code to specify where you would like the slider to start.

Tip: to give the slider a smooth feel, reduce the step value (e.g. to '1') or increase the max value (e.g. to ‘1000’). 

You can not currently adjust the styling of pin head of the slider. 

Step 5 (optional): Connect a variable to the slider result

If you’d like to use the result of the slider elsewhere in the prototype, then you can connect it to a variable. 

From the toolbar on the left, select “Manage Project Variables” (or use the keyboard shortcut: V). 

Add a variable and name it range.

Now connect the text input element with the variable by selecting the text input, then opening the Content dropdown and select the ‘range’ variable. 

Read more about using variables in your prototype.

Step 6: Preview

Use the keyboard shortcut Command + Enter, or select ‘Preview’.
  

Radio button HTML elements

Step 1: Add an element to the canvas

Add a rectangle to the canvas wherever you’d like the buttons to be displayed. This acts as a placeholder for the buttons and their titles. 

Step 2: Add JavaScript to be triggered when the page is displayed

Add an action to the current page of type “After a set time”. Set the wait time to be 1ms, the action to be “Script expression” then add the following JavaScript code:

const radios = document.getElementsByClassName("node-ID-goes-here")[0];
radios.innerHTML = '<input type="radio" name="group1" id="r1" value="current" CHECKED><label for="r1">&nbsp; Current section only</label><br/><input type="radio" name="group1" id="r2" value="all"><label for="r2">&nbsp; All sections</label>';

Step 3: Copy the node ID 

Select the placeholder element you added to the canvas. In the properties panel to the right, beneath the “Custom CSS” section, select and copy the node ID. 

Paste this into the code you added in the previous step, replacing the text that says ‘node-ID-goes-here’. 

Step 4: Apply styling

Update the code to match the name and titles of the buttons. For example, if your list was of foods, replace ‘male’ with ‘ice cream’, and ‘female’ with ‘chocolate cake’. 

You can also change the styling of the radio buttons by adding additional code directly underneath the code you just added, for example:

radios.style.backgroundColor = 'white';
radios.style.font = "15px/26px 'San Francisco Text', serif";
radios.style.color = '#212B36';

See more styling options

Step 5: Preview

Use the keyboard shortcut Command + Enter, or select ‘Preview’.
 

Checkbox HTML elements

Step 1: Add an element to the canvas

Add a rectangle to the canvas wherever you’d like the buttons to be displayed. This acts as a placeholder for the buttons and their titles. 

Step 2: Add JavaScript to be triggered when the page is displayed

Add an action to the current page of type “After a set time”. Set the wait time to be 1ms, the action to be “Script expression” then add the following JavaScript code:

const checkbox = document.getElementsByClassName("node-ID-goes-here")[0];
checkbox.innerHTML = '<input type="checkbox" name="colorFilter" id="cb1" value="yes" CHECKED><label for="cb1">&nbsp; Filter by color</label>';

Step 3: Copy the the node ID 

Select the placeholder element you added to the canvas. In the properties panel to the right, beneath the “Custom CSS” section, select and copy the node ID. 

Paste this into the code you added in the previous step, replacing the text that says ‘node-ID-goes-here’. 

Step 4: Customise and apply styling

Update the code to match the name and titles of the buttons. For example, if your list was of different types of foods, replace ‘male’ with ‘ice cream’, and ‘female’ with ‘chocolate cake’. 

You can also change the styling of the checkboxes by adding additional code directly underneath the code you just added, for example:

checkbox.style.backgroundColor = 'white';
checkbox.style.font = "15px 'San Francisco Text', serif";
checkbox.style.color = '#212B36';

See more styling options

Step 5: Preview

Use the keyboard shortcut Command + Enter, or select ‘Preview’.
 

Date picker HTML elements

Step 1: Add an element to the canvas

Add a text input to the canvas wherever you’d like the date picker to be displayed. This acts as a placeholder for the date selected. 

Step 2: Add JavaScript to be triggered when the page is displayed

Add an action to the current page of type “After a set time”. Set the wait time to be 1ms, the action to be “Script expression” then add the following JavaScript code:

const datePicker = document.getElementsByClassName('node-ID-goes-here')[0];
datePicker.type='date';

Step 3: Copy the the node ID 

Select the placeholder text input element you added to the canvas. In the properties panel to the right, beneath the “Custom CSS” section, select and copy the node ID. 

Paste this into the code you added in the previous step, replacing the text that says ‘node-ID-goes-here’. 

Step 4: Customise and apply styling

Adjust the styling of the text input to change the background of the date picker. For example, you could edit the fill and radius.  

Step 5 (optional): Connect a variable to the date result

If you’d like to use the result of the date picker elsewhere in the prototype, then you can connect it to a variable. 

From the toolbar on the left, select “Manage Project Variables” (or use the keyboard shortcut: V). 

Add a variable and name it dateValue.

Now connect the text input element with the variable by selecting the text input, then opening the Content dropdown and select the ‘dateValue’ variable. 

Read more about using variables in your prototype.

Step 6: Preview

Use the keyboard shortcut Command + Enter, or select ‘Preview’. 

Did this answer your question?