Dynamic Tree Menu Implementation

This article describes you how to create a dynamic tree menu in WebClient, this menu generate its nodes according to the data defined in a database table.

Considerations:

Before continue this guide you should read the following manuals:
This menu uses some new custom templates and CSS styles that you will find in the attached documents to this manual, please add those files to your workspace in order to test this correctly

Fields Definition

Start creating the following fields:

Deeplink Servlet: This is the display URL of your Deeplink servlet. By default, this should be "deeplink".

Deeplink URL: Hidden field that will contain the name of your deeplink servlet, function name and function parameters.

Function Parameters: The string of parameters needed for the function call. If there are no input parameters needed, leave this blank. If Input parameters are needed, they will use this format: VariableName.FieldImplName=Value. If more than 1 Input is needed, use an & to break up the parameters. For example: “Variable1.CompID=MyComp&Variable2.UserID=Me”.

Function Title: Hidden field that contains the function title, this will be used during the “node clicked” subroutine.

Function to Call: The full Impl Name (with package) of the function that should be called when the node is clicked. For Example, "com.cmfirstgroup.TestFunction".

LoginKey: Field used to trigger the call to the child function.

Menu ID: The Menu in which the node will be appearing. By Default, the function use "MainMenu" as the Menu ID.

Node Icon: Image that will be displayed in the node (this is an optional field).

Node ID: Id of the node, must be unique for each node.

Node Text: The text of the node that will be displayed in the menu.

Node Type: Type of the node that will be created (parent or child), the default values are showed in the following images.

Parent Node ID: Id of the parent node that must be defined in all the child nodes.

Selected Icon: Selected image that will be used in the nodes (this is an optional field)

Create the Tree Menu entity

The Tree Menu entity represents the database table that contains the data used to build the nodes of the menu, create this entity as showed in the following images:

Create the Menu function

The Menu is the main function in which the Tree Menu will be created, this function is similar to the one created in the Web Accordion Menu manual (See the “Considerations” section) but will use some new custom templates and a different code in the Action Diagram to define the nodes generation, creates this function according to the following images:

~WebTreeView function configuration:

Menu function configuration:

Configuration of the ~DynamicMenuFrame function: this is used to define the custom page template that we will use in our menu (This replaces the normal WebMenuFrame template used in the Web Accordion Menu)

Format Deeplink URL message configuration

Menu panel configuration:

Menu Action Diagram

Create the Deeplink Dispatcher function

This is the function we will be Deeplinking to. This function has the capability to call any function in the application if passed the proper parameters. Create this function according to the following images:

Deeplink Dispatcher function Configuration

DynamicCall source code parameters

DynamicCall source code

String myParameterString = &(2:).toString();
String[] myParamArray = myParameterString.split("&");
Map<String, String> myParamMap = new HashMap<String, String>();
if(myParameterString.length() > 0){
                for (String string : myParamArray) {
                               String[] myParm = string.split("=");
                               myParamMap.put(myParm[0], myParm[1]);
                }
                Collection<ObVariableX> myVariableCollection = getObVariableGroupX(&(1:).toString() + "_ObIn").m_variablegroup_valiables.values();
                for (ObVariableX obVariableX : myVariableCollection) {
                               String myVariable = obVariableX.getVarName();
                               //Strip out the 2 leading _
                               myVariable = myVariable.substring(myVariable.indexOf("_") + 1);
                               myVariable = myVariable.substring(myVariable.indexOf("_") + 1);
                               //
                               Collection<ObField> myFieldCollection= obVariableX.m_variable_fields.values();
                               for (ObField obField : myFieldCollection) {
                                               String myField = obField.m_implName;
                                               String myValue = myParamMap.get(myVariable + "." + myField);
                                               if (myValue != null) {
                                                               obField.assign(new ObCharFld(myValue));
                                               }
                               }
                }
}
{
                ObRunnable obrun = getCallMgr().getObRunnable(fnc, getObVariableGroupX(&(1:).toString() + "_ObIn"), getObVariableGroupX(&(1:).toString() + "_ObOut"), &(1:).toString() + "_ObFnc","External", "Java", "" );
                if(obrun != null){
                               obrun.ObRun();
                               obrun.ObPostRun();
                }
}

Deeplink Dispatcher panel configuration:

Deeplink Dispatcher Action Diagram

Servlet Setup

Deeplink Servlet: First, we will need setup the Deeplink Servlet. Start off by copying the attached "deeplink" folder to YourWebProject/src This contains the servlet needed to do this. Next, setup your web.xml with the following references.

NOTE: A web.xml is attached to this. So, feel free to use it as an example.

</description>

<display-name>deeplink</display-name>

<servlet-name>deeplink</servlet-name>

<servlet-class>deeplink.deeplink</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>deeplink</servlet-name>

<url-pattern>/deeplink/*</url-pattern>

</servlet-mapping>

Multi-Session Servlet: In order for this menu to work, each item loaded into the menu will be its own Web Session. So, we will need to reference the new Multi-Session Servlet. We will start by commenting out the Traditional WebClient Servlet from the web.xml. You cannot have both Servlets running at the same time. Next, add the following to your web.xml.

NOTE: A web.xml is attached to this. So, feel free to use it as an example.

<display-name>WebClientMultiSessionServlet</display-name>

<servlet-name>WebClientMultiSessionServlet</servlet-name>

<servlet-class>com.adcaustin.webclient.servletproxy.WebClientMultiSessionServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>deeplink</servlet-name>

<url-pattern>/deeplink/*</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>WebClientMultiSessionServlet</servlet-name>

<url-pattern>/wc/*</url-pattern>

</servlet-mapping>

Properties Setup: The last step is to setup your WebClient.Properties to call the proper functions. Please change your EntryPoint entries to match the following:

webclient.entry=<YOUR PACKAGE>. TreeMenu

webclient.entry.url.deeplink=<YOUR PACKAGE>.DeeplinkDispatcher

This will allow the Tree Menu to be called when starting the application. This also defines the Deeplink Dispatcher as the function we will call when deeplinking.

Test your application

To test your menu first enter the needed data to define the nodes that will be displayed on it, you can use the Edit function created in the Tree Menu entity to enter the data, here is an example:

NOTE: You can try access the edit function using the deeplink servlet, the URL should be <webapplication>/deeplink/<package>.<impl name of your edit function>.

Test your application

Please look at the attached file(s)

Related Articles
Web Accordion Menu
This template will allow you to use a framed menu screen, which uses an Accordion Menu and loads menu functions into a ChildSite. 1) In your eclipse workspace, save WebMenuFrame-page.wcli file (ZIP attached in this article with the files) to your ...
Menu Management
1. How to open Menu Editor 2. Menu Editor UI 3. Menu Editor Actions New Menu: To add a new Menu. Click on Add button to open the pop-up Input menu data and click save menu New Menu: To edit menu and create a relationship between the menu and other ...
Import Menu
CM EvolveIT Object Browser allows users can import data from CSV file. This document covers how to use CM EvolveIT Import Menu. How to open Import Menu: Import Menu UI: Import Menu UI Detail: 1. Import button: To import Menu data from CSV Click on ...
account menu
Dashboard - Administrator This document will cover the basics of the CM evolveIT Dashboard managing users in CM EvolveIT mode within the dashboard. This document will discuss creating, deleting, changing users and user passwords. After completing ...
CM evolveIT ETL - Menu
1. Create a new Workspace - open a wizard dialog to create a new workspace 2. Search Box - Search workspace and their properties by workspace's name, project's name, asset type, source file info's name. 3. Refresh Menu 4. Expand / Compress - ...

Dynamic Tree Menu Implementation

Dynamic Tree Menu Implementation

Related Articles

Web Accordion Menu

Menu Management

Import Menu

account menu

CM evolveIT ETL - Menu