All panel buttons have attributes, and some buttons have facets. Button attributes include button qualities, such as the title string and the button name. Button facets are locations that contain panel data, such as content locations and button information locations.

Whether the panel is rendered (that is, converted from an object-based description into a graphical image for display).

boolean or expression

title

Panel title.

string or expression

navigationType

Type of navigation for that panel.

Navigation types:

linear - sends users to an adjacent or contiguous window. This commonly is used when a series of actions or steps need to be followed in a sequential order.

nonLinear - sends users to a non-adjacent or non-contiguous window. This is used when an action does not need to take place in a specific sequence.

none - navigation is disabled.

<button_name>Visible

For example: submitVisible

Whether the button is visible in the UI.

boolean or expression

<button_name>Rendered

For example: submitRendered

Whether the button is rendered in the UI (that is, converted from an object-based description into a graphical image for display).

boolean or expression

<button_name>Action

Type of action that the button performs.

EL expression

<button_name>PopupId

For example: submitPopupId

ID of the popup that appears when users press the button.

string

<button_name>ShortDesc

For example: previousShortDesc

Tooltip text for the button.

string

<button_name>Disabled

For example: submitDisabled

Next and Previous buttons only: Whether the button should be disabled in the UI.

boolean or expression

submitText

Submit button text: Text associated with the OK button.

string or expression

scrollable

Sets to true when scroll bar needs to be enabled. When scrollable is set to true, it sets layout="scroll" on the af:panelGroupLayout component inside Applications Panel. Thus, the developer does not need to place af:panelGroupLayout with layout="scroll" directly under the Applications panel.

boolean / expression

saveOptionsStyle

Sets the appearance of the Save button. The Save button can be rendered as a normal button, or as a drop button, depending on the value of this attribute. When it is set to dropButton, the developer is expected to have other save options turned on (such as saveAndContinue or saveAndClose), or add af:commandMenuItem to the saveButtonMenu facet.

button or dropButton

instructionText

The instructionText attribute places instruction text for the Applications Panel title. This instruction text appears right below the title if the collaborationToolbar facet and scalingInfo facet are empty. If they are not empty, the instructionText is placed under the scalingInfo that appears after the collaboration toolbar.

The instructonText attribute can take a String value or an ELExpression. A helpTopicID can be passed to this attribute as an ELExpression. For example:

instructionText="#{adfFacesContext.helpProvider'helpTopicId'].instructions}"
or
instructionText="#{adfFacesContext.helpProvider['helpTopicId'].definition}"
or
instructionText="#{adfFacesContext.helpProvider['helpTopicId'].externalUrl}"

panelToolbarRendered

If no default buttons that are provided by the Applications Panel are used, set this value to false to avoid displaying unnecessary separators.

Boolean

revertImmediate

Sets the immediate attribute on the Revert button.

Sets whether or not data validation - client-side or server-side - should take place when events are generated by this component. When immediate is 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.

Boolean. Default is false.

submitStyle

Sets the appearance of the Submit button. The Submit button can be rendered as a normal button, or as a drop button, depending on the value of this attribute. When it's set to dropButton, the developer is expected to have other submit options turned on, or add af:commandMenuItem to the submitButtonMenu facet.

String. The two values are button (the default) and dropButton.

previousPartialSubmit

Sets the partialSubmit attribute on the Previous button.

True or false (default)

nextPartialSubmit

Sets the partialSubmit attribute on the Next button.

True or false (default)

saveAndCreateAnotherText

Sets the text that is displayed on the saveAndCreateAnother button.

String

createAnotherText

Sets the text that displays on the createAnother button.

String

<button_name>Action

Sets the action attribute on the button with <button_name>. Users must provide their own action; there is no default action.

String or EL Expression.

<button_name>ActionListener

Sets the actionListener attribute on the button with <button_name>. Users must provide their own actionListener; there is no default actionListener.

EL Expression.

<button_name>PartialTriggers

For example: saveAndClosePartialTriggers

partialTriggers attribute for <button_name> button.

String or EL Expression.

Important: The PartialTriggers attribute must be entered manually by the developer. This is because, at design time, the JDeveloper Property Inspector can:

Select the incorrect ID.

Append square brackets around the selected id, such as [id1 id2].

By default, a managed bean that ships with the Applications Panel enables certain actions when certain conditions exist. For example, default actions occur when users click buttons, and when developers set certain Applications Property values. These default actions are overridden if you change the value of the default button action property.

Facet for holding the navigation choice list if the chosen Record Navigation Type is non-linear.

ADF selectOneChoice

actionButtonBar

Facet for holding custom action buttons.

ADF commandButtons and commandToolbarButtons under some ADF layout components.

saveButtonMenu

Facet for holding the custom menu and menu items for the Save button.

af:commandMenuItem or af:group

submitButtonMenu

Facet for holding the custom menu and menu items of the Submit button.

None

popup

Facet for holding any popups required for any of the buttons.

Applications popups under some ADF layout components.

appsPanelLegend

Facet for displaying legend information on the header.

appsPanelContext

Facet for displaying context information next to the header. The contextual information is displayed next to the header text.

customSaveDropButton

Facet for adding custom Save drop button.

This facet should contain <af:group> with <af:commandToolbarButton> under it. The Design Time handles this for you. See Figure 16-8 and its description.

localContext

Facet for adding content into local context region.

taskStamp

Facet for adding a task stamp.

There are three styles: one applied to the right side of the data, one to the left, and one to the container having these values. (AFStampContainer, TaskStampTextLabel, AFTaskStampTextValue) For every row of data in the taskStamp, a panelGroupLayout and two outputText components need to be added.

Facet for holding the custom menu and menu items for the Submit button.

af:commandMenuItem or af:group

contentsStretch

The contents facet is a child of the panelGroupLayout so that scrolling can be enabled around the contents. But the panelGroupLayout does not allow its children to be stretched.

The contentsStretch facet is not a child of the panelGroupLayout. Components placed inside this do not need to use an inlineStyle to set width and with declarative components placing them inside a panelStretchLayout will stretch the components.

Note: The Applications Panel 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 Panel or panelStretchLayout.

To use this facet, place your components inside the contentsStretch facet and set the attribute contentsFacet="stretch" on the Applications Panel. The user needs to trade between using scrollable or stretchable contents.

A switcher reads the contentsFacet attribute from the ApplicationsPanel component to decide which facet to use. The default facet is scroll; to use the contentsStretch facet, set contentsFacet="Stretch" on the Applications Panel.

This can be either scroll (the default) or stretch. Set to stretch when using the contentsStretch facet.

Model

The Applications panel does not expose any bindings to the model. However, components within the panel can be bound to the model.

Controller

The Applications Panel component ships with a default managed bean (internal to the Oracle Fusion Middleware Extensions for Applications team) that performs the following functions:

Default event handlers for all button action events. Event handler delegates to custom action method if set on the button action property. Each button event handler simply returns a standard outcome which is the name of the button clicked. For example, clicking the Cancel button will return an outcome "cancel".

If popup ID is set for any button, selecting the button invokes the popup.

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

Custom Button Handling

Follow these steps to attach a custom button handler to the Cancel button.

Open the Property Inspector for the Applications panel and choose the Cancel Action property. As shown in the example in Figure 16-1, set #{CustomeEventHandler.processCancel} as the expression for the property.

Figure 16-1 Table Property Inspector

Click the Create tab.

In the Create Action expression field, enter the following expression:

#{CustomEventHandler.processCreate}

Click Set.

16.1.2 How to Create an Applications Panel

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

To Add an Applications Panel Using the Component Palette:

Open the Component Palette.

In the list, choose Applications.

In the list, click Panel. JDeveloper will attempt to place the panel at the current cursor location. If the current location is not appropriate, an error message displays. You also can drag the Panel 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 panel can be inserted.

The Applications Panel wizard is displayed.

To Add an Applications Panel Using the Data Control Dialog:

In the Application Navigator, open the Data Control panel.

Navigate to the data source that you want to bind to the Applications panel.

Drag and drop the data control to the JSF page.

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

This section explains how to use the Applications Panel wizard to add panels to your page.

In the Applications Panel wizard you can:

Specify panel titles and subsections

Select panel components

Bind a data source to the panel

Arrange panel components

Select panel buttons

In any Applications Panel wizard dialog, click Cancel to cancel your actions and exit the wizard. Click Finish on any dialog to accept the defaults and exit the wizard.

To Add an Applications Table Using the Applications Panel Wizard:

When the Applications Panel wizard is launched, the Title and Subsections dialog is displayed, as shown in Figure 16-2.

Figure 16-2 Specifying the Panel Title and Subsections

In the dialog:

Enter the panel title. In the example, LABEL should be predefined in a bundle as "Edit Journal: ID {OBJ_ID}".

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 Object Name usually is something specific so you can identify a specific object. For instance, if you were dealing with part numbers, the Object Name could be a specific part number; if you were dealing with customer information, it could be the customer's name.

Click the Add icon (+) to add Panel Subsections, or click the Delete icon (X) to delete the highlighted subsection.

Each subsection has editable title fields, panel type fields (Panel Header for a basic view or Show Detail Header for a more detailed view), and number of columns (1-3) fields.

The Panel Subsections is used to divide the Applications Panel facet (contents) with other layout components, such as panelHeader, show detail header, and panelGroupLayout. This lets the developer decide the layout during Design Time without needing to add each of these layouts manually after the panel creation. Of course, the user can add more or new layouts as needed after the panel is created.

Use the up or down arrows to change row order.

Click Next.

The Select an initial set of panel components dialog is displayed, as shown in Figure 16-3.

Figure 16-3 Selecting an Initial Set of Panel Components

In the Panel Components dialog:

Click Read-only Form to create a read-only form. (optional) If you select Read-only, the choices in the Component to Use column will change from Input Text to Output Text types.

If you have added the panel from the Component Palette, the Bind Data Now field displays. To bind a data source to the panel component:

Display Label: In general, the labels defined in the selected Data Control will be what you want and you can leave this value at the default <Default> setting. Otherwise, enter a new label name.

Value Binding: In general, the label and the Value Binding will match and you can accept the displayed value. Otherwise, you can click in the field to display a drop-down list of the values available in the selected Data Control.

Component To Use: Data in Dialog Details can be read-only or updatable. Component to Use is similar to what Component does while creating a table. Clicking it reveals a choice list of values, and the dialog details popup would then at runtime show that particular column from the datacontrol as the selected component to use. The choice list is changed according to whether or not you choose read-only. If you selected Read-only, the choices will change from Input Text to Output Text types.

Click Next. The Components Layout dialog is displayed, as shown in Figure 16-5.

Figure 16-5 Layout Components In Available Subsections Dialog

Drag components from their default locations to your previously defined subsections. The result will appear similar to Figure 16-6.

Figure 16-6 Example of Component Layout

Click Next. The Page Buttons dialog is displayed, as shown in Figure 16-7.

Figure 16-7 Select Page-Level Buttons Dialog

In the Page Level Buttons dialog:

To enable panel navigation (optional):

Select Enable Navigation.

Choose a navigation type (Linear or Non-Linear).

Linear sends users to an adjacent or contiguous window. This commonly is used when a series of actions or steps need to be followed in a sequential order.

Non-Linear sends users to a non-adjacent or non-contiguous window. This is used when an action does not need to take place in a specific sequence.

To disable editing of panel contents, select View Only Content.

To enable editing of panel contents:

Select Editable Content.

Choose the transactional buttons to display in each panel slot from the respective slot dropdown menus.

Note that Slot 3 defaults to Continue. However, as shown in Figure 16-7, if you select Submit, a text input field displays to the right. You can enter alternate text that makes more sense in your application for the submit action, such as OK or Purchase.

You can create a Save or Submit pull down menu. When you choose Save in Slot 2, or Save and Close in Slot 3, an Add Menu option will appear. Click it to display a list similar to Figure 16-8.

Figure 16-8 Add Menu List

These are options that can appear in a pull down menu at runtime under Save. To select, click the option you want. To add more than one, select Add Menu again and choose a second option. As they are chosen, check marks will appear next to each selected item, shown in Figure 16-9.

When an item is selected from the Add Menu of Slot 3, the selection of the drop-down in Slot 3 will become the label of af:commandToolbarButton and the selections in the Add Menu will become the af:commandMenuItem under af:menu in the popup facet of the af:commandToolbarButton. The af:commandToolbarButton will be added to the customSaveDropButton facet (see Table 16-2).

Figure 16-9 Add Menu List Showing Multiple Selections

If an option is chosen in the Add Menu of Slot 2, it will be grayed-out as an option for Slot 3 to prevent you from making the same choice multiple times, as shown in Figure 16-10.

Figure 16-10 Add Menu List Selection Effect on Slot 3 Choices

Click Next. The Summary dialog is displayed, as shown in Figure 16-11.

Figure 16-11 Reviewing the Panel Structure Dialog

Check to make sure your panel choices are correct.

Click Finish to create the panel. When you run this page, it will appear similar to Figure 16-12.

Figure 16-12 Example Page Running In Browser

16.1.3 How to Modify Applications Panels Components and Properties

This section describes how to edit Applications Panel properties and components, how to add a data source to the panel, and how to add more UI content.

To create an additional field in a subsection, drag an attribute from the data source to the corresponding container. For example, drag the attribute to fnd:applicationsPanel > f:facet - contents > af:panelGroupLayout > af:panelFormLayout. When prompted for the component to associate with the attribute, choose ADF Input Text w/Label.

16.1.3.5 Adding User-Interface Content to Applications Panels

Although Applications panels already provide common layout components, your JSF page might require additional UI elements, such as additional action buttons. When you add new components to a panel, you drop the new components into facets.

To add UI content to existing panels:

Open the Components Palette.

Drag and drop the button component on to the appropriate popup facet.

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

16.2 Implementing Applications Master-Detail

Note:

Master-Detail refers to the interaction of selecting an object from a master list, and refreshing the details in an adjacent area. It is not the relationship of the data.

The Master-Detail composite is used in situations where the information is too large, dynamic or complex to show in a flat table. The user can see the Master, or summary, information in one area, and the corresponding details in a separate area. This can be achieved using different master and detail components, such as table, tree table, and tree.

For instance, when the user selects an Employee from the master table, the corresponding employee details are displayed in the region below in a label/data format.

The Applications Master-Detail does not expose any bindings to the model on its own, but the ADF tables or formLayout components that are encapsulated within the Applications Table under the master or detail section will be bound to the model.

Controller

The Applications Master-Detail ships a default managed-bean (internal to the Oracle Fusion Middleware Extensions for Applications (Applications Core) team) that currently supports translation functions. You can access the implementation of the Applications Table managed bean which will be exposed as either the Master or the Detail section of the component. For use and implementation information, see Controller in Section 15.1, "Implementing Applications Tables."

16.2.2 Introduction to Master-Detail Components

The Master-Detail can exist at the page level, or at the subheader level in a page. The Master-Detail component will support these layouts:

Panel over FormLayout

Panel over TreeTable

Panel over Heterogeneous

Panel over Subtabs

Panel over Table

Tree over LevelSpecific

Table over Table

Table over Form Layout

Table over sub tabs

Table over Heterogeneous (every row can have a different detail section)

Table over Tree (available via Table over Heterogeneous)

Form Layout over Table

Form Layout over Form Layout

Form Layout over sub tabs

Form Layout over Heterogeneous

Form Layout over Tree (available via Form Layout over Heterogeneous)

Table over Tree Table

Tree Table over Table

Tree Table over Sub tabs

Tree Table over Form Layout

Tables are the most common master component. When a table row is selected, the details appear in the area below the table. A table is also a very common detail component.

A Tree Table is a layout option in a Master-Detail composite for either a Master or a Detail (not both). When a Tree Table row is selected, the details appear in the area below the Tree Table.

16.2.3.1 Adding a Master-Detail to JSF Pages or Page Fragments

You create a Master-Detail in the Applications Master-Detail wizard, which is displayed when you add the details to your JSF pages (or page fragments) from the Data Controls panel.

To add a Master-Detail from the Data Control panel:

For Master-Detail to work, you need to define the model-layer such that the Master and Detail are linked by a ViewLink that establishes a relationship from the Master to the Detail.

In the Application Navigator, open the Data Control panel.

Navigate to the data source that you want to bind to the Master-Detail.

Drag the detail data-source onto the page.

In the Create context menu that is displayed, choose Applications > Master-Detail. Figure 16-14 shows the parent-child relationship of the selected Data Control, how the child is dragged to the page, and the Master-Detail option on the Create menu.

This section explains how to use the Applications Master-Detail wizard to add Master-Details to your pages.

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 creation of the Master-Detail and does not save the values you entered.

When you click Finish on any of the dialogs, the software:

Displays a preview of the Master-Detail.

Creates the Master-Detail with the values you provided on that screen and any previous screens, and default values for the remaining screens. However, not all wizards have a Finish button, or they only appear in a wizard once you have enough information to default the rest of the steps. For example, in almost all wizards, the last step is the Summary. This step often is omitted, so there is almost always a Finish button on the step before the Summary step.

Caution:

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

If the Pattern Type supports either the Panel Splitter or the Master Header Label, this option becomes active and a list, shown in Figure 16-16,offers these choices.

Figure 16-16 Enclose Master Detail Choices

<none>: This is the default selection. No special action will be performed.

Panel Splitter: Select this option to activate the Splitter Position field and set the position, in pixels, of the horizontal position of the split. Figure 16-17 shows an example of a Splitter in use at the default position.

Figure 16-17 Example of Panel Splitter

Panel Header / Show Detail Header: Select one of these options to activate the Master Header Label field to enclose the Master-Detail with a header. There are basically two types of headers:

with a hide/show icon

without the hide/show icon

In the example in Figure 16-18, the Edit Element Entries text is the Panel Header and the Basic Information text with the expand/collapse icon is the Show Detail Header. The picture, Name and Social Security Number are the content, which is enclosed by the Show Detail Header. Then everything is enclosed by the Panel Header, shown in Figure 16-18.

Figure 16-18 Example of Panel and Detail Headers

Master Header Label: Enter the label to be used by either the Panel Header or the Show Detail Header.

Select the Pattern Type (the example uses Table/Table) and any options and click Next.

To create your Master-Detail for your Master form fields or Detail table columns:

To create a Master-Detail consisting of two forms, select FormLayout/FormLayout and click Next to display the Configure Master dialog, shown in Figure 16-24.

Figure 16-24 FormLayout /FormLayout Configure Master Dialog

This configure dialog is the same as the one for creating a Table, except that it does not have the Enable ADF Behavior settings, as shown in Figure 16-19.

Click Next to display the Configure Navigation Buttons dialog, shown in Figure 16-25.

Figure 16-25 Form/Form Configure Navigation Buttons Dialog

Select the navigation buttons you want to appear on the Main form.

Click Next to display the Detail Header dialog, shown in Figure 16-21 for details.

Click Next to display the Configure Details dialog, shown in Figure 16-26.

Figure 16-26 Form/Form Configure Details Dialog

Use this dialog to create as many tabs on the Details form as you need. To create a new tab, enter a name in the Name field and click the Add icon. The tab is added in the area beneath the Name field.

Each tab is the same as the dialog for creating a Table, except that it does not have the Enable ADF Behavior settings, shown in Figure 16-19.

Click Next to display the Configure Navigation Buttons for the Detail section dialog, shown in Figure 16-25.

Click Next to display the Summary dialog.

Click Finish to save your changes.

Your new Master-Detail displays in the JSF Page editor, shown in Figure 16-27.

Figure 16-27 Form/Form Master-Detail in Page Editor

16.2.4 Master-Detail Guidelines for Creating New Records

Developers should follow these guidelines to use the updatable Master-Detail task flow and to investigate some solutions for creating a detail record for a newly-created master record. Several cases have been identified for using Master-Detail. The master and the detail can be a form, table, tree, or tree table.

16.2.4.1 Master-Detail without a Default Primary Key Generator

If you have a Master-Detail in your page and the primary key for the master is not generated using a sequence, the best way to create a detail row for a freshly-created master row is to have a page-level Submit or Save button that needs to be clicked to save the master data before creating detail data.

16.2.4.2 Master-Detail with a Default Primary Key Generator

In this case there are two solutions:

Have a page-level Submit or Save button that would save the newly-created master record before creating a detail record.

Set the autoSubmit property on all the elements (components) of the master to true. For example, if the master is a table, set autoSubmit="true" on all the components inside the af:column.

16.2.4.3 Master-Detail with a Composite Primary Key

In this case, you need to provide a page-level Submit or Save button and click it to commit the master record before creating a detail record.

16.2.4.4 Any Other Case

The preferred solution is to have a page-level Submit or Save button that can commit the master record before creating a detail record.

16.2.5 How to Modify Master-Detail Components and Properties

To modify Master-Detail components and properties, double-click a Master-Detail component in the page editor.

16.3 Implementing Hover

Hover is a subset of Detail On Demand that presents the same information when the user hovers over a link.

This is a Design Time (DT) only pattern, no component has been created. For this reason there is no UI First creation option.

The Design Time works when dragging a collection from the Component palette onto an allowed drop component, shown in Figure 16-28.

It is possible to add command links / buttons into the popup so the user can navigate to a separate page/page flow. Adding these links is up to the developer, because it is not a valid option in the Design Time, as command links are not an available component in any binder GUI. The developer must ensure the popup is closed after navigation in this case, although the default behavior may do this.

16.4 Implementing Applications Dialog Details

The Applications Dialog Details component provides a user interface for launching a popup that contains detail information. The UI can be a detail icon, a link, or a button.

16.4.1 How to Add Applications Dialog Details to Your Page

You can add the Applications Dialog Details to your page in two ways:

Select the Applications Dialog Details from the Applications component palette and drag and drop it on your page.

Drag and drop a data control to your page and select the Applications Dialog Details from the list of available UI components.

View

Table 16-4 shows the properties that are exposed on the Applications Dialog Details.

Table 16-4 Applications Dialog Details Properties

Property

Description

Allowed Values

Id (id)

The unique ID for this Applications Table

string

Rendered (rendered)

Whether the Applications Table is rendered or not

boolean / expression

Detail Pattern Type (detailPatternType)

Detail pattern type

image, link or button

Popup Id (popupId)

ID of the popup to be invoked when Detail image/link/button is clicked

The Applications Dialog Details does not expose any bindings to the model. However, components within the Applications Dialog Details, like the layout inside ADF popup, will be bound to the model.

Controller

The Applications Dialog Details component does not ship a default managed bean.

16.4.1.1 Adding Applications Dialog Details

The Applications Dialog Details 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:column, af:form, af:group, af:panelBox, af:panelFormLayout, af:panelGroupLayout, af:panelHeader, af:showDetailItem, af:panelWindow, af:showDetail, f:facet, f:panelGrid, f:panelGroup, af:pageTemplateDef, af:pageTemplate#<localArea_Facet>).

The Applications Dialog Details can be added to a page or page fragment using either the Component First or the Data First approach. Both approaches launch a wizard which helps you to quickly define the appropriate attribute values. Once you complete this wizard, you can further refine the dialog details definition by editing the resulting component as needed.

Component First

Navigate to the Component Palette. Click the list of libraries and select Applications. Drag the Applications Dialog Details from the list of components and drop it onto the page. The wizard will launch after dropping the Applications Dialog Details 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 Dialog Details. 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 Applications > Dialog Details to launch the Applications Dialog Details wizard, shown in Figure 16-32.

Figure 16-32 Launch the Applications Dialog Detail Wizard

Applications Dialog Details Create Wizard

The Applications Dialog Details Create wizard consists of only one panel.

Create Applications Dialog Details Panel

The Create Applications Dialog Details Panel will vary depending on the approach used to launch the Applications Dialog Details creation process.

Using the Data First approach, the Bind Data Now and Data Source properties are hidden. The selected data source is automatically bound to the components in the formLayout of the popup.

Using the Component First approach, it is up to the developer to decide whether to bind a Data Source to the dialog details component, shown in Figure 16-33.

Figure 16-33 Create Applications Dialog Details Panel

You can skip the data control binding step when creating the Applications Dialog Details. In this case, the Applications Dialog Details will create several default placeholder outputText fields that you can use for layout purposes in the popup. You can decide how many placeholder columns you wish to display. Once you have selected the appropriate number of fields, click OK to finish the creation process.

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

Once the Data Source is selected, the developer can enter the title for the popup and choose the Detail Pattern Type.

When link is selected for the Detail Pattern Type, you will need to select an attribute of the data source that binds to the Text attribute. This is the displayed text of the link. When image or button is selected for Detail Pattern Type, choosing an attribute is not needed, as shown in Figure 16-34.

Figure 16-34 Select a Data Source Attribute

Title

If the dialog will be read-only:

The format should be <Object Type> <Object Name> (such as Expense Report WBJ3008D)

If you want a new Title, 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 Title defined in a resource bundle, click the ellipsis and choose from the list, as shown in Figure 16-35.

Figure 16-35 Select Text Resource for Dialog Details Title

Resource Bundle: Select the bundle containing the string you want to use. You can select a single bundle or all available bundles. The strings will display in the Matching Text Resources field.

Display Value: You can enter a new string for a title here.

Key: Each resource must have a unique Key. This generally is, in all upper-case characters, the words of the Display Value separated by an underscore character.

Description: This is an optional entry.

Matching Text Resources: This field displays the entries of the selected resource bundle. Select an existing title from the list.

When a title is selected from the list, the Title field will appear similar to Figure 16-36.

Figure 16-36 Dialog Details Title Field Using Resource Bundle

Detail Pattern Type

The Detail Pattern Type is how the data control is shown; it can be an image, a link or a button.

Image: Shows the Dialog Details component as an image. The image is the same as in the component palette. Clicking the image will open the Dialog Details popup.

Button: Shows the Dialog Details component as a button that opens the Dialog Details popup when clicked.

Link: In this case, you will need to select the Text Attribute, which is a list of columns in the Data Control you have selected (or dragged). This column data is used as the link text.

Use of a specific pattern type is your choice and does not affect the way Dialog Details behaves.

To display what the popup would show, you can choose a link that shows data from the selected data control, such as a column in a table. For instance, in the Employee table, to show more employee data, you can use the employee name as the text attribute. Clicking an employee name then would open more data about that employee.

A button can be used if there is only one Dialog Details popup for the page. Clicking it gives more information about the data on the page.

Image could be used the same way as button, or on pages with form data.

Text Attribute

This setting is available only if the Detail Pattern Type is link. The text entered here is shown as the Dialog Details link. This helps give the user an idea about the data contained in the popup.

Read-only Form

If content in the dialog is read-only, the window should be non-modal.

If content in the dialog contains editable fields, the window should be modal.

If you select Read-only, the choices in the Component to Use column will change from Input Text to Output Text types.

If this option is not selected; that is, the form can be edited by the user, two buttons automatically are added to the form: Save and Close, and Cancel. Figure 16-37 shows the default buttons in the form in the JDeveloper Design view.

Figure 16-37 Default Buttons Added to non Read-only Form

If this option is selected; that is, the form cannot be edited by the user, only an OK button automatically is added to the form, as shown inFigure 16-38.

Figure 16-38 Default Button Added to Read-only Form

Fields

Display Label: This value will be displayed for the column heading. The default value is the text that is displayed in the Value Binding field.

Value Binding: This field lists the names of the columns from the selected data control. Clicking an entry opens a list of the columns so you change the order in which they appear.

Component To Use: Data in Dialog Details can be read-only or updatable. Component to Use is similar to what Component does while creating a table. Clicking it reveals a choice list of values, and the dialog details popup would then at runtime show that particular column from the datacontrol as the selected component to use. The choice list is changed according to whether or not you choose read-only. If you selected Read-only, the choices will change from Input Text to Output Text types.

16.4.1.2 Working with the Applications Dialog Details

This section discusses how to edit Dialog Details properties.

Editing - Properties

Once you have created the Applications Dialog Details, you can modify the property values by using the Property Inspector. There are three ways to select the Applications Dialog Details:

Select the component in the Design view of the page.

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

Select fnd:applicationDialogDetails from the hierarchy in the Structure View.

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

Figure 16-39 Dialog Details Property Inspector

Adding a Data Source

Once you have created the Applications Dialog Details, you can see that an af:popup has also been created above fnd:applicationsDialogDetails. You can add data controls to the facets / content containers within that popup 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.

For example, inside the popup that the Applications Dialog Details wizard generates, the fields of the data source are bound to components. Figure 16-40 shows the Structure view of a page with components already added.

Figure 16-40 Page Structure View

To add a field from a data source to the af:panelFormLayout inside the popup, drag the field from the data source to the following path: up > af:dialog > af:panelFormLayout. As is the case with the data first approach, you will be prompted to choose which ADF component to use for this attribute.

Note:

This example uses the Structure view because it provides an efficient overview of the page. The field could also be dropped onto the page in Design or Source view to achieve the same result.

Adding UI Content

To achieve the final goals for a page design, you will likely need to add other components to the af:dialog inside af:popup.

16.4.1.3 Implementing OK and Cancel Buttons in a Popup

A product team's task flow must include the OK and Cancel buttons that are used to launch a dynamic tab and dismiss the popup, respectively. Once the buttons have been added, create a managed bean to set each button's action listener. Use the method in Example 16-4 as the Cancel button's action listener.

Example 16-4 Example Method to Create a Managed Bean to Be the Cancel Button's Action Listener

Although the closePopup() implementation shown in Example 16-4 closes the popup properly, if you reopen the popup by clicking the tasklist link, it shows the previously-entered values. If you do not want to show previously-entered values, you need to add a taskflow return activity, navigate to it, and then close the popup. However, after adding this taskflow return activity to the example closePopup() implementation, the popup is closed only partially. This is a side effect of the Javascript hide that is used. A solution is to use this closePopup() method, which works whether or not you have the taskflow return activity.

Create another method for the OK button that calls the method in Example 16-4, and any additional processing logic. The common use case would be opening a new task in the Main Area by using the openMainTask API. For example, you can bind the OK button to a managed bean and add your own action listeners, as shown in Example 16-5.

Example 16-5 Example Method to Create a Managed Bean to Be the OK Button's Action Listener