Boost Efficiency by Creating Shortcuts: Perform Multi-Window Tasks Right from the Same Screen Without Reloading in Oracle APEX

In today's fast-paced business environment, enhancing user experience and saving time is crucial. This guide shows you how to integrate a button in Oracle APEX that lets users perform database actions or master data insertions directly from the transaction screen without reloading or submitting the page. By allowing users to perform multi-window tasks without leaving their current workflow, you can significantly boost efficiency and streamline operations. This approach ensures that the process is quick, intuitive, and permission-sensitive, making your application more user-friendly and efficient.

Scenario

Imagine you're creating a new item in your inventory system. Typically, you'd need to define attributes like item category and item brand. Traditionally, adding a new category might require you to leave the item creation screen and navigate to a separate setup form. This can be time-consuming and disrupts the workflow.

By implementing a button that allows users to add new item categories directly from the transaction screen, you can streamline the process, saving time and improving user satisfaction. The button will only be visible when adding a new item and will only function if the user has the appropriate permissions.

Challenges

Permissions: Ensuring the button is only accessible to users who have the right to add an item category.
Dynamic Updates: Updating the item category field with the newly created category immediately after it's added.
Context-Sensitive Display: Displaying the button only when adding a new item, not when modifying existing item information.

Solution

Step-by-Step Implementation in Oracle APEX

Step 1: Create a Dialog Region

Navigate to the Page Designer

Open the page where you want to add the item category button.
Click on the + icon in the Regions section.

Create a New Dialog Region

Select Dialog as the region type.
Set the Static ID to catDialog.
Set the Title to "Add Item Category".

Step 2: Add Page Items to the Dialog Region

Add a Page Item for Category Description

In the dialog region, add a new page item (Text Field).
Set the Name to P34_LC_DESC.
Set the Label to "Category Description".

Add a Button to Save the Category

In the dialog region, add a new button.
Set the Name to SAVE_CATEGORY.
Set the Label to "Save".
Under Action, select Defined by Dynamic Action.

Step 3: Add Dynamic Action to the Save Button

Create a Dynamic Action for the Save Button

Select the SAVE_CATEGORY button in the Page Designer.
Under Dynamic Actions, click the + icon to add a new dynamic action.
Set the Event to Click.
Set the Selection Type to Button.
Set the Button to SAVE_CATEGORY.

Add True Action for Server-Side Processing

Under the newly created dynamic action, click True and select PL/SQL Code.

Add the following PL/SQL code to insert the new category into the database and return the new category ID:

  DECLARE
    v_cat_code category.category_code%TYPE;
  BEGIN
    INSERT INTO category(category_code, category_name)
    VALUES ('CT001', :P34_LC_DESC)
    RETURNING category_code INTO v_cat_code;

    :P34_ITM_CAT_CODE := v_cat_code;
  END;

Add True Action for JavaScript Execution

Add another True action under the same dynamic action.
Select Execute JavaScript Code and add the following code to close the dialog and reset the input field:
```
  $('#catDialog').dialog('close');
  $('#P34_LC_DESC').val('');
```

Step 4: Add the Item Category Button to the Transaction Screen

Add a Button Next to the Item Category Field

In the transaction screen region, add a new button.
Set the Name to btnAdd.
Set the Label to a blank value.
Add a Button Icon (e.g., fa-plus).
Under Appearance, set the Template to Inline with Field.
Set the CSS Classes to custom-button.

Style the Button

Add the following CSS to the page's inline CSS to style the button:

.custom-button {
  width: 50px; /* Set the width as per your requirement */
  height: 50px; /* Set the height as per your requirement */
  background-color: #dcdcdc; /* Set the background color */
  color: #fff; /* Set the text color */
  border: none; /* Remove default border */
  border-radius: 10%; /* Make the button circular */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Change cursor on hover */
  margin-left: 0.1rem;
}

.custom-button:hover {
  background-color: #0056b3; /* Change color on hover */
}

.custom-button .fa-plus {
  font-size: 16px; /* Set the icon size */
}

Step 5: Add Dynamic Actions for Button Visibility and Permissions

Dynamic Action for Button Visibility on Page Load

Create a new dynamic action in the Page Designer.
Set the Event to Page Load.

Add a True Action with the following JavaScript Code:

  if ($('button#btnAdd').length > 0 && $('input#P34_ROWID').val() === null) {
    $('#btnAdd').show();
  } else {
    $('#btnAdd').hide();
  }

Dynamic Action for Checking Permissions on Button Click

Select the btnAdd button and add a new dynamic action.
Set the Event to Click.

Add a True Action to execute PL/SQL Code:

  BEGIN
    :P34_LC_CHK_RIGHTS := get_rights('item_category');
  END;

Add another True Action to execute the following JavaScript Code:

  if ($v('P34_LC_CHK_RIGHTS') == 1) {
      $('#catDialog').dialog('open');
  } else {
      // Clear any existing error messages
      apex.message.clearErrors();

      // Show the custom error message
      apex.message.showErrors({
          type: "error",
          location: "page",
          message: "You are not allowed to perform this action.",
          title: "Access Denied",
          unsafe: false
      });
  }

Conclusion

By following these steps, you can create a user-friendly interface in Oracle APEX that allows users to add item categories directly from the transaction screen. This approach not only saves time but also ensures that the process is efficient and permissions are handled correctly. The dynamic actions and dialog region enhance the user experience by providing an intuitive way to manage item categories without leaving the current screen.