15.3 Managing Buttons

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). You can also configure buttons to display conditionally or warn users of unsaved changes.

• What Actions Can a Button Perform?
  Use buttons to submit a page or redirect to a different page.
• Creating a Button
  Create buttons in Page Designer.
• Editing a Button
  Edit buttons in Page Designer.
• Displaying a Button Conditionally
  You can choose to have a button display conditionally by editing the Server-side Condition attribute in Page Designer.
• Configuring Button Attributes to Warn Users of Unsaved Changes
  Use the Warn on Unsaved Changes attribute to warn users of unsaved changes when they attempt to navigate away from a page.
• About Calling JavaScript from a Button
  Call JavaScript from a button to confirm a request. Oracle Application Express uses this technique for the delete operation of most objects.
• About the Relationship Between Button Names and REQUEST
  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 is submitted.
• About Branching with Buttons
  Learn about branching with buttons.

See Also:

"Calling a Page from a Button URL" and "Accessing Page Specific Utilities"

15.3.1 What Actions Can a Button Perform?

Use buttons to submit a page or redirect to a different page.

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).

15.3.2 Creating a Button

Create buttons in Page Designer.

To create a button in Page Designer:

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. If necessary, create a region to contain the item.
3. In the Gallery, click the Buttons tab.

   Passing the cursor over a button displays a tooltip that describes it.

4. Right-click the button, select Add To, and select the appropriate location.

   Tip:

   You also select the button with the mouse and drag it to the appropriate location in the Layout tab.

   The Property Editor displays Button attributes. Attributes are organized in groups.

5. To find a group or attribute:

   • Search for the group or attribute - Enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

   • Use Go to Group - Click Go to Group and select the group. To return the default display, click Go to Group again and select Expand All.

6. 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 central pane.

7. Click Save.

See Also:

"About Regions"

15.3.3 Editing a Button

Edit buttons in Page Designer.

To create a region button in Page Designer:

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. In either the Rendering tab or the Layout tab, select the button to edit.

   The Property Editor displays the button attributes in the right pane.

3. To find a group or attribute:

   • Search for the group or attribute - Enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

   • Use Go to Group - Click Go to Group and select the group. To return the default display, click Go to Group again and select Expand All.

4. Edit the button attributes.

   Edited attributes display a green marker to the left of the attribute name until the page is saved.

   Note:

   To learn more about an attribute, see field-level Help.

5. Click Save.

15.3.4 Displaying a Button Conditionally

You can choose to have a button display conditionally by editing the Server-side Condition attribute in Page Designer.

To have a button display conditionally:

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. In either the Rendering tab or the Layout tab, select the button to edit.

   The Property Editor changes to display Button attributes. Attributes are organized in groups.

3. To find a group or attribute:

   • Search for the group or attribute - Enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

   • Use Go to Group - Click Go to Group and select the group. To return the default display, click Go to Group again and select Expand All.

4. Find Server-side Condition. Select a Type and enter appropriate information in the field provided.

   Tip:

   To learn more about an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

5. Click Save.

See Also:

"Referencing Session State Using Bind Variable Syntax"

15.3.5 Configuring Button Attributes to Warn Users of Unsaved Changes

Use the Warn on Unsaved Changes attribute to warn users of unsaved changes when they attempt to navigate away from a page.

To configure the Warn on Unsaved Changes attribute:

1. View the page in Page Designer:
   1. On the Workspace home page, click the App Builder icon.
   2. Select an application.
   3. Select a page.
   Page Designer appears.
2. In either the Rendering tab or the Layout tab, select the button to edit.

   The Property Editor changes to display button attributes. Attributes are organized in groups.

3. To find a group or attribute:

   • Search for the group or attribute - Enter keywords in the Filter Properties field. The Property Editor displays the group or attributes. To return to the default display, delete the keywords.

   • Use Go to Group - Click Go to Group and select the group. To return the default display, click Go to Group again and select Expand All.

4. Find Behavior.
5. For Warn on Unsaved Changes, select one of the following:

   • Page Default - Check for unsaved changes when the button is clicked if Warn on Unsaved Changes is enabled at page level.

   • Do Not Check - The unsaved changes check will not be performed when the button is clicked. Use this setting for Cancel, Delete, and Apply Changes buttons.

6. Click Save.

Tip:

The Warn on Unsaved Changes attribute is implemented using the apex.page.warnOnUnsavedChanges API.

See Also:

"Configuring Pages to Warn Users of Unsaved Changes" and "warnOnUnsavedChanges" in Oracle Application Express JavaScript API Reference

15.3.6 About Calling JavaScript from a Button

Call JavaScript from a button 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:

1. Create a button with action of Defined by Dynamic Action.

   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.

See Also:

"Creating a Button" and "Managing Dynamic Actions."

15.3.7 About the Relationship Between Button Names and REQUEST

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 is submitted.

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.

15.3.8 About Branching with Buttons

Learn about branching with buttons.

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 App 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"