< Previous Article Next Article >


This exercise guides you through creating a simple Guestbook module that uses a JSON-based Rich Display File with low-code logic. You will use the Visual Designer tool for Profound.js to create the UI.

Before you proceed:

  • Create a new space in the cloud on Profound.js Spaces
  • Close the template selection dialog, so you can start from scratch
  • Select New => Rich Display File

Create the UI

Design the following interface:


Use these steps:

  1. Give the screen a name, such as "hello".
  2. Drag a Heading widget, double-click it, and type "Guestbook".
  3. Add a Textbox widget. Double-click it and provide a field name, such as "greeting". Set the "required" property on the textbox to true.
  4. Add a Button. Double-click it and type "Say Hello" or some other text you prefer. The button will be used to add greetings to a grid on the screen.
  5. Add a Grid and name it "greetings". Remove extra columns using the minus sign icon until there is only 1 column. Double-click the heading and type "Recorded Greetings".
  6. Drag and drop an output field into the first row and column of the grid. Double-click it and provide a field name, such as "entry".

Add Logic

To add low-code logic, right-click the button and select "Build Logic...". This will create a routine for the button click. Add the following 2 steps to your routine:



Your routine should look as follows:


Save and try the application

Save the application as guestbook.json. In the File Tree, right-click the file and select Properties. Then, configure the file as an App Start File.

Congratulations! You created your first Profound.js application without writing any code. Select Launch => Launch App in Browser Tab to try the application.


Have questions about this topic? Ask for help on our Profound.js Spaces Discussion Forum.

< Previous Article Next Article >