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
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:
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.
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 :
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.
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:
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.
Once you've completed these steps and run your application, you should see the following results: