You have the ability to incorporate different types of 3rd party widgets into your Profound UI application. For this particular example, we are using the jsTree tree view menu widget found on the following website: https://www.jstree.com/. The jsTree menu widget is a free jquery plugin that provides interactive tree view widgets that you can configure to work with your applications. The following steps will explain how to integrate this menu widget into your application. Please note that this documentation page does not go into details regarding the functionality of the jsTree widget. You can learn more about how to use the jsTree widget's events and interactions on the jsTree website.

Step 1: Download the Files

If you visit the jsTree website (https://www.jstree.com/), you will find a download link that will allow you to download the files you will need for this menu widget. You should see the link under the 'Getting Started' section of the homepage:

Once you click on the download link, a .zip file should begin to download. Once the file has completely downloaded, you should be able to open the folder to grab the files that are needed for this example. As mentioned on the jsTree homepage, the files that you will need are located under the 'dist' folder. Here, there is a 'themes' folder that includes two different menu themes, a jstree.js file and a jstree.min.js file. You only need to use one of these .js files in this folder – for this example, we will use the minified version of the .js file that is provided by jsTree.

Once you have the files needed from the jsTree website, you will also need to download jQuery as this menu widget requires jQuery 1.9.0 or greater in order to work properly. You can download the appropriate jQuery file here: https://jquery.com/download/. We recommend downloading the compressed, production version for this (the first download link listed in the download options).

Once you have these files, you're ready to move on to the next step.

Step 2: Place the Files

Once you have the files downloaded, it's important that you place these files in the correct location in the IFS so that they are loaded onto the page. Below are the appropriate locations to place each of the files mentioned above. It's also important to note that the following directories assume that your instance name is PROFOUNDUI, as this is the default name – you may have changed this during installation.

The 'themes' folder: /www/PROFOUNDUI/htdocs/profoundui/userdata/css
The jstree.min.js file: /www/PROFOUNDUI/htdocs/profoundui/userdata/js
The jquery.js file: /www/PROFOUNDUI/htdocs/profoundui/userdata/js

Because this widget uses multiple files, it's important that these files are loaded in the correct order. For this reason, we did not place these files in the /profoundui/userdata/custom/ directory. We also created a 'js' folder in the /profoundui/userdata/ directory for this example. This isn't required for the widget to work as expected but you will need to make sure that you specify the correct directory for each file in the next step.

Step 3: Update start.html

If you are integrating a 3rd party widget that requires multiple JavaScript files, such as this one, you will need to make sure that the files are being loaded in the correct order. You can do that by customizing your instance's start.html file, or by using Profound UI's file loading API to load the JavaScript files in the appropriate order. You can learn more about the pui.loadJS() API here.

In this particular example, we modified our instance's start.html file. The start.html file is located in the following directory: /www/PROFOUNDUI/htdocs/profoundui/userdata/html. Below is an example of what the start.html file looks like after making these changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi" />
  <link href="/profoundui/proddata/css/profoundui.css" rel="stylesheet" type="text/css">
  <link href="/profoundui/userdata/css/themes/default/style.min.css" rel="stylesheet" type="text/css">  
  
  <script type="text/javascript" src="/profoundui/proddata/js/runtime.js"></script> 
  <script type="text/javascript" src="/profoundui/userdata/js/jquery.js"></script> 
  <script type="text/javascript" src="/profoundui/userdata/js/jstree.min.js"></script>
 
 
  <title>Profound UI</title>
  <script type="text/javascript">
    window.onload = function() { pui.start() };
  </script>
</head>

<body>
  <div id="pui">
  </div>
</body>
     
</html>

We added the following lines to the start.html file: numbers 10, 13 and 14. Notice in line 10 that we included the directory for the specific CSS file from the 'themes' folder that we want to load into our page. In this example, we will be using the default theme so we specified the style.min.css file from the 'default' folder. It's important to note that the jQuery file needs to be loaded before the jsTree JavaScript file, therefore we are loading the jQuery file in line 13 before the jsTree file in line 14.

Step 4: Add the Widget to a Screen

The next step for this example is to place a Profound UI widget on the screen that will render the HTML element that the menu widget will use. For this menu widget, a <div> element is required. For this, you can use a ‘label’ or an ‘output field’ widget on the screen to render the menu widget. Another option for this is to use the 'html container' widget. Below we will give an example of using both an 'output field' widget and an 'html container' to render this widget.

Output Field:

To use an 'output field' widget for this, you would simply:

Position the output field on the screen where you want the menu to render.
Give the widget a unique id using the ‘id’ property (we chose 'jstree' for this id).
Remove the ‘value’ property.
Remove the 'height' and 'width' properties.
Remove the 'css class' property (a CSS class isn't needed here as we are using the jsTree 'style.min.css' file mentioned previously).

After setting up the output field on the screen in the Visual Designer, you should see something like this :

When you remove the height and width of the output field, it will show up very small in the Visual Designer – this is expected. Once you have the widget placed on the screen, you can use the following JavaScript in the screen's 'onload' event:

var jsTreeDiv = document.getElementById('jstree')
 
// Create parent and root nodes
var parentUL = createElement('ul');
var rootNode1 = createElement('li');
rootNode1.innerHTML = 'Menu 1';
var rootNode2 = createElement('li');
rootNode2.innerHTML = 'Menu 2';

// Create children for rootNode1
var node1Child = createElement('ul');
var childLi1 = createElement('li');
childLi1.innerHTML = 'Submenu 1';
var childLi2 = createElement('li');
childLi2.innerHTML = 'Submenu 2';

// Append the children to rootNode1
node1Child.appendChild(childLi1);
node1Child.appendChild(childLi2);
rootNode1.appendChild(node1Child);

// Append the root nodes to the parent and the 'jstree' div
parentUL.appendChild(rootNode1);
parentUL.appendChild(rootNode2);
jsTreeDiv.appendChild(parentUL);

function createElement(type) {
    return document.createElement(type);
}

Notice here that we are getting the output field (jstree), creating list elements and appending those elements to the output field to create the tree view menu. It's important to note that the above is simply an example of one way that you can create this, you could use another method if you choose.

HTML Container:

Another option you have for rendering the tree menu widget is to use Profound UI's 'html container' widget. To use the HTML container for this, you would:

Place the HTML container in the desired place on your screen.
Include the necessary HTML code for the menu widget in the 'html' property.

For the container widget, you do not need to make changes to any property besides the 'html' property. For this example, we used the following HTML:

<div id="jstree">
    <ul>
      <li>Menu 1
        <ul>
          <li id="child_node_1" data-jstree='{"icon":"//jstree.com/tree.png"}'>Submenu 1</li>
          <li>Submenu 2</li>
        </ul>
      </li>
      <li>Menu 2</li>
    </ul>
  </div>

Notice that you include the unique id for this <div> in the HTML used for the widget (we used 'jstree' for this). Another important thing to point out here is line number 5 and the "icon" section. This is simply an example of how to change the icon of a child node of the menu widget. There is more information about this located on the jsTree website but we included an example of this for your reference. Once you've set up your HTML container, it should look something like this in the Visual Designer:

Step 5: Call the Function

The last step you will need for this is to call the jstree function. Doing this will actually create the jsTree menu widget that you will see in your program. The best place to do this is in your screen's 'onload' event. For this example, we placed the following line of code in the 'onload' event:

Where '#jstree' is the id of the widget on your screen prepended with a '#' symbol.

Results

Once you've completed these steps and run your application, you should see the following results:

Profound Logic Documentation

Integrating a Tree View Menu Widget