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 your custom JavaScript. When you add the code block, a sample function appears as follows:

In this example:

• num1 and num2 are two random numbers generated by the code.
• sum and prod are the sum and product of these two numbers.
• The output object stores these values, which can be used in other parts of the app.

‍

Output Field

The Output Field is where you define which outputs from the code will be available as variables for use in other blocks. For example, in the above code, if you define the output field as sum, the app will recognize sum as a variable that can be used in other blocks.

You can add multiple output fields by clicking on ‘Add another field’ and entering their names one by one:

• sum: The sum of the two random numbers.
• prod: The product of the two random numbers.

These outputs can then be pulled into other blocks, such as Calculations & Logic.

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. 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 output fields you define 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.