Code Block

The Code Block in Clappia allows you to write custom JavaScript code, giving you greater flexibility to handle advanced logic and calculations within your app. The output from the code can be used across various blocks, such as the ‘Calculations & Logic’ block or the ‘Text, Embedding & HTML’ block, to display or use the results of your custom code.

Use Cases

• Custom Calculations: Perform calculations that aren't possible with standard blocks, such as complex mathematical operations.
• Dynamic Data Processing: Generate dynamic data based on user inputs or randomized values.
• API Integration: Use the Code Block to fetch data from external APIs, process the response, and use the data within your app. For example, you could retrieve real-time currency exchange rates or weather information and display it in the app.

‍

Help Video

‍

Editing the Block

Go to Design App > Add Field, and click on the Code Block. You can now configure the code and output fields by editing on the right panel.

Label

Give a name to the field.

Code

The Code section is where you write custom JavaScript to perform calculations, validations, and other custom logic in your app. When you add the Code block, you will see a sample code appear. This sample code is only for your reference on how the Code block works and can be completely removed or replaced with your required code.

What the sample code is about:

• num1 and num2 are randomly generated numbers.
• sum and prod are the calculated sum and product of these numbers.
• The output object stores these values, which can then be used to be displayed in the Calculation & logic block (read on below to know more).

Tip: If you’re unsure about writing the code, you can use AI tools like ChatGPT, Claude, or Gemini to generate it for you. You can copy the sample code shown in the Code block and paste it into the AI to help it understand the required structure. Then ask it to generate your required code in the same format.

‍

Output Field

The Output Fields section is where you define which values returned by your code will be available as variables for use in other blocks. These names must match the output names that are defined and returned inside your code.

Using the sample code above as an example, the code returns two outputs: sum and prod. To make these available outside the Code block, you need to manually add them here.

In the Output Field text box, type:

• sum  (this represents the sum of the two random numbers)

Then click on Add another field and type:

• prod  (this represents the product of the two random numbers)

Once added, both sum and prod will be available as variables that you can use in other blocks such as the Calculation & logic block, for display conditions, etc. Only the values that are returned by the code can be added in the output fields.

‍

Displaying the Code Block Outputs in the App

Once you’ve defined the output fields, they can be used in other blocks:

Calculations & Logic Block: Add this block to your app and pull in variables generated from the Code Block (e.g., sum, prod). Go to the right panel under ‘Formula’ and type @ followed by the name of the Code Block. A list of all available variables from the code will appear, allowing you to select and use them. 

The variables for the sample example would be {code#sum} and {code#prod}.

You can add multiple ‘Calculations & Logic’ blocks to display individual outputs from the Code Block or combine them for more complex calculations.

In the App Home, if you’ve chosen to display the sum using the Calculations & Logic block, the sum will appear based on the values generated by the code.

Do note that the code block by itself does not appear in App Home, only the variables used in other blocks such as the Calculations & logic block to display the output will appear.

After configuring your code, test it to ensure the outputs are working as expected. In App Home, you can interact with the app and see the results from your code. If you encounter any issues, check the code for errors and ensure that your output fields are correctly defined and linked to the respective blocks.

Key Points to Remember

• Output Variables: Only the values that are returned by the code and added in the Output Field section will be available for use in other blocks.
• Variables in Other Blocks: You can pull these output variables into Calculations & Logic or other relevant blocks for further use or display.
• Testing: Always test your code in App Home to ensure the output fields are functioning correctly before making your app live.

By using the Code Block, you can introduce complex logic, calculations, and advanced functionality to your Clappia app.