View source for ERP/2.50/Developers Guide/Concepts/UI/Look and feel

{{Languages | Customizing_Openbravo_ERP_look_and_feel}}
{{RatingArticle}}
{{Hierarchy_header}} 

==Introduction==

This document describes different frequently used html components with its possible customizations.

==Main Backbone==

It is the frame which content elements not included in the form. It is used in non popup windows

[[Image:DG-250-Backbone-Main.png]]

===HTML Code===

<source lang="html4strict"><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="onLoadDo();" onresize="onResizeDo();">
<form id="form" method="post" action="AAAAAAAA" name="frmMain">
  <input type="hidden" name="Command"></input>
  <input type="hidden" name="inpLastFieldChanged" value=""></input>
  <table height="100%" border="0" cellpadding="0" cellspacing="0" id="main">
    <tr>
      <td valign="top" id="tdleftTabs"></td>
      <td valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_ContentPane_Left">
          <tr><td class="Main_NavBar_bg_left" id="tdleftSeparator"></td></tr>
          <tr><td class="Main_ToolBar_bg_left" valign="top"></td></tr>
          <tr><td class="Main_Client_bg_left"></td></tr>
          <tr><td class="Main_Bottom_bg_left"></td></tr>
        </table>
      </td>
      <td valign="top">
        <div class="Main_ContentPane_NavBar" id="tdtopButtons"></div>
        <div class="Main_ContentPane_ToolBar" id="paramToolBar"></div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_ContentPane_TabPane" id="tdtopTabs">
          <tr id="paramParentTabContainer"></tr>
          <tr id="paramMainTabContainer"></tr>
          <tr id="paramChildTabContainer"></tr>
        </table>
        <div class="Main_ContentPane_Client" style="overflow: auto; display: none;" id="client">
          <!-- Here should go the Form Content -->
        </div>
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Menu_ContentPane_Bottom" id="tdbottomSeparator">
          <tr>
            <td class="Main_Bottom_bg"><img src="../../../../../web/images/blank.gif" border="0"></td>
          </tr>
        </table></td>
      <td valign="top">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="Main_ContentPane_Right" id="tdrightSeparator">
          <tr><td class="Main_NavBar_bg_right"></td></tr>
          <tr><td class="Main_ToolBar_bg_right" valign="top"></td></tr>
          <tr><td class="Main_Client_bg_right"></td></tr>
          <tr><td class="Main_Bottom_bg_right"></td></tr>
        </table>
      </td>
    </tr>
  </table>
</form>
</body></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| action
| Servlet to submit the form content
|
|}
 
All the name, class, style and id should be called as they are in the previous template since they are needed to perform javascript calculations.
Also the following parameters need a reference in XML Engine to add the needed html inside: paramToolBar, tdleftTabs, paramParentTabContainer, paramMainTabContainer, paramChildTabContainer, tdtopButtons

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| utils.js
| Yes
| Internal
| Several functions
| 
|-
| shortcuts.js
| Yes
| utils.js
| Several functions
| 
|-
| windowKeyboard.js
| Yes
| Internal
| Several functions
| 
|}

==Popup Backbone==

It is the frame which content elements not included in the form. It is used just in popup windows

[[Image:DG-250-Backbone-Popup.png]]

===HTML Code===

<source lang="html4strict"><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"  onload="onLoadDo();" onunload="onUnloadDo();">
  <form id="form" method="post" action="AAAAAAAA" name="frmMain">
    <input type="hidden" name="Command"></input>
    <input type="hidden" name="IsPopUpCall" value="1"></input>
    <input type="hidden" name="inpLastFieldChanged"></input>
    <div class="Popup_ContentPane_CircleLogo">
      <div class="Popup_WindowLogo">
        <img class="Popup_WindowLogo_Icon BBBBBBBB" src="../../../../../web/images/blank.gif" border=0/></img>
      </div>
    </div>
    <table cellspacing="0" cellpadding="0" width="100%">
      <tr>
        <td>
          <table cellspacing="0" cellpadding="0" class="Popup_ContentPane_NavBar">
            <tr class="Popup_NavBar_bg"><td></td>
              <td class="Popup_NavBar_separator_cell"></td>
              <td class="Popup_NavBar_bg_logo_left"></td>
              <td class="Popup_NavBar_bg_logo" width="1" onclick="openNewBrowser('http://www.openbravo.com', 'Openbravo');return false;"><img src="../../../../../web/images/blank.gif" alt="Openbravo" title="Openbravo" border="0" id="openbravoLogo" class="Popup_NavBar_logo" /></td>
              <td class="Popup_NavBar_bg_logo_right"></td>
              <td class="Popup_NavBar_Popup_title_cell"><span>CCCCCCCC</span></td>
              <td class="Popup_NavBar_separator_cell"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table cellspacing="0" cellpadding="0" class="Popup_ContentPane_SeparatorBar">
            <tr>
              <td class="Popup_SeparatorBar_bg"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table cellspacing="0" cellpadding="0" class="Popup_ContentPane_InfoBar">
            <tr>
              <td class="Popup_InfoBar_Icon_cell"><img src="../../../../../web/images/blank.gif" border="0" class="Popup_InfoBar_Icon_info" /></td>
              <td class="Popup_InfoBar_text_table">
                <table>
                  <tr>
                    <td class="Popup_InfoBar_text">DDDDDDDD</td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <div class="Popup_ContentPane_Client" style="overflow: auto;" id="client">
            <!-- Here should go the Form Content -->
          </div>
        </td>
      </tr>
    </table>
  </form>
</body></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| action
| Servlet to submit the form content
|
|-
| BBBBBBBB
| No
| class
| Displayed window logo icon
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Popup_WindowLogo_Icon_process
| [[Image:DG-250-Backbone-Popup-iconProcess.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_searchFiltered
| [[Image:DG-250-Backbone-Popup-iconSearchFilter.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_info
| [[Image:DG-250-Backbone-Popup-iconInfo.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_password
| [[Image:DG-250-Backbone-Popup-iconPassword.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_debtPayment
| [[Image:DG-250-Backbone-Popup-iconDebtPayment.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_relatedInfo
| [[Image:DG-250-Backbone-Popup-iconRelatedInfo.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_help
| [[Image:DG-250-Backbone-Popup-iconHelp.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_account
| [[Image:DG-250-Backbone-Popup-iconAccount.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_attachment
| [[Image:DG-250-Backbone-Popup-iconAttachment.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_attribute
| [[Image:DG-250-Backbone-Popup-iconAttribute.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_businessPartner
| [[Image:DG-250-Backbone-Popup-iconBusinessPartner.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_cashJornal
| [[Image:DG-250-Backbone-Popup-iconCashJornal.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_image
| [[Image:DG-250-Backbone-Popup-iconImage.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_invoice
| [[Image:DG-250-Backbone-Popup-iconInvoice.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_invoiceLine
| [[Image:DG-250-Backbone-Popup-iconInvoiceLine.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_location
| [[Image:DG-250-Backbone-Popup-iconLocation.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_locator
| [[Image:DG-250-Backbone-Popup-iconLocator.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_okCancel
| [[Image:DG-250-Backbone-Popup-iconOkCancel.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_product
| [[Image:DG-250-Backbone-Popup-iconProduct.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_productComplete
| [[Image:DG-250-Backbone-Popup-iconProductComplete.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_project
| [[Image:DG-250-Backbone-Popup-iconProject.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_request
| [[Image:DG-250-Backbone-Popup-iconRequest.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_salesOrder
| [[Image:DG-250-Backbone-Popup-iconSalesOrder.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_salesOrderLine
| [[Image:DG-250-Backbone-Popup-iconSalesOrderLine.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_shipment
| [[Image:DG-250-Backbone-Popup-iconShipment.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_shipmentReceipt
| [[Image:DG-250-Backbone-Popup-iconShipmentReceipt.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_task
| [[Image:DG-250-Backbone-Popup-iconTask.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_userContact
| [[Image:DG-250-Backbone-Popup-iconUserContact.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_workflow
| [[Image:DG-250-Backbone-Popup-iconWorkflow.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_organizeMenu
| [[Image:DG-250-Backbone-Popup-iconOrganizeMenu.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_error
| [[Image:DG-250-Backbone-Popup-iconError.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_heartbeat
| [[Image:DG-250-Backbone-Popup-iconHeartbeat.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_registration
| [[Image:DG-250-Backbone-Popup-iconRegistration.png]]
|-
| style="font-weight: bold" | Popup_WindowLogo_Icon_moduleInstall
| [[Image:DG-250-Backbone-Popup-iconModuleInstall.png]]
|}
|-
| CCCCCCCC
| No
| span
| Popup title
|
|-
| DDDDDDDD
| No
| td
| Popup information text
|
|}
 
All the name, class, style and id should be called as they are in the previous template since they are needed to perform javascript calculations.
 

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| utils.js
| Yes
| Internal
| Several functions
| 
|-
| shortcuts.js
| Yes
| utils.js
| Several functions
| 
|-
| windowKeyboard.js
| Yes
| Internal
| Several functions
| 
|}

==Form content==

It is the table in which is going to be visualized the content of the form 

In main windows it is defined as

<source lang="html4strict"><table width="100%" cellspacing="0" cellpadding="0" border="0" class="Main_Client_TableEdition">
  <tr>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
  </tr>
  ... <!-- Here goes each tr with form contents -->
</table></source>

In popup windows it is defined as

<source lang="html4strict"><table width="100%" cellspacing="0" cellpadding="0" border="0" class="Popup_Client_TablePopup">
  <tr>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
    <td class="TableEdition_OneCell_width"></td>
  </tr>
  ... <!-- Here goes each tr with form contents -->
</table></source>

So in main windows it has 6 cells per row and in popup windows it has 4 cells per row. Each <td> could contain one of the form elements described in nexts chapters.

There is also the posibility of join several cells using the colspan property to allow larger form elements (if they are allowed to increase their size).

Each cell (<td>) should have a different class depending of the form element that it is going to content. These classes are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Form element
! td class
|-
| Label
| TitleCell
|-
| Label Link
| TitleCell
|-
| Button
| Button_CenterAlign_ContentCell or Button_LeftAlign_ContentCell or Button_RightAlign_ContentCell
|-
| Checkbox
| Radio_Check_ContentCell
|-
| Radio Button
| Radio_Check_ContentCell
|-
| List
| List_ContentCell
|-
| Dimensional
| *The full <tr> is described in its chapter
|-
| Field Button - Validation Date Box
| TextBox_ContentCell
|-
| Field Button - Selector
| TextBox_ContentCell
|-
| Combo Box
| Combo_ContentCell
|-
| Textbox
| TextBox_ContentCell
|-
| Real Number Textbox
| TextBox_ContentCell
|}

==Label==

It is the description/name text which could preceed a form element. Its visualization is something like:

[[Image:DG-250-Label.png]]

===HTML Code===

<source lang="html4strict"><span class="LabelText">AAAAAAAA</span></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| span text
| Text of the label
| 
|}
 

==Label Link==

It is the description/name text which could preceed a form element. It links to the form related which its use. Its visualization is something like:

[[Image:DG-250-LabelLink.png]]

===HTML Code===

<source lang="html4strict"><span class="LabelText">
  <a class="LabelLink" href="#" onclick="AAAAAAAA">
    <span>BBBBBBBB</span>
  </a>
</span></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| onclick
| onclick action of the link
| 
|-
| BBBBBBBB
| Yes
| span text
| Text of the label
| 
|}
 

===Actions===

The different label link actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| On click
| Executes the link
|
|}
 

==Button==

[[Image:DG-250-Button-Normal.png]]

===HTML Code===

<source lang="html4strict"><div>
  <button type="button" 
    id="AAAAAAAA" 
    class="ButtonLink" 
    onclick="BBBBBBBB"
    onfocus="buttonEvent('onfocus', this); window.status='CCCCCCCC'; return true;" 
    onblur="buttonEvent('onblur', this);" 
    onkeyup="buttonEvent('onkeyup', this);" 
    onkeydown="buttonEvent('onkeydown', this);" 
    onkeypress="buttonEvent('onkeypress', this);" 
    onmouseup="buttonEvent('onmouseup', this);" 
    onmousedown="buttonEvent('onmousedown', this);" 
    onmouseover="buttonEvent('onmouseover', this); window.status='CCCCCCCC'; return true;" 
    onmouseout="buttonEvent('onmouseout', this);">
    <table class="Button">
      <tr>
        <td class="Button_left"><img class="Button_Icon DDDDDDDD" alt="EEEEEEEE" title="EEEEEEEE" src="../../../../../web/images/blank.gif" border="0"/></td>
        <td class="Button_text FFFFFFFF">GGGGGGGG</td>
        <td class="Button_right"></td>
      </tr>
    </table>
  </button>
</div></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| No
| id
| Identify the button for any purpose
| 
|-
| BBBBBBBB
| Yes
| onclick
| Action executed when button is pressed
| 
|-
| CCCCCCCC
| Yes
| window.status
| Description displayed in the browser status bar
| 
|-
| DDDDDDDD
| No
| class
| Displayed button icon
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Button_Icon_process
| [[Image:DG-250-Button-iconProcess.png]]
|-
| style="font-weight: bold" | Button_Icon_back
| [[Image:DG-250-Button-iconBack.png]]
|-
| style="font-weight: bold" | Button_Icon_next
| [[Image:DG-250-Button-iconNext.png]]
|-
| style="font-weight: bold" | Button_Icon_ok
| [[Image:DG-250-Button-iconOk.png]]
|-
| style="font-weight: bold" | Button_Icon_cancel
| [[Image:DG-250-Button-iconCancel.png]]
|-
| style="font-weight: bold" | Button_Icon_clear
| [[Image:DG-250-Button-iconClear.png]]
|-
| style="font-weight: bold" | Button_Icon_pdf
| [[Image:DG-250-Button-iconPdf.png]]
|-
| style="font-weight: bold" | Button_Icon_html
| [[Image:DG-250-Button-iconHtml.png]]
|-
| style="font-weight: bold" | Button_Icon_search
| [[Image:DG-250-Button-iconSearch.png]]
|-
| style="font-weight: bold" | Button_Icon_scanUpdates
| [[Image:DG-250-Button-iconScanUpdates.png]]
|-
| style="font-weight: bold" | Button_Icon_save
| [[Image:DG-250-Button-iconSave.png]]
|-
| style="font-weight: bold" | Button_Icon_download
| [[Image:DG-250-Button-iconDownload.png]]
|-
| style="font-weight: bold" | Button_Icon_edit
| [[Image:DG-250-Button-iconEdit.png]]
|-
| style="font-weight: bold" | Button_Icon_erase
| [[Image:DG-250-Button-iconErase.png]]
|-
| style="font-weight: bold" | Button_Icon_password
| [[Image:DG-250-Button-iconPassword.png]]
|-
| style="font-weight: bold" | Button_Icon_contract
| [[Image:DG-250-Button-iconContract.png]]
|-
| style="font-weight: bold" | Button_Icon_expand
| [[Image:DG-250-Button-iconExpand.png]]
|-
| style="font-weight: bold" | Button_Icon_lock
| [[Image:DG-250-Button-iconLock.png]]
|-
| style="font-weight: bold" | Button_Icon_unlock
| [[Image:DG-250-Button-iconUnlock.png]]
|}
|-
| EEEEEEEE
| Yes
| alt / title
| Description displayed on mouse over and if image not available
| 
|-
| FFFFFFFF
| No
| class
| Fixed width of the button
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Button_width
| it sets a fixed width of 50px
|}
|-
| GGGGGGGG
| Yes
| td - content
| Button text
| 
|}
 

===Status===

The different button status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-Button-Normal.png]]
|-
| Default action
| [[Image:DG-250-Button-Default.png]]
|-
| Focus
| [[Image:DG-250-Button-Focus.png]]
|-
| Hover
| [[Image:DG-250-Button-Hover.png]]
|-
| Press
| [[Image:DG-250-Button-Press.png]]
|-
| Inactive
| [[Image:DG-250-Button-Inactive.png]]
|}
 

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| utils.js
| Yes
| Internal
| buttonEvent(event, obj)
| It is embedded in the html button code to set the different button status
|-
| windowKeyboard.js
| Yes
| buttonEvent(event, obj)
| setWindowElementFocus(obj)
| It set the focus in the element when clicked
|-
| rowspan="2" | appStatus.js
| rowspan="2" | No
| rowspan="2" | External
| enableButton(id)
| Can be invoked, passing the button id as argument, to enable a button. If exists, this import is required
|-
| disableButton(id)
| Can be invoked, passing the button id as argument, to disable a button. If exists, this import is required
|}
 

==Checkbox==

[[Image:DG-250-Checkbox-Normal-C.png]]

===HTML Code===

<source lang="html4strict"><span class="Checkbox_container_NOT_Focused"><input type="checkbox" name="AAAAAAAA" value="BBBBBBBB" CCCCCCCC id="DDDDDDDD" onclick="EEEEEEEE"></input></span></source>
 

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| name
| Name of the checkbox
| 
|-
| BBBBBBBB
| Yes
| value
| Value of the checkbox
| 
|-
| CCCCCCCC
| No
| checked
| Status of the radio button
| It should be "checked" if the checkbox should appears as checked. If not just ignore this parameter
|-
| DDDDDDDD
| Yes
| id
| Id of the checkbox
| 
|-
| EEEEEEEE
| No
| onclick
| Optional to perform an action after click
| 
|}
 

===Status===

The different checkbox status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal-Unchecked
| [[Image:DG-250-Checkbox-Normal-UnC.png]]
|-
| Focus-Unchecked
| [[Image:DG-250-Checkbox-Focus-UnC.png]]
|-
| Normal-Checked
| [[Image:DG-250-Checkbox-Normal-C.png]]
|-
| Focus-Checked
| [[Image:DG-250-Checkbox-Focus-C.png]]
|}
 

==Radio Button==

[[Image:DG-250-RadioButton-Normal-C.png]]

===HTML Code===

<source lang="html4strict"><span class="Radio_container_NOT_Focused"><input type="radio" name="AAAAAAAA" value="BBBBBBBB" CCCCCCCC id="DDDDDDDD" onclick="EEEEEEEE" class="RadioButton"></input></span></source>
 

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| name
| Name of the radio button. All related radio buttons should have the same name
| 
|-
| BBBBBBBB
| Yes
| value
| Value of the radio button
| 
|-
| CCCCCCCC
| No
| checked
| Status of the radio button
| It should be "checked" if the radio button should appears as checked. If not just ignore this parameter
|-
| DDDDDDDD
| Yes
| id
| Id of the radio button
| 
|-
| EEEEEEEE
| No
| onclick
| Optional to perform an action after click
| 
|}
 

===Status===

The different radio button status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal-Unchecked
| [[Image:DG-250-RadioButton-Normal-UnC.png]]
|-
| Focus-Unchecked
| [[Image:DG-250-RadioButton-Focus-UnC.png]]
|-
| Normal-Checked
| [[Image:DG-250-RadioButton-Normal-C.png]]
|-
| Focus-Checked
| [[Image:DG-250-RadioButton-Focus-C.png]]
|}

==List==

[[Image:DG-250-List.png]]

===HTML Code===

<source lang="html4strict"><table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <select class="List_width AAAAAAAA" name="BBBBBBBB" multiple="" id="CCCCCCCC"></select>
    </td>
    <td class="List_Button_ContentCell">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a class="List_Button_TopLink" href="#"
              onclick="DDDDDDDD"
              onfocus="setWindowElementFocus(this); window.status='Add'; return true;"
              onblur="window.status=''; return true;"
              onkeypress="this.className='List_Button_TopLink_active'; return true;"
              onkeyup="this.className='List_Button_TopLink_focus'; return true;">
              <table class="List_Button_Top"
                onmousedown="this.className='List_Button_Top_active'; return true;"
                onmouseup="this.className='List_Button_Top'; return true;"
                onmouseover="this.className='List_Button_Top_hover'; window.status='Add'; return true;"
                onmouseout="this.className='List_Button_Top'; window.status=''; return true;">
                <tr>
                  <td class="List_Button_Top_bg">
                    <img class="List_Button_Icon List_Button_Icon_Add" src="../../../../../web/images/blank.gif" alt="Add" title="Add"/>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
        <tr>
          <td class="List_Button_Separator">
          </td>
        </tr>
        <tr>
          <td>
            <a class="List_Button_MiddleLink" href="#"
              onclick="clearSelectedElements(document.frmMain.BBBBBBBB);return false;"
              onfocus="setWindowElementFocus(this); window.status='Delete selected elements'; return true;"
              onblur="window.status=''; return true;"
              onkeypress="this.className='List_Button_MiddleLink_active'; return true;"
              onkeyup="this.className='List_Button_MiddleLink_focus'; return true;">
              <table class="List_Button_Middle"
                onmousedown="this.className='List_Button_Middle_active'; return true;"
                onmouseup="this.className='List_Button_Middle'; return true;"
                onmouseover="this.className='List_Button_Middle_hover'; window.status='Delete selected elements'; return true;"
                onmouseout="this.className='List_Button_Middle'; window.status=''; return true;">
                <tr>
                  <td class="List_Button_Middle_bg">
                    <img class="List_Button_Icon List_Button_Icon_Delete" src="../../../../../web/images/blank.gif" alt="Delete selected elements" title="Delete selected elements"/>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
        <tr>
          <td class="List_Button_Separator">
          </td>
        </tr>
        <tr>
          <td>
            <a class="List_Button_BottomLink" href="#"
              onclick="clearList(document.frmMain.BBBBBBBB);return false;"
              onfocus="setWindowElementFocus(this); window.status='Delete all elements'; return true;"
              onblur="window.status=''; return true;"
              onkeypress="this.className='List_Button_BottomLink_active'; return true;"
              onkeyup="this.className='List_Button_BottomLink_focus'; return true;">
              <table class="List_Button_Bottom"
                onmousedown="this.className='List_Button_Bottom_active'; return true;"
                onmouseup="this.className='List_Button_Bottom'; return true;"
                onmouseover="this.className='List_Button_Bottom_hover'; window.status='Delete all elements'; return true;"
                onmouseout="this.className='List_Button_Bottom'; window.status=''; return true;">
                <tr>
                  <td class="List_Button_Bottom_bg">
                    <img class="List_Button_Icon List_Button_Icon_DeleteAll" src="../../../../../web/images/blank.gif" alt="Delete all elements" title="Delete all elements"/>
                  </td>
                </tr>
              </table>
            </a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| No
| class
| 
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | List_height
| it sets a fixed height of 70px
|}
|-
| BBBBBBBB
| Yes
| name
| Name of the list element. Used several times to refer the list element
| 
|-
| CCCCCCCC
| No
| id
| Id of the list element.
| 
|-
| DDDDDDDD
| Yes
| onclick
| Action executed to add elements to the list
| There is more information at #chapter 3.11.2#
|}
 

===Actions===

The different button actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| Add
| Add an element to the list
| [[Image:DG-250-List-iconAdd.png]]
|-
| Delete
| Remove the selected element of the list
| [[Image:DG-250-List-iconDelete.png]]
|-
| Delete All
| Remove all the elements of the list
| [[Image:DG-250-List-iconDeleteAll.png]]
|}
 

===Status===

The different button status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-List-Normal.png]]
|-
| Focus
| [[Image:DG-250-List-Focus.png]]
|-
| Hover
| [[Image:DG-250-List-Hover.png]]
|-
| Press
| [[Image:DG-250-List-Press.png]]
|}
 

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| windowKeyboard.js
| Yes
| Internal
| setWindowElementFocus(obj)
| It is embedded in the html button code to set the focus in the element when clicked
|-
| search.js
| No
| Internal
| openMultiSearch(strTop, strLeft, strSelectorName, strWindowName, validate, strForm, strItem)
| It could be embedded in the html button in the DDDDDDDD onclick parameter. If exists, this import is required
|}

===Additional Information===
The multi-select list shown above can require extra java script code to be correctly posted to the server when the form is submitted. The reason is that the user interface shows the selected elements but internally in the html-dom tree the values are not selected but only displayed. So just before the form is submitted the values have to be changed to selected. The following code takes care of this:

<source lang="javascript">
var frm = document.FFFFFFFFF;
markCheckedAllElements(frm.BBBBBBBB);
</source>

This code has to be called when the form is submitted. The FFFFFFFFF is the name of the form and BBBBBBBB is the name of the select HTML element above.

This code requires the javascript library:

utils.js

this javascript library contains the markCheckedAllElements function.

==Dimensional==

[[Image:DG-250-Dimensional.png]]

===HTML Code===

<source lang="html4strict"><tr>
  <td class="TitleCell"></td>
  <td class="Dimension_ContentCell" colspan="2">
    <select name="AAAAAAAA" multiple="" id="BBBBBBBB" class="Dimension_LeftSelect_width CCCCCCCC">
      <option value="DDDDDDDD">EEEEEEEE</option>  <!-- This line should be repeated as many elements there are -->
    </select>
  </td>
  <td class="DimensionLRArrows_ContentCell">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <a class="Dimension_LeftRight_Button_TopLink" href="#"
            onclick="addList(document.frmMain.AAAAAAAA, document.frmMain.FFFFFFFF);return false;"
            onfocus="setWindowElementFocus(this); window.status='Include'; return true;"
            onblur="window.status=''; return true;"
            onkeypress="this.className='Dimension_LeftRight_Button_TopLink_active'; return true;"
            onkeyup="this.className='Dimension_LeftRight_Button_TopLink_focus'; return true;">
            <table class="Dimension_LeftRight_Button_Top"
              onmousedown="this.className='Dimension_LeftRight_Button_Top_active'; return true;"
              onmouseup="this.className='Dimension_LeftRight_Button_Top'; return true;"
              onmouseover="this.className='Dimension_LeftRight_Button_Top_hover'; window.status='Include'; return true;"
              onmouseout="this.className='Dimension_LeftRight_Button_Top'; window.status=''; return true;">
              <tr>
                <td class="Dimension_LeftRight_Button_Top_bg">
                  <img class="Dimension_LeftRight_Button_Icon Dimension_LeftRight_Button_Icon_Include" src="../../../../../web/images/blank.gif" alt="Include" title="Include"/>
                </td>
              </tr>
            </table>
          </a>
        </td>
      </tr>
      <tr>
        <td class="Dimension_LeftRight_Button_Separator">
        </td>
      </tr>
      <tr>
        <td>
          <a class="Dimension_LeftRight_Button_BottomLink" href="#"
            onclick="addList(document.frmMain.FFFFFFFF, document.frmMain.AAAAAAAA);return false;"
            onfocus="setWindowElementFocus(this); window.status='Exclude'; return true;"
            onblur="this.className='Dimension_LeftRight_Button_BottomLink'; window.status=''; return true;"
            onkeypress="this.className='Dimension_LeftRight_Button_BottomLink_active'; return true;"
            onkeyup="this.className='Dimension_LeftRight_Button_BottomLink_focus'; return true;">
            <table class="Dimension_LeftRight_Button_Bottom"
              onmousedown="this.className='Dimension_LeftRight_Button_Bottom_active'; return true;"
              onmouseup="this.className='Dimension_LeftRight_Button_Bottom'; return true;"
              onmouseover="this.className='Dimension_LeftRight_Button_Bottom_hover'; window.status='Exclude'; return true;"
              onmouseout="this.className='Dimension_LeftRight_Button_Bottom'; window.status=''; return true;">
              <tr>
                <td class="Dimension_LeftRight_Button_Bottom_bg">
                  <img class="Dimension_LeftRight_Button_Icon Dimension_LeftRight_Button_Icon_Exclude" src="../../../../../web/images/blank.gif" alt="Exclude" title="Exclude"/>
                </td>
              </tr>
            </table>
          </a>
        </td>
      </tr>
    </table>
  </td>
  <td class="Dimension_ContentCell" colspan="2">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
          <select name="FFFFFFFF" multiple="" id="GGGGGGGG" class="Dimension_RightSelect_width HHHHHHHH">
            <option value="IIIIIIII">JJJJJJJJ</option>  <!-- This line should be repeated as many elements there are -->
          </select>
        </td>
        <td class="DimensionUDArrows_ContentCell">
          <table border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>
                <a class="Dimension_UpDown_Button_TopLink" href="#"
                  onclick="moveElementInList(document.frmMain.FFFFFFFF, -1);return false;"
                  onfocus="setWindowElementFocus(this); window.status='Go up'; return true;"
                  onblur="window.status=''; return true;"
                  onkeypress="this.className='Dimension_UpDown_Button_TopLink_active'; return true;"
                  onkeyup="this.className='Dimension_UpDown_Button_TopLink_focus'; return true;">
                  <table class="Dimension_UpDown_Button_Top"
                    onmousedown="this.className='Dimension_UpDown_Button_Top_active'; return true;"
                    onmouseup="this.className='Dimension_UpDown_Button_Top'; return true;"
                    onmouseover="this.className='Dimension_UpDown_Button_Top_hover'; window.status='Go up'; return true;"
                    onmouseout="this.className='Dimension_UpDown_Button_Top'; window.status=''; return true;">
                    <tr>
                      <td class="Dimension_UpDown_Button_Top_bg">
                        <img class="Dimension_UpDown_Button_Icon Dimension_UpDown_Button_Icon_Up" src="../../../../../web/images/blank.gif" alt="Go up" title="Go up"/>
                      </td>
                    </tr>
                  </table>
                </a>
              </td>
            </tr>
            <tr>
              <td class="Dimension_UpDown_Button_Separator">
              </td>
            </tr>
            <tr>
              <td>
                <a class="Dimension_UpDown_Button_BottomLink" href="#"
                  onclick="moveElementInList(document.frmMain.FFFFFFFF, 1);return false;"
                  onfocus="setWindowElementFocus(this); window.status='Go down'; return true;"
                  onblur="window.status=''; return true;"
                  onkeypress="this.className='Dimension_UpDown_Button_BottomLink_active'; return true;"
                  onkeyup="this.className='Dimension_UpDown_Button_BottomLink_focus'; return true;">
                  <table class="Dimension_UpDown_Button_Bottom"
                    onmousedown="this.className='Dimension_UpDown_Button_Bottom_active'; return true;"
                    onmouseup="this.className='Dimension_UpDown_Button_Bottom'; return true;"
                    onmouseover="this.className='Dimension_UpDown_Button_Bottom_hover'; window.status='Go down'; return true;"
                    onmouseout="this.className='Dimension_UpDown_Button_Bottom'; window.status=''; return true;">
                    <tr>
                      <td class="Dimension_UpDown_Button_Bottom_bg">
                        <img class="Dimension_UpDown_Button_Icon Dimension_UpDown_Button_Icon_Down" src="../../../../../web/images/blank.gif" alt="Go down" title="Go down"/>
                      </td>
                    </tr>
                  </table>
                </a>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </td>
</tr></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| name
| Name of the left list element. Used several times to refer the list element
|
|-
| BBBBBBBB
| No
| id
| Id of the left list element.
| 
|-
| CCCCCCCC
| No
| class
| Fixed height of the left list
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Dimension_LeftSelect_height
| it sets a fixed height of 70px
|}
|-
| DDDDDDDD
| Yes (if element exists)
| value
| Value of the left list element. It should be a natural number and should not be repeated
| 
|-
| EEEEEEEE
| Yes (if element exists)
| option content
| Text of the left list element.
| 
|-
| FFFFFFFF
| Yes
| name
| Name of the right list element. Used several times to refer the list element
|
|-
| GGGGGGGG
| No
| id
| Id of the right list element.
| 
|-
| HHHHHHHH
| No
| class
| Fixed height of the right list
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Dimension_RightSelect_height
| it sets a fixed height of 70px
|}
|-
| IIIIIIII
| Yes (if element exists)
| value
| Value of the right list element. It should be a natural number and should not be repeated
| 
|-
| JJJJJJJJ
| Yes (if element exists)
| option content
| Text of the right list element.
| 
|}
 

===Actions===

The different button actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| Include
| Move elements from left list to right list
| [[Image:DG-250-Dimensional-iconInclude.png]]
|-
| Exclude
| Move elements from right list to left list
| [[Image:DG-250-Dimensional-iconExclude.png]]
|-
| Up
| Move up the selected elements one position (it runs in the right list)
| [[Image:DG-250-Dimensional-iconUp.png]]
|-
| Down
| Move down the selected elements one position (it runs in the right list)
| [[Image:DG-250-Dimensional-iconDown.png]]
|}
 

===Status===

The different button status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-Dimensional-Normal.png]]
|-
| Focus
| [[Image:DG-250-Dimensional-Focus.png]]
|-
| Hover
| [[Image:DG-250-Dimensional-Hover.png]]
|-
| Press
| [[Image:DG-250-Dimensional-Press.png]]
|}
 

===External Dependencies===

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| windowKeyboard.js
| Yes
| Internal
| setWindowElementFocus(obj)
| It is embedded in the html code to set the focus in the element when clicked
|-
| utils.js
| Yes
| Internal
| addList(sourceList, destinationList, selectAll)
| It is embedded in the html code to move elements between lists
|-
| utils.js
| Yes
| Internal
| moveElementInList(list, incr)
| It is embedded in the html code to move up or down elements of the right list
|}
 

==Field Button - Validation Date Box==

[[Image:DG-250-FB-Date.png]]

===HTML Code===

<source lang="html4strict"><table border="0" cellspacing="0" cellpadding="0" summary="" style="padding-top: 0px;">
  <tr>
    <td class="TextBox_ContentCell">
      <input dojoType="openbravo:DateTextbox" 
        lowerThan="AAAAAAAA"
        greaterThan="BBBBBBBB"
        displayFormat="CCCCCCCC"
        saveFormat="DDDDDDDD"
        class="TextBox_btn_OneCell_width EEEEEEEE"
        required="FFFFFFFF"
        type="text"
        name="GGGGGGGG"
        id="HHHHHHHH"
        size="10"
        maxlength="10"
        value=""
        onkeyup="autoCompleteDate(this.textbox, this.displayFormat);return true;">
      </input>
      <script>djConfig.searchIds.push("HHHHHHHH");</script>
    </td>
    <td class="FieldButton_ContentCell">
      <a class="FieldButtonLink"
        href="#"
        onfocus="setWindowElementFocus(this); window.status='Calendar'; return true;" onblur="window.status=''; return true;"
        onkeypress="this.className='FieldButtonLink_active'; return true;"
        onkeyup="this.className='FieldButtonLink_focus'; return true;"
        onclick="showCalendar('frmMain.GGGGGGGG', document.frmMain.GGGGGGGG.value, false);return false;" >
        <table class="FieldButton"
          onmouseout="this.className='FieldButton';window.status='';return true;"
          onmouseover="this.className='FieldButton_hover';window.status='Show calendar';return true;"
          onmousedown="this.className='FieldButton_active';return true;"
          onmouseup="this.className='FieldButton';return true;">
          <tr>
            <td class="FieldButton_bg">
              <img alt="Calendar" class="FieldButton_Icon FieldButton_Icon_Calendar" title="Calendar" src="../../../../../web/images/blank.gif" border="0"></img>
            </td>
          </tr>
        </table>
      </a>
    </td>
  </tr>
</table></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| No
| lowerThan
| Id of the input which current input should be lower
|
|-
| BBBBBBBB
| No
| greaterThan
| Id of the input which current input should be greater
| 
|-
| CCCCCCCC
| Yes
| displayFormat
| The display format in which the validation will operate
|
{|border="0" cellpadding="5" cellspacing="0" 
| DD-MM-YYYY
|-
| YYYY-MM-DD
|-
| MM-DD-YYYY
|}
|-
| DDDDDDDD
| Yes
| saveFormat
| 
|
{|border="0" cellpadding="5" cellspacing="0" 
| DD-MM-YYYY
|-
| YYYY-MM-DD
|-
| MM-DD-YYYY
|}
|-
| EEEEEEEE
| No
| class
| Yellow background if the field is required
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | required
| if it is required
|}
|-
| FFFFFFFF
| No
| required
| Html notation if the field is required
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | yes
| if it is required
|-
| style="font-weight: bold" | no
| if it is not required
|}
|-
| GGGGGGGG
| Yes
| name
| Name of the element
| 
|-
| HHHHHHHH
| Yes
| id
| Id of the element. Its use is spreaded
|
|}
 

===Actions===

The different field button actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| On click
| Show/hide a calendar
| [[Image:DG-250-FB-iconCalendar.png]]
|}
 

===Status===

The different field button status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-FB-Normal.png]]
|-
| Focus
| [[Image:DG-250-FB-Focus.png]]
|-
| Hover
| [[Image:DG-250-FB-Hover.png]]
|-
| Press
| [[Image:DG-250-FB-Press.png]]
|}
 

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| windowKeyboard.js
| Yes
| Internal
| setWindowElementFocus(obj)
| It is embedded in the html code to set the focus in the element when clicked
|-
| utils.js
| Yes
| Internal
| showCalendar(id, value, debug, format, showsTime, showsOtherMonths)
| It is embedded in the html code to show the calendar
|-
| jscalendar/calendar.js
| Yes
| utils.js
| 
| The javascript app which render and display the calendar
|-
| jscalendar/lang/calendar-xx.js
| Yes
| jscalendar/calendar.js
| 
| The language configuration of the calendar (change xx by en or es or whatever language you need). This language should be set automatically using xml engine
|-
| default/DateTextBox.js
| Yes
| Internal
| autoCompleteDate(field, fmt)
| Functions needed to parse and manipulate the date
|-
| dojo/dojo.js
| Yes
| Internal
| dojoType="openbravo:DateTextbox"
| Dojo 0.4.3: functions needed to parse and manipulate the date and the notification error messages
|-
| dojoConfig.js
| Yes
| dojo/dojo.js
| 
| Configuration parameters of dojo
|}
 

==Field Button - Selector==

[[Image:DG-250-FB-Selector.png]]

===HTML Code===

<source lang="html4strict"><table border="0" cellspacing="0" cellpadding="0" summary="" style="padding-top: 0px;">
  <tr>
    <td class="TextBox_ContentCell">
      <input type="hidden" name="AAAAAAAA" id="BBBBBBBB" value=""></input> 
      <input class="dojoValidateValid TextBox_btn_TwoCells_width" type="text" name="CCCCCCCC" maxlength="20" value=""></input>
    </td>
    <td class="FieldButton_ContentCell">
      <a class="FieldButtonLink"
        href="#"
        onfocus="setWindowElementFocus(this); window.status='DDDDDDDD'; return true;" onblur="window.status=''; return true;"
        onkeypress="this.className='FieldButtonLink_active'; return true;"
        onkeyup="this.className='FieldButtonLink_focus'; return true;" onclick="openSearch(null, null, 'EEEEEEEE', 'FFFFFFFF', false, 'frmMain', 'AAAAAAAA', 'CCCCCCCC', document.frmMain.CCCCCCCC.value);return false;">
        <table class="FieldButton"
          onmouseout="this.className='FieldButton';window.status='';return true;"
          onmouseover="this.className='FieldButton_hover';window.status='Search';return true;"
          onmousedown="this.className='FieldButton_active';return true;"
          onmouseup="this.className='FieldButton';return true;">
          <tr>
            <td class="FieldButton_bg">
              <img alt="DDDDDDDD" class="FieldButton_Icon GGGGGGGG" title="DDDDDDDD" src="../../../../../web/images/blank.gif" border="0"></img>
            </td>
          </tr>
        </table>
      </a>
    </td>
  </tr>
</table></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| name
| Name of the hidden input (the one that will be submitted)
|
|-
| BBBBBBBB
| Yes
| id
| Id of the hidden input (the one that will be submitted)
| 
|-
| CCCCCCCC
| Yes
| name
| Name of the visible input (for visualization purposes only)
|
|-
| DDDDDDDD
| Yes
| windows status - alt - title
| Description displayed on windows status bar, on mouse over and if image not available
| See the table above
|-
| EEEEEEEE
| Yes
| javascript parameter
| Url of the selector servlet
| See the table above
|-
| FFFFFFFF
| Yes
| javascript parameter
| Title of the popup
| See the table above
|-
| GGGGGGGG
| Yes
| class
| Displayed field button icon
| See the table above
|}
 
 
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Selector Type
! Icon
! DDDDDDDD
! EEEEEEEE
! FFFFFFFF
! GGGGGGGG
|-
| Business Partner
| [[Image:DG-250-FB-iconBusinessPartner.png]]
| Business Partner
| ../info/BusinessPartner.html
| SELECTOR_BUSINESS
| FieldButton_Icon_BusinessPartner
|-
| Project
| [[Image:DG-250-FB-iconProject.png]]
| Project
| ../info/Project.html
| SELECTOR_PROJECT
| FieldButton_Icon_Project
|-
| Product
| [[Image:DG-250-FB-iconProduct.png]]
| Product
| ../info/ProductComplete.html
| SELECTOR_PRODUCT
| FieldButton_Icon_Product
|-
| Account
| [[Image:DG-250-FB-iconAccount.png]]
| Account
| ../info/AccountElementValue.html
| SELECTOR_ACCOUNTELEMENTVALUE
| FieldButton_Icon_Account
|-
| Locator
| [[Image:DG-250-FB-iconLocator.png]]
| Locator
| ../info/Locator.html
| SELECTOR_LOCATOR
| FieldButton_Icon_Locator
|-
| Location
| [[Image:DG-250-FB-iconLocation.png]]
| Location
| ../info/Location_FS.html
| SELECTOR_LOCATION
| FieldButton_Icon_Location
|}
 

===Actions===

The different actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
|-
| On click
| Open selector
|-
| Enter key
| Search with the given input
|}
 

===Status===

The different button status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-FB-Normal.png]]
|-
| Focus
| [[Image:DG-250-FB-Focus.png]]
|-
| Hover
| [[Image:DG-250-FB-Hover.png]]
|-
| Press
| [[Image:DG-250-FB-Press.png]]
|}
 

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| windowKeyboard.js
| Yes
| Internal
| setWindowElementFocus(obj)
| It is embedded in the html code to set the focus in the element when clicked
|-
| search.js
| Yes
| Internal
| openSearch(strTop, strLeft, strSelectorName, strWindowName, validate, strForm, strItem, strSpanId, strValueID)
| It is embedded in the html field button code to open the selector popup
|}

Also in the <head> of the html, in onLoadDo(), at the end you should put

keyArray[keyArray.length] = new keyArrayItem("ENTER", "**The onclick of the field button**", "null");

each one of each field button selector there is
 

==Combo Box==

[[Image:DG-250-Combo-Normal.png]]

===HTML Code===

<source lang="html4strict"><select name="AAAAAAAA" id="BBBBBBBB" class="CCCCCCCC DDDDDDDD" required="EEEEEEEE">
  <option value="FFFFFFFF">GGGGGGGG</option>  <!-- This line should be repeated as many elements there are -->
</select></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| Yes
| name
| Name of the combo box
|
|-
| BBBBBBBB
| Yes
| id
| Id of the combo box
| 
|-
| CCCCCCCC
| Yes
| class
| Style for normal or required combo
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Combo
| normal combo
|-
| style="font-weight: bold" | ComboKey
| required combo
|}
|-
| DDDDDDDD
| Yes
| class
| Defines the width of the combo box
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | Combo_OneCell_width
| 1 cell size
|-
| style="font-weight: bold" | Combo_TwoCells_width
| 2 cells size
|-
| style="font-weight: bold" | Combo_ThreeCells_width
| 3 cells size
|-
| style="font-weight: bold" | Combo_FourCells_width
| 4 cells size
|-
| style="font-weight: bold" | Combo_FiveCells_width
| 5 cells size
|-
| style="font-weight: bold" | Combo_SixCells_width
| 6 cells size
|}
|-
| EEEEEEEE
| No
| required
| Html notation if the field is required
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | yes
| if it is required
|-
| style="font-weight: bold" | no
| if it is not required
|}
|-
| FFFFFFFF
| Yes (if element exists)
| value
| Value of the combo element
| 
|-
| GGGGGGGG
| Yes (if element exists)
| option content
| Text of the combo element
| 
|}
 

===Actions===

The different combo actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| On click
| Expand/Collapse the combo
|
|}
 

===Status===

The different combo status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-Combo-Normal.png]]
|-
| Required
| [[Image:DG-250-Combo-Required.png]]
|-
| Focus
| [[Image:DG-250-Combo-Focus.png]]
|}
 

==Textbox==

[[Image:DG-250-Textbox-Normal.png]]

===HTML Code===

<source lang="html4strict"><input type="text" 
  name="AAAAAAAA"
  id="BBBBBBBB"
  class="dojoValidateValid CCCCCCCC DDDDDDDD"
  required="EEEEEEEE"
  value="FFFFFFFF"
  maxlength="GGGGGGGG">
</input></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| No
| name
| Name of the textbox
|
|-
| BBBBBBBB
| No
| id
| Id of the textbox
| 
|-
| CCCCCCCC
| No
| class
| Style for normal or required textbox
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | 
| normal textbox
|-
| style="font-weight: bold" | required
| required textbox
|}
|-
| DDDDDDDD
| Yes
| class
| Defines the width of the combo box
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | TextBox_OneCell_width
| 1 cell size
|-
| style="font-weight: bold" | TextBox_TwoCells_width
| 2 cells size
|-
| style="font-weight: bold" | TextBox_ThreeCells_width
| 3 cells size
|-
| style="font-weight: bold" | TextBox_FourCells_width
| 4 cells size
|-
| style="font-weight: bold" | TextBox_FiveCells_width
| 5 cells size
|-
| style="font-weight: bold" | TextBox_SixCells_width
| 6 cells size
|}
|-
| EEEEEEEE
| No
| required
| Html notation if the field is required
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | yes
| if it is required
|-
| style="font-weight: bold" | no
| if it is not required
|}
|-
| FFFFFFFF
| Yes
| value
| Initial value of the textbox element
| 
|-
| GGGGGGGG
| Yes
| maxlength
| Maximun number of characters of the textbox
| 
|}
 

===Actions===

The different textbox actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| Write
| Write text in the textbox
|
|-
| Delete/Supr
| Delete/Supr text of the textbox
|
|-
| Copy
| Copy text from the textbox
|
|-
| Cut
| Cut text from the textbox
|
|-
| Paste
| Paste text to the textbox
|
|}
 

===Status===

The different textbox status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-Textbox-Normal.png]]
|-
| Required
| [[Image:DG-250-Textbox-Required.png]]
|-
| Focus
| [[Image:DG-250-Textbox-Focus.png]]
|}
 

==Real Number Textbox==

[[Image:DG-250-Textbox-Normal.png]]

===HTML Code===

<source lang="html4strict"><input dojoType="openbravo:RealNumberTextbox"
  name="AAAAAAAA"
  id="BBBBBBBB"
  class="CCCCCCCC DDDDDDDD"
  required="EEEEEEEE"
  value="FFFFFFFF"
  maxlength="GGGGGGGG"
  lowerThan="HHHHHHHH"
  greaterThan="IIIIIIII"
  outputformat="JJJJJJJJ">
</input>
<script>djConfig.searchIds.push("BBBBBBBB");</script></source>

The parameter name is used in the html above and should be substituted with your own needed text.


{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Parameter
! Required
! Type
! Use
! Possible Values
|-
| AAAAAAAA
| No
| name
| Name of the textbox
|
|-
| BBBBBBBB
| Yes
| id
| Id of the textbox
| 
|-
| CCCCCCCC
| No
| class
| Style for normal or required textbox
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | 
| normal textbox
|-
| style="font-weight: bold" | required
| required textbox
|}
|-
| DDDDDDDD
| Yes
| class
| Defines the width of the combo box
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | TextBox_OneCell_width
| 1 cell size
|-
| style="font-weight: bold" | TextBox_TwoCells_width
| 2 cells size
|-
| style="font-weight: bold" | TextBox_ThreeCells_width
| 3 cells size
|-
| style="font-weight: bold" | TextBox_FourCells_width
| 4 cells size
|-
| style="font-weight: bold" | TextBox_FiveCells_width
| 5 cells size
|-
| style="font-weight: bold" | TextBox_SixCells_width
| 6 cells size
|}
|-
| EEEEEEEE
| No
| required
| Html notation if the field is required
|
{|border="0" cellpadding="5" cellspacing="0" 
| style="font-weight: bold" | yes
| if it is required
|-
| style="font-weight: bold" | no
| if it is not required
|}
|-
| FFFFFFFF
| Yes
| value
| Initial value of the textbox element
| 
|-
| GGGGGGGG
| Yes
| maxlength
| Maximun number of characters of the textbox
| 
|-
| HHHHHHHH
| No
| lowerThan
| Id of the input which current input should be lower
|
|-
| IIIIIIII
| No
| greaterThan
| Id of the input which current input should be greater
| 
|-
| JJJJJJJJ
| No
| outputformat
| Output format for the input
| The different output formats are specified in config/Format.xml
|}

===Actions===

The different textbox actions that could be done are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Action
! Description
! Icon
|-
| Write
| Write text in the textbox
|
|-
| Delete/Supr
| Delete/Supr text of the textbox
|
|-
| Copy
| Copy text from the textbox
|
|-
| Cut
| Cut text from the textbox
|
|-
| Paste
| Paste text to the textbox
|
|}
 

===Status===

The different textbox status are set automatically when they are required. These status are:
 

{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! Status
! Visual Appearence
|-
| Normal
| [[Image:DG-250-Textbox-Normal.png]]
|-
| Required
| [[Image:DG-250-Textbox-Required.png]]
|-
| Focus
| [[Image:DG-250-Textbox-Focus.png]]
|}
 

===External Dependencies===
{|border="1" cellpadding="5" cellspacing="0" style="border-color: #AFE091;"
! File
! Required
! Dependence Type
! Function
! Use
|-
| utils.js
| Yes
| Internal
| Number format related functions
| It is very important to be imported BEFORE importing dojo.js
|-
| dojo/dojo.js
| Yes
| Internal
| dojoType="openbravo:RealNumberTextbox"
| Dojo 0.4.3: functions needed to validate the textbox
|-
| dojoConfig.js
| Yes
| dojo/dojo.js
| 
| Configuration parameters of dojo
|}
 

[[Category:Configuration ERP]]

{{Hierarchy_footer}}