Using a raw HTML Interface

The first exercise guides you through creating a simple Hello World module that uses HTML code for the user interface. Your HTML can include dynamic data as EJS (or Embedded JavaScript).

Before you proceed, make sure to create the example workspace as described here.

Create the UI

First, create a file named example1.html and put the following HTML content into it:

/profoundjs/modules/pjshello/example1.html

<h1> Hello World </h1>
<input type="button" value="Continue" onclick="pui.submit()" />

You will notice that the content is not a full HTML document and does not include tags, such as <html> and <body>. This is because Profound.js applications are single page applications where the browser page is never reloaded as the user navigates from screen to screen. Therefore, your HTML file must only include the body content for rendering.

The pui.submit() API in your HTML page is a client-side API that the submits a browser response and passes control back to server-side Node.js.

Create Node.js server-side logic

Next, you will create the Profound.js module named example1.js:

/profoundjs/modules/pjshello/example1.js

function example1() {
  pjs.display("example1.html");
}
 
exports.run = example1;

The code uses the pjs.display() API to display the HTML to the user. Note that qualifying the .html file with directory pjshello is optional. If the file is not qualified, the IBM i library list is used to search for the file when the application is called from IBM i via the PJSCALL command or proxy program (see below).

Set Up the Workspace App Start Route

Configure the example1.js file as the workspace App Start Route (stateful), as described here.

Try the Application Using the App Start Route

Run the application using the Launch App in Browser Tab option in the IDE, as described here.

This will open a browser and navigate to the following URL:

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

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:

Try the application using PJSCALL on IBM i

Now, start a Genie session by navigating to the following URL:

http://puihost:port/profoundui/genie

Where puihost is the sever or host name for where Profound UI is installed and port is the port number used by Profound UI. Please note, this is not the same as the Profound.js server host name and port number.

Next, sign into the Genie session by using your IBM i user id and password. Then, edit your library list to include libraries PROFOUNDUI and PROFOUNDJS or their equivalents if you installed Profound UI and Profound.js into non-default libraries.

You are now ready to call your application. Use the following command and the Hello World application should appear within your interactive Genie session:

PJSCALL MODULE(example1) DIRECTORY(pjshello)

In order to use the PJSCALL command, you must have a valid license key that includes Genie and the Profound.js Connector.

Note, if you are testing and creating Profound.js modules on your PC, you can use the PJSMYIP command before running PJSCALL to point Genie to the Profound.js installation on your PC.

Try the application using a Proxy Program on IBM i

Using a Proxy Program object allows you to call your Node.js application with a standard IBM i CALL.

If the library PJSHELLO does not yet exist, create it using the following command:

Next, create the Proxy Program:

Finally, you can call your program from a Genie session using the following command and the Hello World application should appear within your interactive Genie session:

Before you can use Proxy Programs, you must have a valid license key that includes Genie and the Profound.js Connector.

Expand the application to use dynamic fields

So far, your application only presents static HTML content.

To introduce dynamic content, edit your code as follows:

/profoundjs/modules/pjshello/example1.html

/profoundjs/modules/pjshello/example1.js

The pjs.define() API is used to declare a dynamic field. The following EJS syntax is used to include the field in the HTML content: <%= myname %>.

After saving your changes, you can try rerunning the application. The myname field is dynamically passed to the HTML content.

Asking for user input

The next set of changes asks the user for input via the browser interface. The field yourname receives information from a textbox, and the Boolean flag exit is set to true automatically when the user clicks the exit button.

/profoundjs/modules/pjshello/example1.html

/profoundjs/modules/pjshello/example1.js

After you rerun the application, you should see the following output: