Skip to main content

HTMLArea in Openbravo


References are a key feature that one should be aware of in OpenbravoERP. References provides us options to change the way a field is displayed in the Application. There are many standard reference types like, Table, TableDir, Date, Integer, ImageBlob, etc. These are mainly bundled inside the WAD. In addition to the existing list of references listed here, one can add more references like RadioButton, FileDialog, etc. For more information on how to extend a base reference to your module, refer here.

HtmlArea Reference:
The use of this reference type  it to display the value based on the html code provided. It can be used in many scenarios. I have provided a basic few scenarios here.
  • To display different colour on the field based on the condition.
  • To display remote content in the field.
  • To embed HTML code available elsewhere.
  • Used when you want to have a link to any other openbravo window or process. This is can done by using <a href="link"/> where link is the url of that corresponding window or process.
  • For simple formatting like Font Color, Background Image, etc.
To achieve this, you can type a HTML code for that and save it in the default value of  the Column in 'Tables and Columns' so it at run type, it will display the colour. The definition should be as follows.

Compile the application and the output will be as follows.


Steps:
Add the following files in Openbravo-Source/src-wad/src/org/openbravo/wad/controls
1. WADHtml.html
<?xml version="1.0" encoding="UTF-8" ?> <!-- ********************************************************* @author Pandeeswari ********************************************************* --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> function DisplayHtml(/*String */ id) { var htmlValue = document.getElementById(id); var displayText = document.getElementById('yy'); displayText.innerHTML = htmlValue.value; htmlValue.style.display = 'none'; } </script> </head> <body> <FIELD_TMP> <div id="xx_inp"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table style="border:0px;border-collapse:collapse;"> <tr> <td style="padding-top: 0px;"> <textarea id="xx" required="false" maxlength='xx' name="inpxx" onkeyup="" onkeydown="changeToEditingMode('onkeydown');" onkeypress="changeToEditingMode('onkeypress');" oncut="changeToEditingMode('oncut');" onpaste="changeToEditingMode('onpaste');" oncontextmenu="changeToEditingMode('oncontextmenu');" onchange="validateTextArea(this.id);logChanges(this);xx();return true;" onfocus="DisplayHtml(this.id);"></textarea> <b id="yy" required="false" maxlength='xx' onkeyup="" onkeydown="" onkeypress="" oncut="" onpaste="" oncontextmenu="" onchange=""></b> </td> </tr> </table> <span style="display: none;" id="xxmissingSpan"> <table> <tr> <td><div /></td><td></td> </tr> <tr> <td colspan="2" class='missing'><div id="xxmissingSpanText" name="missingText">xx</div></td> </tr> </table> </span> </td> </tr> </table> </div> </FIELD_TMP> </body> </html>
2. WADHtml.java
/* ********************************************************* @author Pandeeswari ********************************************************* */ package org.openbravo.wad.controls; import java.io.IOException; import java.util.Properties; import java.util.Vector; import javax.servlet.ServletException; import org.openbravo.wad.EditionFieldsData; import org.openbravo.wad.FieldsData; import org.openbravo.wad.WadUtility; import org.openbravo.xmlEngine.XmlDocument; public class WADHtml extends WADControl { public WADHtml() { } public WADHtml(Properties prop) { setInfo(prop); initialize(); } public void initialize() { generateJSCode(); } private void generateJSCode() { addImport("ValidationTextArea", "../../../../../web/js/default/ValidationTextArea.js"); if (getData("IsMandatory").equals("Y")) { XmlDocument xmlDocument = getReportEngine().readXmlTemplate( "org/openbravo/wad/controls/WADMemoJSValidation").createXmlDocument(); xmlDocument.setParameter("columnNameInp", getData("ColumnNameInp")); setValidation(replaceHTML(xmlDocument.print())); } setCalloutJS(); } public String getType() { return "TextArea"; } public String editMode() { double rowLength = ((Integer.valueOf(getData("FieldLength")).intValue() * 20) / 4000); if (rowLength < 3.0) rowLength = 3.0; XmlDocument xmlDocument = getReportEngine().readXmlTemplate( "org/openbravo/wad/controls/WADHtml").createXmlDocument(); xmlDocument.setParameter("columnName", getData("ColumnName")); xmlDocument.setParameter("columnNameInp", getData("ColumnNameInp")); xmlDocument.setParameter("size", getData("CssSize")); xmlDocument.setParameter("maxlength", getData("FieldLength")); boolean isDisabled = (getData("IsReadOnly").equals("Y") || getData("IsReadOnlyTab").equals("Y") || getData( "IsUpdateable").equals("N")); xmlDocument.setParameter("disabled", (isDisabled ? "Y" : "N")); if (!isDisabled && getData("IsMandatory").equals("Y")) { xmlDocument.setParameter("required", "true"); xmlDocument.setParameter("requiredClass", " required"); } else { xmlDocument.setParameter("required", "false"); xmlDocument.setParameter("requiredClass", (isDisabled ? " readonly" : "")); } xmlDocument.setParameter("callout", getOnChangeCode()); return replaceHTML(xmlDocument.print()); } public String newMode() { double rowLength = ((Integer.valueOf(getData("FieldLength")).intValue() * 20) / 4000); if (rowLength < 3.0) rowLength = 3.0; XmlDocument xmlDocument = getReportEngine().readXmlTemplate( "org/openbravo/wad/controls/WADHtml").createXmlDocument(); xmlDocument.setParameter("columnName", getData("ColumnName")); xmlDocument.setParameter("columnNameInp", getData("ColumnNameInp")); xmlDocument.setParameter("size", getData("CssSize")); xmlDocument.setParameter("maxlength", getData("FieldLength")); boolean isDisabled = (getData("IsReadOnly").equals("Y") || getData("IsReadOnlyTab").equals("Y")); xmlDocument.setParameter("disabled", (isDisabled ? "Y" : "N")); if (!isDisabled && getData("IsMandatory").equals("Y")) { xmlDocument.setParameter("required", "true"); xmlDocument.setParameter("requiredClass", " required"); } else { xmlDocument.setParameter("required", "false"); xmlDocument.setParameter("requiredClass", (isDisabled ? " readonly" : "")); } xmlDocument.setParameter("callout", getOnChangeCode()); return replaceHTML(xmlDocument.print()); } public String toXml() { String[] discard = { "xx_PARAM", "xx_PARAMHIDDEN", "xx_HIDDEN" }; if (getData("IsDisplayed").equals("N")) { if (getData("IsParameter").equals("Y")) discard[1] = "xx"; else discard[2] = "xx"; } else { if (getData("IsParameter").equals("Y")) discard[0] = "xx"; } XmlDocument xmlDocument = getReportEngine().readXmlTemplate( "org/openbravo/wad/controls/WADMemoXML", discard).createXmlDocument(); xmlDocument.setParameter("columnName", getData("ColumnName")); return replaceHTML(xmlDocument.print()); } public String toJava() { return ""; } public void processTable(String strTab, Vector<Object> vecFields, Vector<Object> vecTables, Vector<Object> vecWhere, Vector<Object> vecOrder, Vector<Object> vecParameters, String tableName, Vector<Object> vecTableParameters, FieldsData field, Vector<String> vecFieldParameters, Vector<Object> vecCounters) throws ServletException, IOException { // Override this to do nothing } }
3. WADHtml.xml
<?xml version="1.0" encoding="UTF-8"?> <!-- ********************************************************* @author Pandeeswari ********************************************************* --> <REPORT> <template file="WADHtml.html"/> <PARAMETER id="paramChecked" name="checked" default="Y"/> <PARAMETER id="xx_inp" name="columnName" attribute="id" replace="xx"/> <PARAMETER id="xx" name="columnName" attribute="id"/> <PARAMETER id="xx" name="columnNameInp" attribute="name" replace="xx"/> <PARAMETER id="xx" name="size" attribute="class" replace="yy"/> <PARAMETER id="xx" name="callout" attribute="onchange" replace="xx();"/> <PARAMETER id="xx" name="maxlength" attribute="maxlength"/> <PARAMETER id="xx" name="disabled" boolean="readonly=true" withId="paramChecked"/> <PARAMETER id="xx" name="required" attribute="required"/> <PARAMETER id="xx" name="requiredClass" attribute="class" replace="xx"/> <PARAMETER id="xxmissingSpan" name="columnName" attribute="id" replace="xx"/> <PARAMETER id="xxmissingSpanText" name="columnName" attribute="id" replace="xx"/> <DISCARD id="discard"/> </REPORT>
Using the above code, create the reference as follows.


Specify the reference type as Html Area in columns for the desired column(It should be character varying in Database). Give the html code and compile. Then when you open the window in classic mode, and based upon the code provided in HTML, the value will be displayed. There are some points to be noted here.
  • This reference type works currently in Classic mode.
  • In the form view, the HTML output gets displayed, but in the Grid view, the HTML code gets displayed.
  • Only if the corresponding field is the First field in the page or the first focussed field, then HTML output gets displayed. Or else the HTML code alone appears and once the focus is changed from that field, the HTML output appears as I have written the function in the onblurevent.
  • The same code can be extended to support scripts and also Data Operations.
  • Modifying core code is not advised by Openbravo. Its better to go for a Modular approach and bundle the custom reference as a separate module. Since I have provided a prototype, I have modified core.
  • A proper implementation of the same with OB3 modules will be done soon and updated..:)
Comments and suggestions are very much welcome.

Comments

Popular posts from this blog

My 10 years in Application Development

It's been around 10 years since I started programming. May be a bit more, if I have to include my first attempts at C programming in school. But it would be a grave insult to call remembering ten lines of code and just replicating it to put a star on the screen. I also did a course on Visual basic, but it was more gimmicks that Application development. But it was truly in the year 2007 when I started my Master in Computer Applications that I found a new flare for developing applications. 
I was very late to computers in general and even when I joined my Masters, computers were not really accessible to me. But when I joined my Masters where one is actually expected to hone the skills which they already have, but in case it was were I was learning the skills, initially it was very difficult. I was not sure what computers had for me nor I had a natural flair for programming. But the thing about computers that attracted me was the visual medium it gave. Initially it was just a door t…

Changing Timezone in Postgresql, Ubuntu

Timezone and locale are integral concepts that one should be aware of when implementing a System. For example. if you create a database in PostgreSql, it will use the default System settings for the database. Lets say you have a server in UK and your client is US. If the client tries to retrieve the current date or time, it is going to show the UK time and not the US one.
Today I encountered a different issue in our client place where the Ubuntu timezone and PostgreSql timezone were showing a incorrect values. Instead of Indian Standard Time (IST) it was showing Pacific Daylight Time(PDT). These are the steps that I followed to change the timezone to IST in PostgreSql and Ubuntu.
Changing timezone in Ubuntu:
sudo dpkg-reconfigure tzdataYou will be prompted to choose the continent and then the area. Provided screen shots where we configure the location.
Use TAB key to navigate to the OK button and then press Enter.

The changes will get reflected immediately. To check it you can open a n…

கிறுக்கனின் கிறுக்கல்கள் - அழுகையின் சிறப்பு

அழுகை என்பதை வெறுத்தவன் நான்... என்னை ஒரு நாள் பிரிந்திருக்க முடியாமல் , கைப்பேசியில் நீ சிந்திய உன் கண்ணீர் ஓசை என் காதில் கேட்கும் வரை...

பின்குறிப்பு: கிறுக்கனின் கிறுக்கல்கள் எங்கிருந்தோ தழுவப்பட்டது போல் தோன்றினால் கிறுக்கன் ( நான் உண்மையை ஏற்றுக்கொள்பவன்..:) ) பொறுப்பல்ல. கிறுக்கனின் கிறுக்கல்களில் வரும் கிறுக்கல்கள் யாவும் என் சிறய மூளையில் உதித்ததே ஆகும்.  Inspirations could have been drawn from somewhere else, but its the execution that counts....Isn't it ?