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.

HtmlAreaDefinition

Html Area Definition

Compile the application and the output will be as follows.

Output

Output

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.

Reference Definition

Reference Definition

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 onblur event.
  • The same code can be extended to support scripts and also Data Operations.
Comments and suggestions are very much welcome.
Advertisements

About Pandeeswari Ramakrishnan
Applications Engineer, Openbravo

4 Responses to HTMLArea in Openbravo

  1. consulting says:

    You’ve got great insights about consulting, keep up the good work!

  2. Pingback: Reference Types in Openbravo « Fugo Consulting

  3. Pingback: Displaying Images in Openbravo « Fugo Consulting

  4. Pingback: Radio Button Reference for Openbravo « Fugo Consulting

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: