Building new Servlets with the OpenZ-GUI-Engine
To create a new servlet in OpenZ you have to plan what you are going to do.
There are several options within the OpenZ-GUI-Engine to create a manual servlet.
I.E: fieldgroups, simple grids or.editable grids.
The following documentation show, how to create servlets containing fieldgroups and editable grids. The simple grid will be documented in the future.
Not every single option will be described.
Creating a manual servlet containing only fieldgroups
The simplest kind of a servlet is a servlet containing only fieldgroups. After planning what you need for the fervlet we can start generating the first fieldgroup for our servlet.
Creating the first fieldgroup
To create a fieldgroup you have to login into OpenZ as developer. Below
Application Dictionary || Reference || Reference you can create a new reference with the “Validation Type” : ‘Field Group’, defining the Name, the type and the amount of columns for the fieldgroup. Additional Information for the servlet can be entered in description and comment. Be sure the checkbox “Active” is checked. See the hardcopy below.
After creating the reference, we can start to fill our fieldgroup. Therefore go to
Application Dictionary || Reference || Reference >> Fieldgroup Columns
This menu provides the possibility to create elements in the fieldgroup.
Create a new entry
On the following hardcopy you can see all options to create a fieldgroup element.
The screenshot shows the important columns for a simple Textbox. The user will be able to fill this Textbox with data.
Explanation of the Options:
Line No: Simple autogenerated counted number of the Element, the Fieldgroup will be shown as the Elements were created on Default.
Name: Name of the Element
Leadingemptycols: Amount of Empty columns before the Element
colstotal: How many columns will be used for the Element.
Readonly: Is the Element Readonly? (Not able to change by the user on the Servlet)
Required: Has the user to fill the Element? Warning will be shown if it is not filled with data.
Maxlength: How many characters is this Element able to accept.
Reference: Provides connectable References (important for Dropdown Boxes)
Reference Url: Provides the ability to connect a popup for searching an Entry (Eg: “Product” for Productpopupsearch)
Template: What Type the Element should be. See Picture below.
Button: Button eg Process or Search or else
Date:Datebox (Textbox for Dates with calender button)
Emptyline: Inserts an empty line
Euro: Numberbox with Euro-formatting
Fieldgroup: visual seperations for the Template
Integer: Numberbox, Integer-formatted
Listsorter: Multiselection tool to transfer eg Employees to another group (Doesnt work properly yet)
Multiselector: Provides the option to select several entries of a list
Popupsearch: Offers the possibility to select an entry from an popup, also a textfield
Price: Numberbox, Price-formatted
Text: Simple Textbox
Noedit_Textbox: Textarea without Decorations
Image: Imageupload Possibility
Url: Textbox for Urls
Textarea_edit_simple: Textarea with simple Editor(can save data entered, nothing more yet)
Textarea_edit_adv: Textarea with advanced editor (doesnt work properly yet)
Listsortersimple: Prettier Listsorter (works)
Line break before this field: Element takes a new row in the servlet
Active: Element is active
Displayed: Element is displayed on default
Display Logic: Provides complex Display Properties of the Element (eg user-,role-specific)
Readonly-Logic: Provides Write or Read Options of an Element (similar to Display Logic)
Mandatory-Logic: Provides complex Options if the field has to be filled
Default-Value: The default value of this element
Style: additional decoration options for a field, eg the width can be forced, the bg-color changed…
Storedinsession: stores the element in session
Back to the creation of an Element.
As you can see on the Picture above, there is an textbox (barcode) which can be filled with max:100 characters and a colspan of 3 columns.
Creation of a Button as next Element. This settings above can be used in nearly all Fieldgroup-Element Templates. Other Templates Provide sometimes more Options, the Button Provides a new column called Button Class (CSS), these Textfield provides the option to define an Image for the Button eg process or search.
Repeat the process of creating Elements until your fieldgroup is complete.
You are able to use as many Elements as you want to use in a Fieldgroup. But consider the size of a default screen.
Creating the Servlet
Use Eclipse to create the Servlet. Below src > org.openz.pdc is a java File as a template to build a new Servlet containing only Fieldgroups, copy this in the path you need. And start to change it for your needs.
As you can see in the picture, you have to change only some lines in the source code.
The only things you might have to change are the template title in line 69 ( is now PDC Template) and the initialization of the Infobar and Fieldgroup. In line 76 you can define a standard Message, which is always shown for the User of the Servlet, just change the text between the brackets. If no text is needed just comment the line out. For the fieldgroups, it is important to change the title of the fieldgroups in line 79 and 81 to the name you created your custom Fieldgroup.
In line 84 you can define in which order the fieldgroups and or the infobar is shown on the servlet, adding further infobars or fieldgroups, later even grids is possible with an + eg strPdcInfobar+strAnythingelse+strAnotherfieldgroup etc.
Now our simple Servlet is ready for initializing in openz.
Initializing the Servlet in OpenZ
Login into openz as developer, Under Application Dictionary || Form || Form create a new Form with the Title of your Servlet. The java classname is the path to the created servlet in this case org.openz.pdc.PdcMainDialogue.
Define now the Formmapping in openz under
To access the form you have to use the name from the web.xml from your tomcat installation.
Show our new Servlet in OpenZ
Create a new Entry
under Application Dictionary || Menu || Menu
After translating and saving the Entry. Logout of openz ant compile the sources with ant compile.complete.
How to find the new Servlet in OpenZ
After a successful compiling run, Start openz again and login as a user fe service.
Under the name “Translated Name from the Menu” in our case PDC Hauptdialog you can access our new servlet.
And that’s the result.
Creating a Servlet with Fieldgroups and an editable Grid
Now we are able to create an additional Servlet, which contains both Fieldgroups and editable grids.
There are just a few steps to realize it after the first steps with Fieldgroups. Creating the editable grids will be the first task, followed by the creation of xsql-File and the servlet configuration.
Creating the Editable Grid
Login as developer. And create a new reference under
Application Dictionary || Reference || Reference
Name it as you want, select the validation type Editable Grid, define the amount of columns used per Line and add an ID (from the Database) referring to the Data you want to show within your grid.
Define the Editable Grid groups
Under Application Dictionary || Reference || Reference >> Editable Grid Groups you can define how many rows you want to show in your grid. There are several configuration options as name id column … Description follows after the picture.
Line No: Order of the Grid Groups
ID column name: ID of a db-column, if there are some grids to shof with different ids eg for different bpartners
Has select Line: checkbox to select the data
Has select all below: checkbox which checks all the lines below these referring to the bpartner fe
Has Even/Odd: Datalines are shown in blue and white
Has expander: a + Button to show/hide the data below these line
Header bold: Header is bold
Columns visible on init: Defines if the line is visible on init or not, refers to an expander.
Leadingemptycols: how many emptycolumns before the grid starts
Level: Which line you want to define
Active: Is this line active?
After configuring your groups you can start to fill the grid with columns.
Editable Grid columns
you can start to define the columns. In our example we create two lines one Header Line and one Data Line.
Create a new Column.
Editable Grid Columns provide nearly as many options as Fieldgroups
Line No.: Order of the columns
Name: A database column name or other (db column names provide the translations automatically)
Readonly: Is the Column Readonly
Displayed: Is it displayed
Active: is it active
Colspan: Defines the width of the field
Required: is the column required
issecondheader: is this column a header under the header – for grids with multiple header lines
Maxlength: Limits the Input of characters in the field
Header column: formats the column as a header ( bold font grey background)
Reference , Reference Url and Table: See Fieldgroups
Header: Headertext – can be header from db
Date: Datebox, formatted column
Euro: Numberbox Euro fromatted
Integer: Numberbox, Integer formatted
Labellink: provides a Link to another Servlet
PopupSearch: See Fieldgroups
Price: Numberbox Price formatted
Text: Textfield Inputfield
Textlabel: a Simple Label or data from the database
Headertext: Text of a Headercolumn if its not from the db
Splitgroupcolumn: Begins a new Line
Default Value: The Value of the column on default
Onchangeevent: provides the use of js to validate columns in the table
For our simple grid we use some header and some textlabels to show data from the database, the overview:
Now the First manually created Editable grid is almost ready to be shown in openz.
Copying and configuring the JavaServlet
There is a File called PdcTemplate.java in the sources, feel free to copy it into any path you need it.
There are just a few changes to make on the documented Javafile here a extract from the complete javaclass.
// Initialize Global Structues
String strPdcInfobar=""; //Area for further Information of the Servlet
Scripthelper script= new Scripthelper();
//initialize the grids
String strUpperGrid ="";
String strLowerGrid ="";
//initialize the Fieldgroups
//The Structure of the Servlet
//Html Output of the Servlet
String strOutput ="" ;
//Calling the Formhelper to create the Fieldgroups and Grids
Formhelper fh=new Formhelper();
//>Setting up the Fieldproviders - they provide Data for the Grids
//The upper Grid
//The lower grid
// Do the Business Logic HERE
// Loading the Data for the grid - requires valid xsql Files
//loading the upper grid with language parameter
upperGridData = PdcTemplateData.selectupper(this,vars.getLanguage());
//loading the lower grid with language parameter
lowerGridData = PdcTemplateData.selectlower(this,vars.getLanguage());
// Build the User Interface.
// Load Upper Grid from AD Enter here the name of the grid
EditableGrid uppergrid = new EditableGrid("PdcTemplateUpperGrid",vars,this);
//save the grid in variable
strUpperGrid=uppergrid.printGrid(this, vars, script, upperGridData);
//Declaration of the Infobar Text inside the Infobar
strPdcInfobar=fh.prepareInfobar(null, vars, script, "");
// Prepare the Fieldgroups from AD Name of the Fieldgroup
//Fieldgroups below are Default for PDC
strHeaderFG=fh.prepareFieldgroup(this, vars, script, "PdcHeaderFG", null,false);
strButtonsFG=fh.prepareFieldgroup(this, vars, script, "PdcButtonsFG", null,false);
strStatusFG=fh.prepareFieldgroup(this, vars, script, "PdcStatusFG", null,false);
// Loading the Lower Grid from AD Name of lower grid
EditableGrid lowergrid = new EditableGrid("PdcTemplateUpperGrid",vars,this);
//saving the lower grid in variable
strLowerGrid=lowergrid.printGrid(this, vars, script, lowerGridData);
// Load Form-Skeleton
//Defining the toolbar default no toolbar
String strToolbar=FormhelperData.getFormToolbar(this, this.getClass().getName());
//Loading the structure Name of the Servlet
strSkeleton = ConfigureFrameWindow.doConfigure(this,vars,"buttonSearch",null, "PDC Template",strToolbar,"NONE",null);
// Fit all the content together to html optional Infobar default loading Header Fieldgroup, Upper Grid, Button Fieldgroup, Lower Grid, Status Fieldgroup
strOutput=Replace.replace(strSkeleton, "@CONTENT@",strPdcInfobar+ strHeaderFG + strUpperGrid + strButtonsFG + strLowerGrid + strStatusFG);
//Generating html source
strOutput = script.doScript(strOutput, "",this,vars);
// Gerenrate response
Create the xsql-File
We have to create a xsql-File to provide the data from our database to the servlet. We create a File with the name of the javaclass underscore data.xsql in this case pdctemplate_data.xsql
Here the created file according to the editable grid:
<SqlClass name="PdcTemplateData" package="org.openz.controller">
<SqlMethod name="selectupper" type="preparedStatement" return="multiple">
Select zssm_workstepbom_v_id, zssi_getproductname(m_product_id,?) as product, '' as qty_plan, quantity, qtyreceived, qty_available, issuing_locator from zssm_workstepbom_v
<SqlMethod name="selectlower" type="preparedStatement" return="multiple">
Select zssm_workstepbom_v_id, zssi_getproductname(m_product_id,?) as product , qty_plan, qtyreceived, issuing_locator from zssm_workstepbom_v
<SqlMethod name="countRows" type="preparedStatement" return="String">
SELECT count(*) AS value FROM (
select zssm_workstepbom_v_id FROM zssm_workstepbom_v
<Parameter name="pgLimit" type="argument" optional="true" after="4=4"><![CDATA[ LIMIT ]]></Parameter>
We simply add a Language Parameter, to get the data out of the database with the correct translation and a default count function to get correct line numbers of the provided data.
It is Important to save the xsql-file in the same path as the java servlet!
Our Servlet has now to be included into openz, follow the instructions from the Fieldgroup-Servlet to know what you have to do.