Thank you for being a valued client of CM First Group. If you have any technical issues or concerns, please open a ticket on support.cmfirstgroup.com, email CM First technical support at support@cmfirstgroup.com or call us on our 24/7 customer hotline at +1 (512) 623-7586.

Follow

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.

1.png

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

 1.png

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

1.png

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

1.png

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

1.png

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

2.png

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

3.png

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

4.png

5.png

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

6.png

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

7.png

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

8.png

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

9.png

10.png

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

11.png

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

12.png

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:

13.png

14.png

15.png

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:

2017-08-18_15-48-24.png

  • Menu function configuration:

16.png

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

17.png

  • Format Deeplink URL message configuration

18.png19.png

  • Menu panel configuration:

20.png

21.png22.png23.png

2017-08-18_15-57-10.png

  • Menu Action Diagram

24.png25.png27.png

2017-08-18_16-00-48.png

28.png26.png29.png

2017-08-18_16-16-29.png

30.png

31.png

 

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

32.png

  • DynamicCall source code parameters

33.png

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

34.png35.png36.png

  • Deeplink Dispatcher Action Diagram

37.png38.png

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:

39.png

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

40.png

  • Test your application

41.png

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk