Oracle® Fusion Applications Developer's Guide 11g Release 4 (11.1.4) Part Number E15524-09 |
|
|
PDF · Mobi · ePub |
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:
For basic information, see:
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.
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 17-1 describes Applications table facets and facet contents.
Table 17-1 Applications Table Facets
Facet Name | Description | Values |
---|---|---|
|
Holds ADF table. |
ADF Table |
|
Holds toolbar buttons. |
ADF command toolbar buttons under an ADF toolbar |
|
Holds menu items to be added to default Action pulldown menu items. |
ADF menu item component |
|
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 |
|
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 |
|
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 |
ADF menu item component |
|
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 |
|
Holds popups. See Section 17.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:
|
Popups under a layout component. |
Table 17-2 describes Applications table properties (including properties that are part of the default managed bean), their allowable values, and default actions.
Table 17-2 Applications Table Properties
Property | Description | Values |
---|---|---|
|
Unique identification number for this applications table. |
|
|
Whether the applications table is rendered (that is, converted from an object-based description into a graphical image for display). |
|
|
Unique identification number of the underlying ADF table corresponding to this applications table. |
|
|
Whether a Create pattern is enabled and, if so, which pattern. User action: Click Create. |
In addition, you must create the popup UI that shows input fields.
|
|
Whether an Edit pattern is enabled and, if so, which pattern. User action: Click Edit. |
|
|
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. |
If the applications table is part of an applications panel, set the
|
|
Whether a Delete pattern is enabled. User action: Click Delete. |
Selected row is deleted. |
|
Action binding for the Create button. |
If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it. |
|
Action binding for the Edit button. |
If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it. |
|
Action binding for the Duplicate button. |
If defined, this property can be used to supplement the default action specified by the Pattern Type property or completely override it. |
|
Action binding for the Delete button. |
If defined, this property can be used to supplement the default action or completely override it. |
|
Id assigned to the popup to be invoked when users click the Create button. |
|
|
Id assigned to the popup to be invoked when users click the Edit button. |
|
|
Id assigned to the popup to be invoked when users click the Duplicate button. |
|
|
Value that overrides the default label for Create menu item. It also will be shown as the short description for the Create button. |
|
|
Value that overrides the default label for Edit menu item. It also will be shown as the short description for the Edit button. |
|
|
Value that overrides the default label for Duplicate menu item. It also will be shown as the short description for the Duplicate button. |
|
|
Value that overrides the default label for Delete menu item. It also will be shown as the short description for the Delete button. |
|
|
Value that overrides the default label for Attach menu item. This attribute is deprecated. |
|
|
List of default features to turn off for the panelCollection |
|
|
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 to use for the panelCollection component inside Applications Table component. |
string |
|
Rendered attribute for Export button and menu item. |
boolean / expression |
|
Sets immediate attribute value of "Create" toolbar button and "Create" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Delete" toolbar button and "Delete" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Duplicate" toolbar button and "Duplicate" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Delete" toolbar button and "Delete" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Attach" toolbar button and "Attach" menu item. Note: This attribute is deprecated. |
boolean / expression |
|
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 |
|
Sets rendered attribute value of the secondary toolbar. When no |
boolean / expression |
For example: |
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:
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. |
|
Action binding for the Create icon. |
method expression |
|
Action binding for the Edit icon. |
method expression |
|
Action binding for the Duplicate icon. |
method expression |
|
Action binding for the Delete icon. |
method expression |
|
Rendered attribute for create |
Boolean value or Expression Language expression |
|
Rendered attribute for duplicate |
Boolean value or Expression Language expression |
|
Rendered attribute for edit |
Boolean value or Expression Language expression |
|
PartialSubmit attribute for create |
Boolean value or Expression Language expression |
|
Disabled attribute for create |
Boolean value or Expression Language expression |
|
Disabled attribute for edit |
Boolean value or Expression Language expression |
|
Disabled attribute for duplicate |
Boolean value or Expression Language expression |
|
Disabled attribute for delete |
Boolean value or Expression Language expression |
|
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 |
Boolean value or Expression Language expression |
|
Provide a customized delete confirmation message that can be shown in the popup. |
String value or Expression Language expression |
|
Rendered attribute for Actions menu |
Boolean value or Expression Language expression |
|
ContentDelivery attribute for Actions menu. This attribute can take two values.
The default value is immediate. Setting the attribute value to lazy:
|
String value |
|
The toggleEditRendered feature is used to render the editAll or clickToEdit choices for Applications Table. See Section 17.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:
Define a managed bean class, as shown in Example 17-1.
Example 17-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; } }
Register the managed bean in the faces-config of the project.
Bring up the Property Inspector for the Applications Table, and choose the Create Action property. Set #{CustomEventHandler.processCreate}
as the expression for the property.
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.
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:
Open the Component Palette.
In the list, choose Applications.
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:
In the Application Navigator, open the Data Control panel.
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.
Drag and drop the data control to the JSF page.
In the Create context menu that is displayed, choose Applications > Table.
The Applications Table wizard is displayed.
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 17-1.
In the Create Applications Table dialog:
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.
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 17-2.
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.
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.
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.
Click Continue.
The Configure Table Patterns dialog is displayed, as shown in Figure 17-3.
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 17.4, "Using the Custom Wizard with Applications Popups") and follow the instructions to configure the popup associated with this pattern. See Table 17-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 17.4, "Using the Custom Wizard with Applications Popups") and follow the instructions to configure the popup associated with this pattern. See Table 17-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 17.4, "Using the Custom Wizard with Applications Popups") and follow the instructions to configure the popup associated with this pattern. See Table 17-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 17.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 17-4.
If you need to manually create or edit the Delete Confirmation parameter, see Section 17.1.2.2.1, "Manually Enabling Delete Confirmation."
For more information on pattern types, see Table 17-2, "Applications Table Properties".
Click OK to save your choices and create the Applications table, or click Cancel to delete your choices.
If you click OK, the table and its components appear in the editor, as shown in Figure 17-5.
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 17-2 for sample code that shows both the delete confirmation enabled and the custom message.
Example 17-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 17-6 shows the PartialTriggers entries in the Property Inspector view.
With fnd:applicationsTable
selected in the Structure view in JDeveloper, the Property Inspector showing the custom message settings will appear similar to Figure 17-7.
If multiple row selection is enabled, editing functions will behave as shown in Table 17-3.
Table 17-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 17-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 17-3.
Example 17-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">
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 17-8 shows the Edit All menu option and icon when the table is in the Click to Edit mode.
Figure 17-9 shows the Click to Edit menu option and icon when the table is in the Edit All mode.
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 17-2) on the Applications Table and does not happen automatically.
When a table is added to a page, code similar to that shown in Example 17-4 is inserted and displayed in the Source view.
Example 17-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.
The Common properties section of the Table Property Inspector resembles Figure 17-10.
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.
The Patterns properties section of the Table Property Inspector resembles Figure 17-11. The properties for Create, Duplicate, Edit, and Delete are the same.
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 17-5 sets the partialTrigger attribute value on the Create button icon and Create menu item
Example 17-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">
The Patterns properties section of the Table Property Inspector resembles Figure 17-12.
AttachImmediate and AttachText: Do not use. These have been deprecated.
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.
To add Data Controls to tables:
Find the data source in the Data Controls panel.
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 17-13.
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 17-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.
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 17-6:
Example 17-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.
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).
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:
In the JSF page that contains the query component and the Applications Table, select the query component.
In the Property Inspector, select the resultComponentId
property and then Edit.
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"
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
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 17-4 are exposed on the Applications Tree.
Table 17-4 Applications Tree Facets
Facet | Description | Allowed Children |
---|---|---|
|
Facet for holding the ADF tree |
ADF Tree |
|
Facet for adding toolbar button icons by the developer. |
ADF Command Toolbar Buttons |
|
Facet for adding more menu items to default menu items. |
ADF menu item component |
|
Facet for adding more commandToolbar components to secondary toolbar. |
ADF Command Toolbar Button component |
|
Facet for adding component containing statusbar item(s). These statusbar items are merged with standard items provided by the panelCollection. |
ADF component |
|
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 |
|
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" |
|
Facet for adding popups. See Section 17.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:
|
Any number of popups under a layout component |
The properties shown in Table 17-5 are exposed on the Applications Tree.
Table 17-5 Exposed Applications Tree Properties
Property | Description | Allowed Values |
---|---|---|
|
The unique ID for this Applications Tree |
string |
|
Whether the Applications Tree is rendered or not |
boolean / expression |
|
The unique ID of the ADF tree underneath this Applications Tree |
string |
|
Whether any Create pattern is enabled, and if yes, which pattern |
none, secondaryWindow (then Create Popup Id must also be set), page |
|
Whether any Edit pattern is enabled, and if yes, which pattern |
none, secondaryWindow (then Edit Popup Id must also be set), page |
|
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 |
|
Rendered attribute for create |
string |
|
Rendered attribute for edit |
boolean value or Expression Language expression |
|
Rendered attribute for duplicate |
boolean value or Expression Language expression |
|
Rendered attribute for delete |
boolean value or Expression Language expression |
|
Action binding for the Create icon |
method expression |
|
Action binding for the Edit icon |
method expression |
|
Action binding for the Duplicate icon |
method expression |
|
Action binding for the Delete icon |
method expression |
|
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. |
|
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. |
|
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. |
|
Action listener binding for the Delete icon |
method expression If defined, this property can be used to supplement or override the default action. |
|
ID of the popup to be invoked when Create button is clicked |
string |
|
ID of the popup to be invoked when Edit button is clicked |
string |
|
ID of the popup to be invoked when Duplicate button is clicked |
string |
|
Overrides default label for Create menu item. This value will also be shown as the short description for the Create button. |
expression |
|
Overrides default label for Edit menu item. This value will also be shown as the short description for the Edit button. |
expression |
|
Overrides default label for Duplicate menu item. This value will also be shown as the short description for the Duplicate button. |
expression |
|
Overrides default label for Delete menu item. This value will also be shown as the short description for the Delete button. |
expression |
|
Whether export is enabled |
boolean / expression |
|
A list of default features to turn off for the panelCollection, such as detach (see featuresOff attribute of panelCollection for more details) |
string |
|
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 to use for the panelCollection component inside Applications Tree component. |
string |
|
Sets immediate attribute value of "Create" toolbar button and "Create" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Delete" toolbar button and "Delete" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Duplicate" toolbar button and "Duplicate" menu item. |
boolean / expression |
|
Sets immediate attribute value of "Edit" toolbar button and "Edit" menu item. |
boolean / expression |
|
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 |
|
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 |
|
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 |
|
Disabled attribute for create |
Boolean value or Expression Language expression |
|
Disabled attribute for edit |
Boolean value or Expression Language expression |
|
Disabled attribute for duplicate |
Boolean value or Expression Language expression |
|
Disabled attribute for delete |
Boolean value or Expression Language expression |
|
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 |
|
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 17-7 shows a sample markup that is generated by the Applications Tree Creation wizard.
Example 17-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 17-8 shows sample code for calling the default selection listener from the custom selection listener.
Example 17-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.
Define a managed bean class, as shown in Example 17-9:
Example 17-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; } }
Register the managed bean in the faces-config
of the project.
Select the Property Inspector for the Applications Tree, and choose the Create Action property. Set #{CustomEventHandler.processCreate}
as the expression for the property.
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 17-15.
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 17-16.
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 17-17.
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 17-18.
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 17.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 17.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 17-4.
When finished, click OK to complete creation of the Applications Tree. Selecting Cancel will abort the creation of the Applications Tree.
This section discusses modifying settings in the JDeveloper Property Inspector. For more information, see Section 17.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 17-19.
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:
Navigate to the Data Controls panel of the Application Navigator.
Open the hierarchy to find the data source.
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).
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 17-6 are exposed on the Applications Tree Table:
Table 17-6 Applications Tree Table Properties
Property | Description | Allowed Values |
---|---|---|
|
Unique ID for this Applications Tree Table. |
string |
|
Whether the Applications Tree Table is rendered or not. |
boolean / expression |
|
Unique ID of the ADF tree table underneath this Applications Tree Table. |
string |
|
Whether any Create pattern is enabled, and if yes, which pattern. |
none, inline, secondaryWindow (then Create Popup Id must also be set), page |
|
Whether any Edit pattern is enabled, and if yes, which pattern. |
none, inline, secondaryWindow (then Edit Popup Id must also be set), page |
|
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 |
|
Provide a customized delete confirmation message that can be shown in the popup. |
Boolean value or Expression Language expression |
|
Whether any Delete pattern is enabled. |
boolean |
|
Whether any Create pattern is enabled. |
boolean |
|
Whether any Duplicate pattern is enabled. |
boolean |
|
Whether any Edit pattern is enabled. |
boolean |
|
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 |
|
Action binding for the Create icon. |
method expression |
|
Action binding for the Edit icon. |
method expression |
|
Action binding for the Duplicate icon. |
method expression |
|
Action binding for the Delete icon. |
method expression |
|
Action listener binding for the Create icon. |
method expression |
|
Action listener binding for the Edit icon. |
method expression |
|
Action listener binding for the Duplicate icon. |
method expression |
|
Action listener binding for the Delete icon. |
method expression |
|
ID of the popup to be invoked when the Create button is clicked. |
string |
|
ID of the popup to be invoked when the Edit button is clicked. |
string |
|
ID of the popup to be invoked when the Duplicate button is clicked. |
string |
|
ID of the popup to be invoked when the Delete button is clicked. |
string |
|
Overrides the default label for the Create menu item. |
expression |
|
Overrides the default label for Edit menu item. |
expression |
|
Overrides the default label for Duplicate menu item. |
expression |
|
Overrides the default label for Delete menu item. |
expression |
|
Whether export is enabled. |
boolean / expression |
|
A list of default features to turn off for the panelCollection, for instance detach (see featuresOff attribute of panelCollection for more details) |
string |
|
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 to use for the panelCollection component inside the Applications Tree Table component. |
string |
|
Sets immediate attribute value of Create toolbar button and Create menu item. |
boolean / expression |
|
Sets immediate attribute value of Delete toolbar button and Delete menu item. |
boolean / expression |
|
Sets immediate attribute value of Duplicate toolbar button and Duplicate menu item. |
boolean / expression |
|
Sets immediate attribute value of Delete toolbar button and Delete menu item. |
boolean / expression |
|
Disabled attribute for Create. |
Boolean value or Expression Language expression |
|
Disabled attribute for Delete. |
Boolean value or Expression Language expression |
|
Disabled attribute for Edit. |
Boolean value or Expression Language expression |
|
Disabled attribute for Duplicate. |
Boolean value or Expression Language expression |
|
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 |
|
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 |
|
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 |
|
The toggleEditRendered feature is used to render the editAll or clickToEdit choices for Applications Tree Table. See Section 17.3.1.2.4, "Toggle Click to Edit / Edit All in Applications Tree Table." |
Boolean. Default value is False. |
For example: |
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:
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 17-10 shows a sample markup that is generated by the Applications Tree Table Creation wizard.
Example 17-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 17-7 shows the facets that are exposed on the Applications Tree Table.
Table 17-7 Applications Tree Table Facets
Facet | Description | Allowed Children |
---|---|---|
|
Facet for holding the ADF tree table. |
ADF Tree Table |
|
Facet for adding toolbar icons by the developer. |
ADF Command Toolbar Buttons |
|
Facet for adding more menu items to default menu items. |
ADF menu item component |
|
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 |
|
Facet for adding more commandToolbar components to the secondary toolbar. |
ADF Command Toolbar Button component |
|
Facet for adding component containing statusbar items. These statusbar items are merged with standard items provided by the panelCollection. |
ADF component |
|
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 |
|
Facet for adding popups. See Section 17.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:
|
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 17-11.
Example 17-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:
Define a managed bean class, as shown in Example 17-12.
Example 17-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; } }
Register the managed bean in the faces-config
of the project.
Open the Property Inspector for the Applications Tree Table and choose the Create Action property. Set #{CustomEventHandler.processCreate}
as the expression for the property.
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 17-20.
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 17-21.
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 17-22.
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 17-23.
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 17-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.
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 17-25.
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 17.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 17.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 17.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 17-4.
Click Finish to complete creation of the Applications Tree Table. Select Cancel to abort the creation of 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 17-26.
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:
Navigate to the Data Controls panel of the Applications Navigator.
Expand the hierarchy to find the data source.
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.
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.
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).
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 17.1.2.2.3, "Toggle Click to Edit / Edit All in Applications Table."
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 17-8.
Table 17-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. |
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.
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:
In the Application Navigator, open the Data Controls panel.
Navigate to the data source that you want to bind to the popup.
Drag and drop the data control to the JSF page, as shown in Figure 17-27.
In the Create context menu that is displayed, choose Applications > Popup.
The Popup wizard is displayed.
To add an applications popup from a table:
Launch the Applications Table wizard, such as by selecting the Applications option from the Component Palette and then clicking the Table option.
In the Configure Table Patterns dialog, set the Create, Duplicate or Edit Pattern to Popup.
Click Configure Popup to display the Popup wizard.
Follow the steps in Section 17.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.
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 17-28.
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.
Click Next to display the Select Components to Display dialog, as shown in Figure 17-29.
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 17-30.
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 17-31.
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 17-32.
Click Next to display the Review Panel Configuration dialog, as shown in Figure 17-33.
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.
When you click Finish, the af:popup
component is displayed in the page, as shown in Figure 17-34.
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.
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
Make the JSF page the active file.
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.
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:
In the Application Navigator, expand the Data Control panel.
Navigate to the data source you want to bind to the af:popup
.
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.
To add components to an existing popup, drop the new components into facets.
To add UI content to existing popups:
Open the Component Palette.
In the list, choose the ADF Faces library.
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.