This section describes how to add button to your application. As you design your application, you can use buttons to direct users to a specific page or URL, or to post or process information (for example, by creating Create, Cancel, Next, Previous, or Delete buttons).
Buttons can perform different types of actions. A button can:
Submit a page (for example to save changes to a form page)
Redirect to either a different page or a custom URL
Do nothing (for example if the button's behavior is defined in a Dynamic Action).
This section describes how to manage buttons in Page Designer.
See Also:
"Managing Buttons in Component View"To create a button in Page Designer:
View the page to contain the item in Page Designer. See "Viewing a Page in Page Designer."
If necessary, create a region to contain the item. See "About Regions."
In the Gallery, click the Buttons tab.
Passing the cursor over a button displays a tooltip that describes it.
Select a button and drag it to the appropriate location in Grid Layout.
Tip:
You also right-click the item, select Add To, and select the appropriate location.The Property Editor - Page Items appears.
The Messages tab displays a red or yellow badge to identify messages you need to address. Selecting a message displays the associated attribute in the Property Editor. You must address red error message before you can save.
View all attributes in the Property Editor. Select Show All from the Property Editor Menu.
Edit the appropriate attributes in the Property Editor.
Tip:
To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.Click Save.
To create a region button in Page Designer:
View the page in Page Designer. See "Viewing Page-Level Items in Page Designer."
Page Designer appears.
In either the Rendering tree or Grid Layout, select the button to edit.
The Property Editor changes to display Property Editor - Button.
View all attributes in the Property Editor. Select Show All from the Property Editor Menu.
Edit the appropriate attributes.
To learn more about a specific attribute on a page, click the attribute label. See "Viewing Field-Level Help."
You can choose to have a button display conditionally by editing attributes on the Edit Pages Button page.
To have a button display conditionally:
View the page in Page Designer. See "Viewing Page-Level Items in Page Designer."
Page Designer appears.
In either the Rendering tree or Grid Layout, select the button to edit.
The Property Editor changes to display Property Editor - Button.
View all attributes in the Property Editor. Select Show All from the Property Editor Menu.
Tip:
To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the center pane.Expand Condition. Select a condition type and enter appropriate information in the field provided.
Click Save.
This section describes how to create buttons in Component View.
See Also:
To create a region button in Component View:
Navigate to the appropriate page. See "Viewing a Page in Component View."
If necessary, create a region. See "About Regions."
Under Buttons, click the Create icon.
On Button Region, select a region for the button and click Next.
On Button Position:
Position - Select a position for the button:
Create a button in a region position - Select this option to place the button in a region position. A region position is a position defined by a region template.
Create a button displayed among this region's items - Select this option to display the button within or between page items (for example, to add a button directly to the right of a form field).
Click Next.
For Button Attributes:
Tip:
To learn more about an attribute, see field-level Help. See "Viewing Field-Level Help."Button Name - Enter a name for this button. For buttons with an action of Submit Page, the button name becomes the page request value. For example, if you name the button FLOW_RESET_BUTTON, then the button has purpose of resetting the current page without doing a submit).
Label - Enter a label to be displayed for the button.
Button Template - Define which template controls the display of the button. Button templates are defined on the templates page. You must have at least one button template defined to use button templates.
Button Type - Use this attribute to select either the Normal or Hot template of the button template.
If you select Hot, the button is rendered using the template stored in the Hot Template attribute of a button template. If no value is defined, the regular button template is used.
Button Attributes - Text entered is added to the HTML element definition. The following example sets the class of a text button:
class="myclass"
For buttons based on templates, your template must include the #BUTTON_ATTRIBUTES# substitution string. You can use this to control tab stops. For example:
tabindex="3"
Click Next.
Display Properties appears. The options that display for Display Properties depend upon the selected region position.
For Display Properties:
If the button position is Create a button in a region position:
Sequence - Enter the sequence for this component. The sequence determines the order of evaluation.
Position - Select a position for this button.
Alignment - Select Right or Left.
Click Next.
If the button position is Create a button displayed among this region's items:
Sequence - Enter the sequence for this component. The sequence determines the order of evaluation.
Click Next.
For Action When Clicked:
Tip:
To learn more about an attribute, see field-level Help. See "Viewing Field-Level Help."Action - Select a behavior when the button is clicked.
Execute Validations - Execute Validations controls the execution of validations when a page is submitted. For example, this is useful for a Delete button where you do not want to annoy the user with irrelevant validation error messages when they are deleting a record.
To have a specific validation always execute independent of this setting, set the validation attribute, Always Execute, to Yes. To learn more, see "About Determining When Validations Execute."
Click Next.
For Conditional Display, select a condition type from the list that must be met in order for this component to be rendered.
Click Create Button.
In Component View, you can create multiple Submit Page buttons within the same region at once using the Create Multiple Buttons Wizard.
To create multiple buttons at once:
Navigate to the appropriate page. See "Viewing a Page in Component View."
If necessary, create a region. See "About Regions."
In Component View, locate the Buttons section and click the Create icon.
The Create Button wizard appears.
Click the Create Multiple Buttons link.
The Create Multiple Button Wizard appears.
From Region, select the region to contain the buttons.
From Template, select a template. If no template is selected, buttons of style HTML are created.
In HTML Attributes, specify HTML attributes for these buttons. This text is added to the HTML element definition. For example, you could set the class of a text button as follows:
class="myclass"
To quickly populate the remaining fields, make a selection from the Quick Button list on the right side of the page.
Click Create Buttons.
This section describes how to edit a button in Component View.
To edit attributes for an existing button:
Navigate to the appropriate page. See "Viewing a Page in Component View."
Under Button, select the button name.
Edit the button attributes.
To learn more about an attribute, see field-level Help. See "Viewing Field-Level Help."
Click Apply Changes.
The Action When Button Click, Execute Validations attribute on the Edit Page Buttons page controls the execution of validations when a page is submitted. For example, this is useful for a Delete button where you do not want to annoy the user with irrelevant validation error messages when they are deleting a record.
For Execute Validations, you can select:
Yes - If the page is submitted and this attribute is set to Yes, all validations defined for the page and all built-in validations execute (for example to check for a required value or to determine if the value is a valid number or date).
No - If set to No, none of the defined validations or the built-in validations execute.
To have a specific validation always execute independent of this setting, set the validation attribute, Always Execute, to Yes.
Use the Buttons page to delete multiple buttons or view a history of recent changes.
To edit multiple buttons at once:
Navigate to the appropriate page. See "Viewing a Page in Component View."
Under Buttons, click the Edit All icon. The Edit All icon resembles a small grid with a pencil on top of it.
The Buttons page appears. The Buttons page contains a table listing the buttons in the region.
Edit the attributes and click Apply Changes.
To delete multiple buttons at once:
Navigate to the appropriate page. See "Viewing a Page in Component View."
Under Buttons, click the Edit All icon. The Edit All icon resembles a small grid with a pencil on top of it.
The Buttons page appears. The Buttons page contains a table listing the buttons in the region.
Click Delete Multiple Buttons.
The Delete Multiple Buttons page appears.
Select the buttons to delete and click Remove Buttons.
You can choose to have a button display conditionally by editing attributes on the Edit Pages Button page.
To have a button display conditionally:
Create the button. See "Creating a Button in Component View".
Navigate to the appropriate page. See "Viewing a Page in Component View."
Under Buttons, click the button name.
Scroll down to Conditions.
Make a selection from the Condition Type list.
Enter an expression in the fields provided.
Click Apply Changes.
Calling JavaScript from a button is a great way to confirm a request. Oracle Application Express uses this technique for the delete operation of most objects. For example, when you delete a button, a JavaScript message appears asking you to confirm your request. Consider the following example:
function deleteConfirm(msg)
{
var confDel = msg;
if(confDel ==null)
confDel= confirm("Would you like to perform this delete action?");
else
confDel= confirm(msg);
if (confDel== true)
doSubmit('Delete');
}
This example creates a function to confirm a delete action and then calls that function from a button. Note that the function optionally submits the page and sets the value of the internal variable :REQUEST to Delete, thus performing the deletion using a process that conditionally executes based on the value of the request.
When you create the button, you must select Redirect to URL. Then, you would specify a URL target such as the following:
javascript:confirmDelete('Would you like to perform this delete action?');
Oracle recommends using dynamic actions as the preferred way of executing JavaScript code. Consider the following example:
Create a button with action of Defined by Dynamic Action. See "Creating a Button in Component View."
Create a dynamic action and using the action type Execute JavaScript Code to execute the previous code, for example:
if (confirm("Would you like to perform this delete action?")) {
apex.submit('Delete');
}
This example uses JavaScript, but you could also easily implement this example without having to use JavaScript. Instead, you can use the declarative actions Confirm and Submit Page which are also translatable. To learn more, see "Managing Dynamic Actions."
The name you give a Submit button (that is, a button with an Action of Submit Page) determines the value of the built-in attribute REQUEST when the page submits. You can reference the value of REQUEST from within PL/SQL using the bind variable :REQUEST. By using this bind variable, you can conditionally process, validate, or branch based on which button the user clicks. You can also create processes that execute when the user clicks a button. And you can use a more complex condition as demonstrated in the following examples:
If :REQUEST in ('EDIT','DELETE') then ...
If :REQUEST != 'DELETE' then ...
These examples assume the existence of buttons named EDIT and DELETE. You can also use this syntax in PL/SQL Expression conditions. Be aware, however, that the button name capitalization (case) is preserved. In other words, if you name a button LOGIN, then a request looking for the name Login fails. For example:
<input type="BUTTON" value="Finish" onclick="apex.submit('Finish');">
In this example Finish is the name of the REQUEST and this example is case-sensitive.
Each page can include any number of branches. A branch links to another page in your application or to a URL. The Application Express engine considers branching at different times during page processing. You can choose to branch before processing, before computation, before validation, and after processing. Like any other control in Application Builder, branching can be conditional. For example, you can branch when a user clicks a button. When you create a branch, you associate it with a specific button. The branch is only be considered if a user clicks the button.
See Also:
"Controlling Navigation Using Branches"