Dynamic Tree Menu Implementation

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:

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.

               

<servlet>
                              <description>
                              </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.


<servlet>
                   <description></description>
                   <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

    • MENU

      CM EvolveIT allows users to edit the application Menu.  This feature is useful to define the application Menu structure. Menu is implemented outside of the Plex Model. Menu is dynamic such as data-driven. Main Menu Function exists but Call graph ...

    • Permissions and Menu

      This document will cover the CM evolveIT Dashboard menu and how permissions control access.   After completing this document, you should know the menu options and the permission level needed to access each menu option.   CM evolveIT Dashboard ...

    • 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 ...

    • 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 - ...

    • 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 ...