Using Rich Displays with Low-Code / No-Code

Owned by Alex Roytman
Last updated: Aug 16, 2023 by Jessica Tomkins
3 min read



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

Before you proceed, make sure to create the example workspace as described here. Alternatively, you can create a new space in the cloud on Profound.js Spaces.

Create the UI

Open the example workspace in the Profound.js IDE by pointing your browser to a URL formatted as follows:

http://host:port/ide/pjshello/

Where host is the server you installed Profound.js on and port is the port number Profound.js is running on. If the installation is on your PC or Mac computer, use localhost.

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, configure the file as a Named Route (stateful), as described here. Set the route path to guestbook. 

Open a browser and navigate to the following URL:

http://host:port/run/pjshello/guestbook/

Where host is the Profound.js server host name or IP address and port is the Profound.js port number. You should see the following:

Congratulations! You created your first Profound.js application without writing any code.