Inserting a MessageLovField

To insert a messageLovField component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a messageLovField component.
In the Component Palette, select Form Components from the dropdown list, and then drag and drop the messageLovField component to the parent node of your choice.
The messageLovField node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the messageLovField component:
- prompt - Enter the prompt text that displays before the text field.
- name - (Required) Enter a name for the component.
- columns - Enter the number of columns to display in the text field.
- destination - Enter the URL to invoke when the user clicks the LOV button next to the text field.
- onClick - If not using the destination attribute, enter the onClick JavaScript handler.
- rows -Enter the number of rows to display in the text field. If the rows attribute is less than the maximumLength attribute, the text willl scroll.
- text - Enter the text value of the input field.
- enterClientAction - Enter the clientAction to fire when the user presses the Enter key. In the right column, click the icon to open a dialog. In the Advanced tab, you can enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- maximumLength - Enter the maximum number of characters per line that can be entered in the text field. This value is independent of the number of columns displayed.
- onBlurValidater -Enter the client validater to fire on the client when the text input field loses keyboard focus. In the right column, click the icon to display the dialog to edit the onBlurValidater complex attribute.
- onSubmitValidater - Enter the client validater to fire on the client when the form containing the text input field is submitted. In the right column, click the icon to display the dialog to edit the onSubmitValidater complex attribute.
- primaryClientAction - Enter the clientAction to fire when the text in the text input field changes. In the right column, click the icon to enter a ClientAction. See Editing the PrimaryClientAction Attribute for details. Alternatively, use the Advanced tab to enter an EL syntax data binding expression or use the Bind to Data dialog to select a data source for this complex attribute.
- searchDesc - Enter the search description on the LOV button.
- secret - Select true to hide the actual value of the text from the user. Applies only to single line text fields only.
- wrap - Select the type of wrapping to be used in a multi-row text field only. By default multi-row text does not wrap at the edge of the column, but scrolls horizontally instead. Available options are:
  - hard - Specifies that the value of the text should include any carriage returns that are needed to wrap the lines.
  - soft - Specifies that the text should wrap visually but that the value of the text does not include carriage returns.

Note: To use data binding, see Data Binding a Component Attribute.

For information about message attributes, see Setting the Message Attributes for a Message Form Component. For information about other general attributes of message form components, see Setting the General Attributes for a Message Form Component.

Note: You have to write the code to launch the LOV, and handle the returned result (i.e., the transfer of data from the LOV back to the text input field).

Examples (UIX XML)


Example 1:

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns="http://xmlns.oracle.com/uix/controller"
      xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
      xmlns:html="http://www.w3.org/TR/REC-html40" expressionLanguage="el" 
      xmlns:ui="http://xmlns.oracle.com/uix/ui">
  <head>
    <html:title>Table LOV Test</html:title>
  </head>
  <ctrl:content xmlns="http://xmlns.oracle.com/uix/ui"
                xmlns:data="http://xmlns.oracle.com/uix/ui">
    <switcher childName="${ui:defaulting(uix.pageProp.case, 'root')}" >
      <case name="root">
        <dataScope>
          <contents>
            <form name="form1">
              <contents> 
                <script>
                  <contents>
                    function myCallBack(lovwin, event)
                    {
                      var value = lovwin.myData;
                      if (value!=(void 0))
                        document.form1[window.myData].value = value;
                    }
                    function tableLov(lovName) 
                    {
                      window.myData = lovName;
                      openWindow(window, 
                                 'table_Lov.uix?bajaPage=case=lov',
                                 'lovWindow',
                                 {width:350, height:75},
                                 true,
                                 'dialog',
                                 myCallBack);
                      return false;
                    }
                  </contents>
                </script>
                <table name="tab1">
                  <tableData>
                    <row name="Tim" age="21"/>
                    <row name="Kim" age="22"/>
                    <row name="Jae" age="23"/>
                  </tableData>
                  <contents>
                    <column>
                      <columnHeader>Name</columnHeader>
                      <contents>
                        <text text="${uix.current.name}"/>
                      </contents>
                    </column>
                    <column>
                      <columnHeader>Age</columnHeader>
                      <contents>
                        <text text="${uix.current.age}"/>
                      </contents>
                    </column> 
                    <column>
                      <columnHeader>Occupation</columnHeader>
                      <contents>
                        <messageLovField name="occ" 
                                         prompt="Select "
                                         onClick="${uix.data.lovJS.occ}"/>
                      </contents>
                    </column> 
                  </contents>
                </table>
              </contents>
            </form>
          </contents>
          <provider>
            <data name="lovJS">
              <method class="oracle.cabo.servlet.demo.table.LOV" method="getLovJS"/>
            </data>
          </provider>
        </dataScope>
      </case>
      <case name="lov">
        <dataScope>
          <contents>
            <form name="form2">
              <contents>
                <script>
                  <contents>
                    function mySelect()
                    {
                      var choice = document.form2.ch1;
                      top.myData = choice.options[choice.selectedIndex].value;
                      top.close();
                    }
                  </contents>
                </script>
                <messageChoice name="ch1" prompt="Choose">
                  <contents childData="${uix.data.data1.occ}">
                    <option text="${uix.current.text}" value="${uix.current.text}"/>
                  </contents>
                  <end>
                    <flowLayout>
                      <contents>
                        <button text="Select" onClick="mySelect();" />
                        <button text="Cancel" onClick="top.close();" />
                      </contents>
                    </flowLayout>
                  </end>
                </messageChoice>
              </contents>
            </form>
          </contents>
          <provider>
            <data name="data1">
              <inline>
                <occ text="Engineer" />
                <occ text="Doctor" />
                <occ text="Teacher" />
                <occ text="Scientist" />
              </inline>
            </data>
          </provider>
        </dataScope>
      </case>
    </switcher>
  </ctrl:content>
</page>


Example 2:

...
<form name="form1"
      destination="${ctrl:pageUrl(uix, 'lovFieldTest')}">
  <contents>
    <switcher  childName="${ui:defaulting(uix.pageProp.case, 'root')}">

      <case name="root">
        <flowLayout>
          <contents>
            <script>
              <contents>
                function myCallBack(lovwin, event)
                {
                   var value = lovwin.myData;
                   if (value!=(void 0))
                      document.form1.lov1.value = lovwin.myData;
                }
              </contents>
            </script>
            <messageLovField name="lov1" 
                             prompt="Enter Color"
                             shortDesc="Click to select a color"
                             tip="Click flashlight for choices!"
                             onClick="openWindow(window, 
                                                 'lovFieldTest.uix?bajaPage=case=lov',
                                                 'lovWindow',
                                                 {width:350, height:75},
                                                 true,
                                                 'dialog',
                                                 myCallBack);
                                       return false;" />
          </contents>
        </flowLayout>
      </case>

      <!-- LOV -->

      <case name="lov">
        <dataScope>
          <contents>
            <script>
              <contents>
                function mySelect()
                {
                  var choice = document.form1.ch1;
                  top.myData = choice.options[choice.selectedIndex].value;
                  top.close();
                }
              </contents>
            </script>

            <!-- contents of LOV -->

            <messageChoice name="ch1" 
                           prompt="Choose">
              <contents childData="${uix.data.data1.color}">
                <option text="${uix.current.text}" value="${uix.current.text}"/>
              </contents>
              <end>
                <flowLayout>
                  <contents>
                    <button text="Select" onClick="mySelect();" />
                    <button text="Cancel" onClick="top.close();" />
                  </contents>
                </flowLayout>
              </end>
            </messageChoice>
          </contents>
          <provider>
            <data name="data1">
              <inline>
                <color text="Violet" />
                <color text="Indigo" />
                <color text="Blue" />
                <color text="Green" />
                <color text="Yellow" />
                <color text="Orange" />
                <color text="Red" />
              </inline>
            </data>
          </provider>
        </dataScope>
      </case>
    </switcher>
  </contents>
</form>