16 Implementing UIs in JDeveloper with Application Tables, Trees and Tree Tables

This chapter discusses the Applications Tables, Trees and Tree Tables components used to implement user interface features in JDeveloper.

This chapter includes the following sections:

• Section 16.1, "Implementing Applications Tables"

• Section 16.2, "Implementing the Applications Tree"

• Section 16.3, "Implementing Applications Tree Tables"

• Section 16.4, "Using the Custom Wizard with Applications Popups"

For basic information, see:

• Chapter 12, "Getting Started with Your Web Interface"

• Chapter 13, "Implementing the UI Shell"

• Chapter 17, "Implementing Applications Panels, Master-Detail, Hover, and Dialog Details"

16.1 Implementing Applications Tables

Applications tables are UI components that already contain an Oracle ADF table, a menu bar, a toolbar, and related popups. Developers do not need to create and assemble all these components separately.

Tables include the following:

• Table toolbars with default buttons

• Elements, such as an ADF table and custom toolbar buttons

• Default table actions

• Create actions, such as Create Inline and Create a Duplicate.

• Edit actions, such as Table Row Edit (Dialog Window) and Table Row Edit (Page)

You must use Applications tables to standardize layout and appearance consistency for all your page tables, including read-only pages. Once you create an Applications table, you can add table components that allow users to select the table's contents.

Before you begin:

Before you can use Applications tables, you must be familiar with JDeveloper and be able to create JSF pages.

16.1.1 Understanding Applications Tables Facets and Properties

Each table has properties and facets. Properties include table qualities, such as the unique identification number and the type of pattern exposed in the table. Facets are locations for table data, such as locations where you can add toolbars or menu bars. This section describes Applications table properties and facets.

Note:

Any buttons or menu items added in a facet render with a separator because adding more than one component to a facet requires having <af:group> around the element. By default, having a group component introduces a separator as an ADF rule.

Table 16-1 describes Applications table facets and facet contents.

Table 16-1 Applications Table Facets

Facet Name	Description	Values
table	Holds ADF table.	ADF Table
additionalToolbarButtons	Holds toolbar buttons.	ADF command toolbar buttons under an ADF toolbar
additionalActionItems	Holds menu items to be added to default Action pulldown menu items.	ADF menu item component
appsTableSecondaryToolbar	Facet for adding more commandToolbar button components to secondary toolbar. (Adds more icons.) Icons usually perform the same actions as menus, but you put the most common as icons so you do not need to pull down the menu.	ADF Command Toolbar Buttons
appsTableStatusbar	Holds components that contain status bar items. These status bar items are merged with standard items provided by the panelCollection property.	ADF menu item component
appsTableViewMenu	Holds menu items to be added to default View pulldown menu items of the panelCollection. To add multiple menu items to the view menu, add af:group components containing af:menuItems.	ADF menu item component
appsTableAfterToolbar	Facet for adding more commandToolbar button components after toolbar. In this facet, any toolbar buttons added appear in a separate row below the normal group of toolbars.	af:toolbar or af:groups of af:toolbars
popup	Holds popups. See Section 16.4, "Using the Custom Wizard with Applications Popups." Important: When a popup is used to create or duplicate a row in an Applications Table, you need to write your own logic behind the popup's Cancel button (Action/ActionListener) to remove the newly-created row. This can be done by either: A managed bean method that removes the newly-created row. Setting the Cancel button's Action property to the rollback method defined in the pageDef file. This method would be defined in the pageDef file if the "rollback" from the operations of the dataControl is dragged and dropped onto the page.	Popups under a layout component.

Table 16-2 describes Applications table properties (including properties that are part of the default managed bean), their allowable values, and default actions.

Table 16-2 Applications Table Properties

Property	Description	Values
id	Unique identification number for this applications table.	string
rendered	Whether the applications table is rendered (that is, converted from an object-based description into a graphical image for display).	boolean expression
tableId	Unique identification number of the underlying ADF table corresponding to this applications table.	string
createPatternType	Whether a Create pattern is enabled and, if so, which pattern. User action: Click Create.	<default>, inline, secondaryWindow, page <default>: No rows are created. You might choose this value if your table is read-only. inline: New row is created at the top of the current table. If you choose this value, the createpartialTriggers property on the ADF table is set automatically. secondaryWindow: Popup is displayed, allowing users to enter values into a new table row. The new row is added to the top of the table. If you choose this value, you must also set the corresponding Create Popup Id. In addition, you must create the popup UI that shows input fields. page: An ADFc Controller outcome is returned such that navigation to the next view activity occurs.
editPatternType	Whether an Edit pattern is enabled and, if so, which pattern. User action: Click Edit.	<default>, secondaryWindow, page <default>: No rows become editable. You might choose this value if your table is read-only. secondaryWindow: Popup is displayed, allowing users to edit values in the currently selected table row. If you choose this value, you must also set the corresponding Edit Popup Id. page: A standard outcome is returned. In this case, users can edit the values in the currently selected table row.
duplicatePatternType	Whether a Duplicate pattern is enabled and, if so, which pattern. This pattern lets you create an object by duplicating an existing object. The duplication helps you by pre-filling some values. You have full control and can change any of the values during the creation process. User action: Click Duplicate.	<default>, inline, secondaryWindow, page <default>: No rows are duplicated. inline: Selected row is duplicated. If you choose this value, you must also set the partialTriggers property on the ADF table to: <Applications_Table_Id>:duplicate secondaryWindow: Popup is displayed, allowing users to duplicate the currently selected table row but not its contents. If you choose this value, you must also set the Duplicate Popup Id. page: Currently selected row is duplicated, but not the values it contains. If the applications table is part of an applications panel, set the partialTriggers property on the ADF table to: <Applications_Panel_Id>:<Applications_Table_Id>:duplicate
deleteEnabled	Whether a Delete pattern is enabled. User action: Click Delete.	boolean Selected row is deleted.
createActionListener	Action binding for the Create button.	method expression If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it.
editActionListener	Action binding for the Edit button.	method expression If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it.
duplicateActionListener	Action binding for the Duplicate button.	method expression If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it.
deleteActionListener	Action binding for the Delete button.	method expression If defined, this property can be used to supplement the default action or completely override it.
createPopupId	Id assigned to the popup to be invoked when users click the Create button.	string
cditPopupId	Id assigned to the popup to be invoked when users click the Edit button.	string
duplicatePopupId	Id assigned to the popup to be invoked when users click the Duplicate button.	string
createText	Value that overrides the default label for Create menu item. It also will be shown as the short description for the Create button.	expression
editText	Value that overrides the default label for Edit menu item. It also will be shown as the short description for the Edit button.	expression
duplicateText	Value that overrides the default label for Duplicate menu item. It also will be shown as the short description for the Duplicate button.	expression
deleteText	Value that overrides the default label for Delete menu item. It also will be shown as the short description for the Delete button.	expression
attachText	Value that overrides the default label for Attach menu item. This attribute is deprecated.	expression
featuresOff	List of default features to turn off for the panelCollection	string
inlineStyle	The CSS styles to use for the panelCollection component inside Applications Table component. This is intended for basic style changes. Note: Do not set the width using the inlineStyle attribute on either Applications Table or panelStretchLayout. Applications Table can be stretched by placing it in the center facet of an ADF panelStretchLayout component.	string
styleClass	styleClass to use for the panelCollection component inside Applications Table component.	string
exportEnabled	Rendered attribute for Export button and menu item.	boolean / expression
createImmediate	Sets immediate attribute value of "Create" toolbar button and "Create" menu item.	boolean / expression
deleteImmediate	Sets immediate attribute value of "Delete" toolbar button and "Delete" menu item.	boolean / expression
duplicateImmediate	Sets immediate attribute value of "Duplicate" toolbar button and "Duplicate" menu item.	boolean / expression
editImmediate	Sets immediate attribute value of "Delete" toolbar button and "Delete" menu item.	boolean / expression
attachImmediate	Sets immediate attribute value of "Attach" toolbar button and "Attach" menu item. Note: This attribute is deprecated.	boolean / expression
primaryToolbarRendered	Sets the rendered attribute value of the primary toolbar. When Create, Duplicate, Update, Delete actions, attach, export are not turned on, the primaryToolbarRendered should be set to false so that an empty toolbar will not be displayed.	boolean / expression
secondaryToolbarRendered	Sets rendered attribute value of the secondary toolbar. When no af:commandToolbarButton is added to appsTableSecondaryToolbar facet, secondaryToolbarRendered should be set to false so that an empty toolbar will not be displayed.	boolean / expression
<button_name>PartialTriggers For example: deletePartialTriggers	Partial triggers attribute for the <button_name> toolbar button. The partial triggers property of the Create, Edit, Duplicate and Delete buttons, and menu items are exposed. Users can enable and disable buttons according to rows selected or other actions carried out on the page. The same partialTrigger attribute for each one is used both for the commandToolbarButton and the menu item. For example, when the createPartialTriggers is set in the Applications Table, the value for this attribute is set on the partialTrigger property of both the create command toolbar button and create menu item.	String of IDs. Important: The PartialTriggers attribute must be entered manually by the developer. This is because, at design time, the JDeveloper Property Inspector can: Select the incorrect ID. Append square brackets around the selected id, such as [id1 id2]. Example 1: To disable the Edit, Delete and Duplicate buttons when the table is empty, set this property on the editDiabled, deleteDisabled or duplicateDisabled property of the Applications Table. #{bindings.VOiterator.estimatedRowCount == 0 ? true: false} where VOiterator is your iterator name Example 2: Disable any of the buttons in the Applications Table according to the functional rules or by setting disable=false once create is selected on an empty table (considering these buttons were disabled following Example 1). To do this, create an attribute binding on the view object attribute that will decide whether or not the row can be deleted/edited/duplicated. For example, you can use a binding similar to this example on the disable property of a button: #{bindings.MyAtttrBinding.inputValue == 'compare value' ? true : false} Add Partial Page Refresh (PPR) on the button to the table ID of the af:table. This does not require any change in the selectionListener of the table. Keep the default one.
createAction	Action binding for the Create icon.	method expression
editAction	Action binding for the Edit icon.	method expression
duplicateAction	Action binding for the Duplicate icon.	method expression
deleteAction	Action binding for the Delete icon.	method expression
createEnabled	Rendered attribute for create	Boolean value or Expression Language expression
duplicateEnabled	Rendered attribute for duplicate	Boolean value or Expression Language expression
editEnabled	Rendered attribute for edit	Boolean value or Expression Language expression
createPartialSubmit	PartialSubmit attribute for create	Boolean value or Expression Language expression
createDisabled	Disabled attribute for create	Boolean value or Expression Language expression
editDisabled	Disabled attribute for edit	Boolean value or Expression Language expression
duplicateDisabled	Disabled attribute for duplicate	Boolean value or Expression Language expression
deleteDisabled	Disabled attribute for delete	Boolean value or Expression Language expression
confirmDelete	Set this value if you want delete confirmation to be displayed. The default message is The selected record(s) will be deleted. Do you want to continue? To change this, use the deleteMsg attribute.	Boolean value or Expression Language expression
deleteMsg	Provide a customized delete confirmation message that can be shown in the popup.	String value or Expression Language expression
actionsMenuRendered	Rendered attribute for Actions menu	Boolean value or Expression Language expression
actionsContentDelivery	ContentDelivery attribute for Actions menu. This attribute can take two values. lazy immediate The default value is immediate. Setting the attribute value to lazy: Provides better performance. Does not allow for enabling/disabling of the menu items based on client actions, such as current row selected.	String value
toggleEditRendered	The toggleEditRendered feature is used to render the editAll or clickToEdit choices for Applications Table. See Section 16.1.2.2.3, "Toggle Click to Edit / Edit All in Applications Table."	Boolean. Default value is False.

Note:

If you choose secondaryWindow as the pattern type for any property, and you have set the popup Id for that button, selecting the button invokes the popup.

Model

The Applications Table does not expose any bindings to the model. However, components within the Applications Table, like the ADF table, will be bound to the model.

Controller

The Applications Table component ships a default managed bean that performs the following functions that only work with rowSelection="single" on the ADF table:

• Default event handlers for all toolbar button action events. Event handler delegates to custom action method if set on the button action property.

  • A new row is added into the table when the Create icon is clicked, and the Create Pattern Type is inline.

  • A new row is added into the table and a popup is invoked with the newly-created row available for inserting values (the UI for the popup to show input fields for the new row has to be created separately by the developer), when the Create Pattern Type is secondaryWindow.

  • A new row is not added when the Create Pattern Type is Page. The developer is responsible for wiring the navigation to the page when the icon or menu item is clicked. Only a standard outcome is returned from the default handler. The developer could use this default outcome to define a navigation rule.

  • The selected row is made available for editing in a popup when the Edit icon is clicked, and Edit Pattern Type is secondaryWindow.

  • When the Edit icon is clicked, and Edit Pattern Type is Page, only a standard outcome is returned.

  • The Duplicate icon is handled the same way as Create. All attribute values except the primary key values are duplicated.

  • Clicking the Delete icon deletes the selected row.

• If the secondaryWindow option is chosen for any pattern type, and the corresponding popup Id is set for that button (mandatory), selecting the button invokes the popup.

• If Page is chosen for any pattern type, a standard outcome is returned on clicking the button. Standard outcomes are create, edit, duplicate and delete for the four respective toolbar buttons.

To allow Applications developers access to some of the implementation, the Applications Table exposes a public class oracle.apps.fnd.applcore.patterns.ApplicationsTableEventHandler that contains default event handlers for all the buttons. The button methods are named as process<buttonName>, such as processCreate and processEdit. Application developers writing custom action handlers can also use the default implementation by calling these methods.

Use

For example, to attach a custom button handler to the Create button, follow these steps:

1. Define a managed bean class, as shown in Example 16-1.

   Example 16-1 Defining a Managed Bean Class to Attach a Custom Handler to a Button

   import oracle.apps.fnd.applcore.patterns.ui.ApplicationsTableEventHandler;
   import oracle.apps.fnd.applcore.patterns.ui.util.PatternUtils;
    
   public class CustomEventHandler
   {
     public String processCreate()
     {
       // Custom code
       ...
    
       // Call default event handler if required. It will return a standard outcome for this button click.
       ApplicationsTableEventHandler appTableHandler = ApplicationsTableEventHandler.getInstance();
       String outcome = appTableHandler.processCreate();
    
       // If popup is required to be invoked after event handling
       PatternUtils.invokePopup(popupId);
    
       return outcome;
     }
   }
   

2. Register the managed bean in the faces-config of the project.

3. Bring up the Property Inspector for the Applications Table, and choose the Create Action property. Set #{CustomEventHandler.processCreate} as the expression for the property.

16.1.2 How to Create an Applications Table

You can create and add Applications tables to pages or page fragments. Using the wizard will create a working table without you having to hand-code every step. Once the table is created, you can change any parameters from the Property Inspector.

16.1.2.1 Adding Applications Tables to JSF Pages or Page Fragments

You create Applications tables in the Applications Tables wizard, which is displayed when you add the tables to your JSF pages (or page fragments) from the Component Palette or the Data Controls panel.

To start the Applications Table wizard from the Component Palette:

1. Open the Component Palette.

2. In the list, choose Applications.

3. In the list, click Table. JDeveloper will attempt to place the table at the current cursor location. If the current location is not appropriate, an error message displays. You also can drag the Table icon to the page in either the Design or the Source view. A plus + sign will be added to the arrow when it is over a location in which a table can be inserted.

   The Applications Table wizard is displayed.

To start the Applications Table wizard using the Data First method:

1. In the Application Navigator, open the Data Control panel.

2. Navigate to the data source that you want to bind to the Applications table. The data source must represent a rowset; that is, it must be a view object.

3. Drag and drop the data control to the JSF page.

4. In the Create context menu that is displayed, choose Applications > Table.

   The Applications Table wizard is displayed.

16.1.2.2 Adding Applications Table Components Using the Applications Table Wizard

This section explains how to use the Applications Table wizard to add components to your table.

In the Applications Table wizard you can:

• Bind your table to a data source

• Create placeholder columns and define their attributes

• Enable table ADF behaviors

• Select table default actions

The Applications Table wizard has two dialogs. Click Cancel in either dialog to cancel your actions and exit the wizard. Click Next to accept the defaults.

To add an Applications Table using the Applications Table wizard:

When the Applications Table wizard is launched, the Create Applications Table dialog is displayed, as shown in Figure 16-1.

Figure 16-1 Create Applications Table Dialog

1. In the Create Applications Table dialog:

   1. Select Read-only Table to prevent users from modifying the data. If you select Read Only, the options in the Component To Use column will change from Input to Output components.

   2. Bind data to the table (optional):

      • Select the Bind Data Now box to bind a data control to the table.

      • In the Table Data Collection section, click Browse to choose from a list of data sources available for binding.

        This step might take a few minutes.

        The Select Table Data Collection dialog is displayed, as shown in Figure 16-2.

        Figure 16-2 Select Table Data Collection Dialog

        
        

      • Select the data source to bind to your table and click OK.

      When you bind the data, the table creates placeholder columns that can be used for layout purposes.

   3. When you choose a data source to bind to your table, these options become available.

      Row Selection

      Select None to disable row selection by users.

      Select Single to allow users to be able to select individual rows in the table. This will set the rowSelection attribute to single. Selecting this option means that instead of the UI component determining the selected row, the iterator binding will access the iterator to determine the selected row. This is recommended when using ADF Model data binding.

      Select Multiple to allow users to be able to select multiple table rows.

      Sorting

      Select to allow users to be able to sort columns. Selecting this option means that the iterator binding will access the iterator which will perform an order-by query to determine the order. This is recommended when using ADF Model data binding. Only keep this checkbox unselected if you do not want to allow column sorting.

      Filtering

      Select to allow users to be able to filter the table based on given criteria. Selecting this option allows the user to enter criteria in text fields above each column. That criteria is then used to build a query-by-example search on the collection, so that the table will display only the results returned by the query.

   4. The Columns section is used to set the behavior of the table's columns.

      Group

      Select two or more columns then click this link to group the columns together in the table. The selected columns will be grouped together under a parent column.

      Ungroup

      Select columns that are grouped then click this link to ungroup the columns.

      Display Label

      By default, the label is bound to the labels property for the attribute on the table binding. You can instead enter text or an Expression Language expression to bind the label value to something else, for example, a key in a resource file.

      Value Binding

      Shows the attribute to which the value is bound. Use the drop-down list to choose a different attribute. If you simply want to rearrange the columns, you should use the order buttons. If you do change the attribute binding for a column, the label for the column also changes.

      Component to Use

      Shows the component used to display the value. Use the drop-down list to choose a different component. By default, output text components are selected for read only tables. Input text components are selected for all other tables. Input date components are used for attributes that are dates. If you want to use a different component, such as a command link or button, you need to use this dialog to select the outputText component, and then in the Structure window, replace the component with the desired UI component (such as a command link). By default, only ADF Faces components are shown in the menu. You can allow JSF Implementation components to also be chosen.

      Add Column

      Select a column name from the attributes list and click + to add the column name to your table. Repeat this step for all your table column names.

      Delete Column

      Click X to delete a column name.

      Sort Column Order

      Click the up or down arrows to sort the order of the columns.

   5. Click Continue.

      The Configure Table Patterns dialog is displayed, as shown in Figure 16-3.

      Figure 16-3 Configure Table Patterns Dialog

      
      

2. In the Configure Table Patterns dialog, select default actions for your Applications table (optional):

   • Create / Pattern: Creates a table row.

     • Once you have chosen to enable row creation, choose a pattern from the list to invoke an action.

     • If you choose the Popup pattern, click Configure Popup to display the Applications Popup wizard (see Section 16.4, "Using the Custom Wizard with Applications Popups") and follow the instructions to configure the popup associated with this pattern. See Table 16-1, "Applications Table Facets" for important information about the popup's Cancel button.

   • Duplicate / Pattern: Duplicates the row.

     • Once you have chosen to enable row duplication, choose a pattern from the list to invoke an action.

     • If you choose the Popup pattern, click Configure Popup to display the Applications Popup wizard (see Section 16.4, "Using the Custom Wizard with Applications Popups") and follow the instructions to configure the popup associated with this pattern. See Table 16-1, "Applications Table Facets" for important information about the popup's Cancel button.

   • Edit / Pattern: Enables row modification.

     • Once you have chosen to enable row editing, choose a pattern from the list to invoke an action.

     • If you choose the Popup pattern, click Configure Popup to display the Applications Popup wizard (see Section 16.4, "Using the Custom Wizard with Applications Popups") and follow the instructions to configure the popup associated with this pattern. See Table 16-1, "Applications Table Facets" for important information about the popup's Cancel button.

   • Export: Export the data to a Microsoft Excel-compatible file.

   • Delete: Allows users to delete the row.

     Confirm Delete: Select this option so that the default The selected record(s) will be deleted. Do you want to continue? prompt displays in a popup when the delete row function is used.

     When you set the confirmDelete attribute to true, the confirmation popup displays and the row is deleted when you click Yes. For this to work correctly, the partialTriggers on the af:table inside the fnd:applicationsTable should include ::confirm, and the ::delete and ::deleteConfirm ids must be removed so the partialRefresh happens only when you click Yes in the popup. Developers can choose to set the immediate property on the Yes button by using the deleteImmediate attribute. The No button has immediate set to true by default. See Section 16.1.2.2.1, "Manually Enabling Delete Confirmation."

     Confirmation Message: If you want to replace the default confirmation message with a custom one, enter the string here. The string will be converted to a text resource and added to the default resource bundle.

     If you already have a confirmation message defined in a resource bundle, click the ellipsis and choose from the list, as shown in Figure 16-4.

     Figure 16-4 Selecting an Existing Delete Confirmation Message

     
     

   If you need to manually create or edit the Delete Confirmation parameter, see Section 16.1.2.2.1, "Manually Enabling Delete Confirmation."

   For more information on pattern types, see Table 16-2, "Applications Table Properties".

3. Click OK to save your choices and create the Applications table, or click Cancel to delete your choices.

4. If you click OK, the table and its components appear in the editor, as shown in Figure 16-5.

   Figure 16-5 Applications Table and Its Components in the Editor

   
   

16.1.2.2.1 Manually Enabling Delete Confirmation

This section describes how to enable Delete Confirmation, or add or edit the custom confirmation message, if you have an existing table.

When you set the confirmDelete attribute to true, the confirmation popup displays and the row is deleted when you click Ok. For this to work correctly, the partialTriggers on the af:table inside the fnd:applicationsTable should include ::confirm, and the ::delete and ::deleteConfirm ids must be removed so the partialRefresh happens only when you click Ok in the popup. Setting deleteImmediate="true" when enabling delete confirmation sets the immediate attribute of the Ok button in the confirmation popup to true. The Cancel button of the delete confirmation popup has immediate set to true by default.

See Example 16-2 for sample code that shows both the delete confirmation enabled and the custom message.

Example 16-2 Sample Code Showing Delete Confirmation and Custom Message

<fnd:applicationsTable tableId="ATt2" id="AT2" confirmDelete="true"
        deleteMsg="#{viewcontrollerBundle.ARE_YOU_SURE_YOU_WANT_TO_DELET}"
        deleteEnabled="true" createPatternType="inline"
        duplicatePatternType="inline" editPatternType="inline"
        exportEnabled="true"
        createText="#{viewcontrollerBundle.NEW}">
  <f:facet name="additionalToolbarButtons"/>
  <f:facet name="additionalActionItems"/>
  <f:facet name="appsTableSecondaryToolbar"/>
  <f:facet name="appsTableStatusbar"/>
  <f:facet name="appsTableViewMenu"/>
  <f:facet name="table">
    <af:table var="row" rowBandingInterval="0" id="ATt2"
        partialTriggers="::confirm ::create ::createMenuItem 
        ::duplicate ::duplicateMenuItem">

With af:table selected in the Structure view, Figure 16-6 shows the PartialTriggers entries in the Property Inspector view.

Figure 16-6 Delete Confirmation PartialTriggers in Property Inspector

With fnd:applicationsTable selected in the Structure view in JDeveloper, the Property Inspector showing the custom message settings will appear similar to Figure 16-7.

Figure 16-7 Message Settings in Property Inspector

16.1.2.2.2 Multiple Row Selection on Table

If multiple row selection is enabled, editing functions will behave as shown in Table 16-3.

Table 16-3 Function Behavior with Multiple Row Selection Enabled

Function	Behavior
Delete	Selecting more than one row and selecting Delete deletes all the selected rows.
Create	Selecting more than one row and selecting Create will create a new row as the first row.
Edit	Selecting more than one row and selecting Edit will show an alert window asking you to select a single row to edit.
Duplicate	Selecting more than one row and selecting Duplicate will show an alert window asking you to select a single row to duplicate.

Enabling Multiple Row Selection Manually

If multiple row selection is selected in the Create Applications Table wizard (see Figure 16-1), this step is not required.

You can not change pages created with single row selection to multiple row selection by just changing the rowselection attribute on the ADF table inside the Applications Table. This is because multiple row selection does not work with the selectedrowkeys attribute. To enable multiple row selection on existing tables, set rowselection="multiple" and remove the selectedrowkeys attribute, as shown in Example 16-3.

Example 16-3 Example of Enabling Multiple Row Selection

<fnd:applicationstable tableid="att3" id="at3" deleteenabled="true"
             createpatterntype="inline"
             duplicatepatterntype="inline"
             editpatterntype="inline"
             createtext="#{viewcontrollerbundle.new}">
  <f:facet name="additionaltoolbarbuttons"/>
  <f:facet name="additionalactionitems"/>
  <f:facet name="table">
    <af:table value="#{bindings.gsflattable1.collectionmodel}"
        selectionListener="#{bindings.gsflattable1.collectionModel.makeCurrent}"
        var="row" rows="#{bindings.gsflattable1.rangesize}"
        emptytext="#{bindings.gsflattable1.viewable ? applcorebundle.table_empty_text_no_rows_yet : 
                  applcorebundle.table_empty_text_access_denied}"
        fetchsize="#{bindings.gsflattable1.rangesize}"
        rowbandinginterval="0" id="att3"
        partialtriggers="::delete ::deletemenuitem ::create ::createmenuitem ::duplicate ::duplicatemenuitem ::selectionlistener ::selectedrowkeys"
              rowselection="multiple">

16.1.2.2.3 Toggle Click to Edit / Edit All in Applications Table

The Applications Table toolbar has an icon that can be clicked to toggle the Click to Edit and Edit All functions, and the View Menu on the toolbar includes the same toggle feature. Figure 16-8 shows the Edit All menu option and icon when the table is in the Click to Edit mode.

Figure 16-8 Table Edit All Menu Option and Icon

Figure 16-9 shows the Click to Edit menu option and icon when the table is in the Edit All mode.

Figure 16-9 Table Click to Edit Menu Option and Icon

The toggle mode should only display if the table is editable. If it contains only output components, there should be no toggle button. This is a true/false property (see toggleEditRendered in Table 16-2) on the Applications Table and does not happen automatically.

16.1.3 Introduction to Selected Elements in the Table Property Inspector

When a table is added to a page, code similar to that shown in Example 16-4 is inserted and displayed in the Source view.

Example 16-4 Sample Code Added When a Table Is Added

<fnd:applicationsTable tableId="ATt1" id="AT1" confirmDelete="true"
            deleteMsg="#{viewcontrollerBundle.DO_YOU_WANT_TO_DELETE_THIS_ROW}"
            deleteEnabled="true" createPatternType="inline"
            duplicatePatternType="secondaryWindow"
            editPatternType="inline" exportEnabled="true"
            createText="#{viewcontrollerBundle.NEW}"
            duplicatePopupId="Afp2">
  <f:facet name="additionalToolbarButtons"/>
  <f:facet name="additionalActionItems"/>
  <f:facet name="table">
    <af:table value="#{bindings.ServiceRequests1.collectionModel}"
        var="row" rows="#{bindings.ServiceRequests1.rangeSize}"
        emptyText="#{bindings.ServiceRequests1.viewable ? applcoreBundle.TABLE_EMPTY_TEXT_NO_ROWS_YET : applcoreBundle.TABLE_EMPTY_TEXT_ACCESS_DENIED}"
        fetchSize="#{bindings.ServiceRequests1.rangeSize}"
        rowBandingInterval="0"
        selectedRowKeys="#{bindings.ServiceRequests1.collectionModel.selectedRow}"
        selectionListener="#{bindings.ServiceRequests1.collectionModel.makeCurrent}"
        rowSelection="single" id="ATt1"
        partialTriggers="::confirm ::create ::createMenuItem">

Many of these settings are easily changed using the Table Property Inspector, which contains these sub-sections: Common, Patterns, Style, Customization, and Other. This section discusses certain selected settings.

16.1.3.1 Common Properties Section

The Common properties section of the Table Property Inspector resembles Figure 16-10.

Figure 16-10 Common Properties Section

The selected Common settings are:

• Primary Toolbar Rendered: Set this to False if no default actions or buttons will be used. If this is set to True and there will be no actions or buttons, the separators around buttons will display even if no button displays.

• Secondary Toolbar Rendered: Set this to False if no default actions or buttons will be used. If this is set to True and there will be no actions or buttons, the separators around buttons will display even if no button displays.

• Actions Menu Rendered: If no default actions were selected in the wizard, set this to False to avoid doubled separator lines.

• ActionsContentDelivery: Sets the Content Delivery attribute on the actions menu of the table. The options are Immediate (the default) and Lazy. Immediate populates the action menus as soon as the page is displayed. Lazy only populates an action menu when it is selected. There will be a slight delay the first time the menu is selected; there will be no delay the next time the menu is selected because the menu items are cached. You should set the ActionsContentDelivery to Lazy when you do not have any partialTriggers set on the items in the Actions menu because setting the value to Immediate affects the performance.

16.1.3.2 Patterns Properties

The Patterns properties section of the Table Property Inspector resembles Figure 16-11. The properties for Create, Duplicate, Edit, and Delete are the same.

Figure 16-11 Patterns Properties Section

The selected Patterns settings are:

• Disabled: Sets whether or not the button is disabled (shown as grayed). This does not determine if the button is displayed; it only sets its appearance and functionality.

• Enabled: Sets the rendered attribute on the Create/Duplicate/Edit/Delete button icon and menu item. If you are using the default action, a string called create (or duplicate/edit/delete) is returned.

• Immediate: Sets whether or not data validation - client-side or server-side - should take place when events are generated by the button. When immediate is set to true, the default ActionListener provided by the JavaServer Faces implementation should be executed during the Apply Request Values phase of the request processing lifecycle, rather than waiting until the Invoke Application phase.

• Partial Triggers: A partial trigger affects only the selected item, rather than the entire page. For instance, Example 16-5 sets the partialTrigger attribute value on the Create button icon and Create menu item

  Example 16-5 Example of a Partial Trigger

  <af:inputComboboxListOfValues id="ledgerIdId"
          popupTitle="Search and Select: #{bindings.LedgerId.hints.label}"
          value="#{bindings.LedgerId.inputValue}"
          label="#{bindings.LedgerId.hints.label}"
          model="#{bindings.LedgerId.listOfValuesModel}"
          required="#{bindings.LedgerId.hints.mandatory}"
          columns="#{bindings.LedgerId.hints.displayWidth}"
          shortDesc="#{bindings.LedgerId.hints.tooltip}">
     <f:validator binding="#{bindings.LedgerId.validator}"/>
     <af:convertNumber groupingUsed="false"
           pattern="#{bindings.LedgerId.format}"/>
  </af:inputComboboxListOfValues>
  <fnd:applicationsTable tableId="ATt1" id="AT1" deleteEnabled="true"
            createPatternType="inline"
            duplicatePatternType="inline"
            editPatternType="inline"
            createText="#{viewcontrollerBundle.NEW}"
            createDisabled="#{bindings.LedgerId.inputValue == null}"                               
            createPartialTriggers=":::ledgerIdId">
  

16.1.3.3 Other Properties

The Patterns properties section of the Table Property Inspector resembles Figure 16-12.

Figure 16-12 Other Properties Section

• AttachImmediate and AttachText: Do not use. These have been deprecated.

16.1.4 How to Modify Applications Table Components and Properties

Once you create an Applications table in the Applications Table wizard, you can add data controls to the table and icons and menu actions to the table menu bar.

16.1.4.1 Adding Data Controls to Tables

To add Data Controls to tables:

1. Find the data source in the Data Controls panel.

2. Drag and drop either the entire data source or individual fields:

   • To the table in the page Design view.

     Use the context menu that is displayed when you drag to the Design view to choose which component to use for this attribute.

     For example, you might drag and drop the data control component TimezoneServiceAMDataControl > Timezone > Name, then choose Create > Texts > ADF Input Text w/ Label from the context menu, as shown in Figure 16-13.

     Figure 16-13 Example of Context Menu Choices in Design View

     
     

   • To the page Structure view.

     For example, to add a field from a data source to a table, drag the field from the data source to this path: fnd:applicationsTable > f:facet – table > af:table <tableId>. When you drop the field on the component, you are prompted to choose which component to use for this attribute. Using the example in Figure 16-14, you would choose either the ADF Read-only Column, or the ADF Column, depending on whether the fields need to be read-only or not.

Figure 16-14 Example of Context Menu Choices in Structure View

16.1.4.2 Working with Table Menus and Icons

To add buttons, icons and menu items to the table menu bar, in the Component Palette, drag and drop any component (such as an icon component) to the menuBar facet to add the component.

If you have multiple buttons added to the additionalToolbarButton facet, they may display vertically, instead of horizontally, at runtime. To correct this display, surround the toolbar buttons with an af:toolbar, as shown in Example 16-6:

Example 16-6 Surrounding the Toolbar Buttons with af:toolbar

<f:facet name="additionalToolbarButtons">
   <af:toolbar>
     <af:commandToolbarButton text="Button1"/>
     <af:commandToolbarButton text="Button2"/>
   </af:toolbar>
</f:facet>

Note:

The Format menu is part of Applications Table. It provides several functions, including move rows and sort selection. Rows have to be selectable to enable this.

For tables and treeTables with selectable columns, the default top level menu items are View and Format. To turn off the Format menu, the af:table should not have selectable columns.

16.1.4.3 Increasing Table Width to Fill 100% of Its Container

Applications Table can be stretched by placing it in the center facet of an ADF panelStretchLayout component. Do not set the width using the inlineStyle attribute on either Applications Table or panelStretchLayout. For more information about basic page layout and the inlineStyle attribute, see the "Organizing Content on Web Pages" and the "Customizing the Appearance Using Styles and Skins" chapters in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition).

16.1.4.4 Using an Applications Table with a Query Component

Note:

If you use just the ApplicationTable ID in the resultComponentId of the ADF Query component, the underlying table is not refreshed with the results of the search.

When using an Applications Table as a resultant table that shows the results from a search on a query component, follow these steps to set the resultComponentId attribute on af:query:

1. In the JSF page that contains the query component and the Applications Table, select the query component.

2. In the Property Inspector, select the resultComponentId property and then Edit.

3. From the edit panel, select the af:table (the ADF table that is present in the "table" facet of the Applications Table).

The resultComponentId would follow this format:

::<applicationsTableId>:_ATp:<tableId>

and would appear similar to:

resultComponentId="::AT1:_ATp:ATt7"

16.1.5 What Happens When You Add an Applications Table

When you add an Applications Table to your JSF page, components of the Applications Table, such as the ADF table, are bound to the model.

16.2 Implementing the Applications Tree

The Applications Tree component provides the following basic capabilities that satisfy the requirements specified in the user experience designs:

• Tree toolbar with default buttons

• Facets for adding ADF tree, custom toolbar buttons, and so on

• Default implementations for tree actions

16.2.1 How to Add an Applications Tree to Your Page

You can add an Applications Tree to your page in two ways.

• You can select the Applications Tree from the Applications component palette and drag and drop it on your page.

• You can drag and drop a data collection from the data control palette to your page and select the Applications Tree from the list of available UI components.

The facets shown in Table 16-4 are exposed on the Applications Tree.

Table 16-4 Applications Tree Facets

Facet	Description	Allowed Children
tree	Facet for holding the ADF tree	ADF Tree
additionalToolbarButtons	Facet for adding toolbar button icons by the developer.	ADF Command Toolbar Buttons
additionalActionItems	Facet for adding more menu items to default menu items.	ADF menu item component
appsTreeSecondaryToolbar	Facet for adding more commandToolbar components to secondary toolbar.	ADF Command Toolbar Button component
appsTreeStatusbar	Facet for adding component containing statusbar item(s). These statusbar items are merged with standard items provided by the panelCollection.	ADF component
appsTreeViewMenu	Facet for adding Menu Item(s) to added to the default view menu of the panelCollection. To add multiple menuItems into the view menu please add af:group component containing af:menuItems.	ADF menu item component
appsTreeAfterToolbar	Facet for adding more commandToolbar button components to after toolbar. In this facet any toolbar buttons added appear in a separate row below the normal group of toolbars.	"af:toolbar" or "af:groups" of "af:toolbars"
popup	Facet for adding popups. See Section 16.4, "Using the Custom Wizard with Applications Popups." Important: When a popup is used to create or duplicate a row in an Applications Tree, you need to write your own logic behind the popup's Cancel button (Action/ActionListener) to remove the newly-created row. This can be done by either: A managed bean method that removes the newly-created row. Setting the Cancel button's Action property to the rollback method defined in the pageDef file. This method would be defined in the pageDef file if the "rollback" from the operations of the dataControl is dragged and dropped onto the page.	Any number of popups under a layout component

The properties shown in Table 16-5 are exposed on the Applications Tree.

Table 16-5 Exposed Applications Tree Properties

Property	Description	Allowed Values
id	The unique ID for this Applications Tree	string
rendered	Whether the Applications Tree is rendered or not	boolean / expression
treeId	The unique ID of the ADF tree underneath this Applications Tree	string
createPatternType	Whether any Create pattern is enabled, and if yes, which pattern	none, secondaryWindow (then Create Popup Id must also be set), page
editPatternType	Whether any Edit pattern is enabled, and if yes, which pattern	none, secondaryWindow (then Edit Popup Id must also be set), page
duplicatePatternType	Whether any Duplicate pattern is enabled, and if yes, which pattern	none, inline (see "Inline Duplicate Pattern Type"), secondaryWindow (then Duplicate Popup Id must also be set), page
createEnabled	Rendered attribute for create	string
editEnabled	Rendered attribute for edit	boolean value or Expression Language expression
duplicateEnabled	Rendered attribute for duplicate	boolean value or Expression Language expression
deleteEnabled	Rendered attribute for delete	boolean value or Expression Language expression
createAction	Action binding for the Create icon	method expression
editAction	Action binding for the Edit icon	method expression
duplicateAction	Action binding for the Duplicate icon	method expression
deleteAction	Action binding for the Delete icon	method expression
createActionListener	Action listener binding for the Create icon	method expression If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it.
editActionListener	Action listener binding for the Edit icon	method expression If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it.
duplicateActionListener	Action listener binding for the Duplicate icon	method expression If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it.
deleteActionListener	Action listener binding for the Delete icon	method expression If defined, this property can be used to supplement or override the default action.
createPopupId	ID of the popup to be invoked when Create button is clicked	string
editPopupId	ID of the popup to be invoked when Edit button is clicked	string
duplicatePopupId	ID of the popup to be invoked when Duplicate button is clicked	string
createText	Overrides default label for Create menu item. This value will also be shown as the short description for the Create button.	expression
editText	Overrides default label for Edit menu item. This value will also be shown as the short description for the Edit button.	expression
duplicateText	Overrides default label for Duplicate menu item. This value will also be shown as the short description for the Duplicate button.	expression
deleteText	Overrides default label for Delete menu item. This value will also be shown as the short description for the Delete button.	expression
exportEnabled	Whether export is enabled	boolean / expression
featuresOff	A list of default features to turn off for the panelCollection, such as detach (see featuresOff attribute of panelCollection for more details)	string
inlineStyle	The CSS styles to use for the panelCollection component inside the Applications Tree component. This is intended for basic style changes. Note: Do not set the width using the inlineStyle attribute on either Applications Tree or panelStretchLayout. Applications Tree can be stretched by placing it in the center facet of an ADF panelStretchLayout component.	string
styleClass	styleClass to use for the panelCollection component inside Applications Tree component.	string
createImmediate	Sets immediate attribute value of "Create" toolbar button and "Create" menu item.	boolean / expression
deleteImmediate	Sets immediate attribute value of "Delete" toolbar button and "Delete" menu item.	boolean / expression
duplicateImmediate	Sets immediate attribute value of "Duplicate" toolbar button and "Duplicate" menu item.	boolean / expression
editImmediate	Sets immediate attribute value of "Edit" toolbar button and "Edit" menu item.	boolean / expression
actionsMenuRendered	Sets rendered attribute value of the Actions menu. When CRUD actions are not turned on, and no af:commandMenuItem is added to the additionalActionItems facet, then actionsMenuRendered should be set to false so that an empty Actions menu would not be displayed.	boolean / expression
primaryToolbarRendered	Sets rendered attribute value of the primary toolbar. When CRUD actions, attach, export are not turned on, and no af:commandToolbarButton is added to additionalToolbarButtons facet, then primaryToolbarRendered should be set to false so that an empty toolbar would not be displayed.	boolean / expression
secondaryToolbarRendered	Sets rendered attribute value of the secondary toolbar. When no af:commandToolbarButton is added to appsTableSecondaryToolbar facet, then secondaryToolbarRendered should be set to false so that an empty toolbar would not be displayed.	boolean / expression
createDisabled	Disabled attribute for create	Boolean value or Expression Language expression
editDisabled	Disabled attribute for edit	Boolean value or Expression Language expression
duplicateDisabled	Disabled attribute for duplicate	Boolean value or Expression Language expression
deleteDisabled	Disabled attribute for delete	Boolean value or Expression Language expression
confirmDelete	Set this value if you want delete confirmation to come up. The default message is The selected record(s) will be deleted. Do you want to continue? To change this, use the deleteMsg attribute.	Boolean value or Expression Language expression
deleteMsg	Provide a customized delete confirmation message that can be shown in the popup.	String value or Expression Language expression

Inline Duplicate Pattern Type

For inline patterns, the ADF tree underneath the Applications Tree should get refreshed once the icon or the menu item is clicked. For this to happen, the ADF tree needs to know that it should partially refresh itself. For this, set the partialTriggers attribute on the ADF tree to the ids of the menu item and the icon. For example, to refresh the tree when the Delete menu item or icon is clicked, set partialTriggers="delete deleteMenuItem" on the ADF tree. The partialTriggers attribute is set by the Applications Tree Creation wizard automatically; Applications developers should not need to set it explicitly. Example 16-7 shows a sample markup that is generated by the Applications Tree Creation wizard.

Example 16-7 Sample Markup Generated by the Applications Tree Creation Wizard

<fnd:applicationsTree treeId="tree1" id="appsTree1"
                              createPatternType="secondaryWindow"
                              createPopupId="create1,create2"
                              duplicatePatternType="inline"
                              deleteEnabled="true">
            <af:tree value="#{bindings.ServiceRequestsView1.treeModel}"
                     var="node" rowSelection="single"
                     selectionListener="#{ApplicationsTreeBean.treeSelectionHandler}"
                     id="tree1"
                     partialTriggers="::duplicate ::duplicateMenuItem ::delete ::deleteMenuItem">

Model

The Applications Tree does not expose any bindings to the model. However, components within the Applications Tree, like the ADF tree, will be bound to the model.

Controller

The Applications Tree component ships a default managed bean that performs the following functions:

• Default event handlers for all toolbar button/menu item action events. Event handler delegates to custom action method if set on the button/menu item action property.

  • A new row is created in the data collection, a popup invoked with the newly created row available for inserting values (the UI for the popup to show input fields for the new row has to be created separately by the developer), when Create Pattern Type is secondaryWindow. After the popup is dismissed, the tree is refreshed to display the newly-created node:

    • If No Node is selected when the Create button or menu item is clicked: The new node is created in the first-level of the Tree.

    • If Leaf Node or Expanded Parent Node is selected when the Create button or menu item is clicked: The new node is created as a child of the selected node, and placed directly below it.

    • If Collapsed Parent Node is selected: The parent is expanded to show the newly created child node placed directly below it.

  • A new row is not added when the Create Pattern Type is page, and the developer is responsible for wiring the navigation to the page when the icon or menu item is clicked. Only a standard outcome is returned from the default handler. The developer could use this default outcome to define a navigation rule.

  • The selected row is made available for editing in a popup when the Edit icon is clicked, and Edit Pattern Type is secondaryWindow.

  • When the Edit icon is clicked, and Edit Pattern Type is page, only a standard outcome is returned.

  • When the Duplicate icon or menu item is clicked: A new node is added into the tree when the Create icon is clicked, and Create Pattern Type is inline. All non-primary key values of the selected node are copied to the new node.

  • If Duplicate Pattern Type is inline, the newly created node is placed next to the selected node.

  • If Duplicate Pattern Type is popup, a popup invoked with the newly created row is available for modifying the duplicated values (the UI for the popup to show input fields for the new row has to be created separately by the developer).

  • Clicking the Delete icon deletes the selected node. It currently does not perform a cascade delete when a parent node is selected for delete. Applications developers need to handle deleting the child nodes if it is necessary.

• If the secondaryWindow option is chosen for any pattern type, and the corresponding popup id is set for that button (mandatory), then selecting the button invokes the popup.

• If page is chosen for any pattern type, then a standard outcome is returned on clicking the button. Standard outcomes are: create, edit, duplicate and delete for the four respective toolbar buttons.

• A default selection listener for the ADF tree is provided (the markup shows selectionListener="#{ApplicationsTreeBean.treeSelectionHandler}"). If you need to add custom logic to the selection listener, you should call this default selection listener from the custom logic. The treeSelectionHandler method of the ApplicationsTreeBean provides the following behavior:

  • When xxxxPatternType="secondaryWindow" and when there is no popup configured for the level where the node needs to be created, the icon and the menu item are disabled by default. But this behavior can be overridden by the xxxxDisabled attribute, where "xxxx" could be create, edit or duplicate.

  • Calls the ADF default tree listener: #{bindings.xxxx.treeModel.makeCurrent}

Example 16-8 shows sample code for calling the default selection listener from the custom selection listener.

Example 16-8 Calling the Default Selection Listener from the Custom Selection Listener

String defaultListener = "#{ApplicationsTreeBean.treeSelectionHandler}";
FacesContext fc = FacesContext.getCurrentInstance();
ExpressionFactory ef = fc.getApplication().getExpressionFactory();
MethodExpression me =
            ef.createMethodExpression(fc.getELContext(), defaultListener,
                                      String.class, new Class[]{SelectionEvent.class});
me.invoke(fc.getELContext(), new Object[] {selectionEvent});

To allow developers access to some of the implementation, the Applications Tree exposes a public class, oracle.apps.fnd.applcore.patterns.ApplicationsTreeEventHandler, that contains default event handlers for all the buttons. The button methods are named as process<buttonName>, such as processCreate and processEdit. Applications developers writing custom action handlers can also use the default implementation by calling these methods.

Use

For example, to attach a custom button handler to the Create button, follow these steps.

1. Define a managed bean class, as shown in Example 16-9:

   Example 16-9 Defining Managed Bean Class to Attach Custom Handler to a Button

   import oracle.apps.fnd.applcore.patterns.ui.ApplicationsTreeEventHandler;
   import oracle.apps.fnd.applcore.patterns.ui.util.PatternUtils;
    
   public class CustomEventHandler
   {
     public String processCreate()
     {
       // Custom code
       ...
    
       // Call default event handler if required. It will return a standard outcome for this button click.
       ApplicationsTreeEventHandler appTreeHandler = ApplicationsTreeEventHandler.getInstance();
       String outcome = appTreeHandler.processCreate();
    
       // If popup is required to be invoked after event handling
       PatternUtils.invokePopup(popupId);
    
       return outcome;
     }
   }
   

2. Register the managed bean in the faces-config of the project.

3. Select the Property Inspector for the Applications Tree, and choose the Create Action property. Set #{CustomEventHandler.processCreate} as the expression for the property.

16.2.1.1 Adding the Applications Tree

The Applications Tree can be added to a page or page fragment using either the Component First or the Data First approach. Valid drop locations in the page or page fragment include ADF Form, and ADF Layout components and the Applications Panel (jsp:root, af:form, af:root, fnd:applicationsPanel, af:group, af:panelBorderLayout, af:panelBox, af:panelCollection, af:panelFormLayout, af:panelGroupLayout, af:panelHeader, af:panelStretchLayout, af:showDetailItem, af:panelWindow, af:popup, af:showDetail, af:subform, f:facet, f:panelGrid, f:panelGroup, af:pageTemplateDef, af:pageTemplate#<localArea_Facet>).

The Applications Tree can be added to a page or page fragment using either the Component First or the Data First approach. Both approaches launch a wizard that helps you quickly define the appropriate tree layout which adhere to the user experience standards. Once you complete this wizard, you can further refine the tree definition by editing the resulting tree component as needed.

Component First

Navigate to the Component Palette. Click the list of libraries and select Applications. Drag the Applications Tree from the list of components and drop it onto the page. The wizard will launch after dropping the Applications Tree on the page.

Data First

Navigate to the Data Controls panel of the Application Navigator. Open the panel by clicking its bar, then navigate through the hierarchy to locate the data source that you would like to include in the Applications Tree. Select that data source and drag it on to the page. A context menu will appear with a list of components. Move the mouse over the Applications category list. Select Tree under the Applications menu to launch the Applications Tree wizard, as shown in Figure 16-15.

Figure 16-15 Data First Method

16.2.1.2 Applications Tree Create Wizard

The Applications Tree Create wizard consists of two panels: Create Applications Tree and Configure Tree Patterns.

Create Applications Tree Panel

The Create Applications Tree panel will vary depending on the approach used to launch the Applications Tree creation process.

Using the Data First approach the Bind Data Now properties are hidden. The selected data source is automatically bound to the tree.

With the Component First approach, it is up to the developer to decide whether to bind a Data Collection to the tree component. You can skip the data control binding step when creating the Applications Tree. In this case, the Applications Tree will create an ADF tree without data binding.

If you wish to bind a data control to the tree component using the Component First approach, check the Bind Data Now checkbox. This will enable the Browse button for the Data Source property. Click Browse to display a list of data sources available for binding. Navigate through the list, select the desired data source, and click OK, as shown in Figure 16-16.

Figure 16-16 Create Applications Tree Data Source

Once the Data Source is selected, you can configure the ADF tree. Use the Add icon to add one of the children of the selected Data Source to be the next level of the tree, as shown in Figure 16-17.

Figure 16-17 Configuring the ADF Tree

• Tree Level Rules: This pane displays rules that control the display order of the hierarchical tree or tree table UI components. The tree binding populates the tree UI component starting from the top of the Tree Level Rules list and continues until it reaches the last rule or until it encounters a rule whose accessor cannot find a target attribute. The more rules you choose, the more nodes you can display in the tree or tree table UI component.

• Folder Label: Specify an Expression Language expression that selects labels to display in the tree, such as #{label.countryLabel}.

  You also can use the Expression Language expression #{node.accessorLabel} to obtain information that allows you to traverse up and down a tree of data, not necessarily starting at the logical root node of the tree. This is useful if you want to access a parent node rather than the root node of the tree.

• Enable Filtering: Select to filter the data that displays in the tree or tree table. After you select this checkbox, you can select an attribute on the data collection that will be used to filter the table data that display in the tree or tree table.

• Available Attributes and Selected Attributes: The shuttle at the bottom of the Create Applications Tree panel allows you to control the attributes at each tree level you wish to display as a tree node in the tree. When finished, click Continue to proceed to the Configure Tree Patterns Dialog. Select Cancel to abort the creation of the Applications Tree.

Configure Tree Patterns Panel

Use the Configure Tree Patterns panel to select the default actions offered by your Applications Tree. See Figure 16-18.

Figure 16-18 Configure Tree Patterns

You may select any or all of the following five actions for your Applications Tree: Create, Duplicate, Edit, Delete and Export. If you enable Create, Duplicate, or Edit, you must choose the appropriate pattern that will be used to invoke that action (Inline, Popup, or Page).

• Inline - Perform the action on the current table row (only available for the Duplicate action)

• Popup - Bring up a div modal window on top of the current page for the requested action

• Page - Replace the current page or page fragment with a completely separate page or page fragment to perform the action. Page fragments are used when using bounded task flows.

The Add button for configuring the Popup button is enabled when the Popup pattern is selected. When you click Add, a dropdown of the data collection name of each tree level is displayed. You need to choose the tree level that needs the popup to be configured. When a data collection name is selected, the Applications Popup wizard is displayed. (See Section 16.4, "Using the Custom Wizard with Applications Popups.") This same data collection will automatically be bound to the Applications Popup. The Popup will also be defaulted as having Editable Content on the Window Buttons page in the wizard.

Export: Export the data to a Microsoft Excel-compatible file.

Delete: Allows users to delete the row.

• Confirm Delete: Select this option so that the default The selected record(s) will be deleted. Do you want to continue? prompt displays in a popup when the delete row function is used.

  When you set the confirmDelete attribute to true, the confirmation popup displays and the row is deleted when you click Ok. For this to work correctly, the partialTriggers on the af:tree inside the fnd:applicationsTree should include ::confirm, and the ::delete and ::deleteConfirm ids must be removed so the partialRefresh happens only when you click Ok in the popup. See Section 16.1.2.2.1, "Manually Enabling Delete Confirmation."

• Confirmation Message: If you want to replace the default confirmation message with a custom one, enter the string here. The string will be converted to a text resource and added to the default resource bundle.

  If you already have a confirmation message defined in a resource bundle, click the ellipsis and choose from the list, as shown in Figure 16-4.

When finished, click OK to complete creation of the Applications Tree. Selecting Cancel will abort the creation of the Applications Tree.

16.2.1.3 Working with the Applications Tree

This section discusses modifying settings in the JDeveloper Property Inspector. For more information, see Section 16.1.3, "Introduction to Selected Elements in the Table Property Inspector."

Editing - Properties

Once you have created the Applications Tree, you can modify the property values by using the Property Inspector. You can select the Applications Tree in one of three ways:

• Select the component in the Design view of the page.

• Select the <fnd:applicationsTree ...> line in the Source view of the page.

• Select fnd:applicationTree from the hierarchy in the Structure View.

All the components created as part of the Applications Tree are editable using this same approach, as shown in Figure 16-19.

Figure 16-19 Tree Property Inspector

Adding a Data Source

Once you have created the Applications Tree, you can add data controls to the facets / content containers within that tree using the following steps:

1. Navigate to the Data Controls panel of the Application Navigator.

2. Open the hierarchy to find the data source.

3. Drag and drop either the entire data source or individual fields into the correct location on the page. The correct location is dependent on the component.

Adding UI Content

To achieve the final goals for a page design, you will likely need to add other components to the Applications Tree. Common facets are provided to help you achieve these goals. The facet names and use are documented in the Facet tree of the Component Structure and Functions. For example, your tree may require an additional action beyond the standard actions that are provided by the Applications Tree. You can navigate to the Component Palette and drag and drop a commandToolbarButton component on to the additionalToolbarButtons facet to add a new icon to the Tree toolbar.

Increasing Tree Width to Fill 100% of Its Container

An Applications Tree can be stretched by placing it in the center facet of an ADF panelStretchLayout component. Do not set the inlineStylewidth on panelStretchLayout. For more information about basic page layout and the inlineStyle attribute, see the "Organizing Content on Web Pages" and the "Customizing the Appearance Using Styles and Skins" chapters in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition).

16.3 Implementing Applications Tree Tables

The Application Tree Table component implements the tree table portion of the user experience pattern.

The Application Tree Table component provides these basic capabilities to satisfy the requirements specified in the user experience designs:

• Tree Table toolbar with default buttons.

• Facets for adding items such as ADF tree table and custom toolbar buttons.

• Default implementations for tree actions.

Adding an Application Tree Table to Your Page

You can add the Application Tree Table to your page in two ways.

• Select the Application Tree Table from the Applications component palette and drag and drop it on your page.

• Drag and drop a data collection from the data control palette to your page and select the Applications Tree Table from the list of available UI components.

The properties shown in Table 16-6 are exposed on the Applications Tree Table:

Table 16-6 Applications Tree Table Properties

Property	Description	Allowed Values
id	Unique ID for this Applications Tree Table.	string
rendered	Whether the Applications Tree Table is rendered or not.	boolean / expression
treeTableId	Unique ID of the ADF tree table underneath this Applications Tree Table.	string
createPatternType	Whether any Create pattern is enabled, and if yes, which pattern.	none, inline, secondaryWindow (then Create Popup Id must also be set), page
editPatternType	Whether any Edit pattern is enabled, and if yes, which pattern.	none, inline, secondaryWindow (then Edit Popup Id must also be set), page
duplicatePatternType	Whether any Duplicate pattern is enabled, and if yes, which pattern.	none, inline (see Note), secondaryWindow (then Duplicate Popup Id must also be set), page
deleteMsg	Provide a customized delete confirmation message that can be shown in the popup.	Boolean value or Expression Language expression
deleteEnabled	Whether any Delete pattern is enabled.	boolean
createEnabled	Whether any Create pattern is enabled.	boolean
duplicateEnabled	Whether any Duplicate pattern is enabled.	boolean
editEnabled	Whether any Edit pattern is enabled.	boolean
confirmDelete	Set this value if you want delete confirmation to come up. The default message is The selected record(s) will be deleted. Do you want to continue? To change this, use the deleteMsg attribute.	Boolean value or Expression Language expression
createAction	Action binding for the Create icon.	method expression
editAction	Action binding for the Edit icon.	method expression
duplicateAction	Action binding for the Duplicate icon.	method expression
deleteAction	Action binding for the Delete icon.	method expression
createActionListener	Action listener binding for the Create icon.	method expression
editActionListener	Action listener binding for the Edit icon.	method expression
duplicateActionListener	Action listener binding for the Duplicate icon.	method expression
deleteActionListener	Action listener binding for the Delete icon.	method expression
createPopupId	ID of the popup to be invoked when the Create button is clicked.	string
editPopupId	ID of the popup to be invoked when the Edit button is clicked.	string
duplicatePopupId	ID of the popup to be invoked when the Duplicate button is clicked.	string
deletePopupId	ID of the popup to be invoked when the Delete button is clicked.	string
createText	Overrides the default label for the Create menu item.	expression
editText	Overrides the default label for Edit menu item.	expression
duplicateText	Overrides the default label for Duplicate menu item.	expression
deleteText	Overrides the default label for Delete menu item.	expression
exportEnabled	Whether export is enabled.	boolean / expression
featuresOff	A list of default features to turn off for the panelCollection, for instance detach (see featuresOff attribute of panelCollection for more details)	string
inlineStyle	The CSS styles to use for the panelCollection component inside the Applications Tree Table component. This is intended for basic style changes. Note: Do not set the width using the inlineStyle attribute on either Applications Tree Table or panelStretchLayout. Applications Tree Table can be stretched by placing it in the center facet of an ADF panelStretchLayout component.	string
styleClass	styleClass to use for the panelCollection component inside the Applications Tree Table component.	string
createImmediate	Sets immediate attribute value of Create toolbar button and Create menu item.	boolean / expression
deleteImmediate	Sets immediate attribute value of Delete toolbar button and Delete menu item.	boolean / expression
duplicateImmediate	Sets immediate attribute value of Duplicate toolbar button and Duplicate menu item.	boolean / expression
editImmediate	Sets immediate attribute value of Delete toolbar button and Delete menu item.	boolean / expression
createDisabled	Disabled attribute for Create.	Boolean value or Expression Language expression
deleteDisabled	Disabled attribute for Delete.	Boolean value or Expression Language expression
editDisabled	Disabled attribute for Edit.	Boolean value or Expression Language expression
duplicateDisabled	Disabled attribute for Duplicate.	Boolean value or Expression Language expression
actionsMenuRendered	Sets the rendered attribute value of the Actions menu. When CRUD actions are not turned on, and no af:commandMenuItem is added to the additionalActionItems facet, actionsMenuRendered should be set to False so that an empty Actions menu will not be displayed.	boolean / expression
primaryToolbarRendered	Sets the rendered attribute value of the primary toolbar. When CRUD actions, attach, export are not turned on, and no af:commandToolbarButton is added to the additionalToolbarButtons facet, primaryToolbarRendered should be set to False so that an empty toolbar will not be displayed.	boolean / expression
secondaryToolbarRendered	Sets the rendered attribute value of the secondary toolbar. When no af:commandToolbarButton is added to the appsTableSecondaryToolbar facet, secondaryToolbarRendered should be set to False so that an empty toolbar will not be displayed.	boolean / expression
toggleEditRendered	The toggleEditRendered feature is used to render the editAll or clickToEdit choices for Applications Tree Table. See Section 16.3.1.2.4, "Toggle Click to Edit / Edit All in Applications Tree Table."	Boolean. Default value is False.
<button_name>PartialTriggers For example: deletePartialTriggers	Partial triggers attribute for the <button_name> toolbar button. The partial triggers property of the Create, Edit, Duplicate and Delete buttons, and menu items are exposed. Users can enable and disable buttons according to rows selected or other actions carried out on the page. The same partialTrigger attribute for each one is used both for the commandToolbarButton and the menu item. For example, when the createPartialTriggers is set in the Applications Tree Table, the value for this attribute is set on the partialTrigger property of both the create command toolbar button and create menu item.	String of IDs. Important: The PartialTriggers attribute must be entered manually by the developer. This is because, at design time, the JDeveloper Property Inspector can: Select the incorrect ID. Append square brackets around the selected id, such as [id1 id2]. Example 1: To disable the Edit, Delete and Duplicate buttons when the table is empty, set this property on the editDiabled, deleteDisabled or duplicateDisabled property of the Applications Tree Table. #{bindings.VOiterator.estimatedRowCount == 0 ? true: false} where VOiterator is your iterator name Example 2: Disable any of the buttons in the Applications Tree Table according to the functional rules or by setting disable=false once create is selected on an empty table (considering these buttons were disabled following Example 1). To do this, create an attribute binding on the view object attribute that will decide whether or not the row can be deleted/edited/duplicated. For example, you can use a binding similar to this example on the disable property of a button: #{bindings.MyAtttrBinding.inputValue == 'compare value' ? true : false} Add Partial Page Refresh (PPR) on the button to the table ID of the af:table. This does not require any change in the selectionListener of the table. Keep the default one.

Note:

For inline patterns, the ADF tree table beneath the Applications Tree Table should be refreshed once the icon or the menu item is clicked. For this to happen, the ADF tree table needs to know that it should partially refresh itself. To do this, set the partialTriggers attribute on the ADF tree table to the Ids of the menu item and icon. For example, to refresh the tree table when the Delete menu item is selected or the icon is clicked, set partialTriggers="delete deleteMenuItem" on the ADF tree table. The partialTriggers attribute is set by the Applications Tree Table Creation wizard automatically. Applications developers should not need to set it explicitly. Example 16-10 shows a sample markup that is generated by the Applications Tree Table Creation wizard.

Example 16-10 Sample Markup Generated by the Applications Tree Table Creation Wizard

<fnd:applicationsTreeTable treeTableId="treeTable1" id="appsTree1"
                              createPatternType="secondaryWindow"
                              createPopupId="create1,create2"
                              duplicatePatternType="inline"
                              deleteEnabled="true">
          <f:facet name="treeTable">
            <af:treeTable value="#{bindings.ServiceRequestsView1.treeModel}"
                     var="node" rowSelection="single"
                     selectionListener="#{ApplicationsTreeBean.treeSelectionHandler}"
                     id="treeTable1"
                     partialTriggers="::duplicate ::duplicateMenuItem ::delete ::deleteMenuItem">

Table 16-7 shows the facets that are exposed on the Applications Tree Table.

Table 16-7 Applications Tree Table Facets

Facet	Description	Allowed Children
treeTable	Facet for holding the ADF tree table.	ADF Tree Table
additionalToolbarButtons	Facet for adding toolbar icons by the developer.	ADF Command Toolbar Buttons
additionalActionItems	Facet for adding more menu items to default menu items.	ADF menu item component
appsTreeTableAfterToolbar	Facet for adding an af:toolbar or af:groups of af:toolbars that appear in a separate row below the normal group of toolbars.	ADF Toolbar or ADF Groups of Toolbar
appsTreeTableSecondaryToolbar	Facet for adding more commandToolbar components to the secondary toolbar.	ADF Command Toolbar Button component
appsTreeTableStatusbar	Facet for adding component containing statusbar items. These statusbar items are merged with standard items provided by the panelCollection.	ADF component
appsTreeTableViewMenu	Facet for adding Menu Items to the default view menu of the panelCollection. To add multiple menuItems to the view menu, add an af:group component containing af:menuItems.	ADF menu item component
popup	Facet for adding popups. See Section 16.4, "Using the Custom Wizard with Applications Popups." Important: When a popup is used to create or duplicate a row in an Applications Tree Table, you need to write your own logic behind the popup's Cancel button (Action/ActionListener) to remove the newly-created row. This can be done by either: A managed bean method that removes the newly-created row. Setting the Cancel button's Action property to the rollback method defined in the pageDef file. This method would be defined in the pageDef file if the "rollback" from the operations of the dataControl is dragged and dropped onto the page.	Any number of popups under a layout component.

Model

The Applications Tree Table does not expose any bindings to the model. However, components within the Applications Tree Table, such as the ADF tree table, will be bound to the model.

Controller

The Applications Tree Table component ships a default managed bean (internal to the Oracle Fusion Middleware Extensions for Applications team) that performs the following functions that will only work with rowSelection="single" on the ADF tree table:

• Default event handlers for all toolbar button/menu item action events. Event handler delegates to custom action method if set on the button/menu item action property.

  • When Create Pattern Type is secondaryWindow, a new row is created in the data collection and a popup is invoked with the newly-created row available for inserting values. (The UI for the popup to show input fields for the new row has to be created separately by the developer.) After the popup is dismissed, the tree table is refreshed to display the newly-created row:

    • If no row is selected when the Create button or menu item is clicked, the new row is created in the first-level of the Tree.

    • If Leaf Node or Expanded Parent Node is selected when the Create button/menu item is clicked, the new row is created as a child of the selected node and placed directly below it.

    • If the Collapsed Parent Node is selected, the parent is expanded to show the newly-created child node that placed directly below it.

    • A new row is not added when the Create Pattern Type is page. Only a standard outcome is returned

    • A new row is added into the tree table when the Create icon is clicked, and Create Pattern Type is inline.

    • The selected row is made available for editing in a popup when the Edit icon is clicked, and Edit Pattern Type is secondaryWindow.

    • When the Edit icon is clicked and Edit Pattern Type is page, only a standard outcome is returned.

    • When the Duplicate icon or menu item is clicked, a new node is added into the tree when the Create icon is clicked, and Create Pattern Type is inline. All non-primary key values of the selected node are copied to the new node.

    • If Duplicate Pattern Type is inline, the newly-created row is placed above the selected row.

    • If Duplicate Pattern Type is popup, a popup invoked with the newly-created row is available for modifying the duplicated values (the UI for the popup to show input fields for the new row has to be created separately by the developer).

    • Clicking the Delete icon deletes the selected row. It currently does not perform cascade delete when a parent node is selected for delete. The Applications developer needs to handle deleting the child nodes if it is necessary.

• If the secondaryWindow option is chosen for any pattern type, and the corresponding popup id is set for that button (mandatory), selecting the button invokes the popup.

• If page is chosen for any pattern type, a standard outcome is returned on clicking the button. Standard outcomes are Create, Edit, Duplicate and Delete for the four respective toolbar buttons.

• The Oracle Fusion Middleware Extensions for Applications (Applications Core) provides a default selection listener for the ADF tree (the markup shows: selectionListener="#{ApplicationsTreeBean.treeSelectionHandler}"). If a developer needs to add custom logic to selection listener, the developer should call this default selection listener from the custom logic. The treeSelectionHandler method of ApplicationsTreeBean provides the following behavior:

  • When xxxxPatternType="secondaryWindow" and when there is no popup configured for the level where the node needs to be created, the icon and the menu item are disabled by default. But this behavior can be overridden by xxxxDisabled attribute ("xxxx" could be "create", "edit" or "duplicate").

  • Calls the ADF default tree listener: #{bindings.xxxx.treeModel.makeCurrent} See Example 16-11.

Example 16-11 Sample Code for Calling the Default Selection Listener from a Custom Selection Listener

String defaultListener = "#{ApplicationsTreeBean.treeSelectionHandler}";
FacesContext fc = FacesContext.getCurrentInstance();
ExpressionFactory ef = fc.getApplication().getExpressionFactory();
MethodExpression me =
            ef.createMethodExpression(fc.getELContext(), defaultListener,
                                      String.class, new Class[]{SelectionEvent.class});
me.invoke(fc.getELContext(), new Object[] {selectionEvent});

To allow Applications developers access to some of the implementation, the Applications Tree Table exposes a public class oracle.apps.fnd.applcore.patterns.ApplicationsTreeEventHandler that contains default event handlers for all the buttons. The button methods are named as process<buttonName>, such as processCreate and processEdit. Developers writing custom action handlers can also use the default implementation by calling these methods.

Example

To attach a custom button handler to the Create button:

1. Define a managed bean class, as shown in Example 16-12.

   Example 16-12 Define a Managed Bean Class to Attach Custom Handler to a Button

   import oracle.apps.fnd.applcore.patterns.ui.ApplicationsTreeEventHandler;
   import oracle.apps.fnd.applcore.patterns.ui.util.PatternUtils;
    
   public class CustomEventHandler
   {
     public String processCreate()
     {
       // Custom code
       ...
    
       // Call default event handler if required. It will return a standard outcome for this button click.
       ApplicationsTreeEventHandler appTreeHandler = ApplicationsTreeEventHandler.getInstance();
       String outcome = appTreeHandler.processCreate();
    
       // If popup is required to be invoked after event handling
       PatternUtils.invokePopup(popupId);
    
       return outcome;
     }
   }
   

2. Register the managed bean in the faces-config of the project.

3. Open the Property Inspector for the Applications Tree Table and choose the Create Action property. Set #{CustomEventHandler.processCreate} as the expression for the property.

16.3.1 How to Add an Applications Tree Table

The Applications Tree Table can be added to a page or page fragment using either the Component First or the Data First approach. Both approaches launch a wizard that is intended to help you quickly define the appropriate tree layout that adheres to the user experience standards. Once you complete this wizard, you can further refine the tree definition by editing the resulting tree component as needed.

Valid drop locations in the page or page fragment include: ADF Form, ADF Layout components and the Applications Panel (jsp:root, af:form, af:root, fnd:applicationsPanel, af:group, af:panelBorderLayout, af:panelBox, af:panelCollection, af:panelFormLayout, af:panelGroupLayout, af:panelHeader, af:panelStretchLayout, af:showDetailItem, af:panelWindow, af:popup, af:showDetail, af:subform, f:facet, f:panelGrid, f:panelGroup, af:pageTemplateDef, and af:pageTemplate#<localArea_Facet>).

Component First

Navigate to the Component Palette. Click the list of libraries and select Applications. Drag the Applications Tree Table from the list of components and drop it onto the page to launch the wizard.

Data First

Navigate to the Data Controls panel of the Application Navigator. Open the panel and navigate through the hierarchy to locate the data source that you would like to include in the Applications Tree Table. Select that data source and drag it to the page. A context menu will display a list of components. Select Tree under the Applications menu to launch the Applications Tree Table wizard, as shown in Figure 16-20.

Figure 16-20 Data First Method to Add a Tree Table

16.3.1.1 Applications Tree Table Create Wizard

The Applications Tree Table Create wizard consists of four panels: Create Applications Tree Table, Select Tree Table Columns, Configure Tree Table Patterns, and Summary.

Create Applications Tree Table Panel

This step creates a tree binding and node definitions of the tree. The Create Applications Tree Table Panel will vary depending on the approach used to launch the Applications Tree Table creation process.

Using the Data First approach, the Bind Data Now properties are hidden. The selected data source is automatically bound to the tree.

With the Component First approach, the developer must decide whether to bind a Data Collection to the tree table component. You can skip the data control binding step when creating the Applications Tree Table. In this case the Applications Tree Table will create an adf tree table without data binding.

If you wish to bind a data control to the tree component using the Component First approach, select the Bind Data Now checkbox. This will enable the Browse button for the Data Source property. Click Browse to display a list of data sources available for binding. Navigate through the list and select the desired data source. Click OK, as shown in Figure 16-21.

Figure 16-21 Create Applications Tree Table

Once the Data Source is selected, you can configure the ADF tree. Click the Add icon to add one of the children of the selected Data Source to be the next level of the tree, as shown in Figure 16-22.

Figure 16-22 Adding a Child of the Data Source

The shuttle at the bottom of the Create Applications Tree Table panel allows you to select the attributes at each tree level you wish to display as a tree node or columns in the tree table, as shown in Figure 16-23.

Figure 16-23 Selecting Attributes

When finished, click Next to proceed to the Select Tree Table Columns panel. Select Cancel to abort the creation of the Applications Tree Table.

Select Tree Table Columns Panel

The Select Tree Table Columns panel shown in Figure 16-24 allows you to select an attribute for displaying as node stamp and select an attribute for displaying as path stamp. You can also configure the columns to be displayed inside the tree table here. When finished, click Next to proceed to the Configure Tree Table Patterns Dialog. Selecting Cancel will abort the creation of the Applications Tree Table.

Figure 16-24 Select Tree Table Columns

Configure Tree Table Patterns Panel

The Configure Tree Table Patterns panel allows you to select the default actions offered by your Applications Tree Table, shown in Figure 16-25.

Figure 16-25 Configure Tree Table Patterns

You may select any or all of the following five actions for your Applications Tree Table: Create, Duplicate, Edit, Delete and Export. If you enable Create, Duplicate, or Edit, you must choose the appropriate pattern that will be used to invoke that action (Inline, Popup, Page).

• Inline - Perform the action on the current table row.

• Popup - Bring up a div modal window on top of the current page for the requested action.

• Page - Replace the current page or page fragment with a completely separate page or page fragment to perform the action. (Page fragments are used when using bounded task flows.)

The Add button for configuring the Popup button is enabled when the Popup pattern is selected. When you click Add, a dropdown of the data collection name of each tree level is displayed. You need to choose the tree level that needs the popup to be configured. When a data collection name is selected, the Applications Popup Wizard is displayed. (See Section 16.4, "Using the Custom Wizard with Applications Popups.")This same data collection will automatically be bound to the Applications Popup. The Popup will also be defaulted as having Editable Content on the Window Buttons page in the wizard. Refer to Section 16.4, "Using the Custom Wizard with Applications Popups."

Export: Export the data to a Microsoft Excel-compatible file.

Delete: Allows users to delete the row.

• Confirm Delete: Select this option so that the default The selected record(s) will be deleted. Do you want to continue? prompt displays in a popup when the delete row function is used.

  When you set the confirmDelete attribute to true, the confirmation popup displays and the row is deleted when you click Ok. For this to work correctly, the partialTriggers on the af:treetable inside the fnd:applicationsTreeTable should include ::confirm, and the ::delete and ::deleteConfirm ids must be removed so the partialRefresh happens only when you click Ok in the popup. See Section 16.1.2.2.1, "Manually Enabling Delete Confirmation."

• Confirmation Message: If you want to replace the default confirmation message with a custom one, enter the string here. The string will be converted to a text resource and added to the default resource bundle.

  If you already have a confirmation message defined in a resource bundle, click the ellipsis and choose from the list, as shown in Figure 16-4.

Click Finish to complete creation of the Applications Tree Table. Select Cancel to abort the creation of the Applications Tree Table.

16.3.1.2 Working with the Applications Tree Table

Once you have created the Applications Tree Table, you can modify the property values by using the Property Inspector editor. The Property Inspector for the Applications Tree Table component can be viewed by selecting the component in the page. You can select the Applications Tree Table in one of three ways:

• Select the component in the Design view of the page.

• Select the <fnd:applicationsTreeTable...> line in the Source view of the page.

• Select fnd:applicationTreeTable from the hierarchy in the Structure View. All of the components created as part of the Applications Tree Table are editable using this same approach, as shown in Figure 16-26.

Figure 16-26 Tree Table Property Inspector

16.3.1.2.1 Adding a Data Source

Once you have created the Applications Tree Table, you can add data controls to the facets and content containers within that tree table using the following steps:

1. Navigate to the Data Controls panel of the Applications Navigator.

2. Expand the hierarchy to find the data source.

3. Drag and drop either the entire data source or individual fields into the correct location on the page. The correct location depends on the component.

16.3.1.2.2 Adding UI Content

To achieve the final goals for a page design, you probably will need to add other components to the Applications Tree Table. Common facets are provided to help you achieve these goals. The facet names and use are documented in the Facet table of the Component Structure and Functions. For example, the tree table may require additional actions beyond the standard actions that are provided by the Applications Tree Table. You can open the Component Palette and drag and drop a commandToolbarButton component onto the additionalToolbarButtons facet to add a new icon to the Tree Table toolbar.

16.3.1.2.3 Increasing Tree Table Width to Fill 100% of Its Container

An Applications Tree Table can be stretched by placing it in the center facet of an ADF panelStretchLayout component. Do not set the inlineStylewidth on panelStretchLayout. For more information about basic page layout and the inlineStyle attribute, see the "Organizing Content on Web Pages" and the "Customizing the Appearance Using Styles and Skins" chapters in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition).

16.3.1.2.4 Toggle Click to Edit / Edit All in Applications Tree Table

The Applications Tree Table toolbar has an icon that can be clicked to toggle the Click to Edit and Edit All functions, and the View Menu on the toolbar includes the same toggle feature. This functions the same as described for the Applications Table in Section 16.1.2.2.3, "Toggle Click to Edit / Edit All in Applications Table."

16.4 Using the Custom Wizard with Applications Popups

Note:

af:popup is a generic function documented in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition). This section discusses using the Popup wizard in JDeveloper Oracle Fusion design time.

Popups are an option when editing rows. While the standard af:popup component does not provide buttons or data binding, the Applications Popup wizard provides the base af:popup with:

• a title

• standard buttons

• customized button capability

• data binding

• code that developers can use to invoke the popup

• design-time support

• popup facets and properties that can be customized

Popups can be used as standalone components or with the patterns shown in Table 16-8.

Table 16-8 Patterns That Require Popups

Pattern Set	Patterns	Description/User Action
Attachments	Attachments Field, Attachments Column	When users display attachments, the resulting popup displays the current attachment, and also allows users to add new attachments to an entity.
Compare Objects	Configure Comparison, One to Many, Configure and Compare	When users select objects to compare and click Compare, the resulting popup display allows users to choose comparison criteria and the objects to be compared. Users can change comparison criteria after each comparison is displayed.
Create	Create Multiple Objects	When users click Create Multiple Objects or make a choice from a menu or toolbar, the resulting popup allows users to create multiple objects.
Detail On Demand	Popup Details	When users select a table row and click an information button, the resulting popup displays information about the selected row.
Edit	Secondary Window Edit	When users select records and click Edit on a table toolbar, the resulting popup allows users to edit those records.
Information Entry Form	Secondary Window	When users click a button, the resulting popup allows users to enter data into the popup.
Record Navigation	Secondary Window Detail	When users navigate through data records, the resulting popup allows users to edit the records.
Transactional Search/Results	Popup Window	When users click Search within an application and enter search criteria, the popup displays the search results.

16.4.1 Creating a Popup

You create Applications Popups in the wizard that is displayed when you add the popups to your previously-created JavaServer Faces (JSF) pages (or page fragments) from the Data Controls panel. You also can create popups from within other applications component wizards, such as Applications Table.

16.4.1.1 How to Add Applications Popups to JSF Pages or Page Fragments

Before you can add popup components, you must add the Applications Popup to your pages from the Data Controls panel.

To add a Popup using a data control:

1. In the Application Navigator, open the Data Controls panel.

2. Navigate to the data source that you want to bind to the popup.

3. Drag and drop the data control to the JSF page, as shown in Figure 16-27.

   Figure 16-27 Dragging a Data Control to the JSF Page

   
   

4. In the Create context menu that is displayed, choose Applications > Popup.

   The Popup wizard is displayed.

To add an applications popup from a table:

1. Launch the Applications Table wizard, such as by selecting the Applications option from the Component Palette and then clicking the Table option.

2. In the Configure Table Patterns dialog, set the Create, Duplicate or Edit Pattern to Popup.

3. Click Configure Popup to display the Popup wizard.

4. Follow the steps in Section 16.4.1.2, "How to Add Applications Popup Components Using the Wizard."

   Note:

   The data source for the table becomes the default data source for the popup.

16.4.1.2 How to Add Applications Popup Components Using the Wizard

This section explains how to use the Popup wizard to add components to your popups.

In the Popup wizard you can:

• Create titles and related layout.

• Add, move, or delete components.

• Define buttons.

• Create a preview.

All mandatory fields in the wizard contain default values, allowing you to accept the defaults and work through the steps quickly. Clicking Cancel on any of the dialogs cancels the popup creation and discards any values you entered.

Clicking Finish on any of the dialogs has the following effects:

• Displays a preview of the popup.

• Creates the popup with the values you provided on that screen and any previous screens, and default values for the remaining screens.

Caution:

Each wizard dialog contains a Messages field that displays errors for that step. Do not proceed to the next wizard step without correcting the errors in the present step.

Using the Applications Popup Wizard:

When the Popup wizard launches, the Set Title and Panel Layout dialog is displayed, as shown in Figure 16-28.

Figure 16-28 Set Title and Panel Layout Dialog

1. Choose title and panel properties:

   • Enter a popup Id. The Id is a string that must be unique to the page fragment. It is used when other components want to be related to this component. For example, if you have a table with Create in Popup, the Create button needs to include this popup Id so it can call it.

   • Enter a title for the popup window.

     The title is prepopulated with the Oracle Fusion Applications Standard for the title, which is a combination of the action of the task, the type of object, and the specific object name:

     [Action] [Object Type]: [Object Name]

     The title should be a reference to a single message with appropriate tokens, because, according to Oracle internationalization standards, you should not concatenate translatable messages in the code. See the "Internationalizing and Localizing Pages" chapter in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition), and the expanded information in "To add an Applications Table using the Applications Table wizard:" .

     So, in this example, the title reference in the JSF page fragment source would resemble: #{af:formatNamed(bundle.EDIT_INVOICE,'INVOICE_NUMBER',bindings.Invoices.InvoiceNumber)}

     but in the resource bundle, it would be defined as:

     <trans-unit id="EDIT_INVOICE"> <source>Edit Invoice: {INVOICE_NUMBER}</source> <target/></trans-unit>

   • [Optional] Enter a title icon location or click Browse to navigate to the icon's location.

   • Select the number of layout columns -- 2 or 3 -- for the popup. This affects the data you bind to. For instance, if you are showing an address with name, street, and town, you could put this information in two or three columns.

2. Click Next to display the Select Components to Display dialog, as shown in Figure 16-29.

   Figure 16-29 Select Components to Display Dialog

   
   

   • The Components table is automatically populated with the data source fields.

   • In the Fields section:

     • Click X to delete the selected component.

     • Click + to add a component.

     • Click the Reorder icons to change the position of the selected component in the list.

     • Click an entry in the Display Label column to enter a new label, such as Dept. Number instead of DeptNo.

     • Click an entry in the Component to Use column to choose a component from the list, as shown in Figure 16-30.

       Figure 16-30 Components to Use List

       
       

     See the description of "Components to Use" in the "Using Attributes to Create Text Fields" section in the Oracle Fusion Middleware Fusion Developer's Guide for Oracle Application Development Framework (Oracle Fusion Applications Edition).

   • Click Next to display the Enable Window Buttons dialog, as shown in Figure 16-31.

     Figure 16-31 Enable Window Buttons Dialog

     
     

3. In the Enable Window Buttons dialog, you can perform the following actions:

   • If the popup requires navigation workflow, such as when choices within the popup lead users to another window:

     • Check the Enable Record Navigation box.

     • Choose linear or non-linear navigation from the Navigation Type menu.

   • Choose View Only Content to create a read-only popup, or choose Editable Content to allow users to edit the popup.

     When you choose View Only Content, you automatically enable Slots 1 and 2. When you choose Editable Content, you automatically enable Slots 1, 2, and 3, as shown in Figure 16-32.

     Figure 16-32 Editable Content Slots

     
     

   • Click Next to display the Review Panel Configuration dialog, as shown in Figure 16-33.

     Figure 16-33 Review Panel Configuration Dialog

     
     

4. The dialog displays a list of your choices.

   In the dialog:

   • Click Back to revise your choices.

   • Click Finish to save your choices and create the popup.

   • Click Cancel to delete the popup information and exit the wizard.

5. When you click Finish, the af:popup component is displayed in the page, as shown in Figure 16-34.

   Figure 16-34 Page Displaying Popup and Popup Components

   
   

16.4.2 How to Modify Popup Components and Properties

This section describes how to bind data sources to the popup, and edit popup components and properties after you create the popup in the Popup wizard.

16.4.2.1 Accessing the Popup on a JSF Page

Before you can edit the popup components and properties or bind the popup to a data source, you must access the popup in the Property Inspector section of your JSF page.

To Access the Popup on a JSF Page

1. Make the JSF page the active file.

2. Access the popup by double-clicking one of the following on the JSF page:

   • af:popup component in the Design view.

   • <af:popup...> line in the Source view.

   • af:popup entry in the Structure view hierarchy.

     When you select the popup, the Popup - Property Inspector is displayed below the page.

16.4.2.2 Adding a Data Source to an Existing Popup

This section describes how to add a data source after you have created a popup in the Popup wizard.

To add a data source to an existing popup:

1. In the Application Navigator, expand the Data Control panel.

2. Navigate to the data source you want to bind to the af:popup.

3. Drag and drop the entire data source, or individual fields, to the JSF page in Design mode.

   Data-source fields are bound to popup components. Components are stored in the contents facet under the af:panelFormLayout hierarchy.

16.4.2.3 Adding User-Interface Content to an Existing Popup

To add components to an existing popup, drop the new components into facets.

To add UI content to existing popups:

1. Open the Component Palette.

2. In the list, choose the ADF Faces library.

3. Drag and drop the component to the appropriate popup facet.

   For example, to add a new button, drag and drop the icon to the buttonBar facet.

16.4.2.4 Adding action and actionListener Methods to the Popup Buttons

Either method bindings or managed bean methods can be assigned to the action and actionListener attributes to provide functionality for the buttons that were selected for the popup at design time.