Inserting a ListOfValues

To insert a listOfValues component:

In the Design Structure Window of the desired file, locate the node in which you wish to insert a listOfValues component.
In the Component Palette, select Layout Components from the dropdown list, and then drag and drop the listOfValues component to the parent node of your choice.
The listOfValues node is inserted and highlighted under the expanded parent node.
In the Property Inspector, set the following attributes for the listOfValues component:
- title - (Required) Enter the text to display in the top level "Search and Select: " header.
- destination - Enter the URL to which the form will be submitted. This is usually null or points back to the main page from which the LOV was called (the default).
- searchText - Enter the string that is being searched on. This would be bound to the same data in the text field of the lovInput element.
- searchAreaMode - Specify how to display the search area. Supported values are: basic, filter, simple, advanced. The default is basic. For backwards compatibility, if a filterChoice child is present and searchAreaMode is not set, the search block will be rendered in filter mode. This fallback is now deprecated. Always set searchAreaMode to the desired mode. In a future release, the default will always be basic, regardless of which named children are present.
Note: To use data binding, see Data Binding a Component Attribute.
To add child components to advancedChoices, do the following:
1. In the Desgin Structure Window, expand the listOfValues node to locate the advancedChoices named child, then right-click advancedChoices to insert the desired component, e.g., labeledFieldLayout.
2. In the Property Inspector, set the attributes for the child component you inserted.
To add filterChoice child components, do the following:
1. In the Desgin Structure Window, expand the listOfValues node to locate the filterChoice named child, then right-click filterChoice to insert the desired component, e.g., choice. See Inserting an Option for the instructions to add option components to a choice element.
2. In the Property Inspector, set the attributes for the child component you inserted.
To add child components to headerInstructions, do the following:
1. In the Desgin Structure Window, expand the listOfValues node to locate the headerInstructions named child, then right-click headerInstructions to insert the desired component, e.g., styledText.
2. In the Property Inspector, set the attributes for the child component you inserted.
To add child components to searchInstructions, do the following:
1. In the Desgin Structure Window, expand the listOfValues node to locate the searchInstructions named child, then right-click searchInstructions to insert the desired component, e.g., styledText.
2. In the Property Inspector, set the attributes for the child component you inserted.
To add the table component to the listOfValues component, do the following:
1. In the Desgin Structure Window, right-click the listOfValues node and choose Insert inside listOfValues | table.
2. See Creating a Table for further details.

Example (UIX XML)

This is thelistOfValues_Dialog.uix file, which is called from the lovInputTest.uix file in Inserting a MessageLovInput.


Example: Copyright (c) Oracle Corporation 2002-2003. All Rights Reserved.

<?xml version="1.0" encoding="UTF-8" ?>
<!-- Copyright (c) Oracle Corporation 2002-2003. All Rights Reserved. -->
<!-- @version $Name: $ ($Revision: 1.4 $) $Date: 2003/10/01 01:43:17 $ -->
<!-- This file implements the back end support for the components guide -->
<!-- LOV example demos. Some of the examples have multiple lovInput -->
<!-- fields but, for simplicity, this file only implements a single -->
<!-- listOfValues to support all of them. -->
<page xmlns="http://xmlns.oracle.com/uix/controller"
      xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
      xmlns:ui="http://xmlns.oracle.com/uix/ui"
      expressionLanguage="el">
  <content>
    <dataScope xmlns="http://xmlns.oracle.com/uix/ui">
      <contents>
        <flowLayout>
          <contents>
            <listOfValues title="${ui:defaulting(uix.data.fieldData['current'].title,
                                'Available peak values')}"
                          id="lovHandler"
                          searchText="${uix.data.fieldData['current'].fieldText}"
                          searchAreaMode="${uix.data.generalParams.currentMode}">
              <headerInstructions>
                <styledText text="Choose a peak"
                            styleClass="OraInstructionText"/>
              </headerInstructions>
              <!-- Helpful text for the search area -->
              <searchInstructions>
                <styledText text="${uix.data.generalParams.instructions}"
                            styleClass="OraInstructionText"/>
              </searchInstructions>
              <!-- This choice just pulls out the column headers  -->
              <filterChoice>
                <choice name="categoryChoice"
                        multiple="false"
                        selectedValue="${uix.data.generalParams.categoryChoice}">
                  <contents childData="${uix.data.categoryData}">
                    <option text="${uix.current}"/>
                  </contents>
                </choice>
              </filterChoice>
              <advancedChoices>
                <labeledFieldLayout width="90%"
                                    labelWidth="18%"
                                    columns="2">
                  <contents childData="${uix.data.generalParams.advSearchFields}">
                    <messageTextInput prompt="${uix.current.prompt}"
                                      columns="15"
                                      name="${uix.current.name}"
                                      text="${uix.data.fieldData['current'][uix.current.dataName]}"/>
                  </contents>
                </labeledFieldLayout>
              </advancedChoices>
              <contents>
                <flowLayout>
                  <contents>
                    <!-- Here's the table definition -->
                    <!-- This must be a form submitted proxied table -->
                    <table name="lovTbl"
                           id="lovTbl"
                           width="80%"
                           minValue="1"
                           formSubmitted="true"
                           proxied="true"
                           alternateText="${uix.data.tableParams.alternateText}"
                           blockSize="${uix.data.tableParams.size}"
                           maxValue="${uix.data.tableParams.max}"
                           tableData="${uix.data.tableData}"
                           value="${uix.data.tableParams.start}"
                           columnHeaderData="${uix.data.categoryData}">
                      <tableFormat tableBanding="rowBanding"/>
                      <columnHeaderStamp>
                        <text text="${uix.current}"/>
                      </columnHeaderStamp>
                      <tableSelection>
                        <multipleSelection text="select an item"
                                           selected="${uix.current.selected}"/>
                      </tableSelection>
                      <contents>
                        <!-- Populate with some sample peak data -->
                        <text text="${uix.current.peak}"/>
                        <text text="${uix.current.altitude}"/>
                        <text text="${uix.current.location}"/>
                        <text text="${uix.current.ascent}"/>
                        <text text="${uix.current.climbers}"/>
                        <!-- This element supplies a rowid to show how extra   -->
                        <!-- data could be put on the form. This value will be -->
                        <!-- submitted with every operation on this table.     -->
                        <formValue name="rowid" value="${uix.current.rowid}"/>
                      </contents>
                    </table>
                  </contents>
                </flowLayout>
              </contents>
            </listOfValues>
          </contents>
        </flowLayout>
      </contents>
      <provider>
        <data name="categoryData">
          <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
                  method="getCategoryNames"/>
        </data>
        <data name="tableData">
          <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
                  method="getDataSet"/>
        </data>
        <data name="generalParams">
          <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
                  method="getGeneralParams"/>
        </data>
        <data name="fieldData">
          <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
                  method="getFieldSet"/>
        </data>
        <data name="tableParams">
          <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
                  method="getTableParameters"/>
        </data>
      </provider>
    </dataScope>
  </content>
  <handlers>
    <event name="lovFilter">
      <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
              method="handleLovFilterEvent" />
    </event>
    <event name="lovSelect">
      <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
              method="handleLovSelectEvent" />
    </event>
    <event name="goto">
      <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
              method="handleGotoEvent" />
    </event>
    <event name="lovSearchMode">
      <method class="oracle.cabo.servlet.demo.ListOfValuesDemoData"
              method="handleLovSearchModeEvent" /> 
    </event>
  </handlers>
</page>