Wikiadmin: Created page with "== Objective == The objective of this how-to is to show how you can create a new window from scratch. The how-to build..."

2018-10-14T13:28:18Z

Created page with "== Objective == The objective of this how-to is to show how you can create a new window from scratch. The how-to build..."

New page

== Objective ==

The objective of this how-to is to show how you can create a new [[Database_Model/org.openbravo.model.ad.ui/AD_Window |window]] from scratch. The how-to builds on top of two previous how-to's which explained [[How_To_Create_and_Package_a_Module |How to create a module]] and [[How_to_create_a_Table |How to create a table.]]

As a reminder the scenario this is based on:

Imagine we are developing an HR module and we need a window that will enable the user to input salaries of employees. We also need to track the employee's salary so history records need to be preserved. Each salary record needs to have a Valid From Date field that indicates when a particular salary came into being. The record belonging to a particular employee with the latest Valid From Date is the salary that is valid today. Note that employees are already inside the system contained in the C_BPARTNER database table and indicated by the C_BPARTNER.ISMEPLOYEE column. Therefore, we only need to create a database table that will hold the actual salaries.

== Module & Table ==

As mentioned in the objective this tutorial is based on two previous tutorials and assumes that the following objectives have been already completed:

* Creation of a new module with dbprefix ''HT''
* Creation + Registration in the AD of a new table ''ht_salary''

== Creating the New Window ==

Using the '''''System Administrator''''' role navigate to '''''Application Dictionary || Windows, Tabs and Fields'''''. Create a new record as indicated by the screenshot below:

[[Image:CreateWindow6_30.png|center]]

Main fields of this window are (for more information see the [[Database_Model/org.openbravo.model.ad.ui/AD_Window |AD_Window]] table description):

* '''Name''' Defines the name that Openbravo ERP uses to recognize this window.
* '''Description''' Gives a small description of the table.
* '''Help/Comments''' Defines the text that is displayed in Help window.
* '''Window Type''' Defines some user interface specifics for a window:
** ''Maintain'': is used for windows with few entries.
** ''Transaction'': for transactional windows.
*** The header tab's underlying table must contain the PROCESSED and UPDATED columns
*** by default this window filters out old (n days – '''''General Setup > Application > Session Preferences''''' window setting) and processed documents.
** ''Query Only'': for read-only windows that only enable viewing of data.

Save this record and move to '''''Tab''''' tab. Create a new record as shown below, creating the first tab to show the employee information:

[[Image:CreateWindow7_30.png|center]]

Main fields of this window are (for more information see the [[Database_Model/org.openbravo.model.ad.ui/AD_Tab |AD_Tab]] table description):

* '''Name''' Defines the name that Openbravo ERP uses to recognize this tab.
* '''Description''' Gives a small description of the table.
* '''Help/Comments''' Defines the text that is displayed in Help window.
* '''Table''' Specifies the table that the tab will show the data from.
* '''Table Level''' Defines the hierarchy of tabs, ''0'' being the highest level.
* '''UI Pattern''' This dropdown offers the following options:
** ''Standard'' - standard interface where multiple records can be added, viewed and edited
** ''Read Only'' - this option disables any editing/creating capabilities for any user within this tab
** ''Single Record'' - this option enforces a one-to-one relationship between a parent and a child tab, allowing the user to enter maximum one record in the tab
* '''HQL Where Clause''' By using this HQL filter, the user will never be able to see data that does not fit the criteria. When referring to properties of the entity shown in the tab then use the prefix '''e'''. In our case, we use this field to display only business partners that are our employees (using the ''employee'' property).
* '''SQL Where Clause''' Same like HQL Where Clause but using SQL syntax and used for filtering in ''classic windows''.

Save this record and then click the '''''Copy Tab Fields''''' button to copy fields from the existing main tab of the Business Partner window into our new one. Select the ''Business Partner-Business Partner'' ''Tab - Window'' combination and confirm the dialog with OK.

[[Image:CreateWindow7.5_30.png|center]]

Move to '''''Field''''' tab to see all the created fields.

[[Image:CreateWindow8_30.png|center]]

If required, changes to these fields could be made or new ones could be added manually. For not header tabs, it is very important not to remove the field that point the to the ID field of its parent tab, as it would made not possible to create records in this tab using the grid view. For more information see the [[Database_Model/org.openbravo.model.ad.ui/AD_Field |AD_Field]] table description. However, in our case we are happy with the way they are.

Now, go back to '''''Tab''''' tab and create a new record that will represent the child tab of the Employee tab where salaries will be managed:

[[Image:CreateWindow9_30.png|center]]

Most importantly, make sure you select:
* '''Table''' = ''HT_Salary''
* '''Tab Level''' = ''1''

For more information see the [[Database_Model/org.openbravo.model.ad.ui/AD_Tab|AD_Tab]] table description.

By clicking and confirming the '''Create Fields''' dialog, the application will automatically insert the columns of the selected table into the fields tab of the ''Salary'' one.

To arrange the columns according to common look and feel of other windows we now change a view field properties as can be seen in following screenshot.

* Hide field ''c_bpartner_id''
* Reorder fields (using sequence), to have ''isactive'' after all other fields
* Mark ''amount'' and ''isactive'' as '''Start in new line'''

[[Image:CreateWindow10_30.png|center]]

For Openbravo to create links (labels that appear blue) to table elements, the system needs to know which window represents the table where a certain element resides. In our case, the '''Employee Salary''' window is used to manage the content of the '''HT_Salary''' database table. Hence, all salary records need to be shown within that window. To indicate that go to the '''''Application Dictionary || Tables and Columns''''' window, find our HT_Salary table and set the '''Window''' as indicated below:

[[Image:CreateWindow11_30.png|center]]

== Creating the Menu Item ==

A menu item is required for the user to be able to call up the new window we developed. Using the System Administrator role navigate to '''''General Setup || Application || Menu''''' and create a new record:

[[Image:CreateWindow12_30.png|center]]

Main fields of this window are (for more information see the [[Database_Model/org.openbravo.model.ad.ui/AD_Menu |AD_Menu]] table description):

* '''Name''' Defines the name that Openbravo ERP uses to recognize this menu item.
* '''Description''' Gives a small description of the table.
* '''Summary level''' Defines a folder containing menu items (windows, processes, reports and so on).
* '''Action''' Defines the type of menu item.
* '''URL''' If ''Action'' is ''External link'' or ''Internal link'', defines the ''URL'' to be linked.
* '''Special Form''' If ''Action'' is ''Form'', defines the form to be linked.
* '''Process''' If ''Action'' is ''Process'', defines the process to be launched.
* '''Report''' If ''Action'' is ''Report'', defines the report to be linked.
* '''Window''' If ''Action'' is ''Window'', defines the window to be linked.

Save this record then click on ''Tree'' icon [[Image:CreateWindow13_30.png]].

Here you can drag and drop the new Employee Salary menu item to any of the other menu groups.

[[Image:CreateWindow14_30.png|center]]

== Compiling the Application with the New Window ==

Finally, the application needs to be recompiled in order to generate the new window's code and deploy it to Tomcat. If using Eclipse, use the '''eclipse.compile''' ant task, choose '''eclipse.compile''' as Ant Configuration and enter '"Employee Salary"' into the dialog that pops up. If manually compiling Openbravo, use the '''''ant compile.development -Dtab="Employee Salary"'''''

{{Fancydancy |
'''Important note''': once the compilation has finished, '''restart Apache Tomcat server'''. In Windows, it is best to stop the Tomcat before running the build task and the start it again afterwards since Windows locks certain files the the ''compile.development'' build task might not be able to copy over.}}

See more on [[Development_Build_Tasks#Build_tasks|Build Tasks]].

== The Result ==

Using the '''''F&B International Group Admin''''' role, select the link to the new window from the menu. Notice the new window and the two tabs hierarchically positioned one above another (one Employe can have one or more salary records):

[[Image:CreateWindow15_30.png|center]]

By double clicking Juan Lopez , details of this employee appear, however in a read-only mode (notice all fields are gray).

By clicking 'New in form' while having the ''Salary'' tab in focus a salary record can be created for this employee.

[[Image:CreateWindow16_30.png|center]]

You have now successfully created your own new window and seen how it came to life within Openbravo ERP. Congratulations!

[[Category:HowTo]]

How to Create a Window - Revision history

Wikiadmin: Created page with "== Objective == The objective of this how-to is to show how you can create a new window from scratch. The how-to build..."