1. Group Model

Q: How do I change WebClient group model from licensed version to non-licensed version?

 A: a. Login to your group model and remove the old WebClient group model and add the new WebClient group model from your library list.

     b. Extract a new local model.

Important Note: If you get error messages during this operation, please contact CM First support for guidance.

Q: Do I have to upgrade WebClient group model to the new version?

 A: No, you don't have to. You may choose to upgrade only if you need the new WebClient pattern.

2. Installation

Q: Web template generator shows error like generateTemplate([B, com.adcaustin.util.AFile). What should I do?

 A: You need to install WebClient 1.8 project and make sure that you have the same WebClientBuilderPlugin installed in your Eclipse plugin.

Q: Subclipse does not work in Eclipse installed from WebClientLiveInstall. What should I do?

 A: WebClientLiveInstall is not designed for WebClient development purpose. If you are setting up WebClient development environment, you should build your environment from scratch. Subclipse will work with official eclipse installation.

Q: How do I upgrade from WebClient 1.6 to WebClient 1.8?

A: a. Before you start installing WebClient 1.8, you will need to close your eclipse.

     b. Go to your Eclipse/plugins folder, delete the old com.adcaustin.webclient.WebClientPlugin-1.6.jar and copy the new com.cmfirstgroup.webclient.WebClientPlugin-1.8.jar to the folder. Note: if you are using Eclipse Juno, the builder plugin has to be copied to Eclipse/dropins folder.

     c. Start your Eclipse.

     d. Close your existing WebClient project, right-click on the project and select Delete.

     e. Close your Eclipse.

      f. Go to your workspace directory using Windows Explorer and delete WebClient folder from your workspace.

     g. Start your Eclipse.

     h. Go to the Eclipse menu: File → Import → Expand General folder → Select Existing Projects into Workspace → click Next > → Check Select archive file and browse to where you download WebClient-1.8.zip → Click Finish.

     i. There should be an Eclipse window prompting you to enter your license. Please copy your generator ID and open a ticket on our support website to request for your new generator license. If you have purchased Advanced Controls, please mention it in the ticket. All customers are entitled to 30-day free trial license. New licenses will be issued within 2-3 business days.

     j. To get started with WebClient 1.8, you can use the trial version.

     Please note that the upgrade procedures will not work with Eclipse that you installed from WebClientLive. 

Q: What should I do if I get "The WebClient i+ plugin must be v1.8 or above to use this version of WebClient." error in the console when I generate a web template?

A: You need to delete the old WebClient Plugin from Eclipse/plugins folder and replace it with the latest WebClientPlugin builder.

Q: How do I apply WebClient generator license?

A: Create a license folder anywhere you want. Copy both adclsdt.dat and genlicense.lic to the new folder. Browse to the license folder if prompted in Eclipse to enter your license.

Q: How do I apply WebClient ISV server license file?

A: Send a support request for ISV server license on our support website and provide the gen ID, licensee name and issuer name in the ticket description. Click here on how to get the generator id. After you receive the license.lic from our support team, you can apply the server license by setting the license file path in the WebClient.properties file.

licensingserver.licensefile=<path to the license.lic file with forward slashes>

For example:

licensingserver.licensefile=C:/WebclientLicense/developer.lic

Note: if you have a # in front of the property, remove it to enable the property.

3. Configuration

Q: How do I check if my web projects are published on my Tomcat server?

 A: Check your Tomcat project folder in your <workspace directory>\.<server path>\<deploy path>\<context path>\WEB-INF\lib.

      Server path is usually set to  .metadata\.plugins\org.eclipse.wst.server.core\tmp0.

      Deploy path is usually set to  wtpwebapps.

      Context path is usually set to the name of your web project.

Q: How do I set the locale correctly for Firefox and Safari browser?

 A: Create a page template, for example: locale-page.wcli on your custom template project. In your locale-page.wcli file, it should have something like the following.

/(!djConfig)
  locale:'fi-fi',
/(!djConfig)

       Above is the example for setting locale in Finnish. Remember to add a new triple in your function to apply the new page template.

       myFunction is a FNC ~WebShell                                                customPage is a FNC ~WebUI

       myFunction is a FNC customPage                                             customPage impl name locale

Q: How do I run my application in Java Swing using eclipse?

 A: Go to Run → Run Configurations… → Select Java Application → Click New launch configuration.

      In the Main tab window, browse and select your java project (the project that has your java source files). For the main class, search for ObRun.ObPanel.ObLaunch and click Apply.

      Open Arguments tab window → In the Program arguments field, enter your function entry point in the format of <package name>.<function implementation name>  “Path= “ → Click Apply → Click Run.

      For example: WXPCOURSE60.WXuF “Path= “

Q: How do I enable GZIP compression on my Tomcat server?

 A: Edit file /conf/server.xml and add to the HTTP Connector configuration like below.

compression="on" 
compressionMinSize="2048" 
noCompressionUserAgents="gozilla, traviata" 
compressableMimeType="text/html,text/xml,application/json"

An example of an HTTP Connector configuration with compression enabled could be:

<Connector port="8080" maxHttpHeaderSize="8192"
               maxThreads="150" minSpareThreads="25" maxSpareThreads="75"
               enableLookups="false" redirectPort="8443" acceptCount="100"
               connectionTimeout="20000" disableUploadTimeout="true" 
               compression="on" 
         compressionMinSize="2048" 
         noCompressionUserAgents="gozilla, traviata" 
         compressableMimeType="text/html,text/xml"/>

Q: How do I remove an existing genlicense file setting from Eclipse workspace?

 A:Go to your Eclipse directory -> Confiuration folder -> .settings folder and delete com.cmfirsttech.webclient file.

4. Web Controls / Web Templates

Q: How do I use DojoTimePicker.ctrl?

 A: In case you need a time selector for your function follow the steps below:

1. Add an Edit field and a Time field to your function.
   
2. Set the “Visible” property of your Time field to “No”.
   
3. Apply the DojoTimePicker in your Edit field by setting its control name to:
   EditTimePicker:MainArea:template=DojoTimePicker:default
   
   
4. Create a new source code called GetTimePickerValue with the following code:
   

            import java.text.SimpleDateFormat;

   import java.util.Date;

   {          

               try {

                           String strTime = &(1:).getValue();

                           SimpleDateFormat formatter = null;

                           if(strTime.indexOf("a") != -1 || strTime.indexOf("A") != -1    ||strTime.indexOf("p") != -1 || strTime.indexOf("P") != -1){

                                       formatter = new SimpleDateFormat("hh:mm aa");

                           } else {

                                       formatter = new SimpleDateFormat("HH:mm");

                           }

                            

                           SimpleDateFormat formatter2 = new SimpleDateFormat("HH:mm:ss");

                           Date time = null;

                           time = formatter.parse(strTime);

                           &(2:).fromString(formatter2.format(time).toString());

               } catch (Exception e) {

                           e.printStackTrace();

               }

   }
   
   The purpose of this source code is to take the selected value from the TimePicker field and convert it to Time format since originally its format is type String. In this way we can save the selected value in the Time field with the correct format. 
   
   Add two parameters:
   *Edit Field (Column_1): With this parameter we are going to obtain the value of the field to transform it into a Time format.
   *Time field (field_TimeISO): This parameter will receive the value of the TimePicker field transformed into a date format in order to save it correctly.
   
   

   
   

5. Create an event to call the source code and map the event to the Modified physical event of your Edit field which will be the TimePicker:
   
   

   
   

6. In the Action Diagram call the source code:
   
   *Don’t forget to get your Edit field before call the Source Code and put your Time field after calling the Source Code.
   

7. Now generate and test your function, the selected time in your Time Picker field will be saved in the Time field with the correct format.
   
   

Q: How do I use WebAccordionTree.ctrl?

 A: Add TreeView pattern from WebClient advanced control as you would for WebTreeView. The Java bean class in the panel properties should be set to WebAccordionTree.

Q: How do I use WebFilteringSelect.ctrl?

 A: WebFilteringSelect.ctrl is similar to WebCombo.ctrl except that user may enter more than one character in the input field. Set the control name of the combo box to <control name>:MainArea:template=WebFilteringSelect:escapChar=3:default.

        escapChar can be customized to any number you like. The number represents how many character you enter before the combo box display the list based on the character you enter.

Q: How do I use WebGridExport.ctrl?

 A: WebGridExport is used to export a grid to a CSV file format. First, you need to upgrade to the latest WebClient group model. Second, you need to add WebExportGrid to your function inheritance path.

Q: How do I use WebGridFilter.ctrl?

 A: WebGridFilter.ctrl is used to filter the data of a grid based on one of its column values. To use this control you will need to create two fields: one combo field and one edit field. Set the control name of the combo box to <controlname>:<attachpoint>:template=WebGridFilter:GridId=Grid1P:TextId=filterContains:default.

GridId should be set to the control name of the grid. TextId should be set to the control name of edit field.

The edit field control name should be set to filterContains:<attachpoint>. The control name should match the TextId in the combo box.

At runtime the combo box will list all the avaliable columns in the grid, the data of the grid will be filtered according to the text you enter in the edit field and the selected column in the combo box.

Q: How to add filter fields to a Grid control using the GridFilterArea template?

Q: How do I use WebURLGrid.ctrl?

A: WebURLGrid.ctrl is a prototype control that is used to convert data in the grid column to a URL with the text "Link". The control name of the column heading will need to be set according to the next syntax:

Q: How do I use LiteralHTML.ctrl?

 A: LiteralHTML.ctrl is used to run hard-coded HTML that  is entered in the Plex panel text property. The control name of the field should be set to <controlname>:MainArea:template=LiteralHTML:default.

Q: How do I enable column toggling in grid?

 A: The control name of the grid should be set to Grid1P:MainArea:ColumnToggling=Yes:default.

Q: How do I use WebLogMessages-page.wcli?

 A: WebLogMessages should not be used in combination with WebMessages. Create a new function in your Plex local model like follows.

     WebLogMsg is a FNC WebShell.

     WebLogMsg impl name NME WebLogMessages.

Q: How do I user WebLinkButton.ctrl

1. Add the “WebLinkButton.ctrl” template to your custom templates project in Eclipse.
   
2. Configure the control name of the field that will contain the URL using this syntax <Control Name>:<Attach Point>:template=WebLinkButton:label=<The label of the push button>:default , see the following images as an example:
   

3. Set the value of your field with a valid URL, for example in this test case we will open the default Google main page:

Q:How to externalize the ObClient.properties and WebClient.properties files?

A: ObClient.properties: To externalize this file you can use the webclient.plex.propertyfilename entry in your WebClient.properties file to define the location of the ObClient.properties, example:

webclient.plex.propertyfilename=C: /Properties /obclient.properties

WebClient.properties: To externalize this file you must configure the web.xml file of your Web project to add a new parameter called webclient.proppath and the value will be the path to your WebClient.propertiesfile, you can do this either using a init-param tag or a context-param tag, example:

• Using Init-param:
  

<init-param>
   <param-name>webclient.proppath</param-name>
   <param-value>C: /Properties /WebClient.properties</param-value>
</init-param>

•  Using Context-param:
  

<context-param>
   <param-name>webclient.proppath</param-name>
   <param-value>C: /Properties /WebClient.properties</param-value>
</context-param> 

5. Troubleshooting

Q: How solve the The method setUniqueName(String) is undefined error

A:  This problem happens because the Plex version you used to generate your functions is different than the Plex  version libraries that are configurated in your WebClient project, for reference all official WebClient releases includes the libraries from Plex version 6.0, so if you are using a newer version you will need to update this libraries, this can be donde by updating the ObRun,jar files that comes in the WebClient project with the corresponding ObRun.jar file from your current Plex version, follow these steps:

1. Locate your correct ObRun.jar file, normally this is located in the following location: C:\ProgramData\CA\Plex\<VERSION>\ObJava\Lib

2. After we have the file, we need to paste it in the webclient file:

3. At the end of copying we must restart the eclipse and when we reopen it we must clean the project.

Q: What should I do if I get template generation error Java.lang.IllegalAccessError: 

superclass access check failed: class com.sun.net.ssl.internal.ssl.Provider (in unnamed module @0x27f5a417) cannot access class sun.security.ssl.SunJSSE (in module java.base) because module java.base does not export sun.security.ssl to unnamed module @0x27f5a417superclass access check failed: class com.sun.net.ssl.internal.ssl.Provider (in unnamed module @0x27f5a417) ?

Q: What should I do if my Tomcat server does not publish anything?

 A: Try removing your web project from your Tomcat server and publish and then add the web project back to the server and republish.

Q: I am not able to connect to AS/400 in WebClient or I am getting java.io.UnsupportedEncodingException: Cp037. What should I do?

 A: Make sure that your function works in Java Swing. If it is not working in Java Swing, check if your Eclipse is using the correct JDK version. You should be using JDK 1.6 or higher.

Q: What should I do if I am getting a java.lang.NullPointerException when generating the web template?

 A: If you are using PlexResource folder to store your Plex .panelresource or .resource files, the PlexResource folder should set as a source folder. To set your PlexResource folder as a source folder:

1. Right-click on your java project and select Properties.
   
2. In the Source tab, click add folder and add the PlexResource folder to the source.
   

Q: What should I do if I am getting a java.lang.NullPointerException on the web page?

A: There are several things that may have caused this error. It could be that you are missing server functions or a JAR file.  First, check the entry point in webclient.properties if it is correct. Second, check the servlet log. The servlet log folder can be found in WebClient.properties. Third, if there is no additional information on the log, we recommend that you run your application in Java Swing (See how do I run my application in Java Swing using Eclipse).

Q: How to avoid running multiple WebClient applications in different browser tabs?

A: A web application has no way of knowing if any windows are open with the same session ID, so this situation can't be always avoided. However, the following recommendations will suffice in practice.

1. Do not have the users bookmark the WebClient servlet directly. Instead, launch the application from a menu or a portal page.

2. When launching the WebClient application, use a targeted anchor window reference to avoid opening the servlet in multiple windows/tabs at the same time, and also to disable the back button. More information: http://graphcomp.com/info/specs/target.html

3. For additional protection, define a Plex right-click context menu. The user will not see the "Open link in new tab" option, and the developer can provide the user more appropriate actions to take.

Again, this will not bullet-proof the case where the curious user is going into the address bar and copy/pasting the URL, or doing other kinds of experimentation. However, in practice, this should handle the normal uses of the application.

Q: What should I do if I am getting SEVERE: Exception loading sessions from persistent storage 

java.io.WriteAbortedException: writing aborted; java.io.NotSerializableException: com.adcaustin.webclient.servletproxy.CallWebClientFunction

Caused by: java.io.NotSerializableException: com.adcaustin.webclient.servletproxy.CallWebClientFunction?

A: For Tomcat 6: locate the relevant Context element in either server.xml or in the context descriptor and declare the no-op session manager.

<Context .. >
  <Manager pathname="" />
</manager></context>

For Tomcat 7, turn off this feature in Tomcat by uncommenting the following in your webapp's context.xml

 <Manager pathname="" />

Q: What should I do if I am getting For input string: ""  java.lang.NumberFormatException: For input string: ""?

A: Two items to check in Plex panel properties.

• Make sure all of the toolbar buttons are associated with menu items in the panel properties.
  
• Check the right-click context menu that is referenced but not generated, for example because it is Exist No.
  

Q: What should I do if I am getting ERROR handleException() java.lang.ArrayIndexOutOfBoundsException: 1 
Caused by: java.lang.RuntimeException: java.lang.ArrayIndexOutOfBoundsException: 1
Caused by: java.lang.ArrayIndexOutOfBoundsException: 1 
in the log file?

A: That means the function that you are calling requires an input parameter.

Q: What should I do if I am getting error "Unable to validate license" after upgrading WebClient?

A: Restarting Eclipse would usually fix the issue.

Q: What should I do if I the PopUp functions cannot be moved around the screen?

A: The movement of the PopUp functions depends of the size of the BODY element from the document and if these values are not defined then the PopUp functions will not move, the default styles of WebClient do not include CSS code to define the BODY size, so you must be sure to add CSS code for the BODY element in your custom CSS file, if you don't know how to achieve this, please try these steps:

-Create a custom CSS file for your application(see the following article How to Customize CM WebClient StyleSheet)

-Add the following CSS code to your custom CSS file:

html {
  height: 100%;
  width: 100%;
}
body{
  height: 100%;
  width: 100%;
}
body form {
  height: 100%;
  width: 100%;
}

Q: What should I do if I get problems while installing a new WebClient License?

A: After the release of WebClient 1.8.5 there have appeared some problems with the license, here are some common things to check in order to solve these issues (Be sure to remove any previous license you had, if you not know how to achieve this you can see the following question in this same article "How do I remove an existing genlicense file setting from Eclipse workspace?"):

• Make sure your workspace is pointing to the correct JDK version
  
• Check the WebClient builder plugin for Eclipse: Since the release of WebClient 1.8.5 you must use the Latest Plugin. You can find this file in the following link Download Latest Plugin.
• Change the ObRun.jar version used in the WebClient project: If you are generating from a Plex version greater than Plex 7.1 then you must change the ObRun.jar file from WebClient with the ObRun.jar file from your current Plex version, follow these steps in order to change this file and apply the license:
  • Delete your WebClient project and then add it again to your workspace like you were updating the WebClient version(follow the steps from this guide "How to update a WorkSpace to a new WebClient release - Version")
    
  • Copy the correct version of the ObRun.jar file to your WebClient project
    
  • Restart Eclipse
    
  • Clean all your projects
    
  • Add the the license (Do not add the license until you have finished all the previous steps)
    
• If after following these steps you still have issues, please create a new environment and apply the license
  
• If it is a server license please make sure you configure your file correctly.
  

1. Generator License (for generate webclient applications): This license is used by developers to create webclient applications, this license is limited to 10 connections so that the developer can test the application.
   
2. Server License (for running webclient applications): This license is used in webservers were a webclient application has been deployed, it has not connection limits (9999) means no limit, it last for 500 years, the dates is necessary to avoid issues when is some webservers that do not support null values on dates. This license should work no matter the generator ID is constantly changing.
   

Q: What should I do if I am getting error "Invalid method Code length"?

1. Many fields in a view/variable.
2. Too much code in the Edit Point (Subrutines, Case statements, etc).

1. Split when possible the Action Diagram code.
2. Remove unused fields from variables to keep the generated code at minimum.
   

6. WebClient i+ Mobile

Q: Where do I download WebClient i+ Mobile?

 A: WebClient i+ Mobile is free to download at http://code.google.com/p/webclient-mobile-for-ca-plex/.  

Q: What should I do if I need some support for WebClient i+ Mobile?

 A: For more information about WebClient i+ Mobile support, please contact John Rhodes.

Q: How to get started in WebClient i+ Mobile?

 A: All functions have to inherit from ~WebShell just like standard WebClient. All field control names have to be set in Plex panel properties.

How to set it up in Eclipse workspace:

1. Install WebClient 1.8 plugin builder in Eclipse/plugins folder.
   
2. Create a new workspace for WebClient Mobile.
   
3. Create a java project for Plex application source code.
   
4. Import WebClient 1.8 to the workspace.
   
5. Create a dynamic web project for deployment.
   
6. Create a WebClient Servlet under dynamic web project.
   
7. Add WebClient i+ to the Java project libraries. Go to  java project build path, open libraries tab, click on Add Library…button, select WebClient Component, click Next>, select  WebClient i+ project and click Finish.
   
8. Check out WebClient Mobile from google code to the workspace. Check out url https://github.com/cmfirstgroup/webclient-mobile-for-ca-plex.git/branches/branch1.0
   By default, the checkout folder is named webclient-mobile-for-ca-plex.
9. Create links folder for css and js folders under the dynamic web project/WebContent directory. The css folder should be linked to E:\WebClientMobileDev\webclient-mobile-for-ca-plex\res\css. The js folder should be linked to E:\WebClientMobileDev\webclient-mobile-for-ca-plex\res\js.
   
10. Add WebClient mobile to the java project libraries. Go to java project build path, open libraries tab, click on Add Library…button, select WebClient Component, click Next >, select WebClient mobile and click Finish.
    
11. Configure webclient.properties. Add the following property in the file.
    

resurl.com.cmfirsttech.webclientmobile=<web context>

Q: How to set control name in Plex panel properties?

A: By default, you need to set control name to all of edit fields in order to set the control name to the label fields. Please see below for examples.

To display Address edit and label fields, set the control name of the edit field to

myAddress

The control name of label field should be set to

myAddressLbl:myAddress.Label.

Another way to specify the label of the field is to set the control name of the edit field as follows.

myAddress:MainArea:label=Address

You do not need to specify the control template for edit, password, combo, multilineedit, and checkbox fields. If you choose to specify a control template used or customize a WebClient i+ Mobile control, you will need to specify the area after the control name.

To display a date field with a date picker, set the control name of the edit field to

myDate:MainArea:template=DatePicker

To display numeric field with spinner control, set the control name of the edit field to

myNumber:MainArea:template=WebSpinnerEdit

If you choose to modify the width of label, set the control name of the label field to

myAddress:myAddress.Label:width=70%.

By default, the width is set to 40%.

To position edit fields in a fieldset, set the control name of the edit field to

myAddress:MainArea:fielset=Info

To position two edit fields on the same row, set the control name of the first edit field to

myPrice

set the control name of the second edit field to

myTotal:myPrice.Extra

To specify a decimal point for a numeric field, set the control name of the edit field to

myPrice:decimal=2

There are two ways to modify the height of multiline edit control.

1. If you choose to modify the rows of multiline edit field, set the control name of the edit field to

myAddress:MainArea:maxRows=10

2. If you choose to automatically size the height of the control, set the control name of the edit field to

myAddress:MainArea:autoExpand

To position button on the toolbar area, set the control name of the button to

Next:ToolbarArea:ui=confirm-round:align=right

For details on ui options to use, please check Sencha Touch 1.1 documentation.

To set control name for grid by grouping based on the first column of the grid, set the control name to

Grid1P:FullscreenArea:grouped=true:indexBar=false

7. Miscellaneous

Q: What can I do to improve the performance of my web page?

A: Enabling GZIP compression on the web server increases the response time from the server because the response is first compressed and then send to the client.

Q: How do I reset WebClient developer license file path?

A: Delete com.cmfirsttech.webclient.prefs file from eclipse installation dir/configuration/.settings folder.

Q: Is it possible to override WebClient.properties file path?

A: Yes, it is. You can set the WebClient.properties file path in the web.xml of your server by adding the following context parameter. The param-name is webclient.proppath and the param-value should be set to the file path.

<context-param>
  <param-name>webclient.proppath</param-name>
  <param-value>C:\Temp\WebClient.properties</param-value>
</context-param> 

See Tomcat Documentation on setting context parameter. https://tomcat.apache.org/tomcat-8.0-doc/config/context.html#contextparameters

Q: How do I exclude Java classes or packages from WebClient processing?

A:This feature is for advanced developer only. You can specify multiple class or package names using userclassexceptionlist property in WebClient.properties file. For example:

userclassexceptionlist = com.mycustompackage,org.Customclass

We do not support wildcard.

Q: How do I use the Loader widget?

A:The Loader widget is used to indicate when some XML HTTP REQUEST is going on via topics, to implement this you must create a custom page template that include the following:

-The call to the Loader class: dojo.require("dojox.widget.Loader");

-A div element that uses the Loader class: <div dojoType="dojox.widget.Loader"></div>

Here is a simple example of a custom template that implements this Loader widget:

/(!JSInit:once)
 dojo.require("dojox.widget.Loader");
/(!JSInit)

/(!MainArea)
 <div dojoType="dojox.widget.Loader"></div>
 /(!AttachPoint:name=MainArea)
/(!MainArea)

Q: What are the non-supported items in WebClient?

A:   CM WebClient Compatibility Matrix and SysTemplate Support

• Not attempt to interact directly with the local file system or computer.
  
• Not use Java beans or ActiveX controls unless they have been adapted with a custom WebClient template. (See Bean controls for more information.)
  
• Be generated using a supported version of CA Plex. Please check CA Plex compatibility version from CA website. 

  https://support.ca.com/us/product-information/ca-plex.html?d=t&type=Knowledge?d=t&type=Knowledge
  

• Only use panels of a supported type (currently Dialog, Child Panel, and Top Application).
  
• Note that Top Application type has a limited support. It can function as a child in a child site.
  
• Detail popup window cannot call WebShell window.
  

Q: How do I make the grid rows adjust its height according to the text content?

A:Add the following CSS code in your CSS custom file(If you don't know how to add a custom CSS file please follow this guide How to Customize CM WebClient StyleSheet):

.dojoxGrid-cell span{
 white-space: normal !important;
}

Q: How to trigger actions automatically when the function loads?

A: In WebClient you cannot execute actions in the initialize subroutine because this subroutine is executed before the page is loaded, if you need the execute an action when the page loads you can achieve that by creating a custom template that execute a physical event in Plex when the page is loaded, then you can add the custom code to trigger the action you need in that event, here is an example of how to do this:

• Create a custom template that executes an action in Plex when  the page load, for example you can use the following code from our “CustomInitialize.ctrl” template which generates an invisible field that will trigger the modified event for the field that uses this template when the page loads:
  

/(!JSOnLoad)
/(!AJAXDoEvent:phys=Modified)
/(!JSOnLoad)
 <input type="hidden" name="/(!NameID)" id="/(!NameID)" value="/(!This)">
/(!EnableAction:SetValue,SetState,SetFocus) 
/(!JS)
  /(!Action:SetValue) 
  document.getElementById("/(!NameID)").value=/(!This);
  /(!Action)
/(!JS)

• Create a field that will use the custom template, see the following example.
  

• Add the field to the function and configure its control name to use the template, see the example.
  

• Configure the event of the field the will be triggered automatically by the custom template.
  

• In the action diagram use the event that you created to add the code you need to execute when the functions loads, in this case we execute the ChangeColumnHeading action for our grid control.
  

• Generate the function and test.
  

Q: How to change the grid column heading at runtime?

A: The WebGrid.ctrl has an action that allows you to modify the column heading at runtime, to use this you must follow these steps:

• Create a new source code called “ChangeColumnHeading” with the following parameters:
  • Number: Index value of the column (Starts from 0).
    
  • IMPORTANT: WebClient takes the index value of the column as how they come from Plex, in WebClient this index will not be modified even if you move the column from its original position.
    
  • 
    
  • ShortDescription: New value for column headin
    
  • GridControlName: Control name value in the Grid.
    

• Add the following code to the “ChangeColumnHeading” source code you created:
  

com.adcaustin.webclient.ctrl.WebObGridData gridctl  = (com.adcaustin.webclient.ctrl.WebObGridData) (Object) ObUserAPI.getControlByName(getFunction(), new ObCharFld("*Current"), &(3:).toString()).getData();         
                org.json.JSONObject values;
                try {
                               values = new org.json.JSONObject();
                               values.put("colIndex", &(1:).toString()); 
                               values.put("newHeading", &(2:).toString()); } catch (org.json.JSONException ex) {
                               throw new RuntimeException(ex);
                }              
                gridctl.processAction("ChangeColumnHeading", values);

• To change the column headings at runtime in your functions just call to the“ChangeColumnHeading” source code using the values you need.
  

• Generate in Plex and test it in Eclipse. See the following example:
  

Q: How to Encrypt/Decrypt data?

A: You can generate source codes in Plex to Encrypt/Decrypt the data you need, for example you may want to encrypt the value of a field that will be stored in a cookie so the clients cannot see that value at runtime using the browser console, then you will also need decrypt the value of that cookie anytime you need that value in the server side, here are some examples of source codes that you can use for both cases:

IMPORTANT: The code used in this example only works in Java 8, you may need to modify this code in order to work in other versions of Java

ENCRYPT SOURCE CODE

• First parameter is the field that contains the text that we want encrypt
  
• Second parameter is the key value that will be used to encrypt the data of the first parameter.
  
• Third parameter is the field on in which the encrypted text will be stored
  
  

import java.security.Key;
import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import java.security.MessageDigest;
{
 String strData = &(1:).toString(); 
 String strKey = &(2:).toString();
 String EncryptedText = "";
 MessageDigest sha = null;
 try
 { 
 byte[] key = strKey.getBytes("UTF-8");
 sha = MessageDigest.getInstance("SHA-1");
 key = sha.digest(key);
 key = Arrays.copyOf(key, 16);
 SecretKeySpec secretKey = new SecretKeySpec(key, "AES"); 
 Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
 cipher.init(Cipher.ENCRYPT_MODE, secretKey);
 EncryptedText = Base64.getEncoder().encodeToString(cipher.doFinal(strData.getBytes("UTF-8")));
 &(3:).fromString(EncryptedText) ;
 }
 catch (Exception e)
 {
 System.out.println("Error while encrypting: " + e.toString());
 }
}

DECRYPT SOURCE CODE

• First parameter is the field that contains the text that we want encrypt
  
• Second parameter is the key value that will be used to decrypt the data of the first parameter.
  
• Third parameter is the field on in which the decrypted text will be stored
  

{
 String strData = &(1:).toString(); 
 String strKey = &(2:).toString();
 String DecryptedText = "";
 MessageDigest sha = null;
 try
 { 
 byte[] key = strKey.getBytes("UTF-8");
 sha = MessageDigest.getInstance("SHA-1");
 key = sha.digest(key);
 key = Arrays.copyOf(key, 16);
 SecretKeySpec secretKey = new SecretKeySpec(key, "AES"); 
 Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5PADDING");
 cipher.init(Cipher.DECRYPT_MODE, secretKey);
 DecryptedText = new String(cipher.doFinal(Base64.getDecoder().decode(strData))) ;
 &(3:).fromString(DecryptedText);
 }
 catch (Exception e)
 {
 System.out.println("Error while encrypting: " + e.toString());
 }
}{
    String strData = &(1:).toString();  
    String strKey = "CM1";
    String DecryptedText = "";
    MessageDigest sha = null;
    try
    {      
        byte[] key = strKey.getBytes("UTF-8");
        sha = MessageDigest.getInstance("SHA-1");
        key = sha.digest(key);
        key = Arrays.copyOf(key, 16);
        SecretKeySpec secretKey = new SecretKeySpec(key, "AES");  
        Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5PADDING");
        cipher.init(Cipher.DECRYPT_MODE, secretKey);
        DecryptedText = new String(cipher.doFinal(Base64.getDecoder().decode(strData))) ;
        &(2:).fromString(DecryptedText);
    }
    catch (Exception e)
    {
        System.out.println("Error while decrypting: " + e.toString());
    }
}

 Here is an example of how you can implement this in a Plex function:

• Fields definition
  

• Source codes definition
  

• Test function: definition
  

• Test function: Panel configuration 
  

• Test function: Action Diagram
  

• Test function at runtime
  

Q: How to change the character used as "CSV Separator" and "Decimal separator" for the ExportGrid?

Q: How to use the WebLink.ctrl template?

Q: How to implement an IFrame in your WebClient application?

Q: How to implement the TimePicker in Webclient Mobile?

1. Create a time field:
   
   
   
   
2. Configure the control name of the time field using this syntax:
   <Control Name>:MainArea:template=TimePicker:label=<Your Label>
   
   
   
3. Generate your function and test it: 
   
      
   
      

Q: How to show a grid control with columns in Webclient Mobile?

1. Download the attached files (GridColumnFiles).
   
2. In your “js” folder create a new folder, in this case we will call it “cmfirst”, you can call it whatever you want.
   
3.  Add the “custom.js” file to the “cmfirst” folder. You need to modify two lines of code (marked in yellow) of the “custom.js” file based on the name of the folder you created:
   
   
   Important: These custom TPL are created to show three columns or less in the grid, we don’t recommend having more than three columns because the columns are combined due to the size of the mobile screens. However, you can modify both TPL to allow more than three columns in this way:
4. Add the “customStyle.css” file to your CSS folder.
   
5. Create a page template to reference the “custom.js” and “customStyle.css” files, for example:
   
6. In Plex, create a function to reference the page template. Remember that the implement name must be the same as the page template. 
   
7. In Plex, set the control name of the grid control with this syntax:
   “Grid1P:FullscreenArea:template=WebGrid:grouped=false:indexBar=false:tplGenerator=cmfirst.custom.gridColTpl:renderTplGenerator=cmfirst.custom.gridColHdr"
   
   

   Note: change “cmfirst” if you changed the folder name in WebClient. 
   

8. Generate and test it.
   

Q: Support for ClockTick behavior in WebClient

1. Copy the “Timer.ctrl” file (attached at the end of this article) to your CustomTemplates folder.
   
2. In Plex add a numeric field to your panel.
   
3. Set the Label of the field to Visible=No.
   
4. Set the Control name property of the field to TimerP:MainArea:template=Timer
   
5. Create a logical event mapped to the physical "Updated" event for that field, e.g. "Timer Update". 
   
6. Add your code for the "Timer Update" event.
   
7. To set the interval, set the value of the field to the number of milliseconds to update, e.g. 2000 = 2 seconds.  Use a PUT statement to update the value.
   
8. To stop the Updated event, you can either use the Set State Protected, or Set State Inactive for the field.
   
9. Test your function.
   

Creating the Mobile App

This guide is assuming that you have already created a WebClient Mobile page already.

1. Installing cordova
   This can only be done after Node.js is installed.
   Open the command line on the machine:
   Execute the following Command:
   npm install –g cordova
   

   This is what it should like on PC when it has completed.
   

   This may require a sudo command on Unix/Linux environments.
   

2. Create project
   Using the command line navigate to a folder in which you want to create the project.
   Execute the following command:
   cordova create MyProject com.company.appname AppName
   
   Note: if you get an error, make sure cordova was added to your path variable.
   The project will be created within the ‘Project’ folder from the command above.
   
   
3. Add platform
   Now navigate into the project folder and execute the following command:
   cordova platform add android
   
   
   Note: this will fail if you do not have your android SDK set up.
   cordova platform add iOS
   
   Note: this will fail if you do not have xCode installed

   
   

   
   
4. Adding plugins
   Now all of the plugins must be added to make use of any of the phones functionality, like in app browser, geo-location, connectivity and notifications. All of the plugins can be found in Apache’s documentation for Cordova, here.
   
   To quickly and easily add the plugins to several platforms using the command line:
   Cordova plugin add cordova-plugin-pluginname
   
   Or
   Cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-pluginname.git
   
   
   
5. Configure app
   Now, in the directory you have created there is a folder called:
   
   www
   This is where all the work will be done.
   The index.html file is loaded up on the apps launch.
   On this page you can do anything you can do in a normal browser.
   When an app boots up, it sends a ‘deviceready’ command to the app, letting it know that it can start using resources.
   We must do this in javascript.
   
   In the js folder find index.js, it should have the following code:
   

   document.addEventListener('deviceready', onDeviceReady, false);
   

   function onDeviceReady() {
   

       // Cordova is now initialized. Have fun!
   

       console.log('Running cordova-' + cordova.platformId + '@' + cordova.version);
   

       document.getElementById('deviceready').classList.add('ready');
   

   }
   

   
   The event listener “deviceready” will calls the function onDeviceReady when the device sends the command.
   It is recommended that you do not to load the mobile page on the initial app opening, this can cause the app to fail if it takes too long to load. So a Simple landing page is recommended for the index.html.
   
   To call the app we will use the InAppBrowser plugin (please install it). This can be done in the index.js by the following javascript code:
   

   var app = {
   

       // Application Constructor
   

       initialize: function() {
   

           document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   

       },
   

    
   

       // deviceready Event Handler
   

       onDeviceReady: function() {
   

           this.receivedEvent('deviceready');
   

           window.open = cordova.InAppBrowser.open;
   

           window.open('Your URL',"_self","location=no,toolbar=no");       
   

       },
   

    
   

       // Update DOM on a Received Event
   

       receivedEvent: function(id) {
   

           var parentElement = document.getElementById(id);
   

           var listeningElement = parentElement.querySelector('.listening');
   

           var receivedElement = parentElement.querySelector('.received');
   

    
   

           listeningElement.setAttribute('style', 'display:none;');
   

           receivedElement.setAttribute('style', 'display:block;');
   

    
   

           console.log('Received Event: ' + id);
   

                  
   

       }
   

   };
   

    
   

   app.initialize();
   

   
   In index.html refer to the js file like the following:
   <script type="text/javascript" src="js/index.js"></script>
   
   After everything is configured, it is time to emulate the app!
   
   
6. Prepare the app
   On the command line once again, run the command:
   cordova prepare android
   
   or
   

   cordova prepare ios
   
   
   

   This create a project that can be opened in Eclipse or in Xcode which can be used to do further edits on the project, but it will only change the project within the platform that it is on. 
   

   At this point you can either emulate using Android or iOS.
   

   
   

   They are different processes, but both very straight forward.
   

Simulate and Publish for Android

Within the platform folder, there is an android folder, this folder contains the eclipse workspace for the project. 

Open Eclipse and select a workspace.

Import your project as an Android Project located at /MyProject/platform/android

Note: You need Eclipse and the Android plugin to simulate the app on an Android device.

Within the Android project assets contains all of the files that have been form the main project. To test the app, all that needs to be done is run the app as an Android application.

This will simulate the app running in an Android Emulator.

In Eclipse, select the Run Option, Create a new Android Application.

Browse for your Project, Name your Android Launcher then click Apply.

This will launch an Android Emulator, if you do not have one set up, it will prompt you to set one up.

Just Name the device, and Choose the device you would like emulate, note if you have an android phone you can emulate the app directly on your phone!

If everything has been completed correctly, the simulation will load the webpage. There may need to be some final tweaks to be done, this can be done within the files in assets.

After the app has been simulated and you are happy with the results, an apk file will be created within the bin folder of this workspace. This is the file that should be uploaded to the Google Play Store. 

The Google Play Store Requires 

• Icon at 512x512 in 32-bit PNG format. 

• Banner Style 1024 x 500 JPG or 24-bit PNG format

• Promo Graphic 180 x 120 JPG or 24-bit PNG format

• Minimum of 2 Screenshots 2 in Phone resolution, and an additional screenshot if you want to include 7inch and 10 inch tables. 

All of the screenshots can be taken in the emulators if you do not have the devices to take the screenshots yourself. 

Once you have all of that done, you can go to: https://play.google.com/apps/publish sign up for a Google Developer License and upload your app!

Simulate and Publish for iOS

Unfortunately to deliver an app to the iTunes store you are required to have a Mac OSX machine.

Within the Project that was created earlier on, there is a folder called ‘platforms’ within this folder there is a folder for each platform you added to the project. 

Within the project there should be a file called MyProject.xcodeproj, this is an xCode project file and will contain all of the information for the mobile app.

Open the file using xCode, there are still several compoents that need to be set up before the app can be simulated.  

Before you can simulate the app, you need to generate a Certificate, an App ID, add a device to your profile, and a Provisioning Profile. 

Login to: https://developer.apple.com/account/ios/certificate/

First you must create a Certificate:

If you have not already created a certificate to be used for iOS app delivery click on the + in the top Right Corner. 

Two need to be created in total, one for Development and one for Production to the iTunes App Store. 

The Apple website has detailed instructions on how to generate all of the files necessary to create the certificate.

Once you have created your certificate, you need to create your App ID. 

Click on App IDs on the left hand side of the certificate page. 

Click on the + Sign in the top corner to create a new App ID.

Name your app, and choose the Prefix, this will be related to your Developer ID.

The Bundle ID is the reverse Domain Name that you gave your project when creating it.

It can be found in xCode if you click on the project name, under General.

After you have created your App ID you must then add Devices that will be used for testing to your development account. 

Click Devices on the left side of the screen, and then the + on the right top corner of the page.

To add a Device, you just need the UDID, this can be obtained by opening iTunes, and looking at the device properties within iTunes. 

Once you have added the devices you will be using for testing you can create the Provisioning Profiles. 

Click Provisioning Profiles on the Left side of the screen, then the + on the Right side of the screen.

You will need to create two Provisioning Profiles, one for Development and one for Production.

Once the Provisioning Profile has been created, it will need to be saved to your computer. 

Drop it into your project in xCode to have it applied to your project, if you are using an actual device to test as well, you will need drag the provisioning profile onto the device in iTunes as well. 

Now that we have all of the details we need we can simulate our iOS app, but there are some additional configurations that are required for the app to be uploaded to the iTunes store.

First the Deployment info needs to be set: 

Deployment Target, is the version of iOS that the application will run in. 

Device can be Universal, iPhone or iPad, they have some very minor variations, mainly in if it will be able to be downloaded on both devices, and what icons you are required to provide for the app. 

You also are required to include all of the icons under the App Icons section:

Not all icons are required if you are only creating an iPhone app or an iPad app, but all are required if you are creating a universal app. 

After all of that is set up, you can finally simulate the app!

In the top left corner of xCode, there is should be a place with your apps name.

Clicking on that allows you to choose how you are going to simulate your app. 

Choose the device and a version of iOS to simulate the app in. 

Q: How to upgrade environment from java 8/9 to java 11

1. From the Project menu, uncheck the Build Automatically option.
   
2. To set the default Java version,
   
1. select Window/Preferences... from the menu. 
   
2. In the Preferences dialog, select Java/Installed JREs.  Press 'Add...', then Standard VMs,
   
3. browse for the Java 8/9 environment. 
   
4. Once selected, click the checkbox in the grid against the new Java version to make it the default JRE.
   
3. It's recommended that each Project in your workspace uses the workspace default JRE, so with each Project do the following:
   
1. Right Click, select 'Properties...' then 'Java Build Path'. 
   
2. On the 'Libraries' tab,  select the JRE System Library and press Edit. 
   
3. Make sure the "Workspace Default JRE" option is selected.
   
4. When finished with the projects, turn on the Automatic Build
   
1. From the Project menu, check the Build Automatically option.  Your workspace will rebuild.
   

Q: How to avoid the change of color of the cells of a grid when a cell of a row is selected?

A: Set the allowCellColor property to "Yes" in the Control Name of the grid: 
<ControlName>:MainArea:allowCellColor=Yes:default
Example: