Translating “Show All” Message

To translate the text to Serbian and replace "Show All" with "Prikazi sve" in Oracle APEX, you can use the platform's feature for modifying internal text messages. Navigate to Shared Components / Globalization / Text Messages in APEX, and create a new text message. For the "Show All" message, use the message name SHOW_ALL and set the text to "Prikazi sve" This will automatically update the message in your APEX application.

As I mentioned earlier, we will use the SHOW_ALL message name for this purpose. However, if our applications are adjusted accordingly, you should also configure the language settings to match the desired language for your users. By doing so, you ensure that the "Show All" text is displayed correctly in the user's preferred language. Below is the screenshot of the Create/Edit Text Message form.

Now, we have successfully configured our APEX application to automatically translate the "Show All" message as you can see on the screenshot below.

Full list of available text messages -

Conclusion

So, the next time you see a default English label that doesn't fit your application, you know exactly what to do. The power to fully localize your APEX application is just a few clicks away in the Text Messages settings. Use it to take your user experience to the next level.

I recently remembered this functionality and wanted to share it with you. If you need to ensure that your APEX application or a specific page remains consistent across various environments, APEX offers a built-in feature designed for this task.

Getting Page level Checksum

When you want to compare specific Oracle APEX page, just do the following.

1. In the App Designer, choose the application with the page you want to compare.

2. Click on the page you want to compare.

1. Click on the tool icon then Checksum.

Then you will see the page checksum.

Now, you can do the same in target environment and compare if checksum is the same.

Getting Application Level Checksum

1. In the App Builder choose the application you want to get checksum for.

2. In the App Builder home page go to Utilities.

3. Click Application Checksum

Now, you can compare the hash and also see the number of pages, regions, and items in the app.

Conclusion

APEX Checksum utility is a hidden gem for maintaining environment parity. Whether you are troubleshooting a bug that only appears on one instance or verifying a deployment to multiple production workspaces

Prerequisites

Before you start, ensure you have the following:

1. A Valid PWA: Your app must be a PWA with a web manifest and be accessible via HTTPS.

2. Apple Developer Account: Sign up for an Apple developer account, which costs $100 annually.

3. UI/UX: Have a nice UI and UX in the app, otherwise app will be rejected.

4. Follow Developer Content Policy: it is required to follow the polices from the following link https://developer.apple.com/app-store/app-privacy-details/

5. XCode and Simulator: You will need XCode and Simulator to build and test your app.

6. Patience: before published - app might be rejected a few times by Apple, asking for some changes in your app.

Web App Manifest

The first thing to start with is the Web Manifest, where you can configure key details of your PWA app.

A web manifest is a JSON (JavaScript Object Notation) file that provides important configuration settings for a Progressive Web App (PWA). It plays a crucial role in defining how your web application should behave when installed on a user's device.

The manifest is crucial because it bridges the gap between a web app and a native app. By defining these settings, you ensure that your PWA behaves like a native app when installed, providing a seamless and engaging user experience. This consistency is key to user adoption and satisfaction.

Here are the key elements and their importance:

1. name:

   • Purpose: This is the full name of your web application.

   • Importance: It is displayed to the user in various contexts, such as the app's title on the home screen and in the app launcher.

2. short_name:

   • Purpose: A shorter version of the app's name.

   • Importance: Used where space is limited, such as on the device's home screen.

3. icons:

   • Purpose: An array of images representing different icon sizes for your app.

   • Importance: Essential for providing a recognizable and professional appearance on different devices and screen resolutions. Recommended sizes include 192x192, 384x384, and 1024x1024 pixels.

4. theme_color:

   • Purpose: The color of the browser's UI elements when the app is launched.

   • Importance: Enhances the user's experience by providing a consistent color theme.

5. background_color:

   • Purpose: The background color of the splash screen displayed when the app is launched.

   • Importance: Improves the visual transition from the splash screen to the app.

6. display:

   • Purpose: Defines how the app should be displayed when launched.

   • Options:

     • fullscreen: Suitable for games or apps that require maximum screen space.

     • standalone: The most common setting, hides the URL bar, making the app look like a native app.

   • Importance: Determines the user interface and experience of the app.

7. start_url:

   • Purpose: The URL where the app should start when launched.

   • Importance: Ensures that the app opens at the correct entry point.

8. orientation:

   • Purpose: Specifies the default orientation (portrait or landscape) for the app.

   • Importance: Helps provide the best user experience by locking the app to the preferred orientation.

9. scope:

   • Purpose: Defines the navigation scope of the app, restricting which URLs the app can navigate to.

   • Importance: Ensures that navigation stays within the app context.

10. description:

    • Purpose: A brief description of the web application.

    • Importance: Provides users with an understanding of what the app does.

Example of a Web Manifest

{
  "name": "myapp.com",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon-48x48.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    ...
  ],
  "theme_color": "#007bff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "orientation": "portrait",
  "scope": "/",
  "description": "Description of the app"
}

More about app Manifest - https://www.w3.org/TR/appmanifest/

In APEX, you can add it by navigating to Shared Components > Progressive Web App > Custom Manifest.

Packaging Your PWA App

To package the PWA into an iOS app, I will utilize PWABuilder, which streamlines the process. Follow these steps to package the APEX app using PWABuilder.

PWABuilder

This powerful tool is designed to simplify the process of converting Progressive Web Apps (PWAs) into platform-specific apps, such as those for Android, iOS, Microsoft and Meta Quest. Created by Microsoft, PWABuilder offers an intuitive and straightforward way for developers to package their web applications and make them available across various app stores, enhancing the app's accessibility and user reach.

1. Visit PWABuilder: Go to PWABuilder.com.

2. Enter Your PWA URL: Input the URL of your PWA and click Start button.

1. Select Packaging Option: Click "Package for stores".

1. Generate Apple Package: Choose "Generate Package" under the iOS section.

Building Your App

Next, build the Xcode project that integrates your PWA:

1. Unzip the downloaded folder from PWABuilder.

2. Open a terminal and navigate to the "src" directory.

3. Run pod install. Note: If facing an error, like - zsh: command not found: pod

Run the following command –

sudo gem install -n /usr/local/bin cocoapods

run the pod install again, the command should execute without an error this time.

pod install

1. Open the .xcworkspace file in your "src" directory. (Do not open the .xcodeproj file.)

2. Click "Product" > "Build" in Xcode to compile your project.

Don’t select anything from left navigation or anywhere.

1. Test your PWA on an iPhone simulator by clicking the Product > Run it might ask you to install the Simulator.

Capabilities

Under the Xcode Signing & Capabilities tab, disable any unnecessary capabilities to ensure successful publishing verification. Leave Audio, AirPlay and picture in picture, Background processing and Remote Notifications.

All the icons and Screenshots need to be adjusted to not use the Alpha channel. (transparency).

On the Mac open the icon in Preview app > File > Export > uncheck the Alpha and save.

Publishing Process

1. Sign Into Your Apple Developer Account: Log in to your Apple Developer Account. - https://appstoreconnect.apple.com/login

2. Create a Bundle ID:

   • Navigate to your Apple Developer account page and select Certificates, Identifiers & Profiles.

   • Click on Identifiers and then the '+' symbol to add a new identifier.

   • Choose App as the type.

   • Provide a Description and your Bundle ID, ensuring it matches the one from PWABuilder.

   • Enable Associated Domains and Push Notifications in the capabilities section.

   • Click Continue and then Register to complete the process.

3. Create a Certificate Signing Request (CSR)

To proceed with the app deployment process, you need to generate a Certificate Signing Request (CSR) using the Keychain Access application. Follow these steps:

1. Launch Keychain Access: Open the Keychain Access app on your system. (MacOS)

2. Access Certificate Assistant: From the top menu bar, navigate to Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority.

3. Enter Details: Input your email address and name. The CA Email Address can be left empty.

4. Save the Request: Choose the option to save to disk and proceed.

Step 4: Create a Certificate

With the CSR generated in the previous step, you'll now create a certificate.

1. Access Apple Developer Account: Return to the Certificates, Identifiers, & Profiles section on your Apple Developer account.

2. Add Certificate: Select Certificates and use the '+' symbol to add a new certificate.

3. Select Type: Choose Apple Distribution and continue.

4. Upload CSR: Upload the Certificate Signing Request file previously created.

5. Download Certificate: After verification, download the .cer file to your disk.

Step 5: Install the Certificate

Now, install the downloaded certificate by following these steps:

1. Open Keychain Access: Launch the Keychain Access app.

2. Navigate: Ensure you're in the login section on the left sidebar.

Install: In the last step just drag the downloaded certificate to the list of certificates in the Keychain Access app.

Step 6: Create a Provisioning Profile

Using the created certificate, generate a Provisioning Profile as follows:

1. Access Developer Account: Return to the Certificates, Identifiers, & Profiles section.

2. Create Profile: Select Profiles and add a new profile.

3. Select Type: Choose App Store under Distribution.

4. Configure: Select the appropriate App ID and certificate.

5. Generate Profile: Provide a name for the Provisioning Profile and generate it.

6. Download Profile: download the .mobileprovision file.

Step 7: Create Your App Reservation

Now, reserve your app in the App Store Connect:

1. Access App Store Connect: Return to your Apple Developer account and navigate to App Store Connect.

2. Create App: Select My Apps and click on the '+' symbol to add a new app.

3. Provide Details: Fill in the required details including platform, app name, language, Bundle ID, SKU (can be any number), and user access.

4. Complete Reservation: Click Create to finalize the app reservation.

Step 8: Upload Your App Package

Upload app package to the App Store Connect:

1. Under Xcode > Preferences > Account add your Apple Developer Account

2. Go to your project in the left menu > Build Settings > Under signing set Code Signing Style Release to Manual > under Development Team set Release to your Account > under Provisioning Profile > select Download profile (choose the profile you created). At the top of the Xcode.

The image below shows how to select the project.

Step 9: Submit for Review

Submit your app for review to initiate the approval process:

1. Access App List: Navigate to your apps list in App Store Connect.

2. Select Build: Choose the build you just uploaded.

3. Submit: Hit Submit for Review to complete the submission.

Conclusion

Publishing your Oracle APEX PWA to the Apple App Store is definitely achievable — and using PWA Builder can make the native packaging step much smoother. PWA Builder helps you generate an iOS wrapper so you can focus on polishing the web app while handling much of the bridging work required for App Store submission.

Expand Selected Node

In APEX, we have Dynamic Actions to expand all and collapse all nodes. However, if we want to expand only a selected node, we need help from JavaScript APIs.

var tree$ = $( "#projTrackTree" );
tree$.treeView( "expand", tree$.treeView( "getSelection" ) );

If you want to collapse all nodes and expand only the selected one, use the following code:

var tree$ = $( "#projTrackTree" );
tree$.treeView("collapseAll");
tree$.treeView( "expand", tree$.treeView( "getSelection" ) );

Expand Selected Node on Page Reload

If you reload or submit the page when a node is clicked, the selected node will not remain active by default.

To achieve this, we can use the Selected Node Page Item attribute.

Selected Node Page Item

This option is declaratively available in Oracle APEX. When the page is reloaded, the item's value is used to select the active node. You can find this option under Tree Region > Attributes > Selected Node Page Item, as shown in the screenshot below.

The page item should be set either via the node link or a page process.

If you want to expand the selected node after a page reload, you can use the previous JavaScript snippet on page load.

Result:

With these techniques, you can easily control node expansion and improve the user experience in your APEX application.

• Retrieving all selected records

• Maintaining selected records between pagination pages

• Preselecting specific records

Getting Selected Records

Starting from APEX 24.1, a new JavaScript API called selectionStateItem allows setting an APEX page item with the selected values whenever the selection changes. More details are available in the APEX documentation.

Implementation

Add the following code to: IG > Attributes > Advanced > Initialization JavaScript Function

function (options) {
    options.defaultGridViewOptions = {
        selectionStateItem: "P100_SELECTED_IDS"
    }

    return options;
}

Result:

Persisting Selection Between Pages

By default, when pagination is set to "Page", selected records are lost when navigating between pages.

To retain selection, use the APEX JS API persistSelection, which ensures records remain selected across pagination pages.

Implementation

Add the following code to: IG > Attributes > Advanced > Initialization JavaScript Function

function (options) {
    options.defaultGridViewOptions = {
        rowsPerPage: 5,
        persistSelection: true
    }

    return options;
}

Result:

Preselect Records

If you need to retain selected records after a page refresh or preselect specific rows when the page loads, you can achieve this using JavaScript.

Implementation Add the following code to: Execute when Page Loads or a Dynamic Action on Page Load

var val = $v("P100_SAVED_IDS");
if (val) {
    var array = val.split(":").filter(id => id.trim() !== ""); // Remove empty values
    if (array.length > 0) {
        apex.region('IG_DEMO').widget().interactiveGrid('setSelectedRecords', array);
    }
}

This approach ensures that selected records persist, improving user experience when working with Interactive Grid selections in Oracle APEX.

Conclusion

By leveraging the selectionStateItem, persistSelection, and setSelectedRecords APIs in APEX Interactive Grid, you can efficiently manage row selection, ensuring a smoother user experience.

Prerequisites

Before you start, ensure you have the following:

1. A Valid PWA: Your app must be a PWA with a web manifest and be accessible via HTTPS.

2. Google Developer Account: Sign up for a Google developer account, which has a one-time fee of $25.

3. UI/UX: Have a nice UI and UX in the app, otherwise app will be rejected.

4. Follow Developer Content Policy: it is required to follow the polices from the following link https://play.google/developer-content-policy/

5. Android Device or Emulator: You need an Android device or emulator to test your app.

6. Patience: before published - app might be rejected a few times by Google Play, asking for some additional information about your app.

Web App Manifest

The first thing to start with is the Web Manifest, where you can configure key details of your PWA app.

A web manifest is a JSON (JavaScript Object Notation) file that provides important configuration settings for a Progressive Web App (PWA). It plays a crucial role in defining how your web application should behave when installed on a user's device.

The manifest is crucial because it bridges the gap between a web app and a native app. By defining these settings, you ensure that your PWA behaves like a native app when installed, providing a seamless and engaging user experience. This consistency is key to user adoption and satisfaction.

Here are the key elements and their importance:

1. name:

   • Purpose: This is the full name of your web application.

   • Importance: It is displayed to the user in various contexts, such as the app's title on the home screen and in the app launcher.

2. short_name:

   • Purpose: A shorter version of the app's name.

   • Importance: Used where space is limited, such as on the device's home screen.

3. icons:

   • Purpose: An array of images representing different icon sizes for your app.

   • Importance: Essential for providing a recognizable and professional appearance on different devices and screen resolutions. Recommended sizes include 192x192, 384x384, and 1024x1024 pixels.

4. theme_color:

   • Purpose: The color of the browser's UI elements when the app is launched.

   • Importance: Enhances the user's experience by providing a consistent color theme.

5. background_color:

   • Purpose: The background color of the splash screen displayed when the app is launched.

   • Importance: Improves the visual transition from the splash screen to the app.

6. display:

   • Purpose: Defines how the app should be displayed when launched.

   • Options:

     • fullscreen: Suitable for games or apps that require maximum screen space.

     • standalone: The most common setting, hides the URL bar, making the app look like a native app.

   • Importance: Determines the user interface and experience of the app.

7. start_url:

   • Purpose: The URL where the app should start when launched.

   • Importance: Ensures that the app opens at the correct entry point.

8. orientation:

   • Purpose: Specifies the default orientation (portrait or landscape) for the app.

   • Importance: Helps provide the best user experience by locking the app to the preferred orientation.

9. scope:

   • Purpose: Defines the navigation scope of the app, restricting which URLs the app can navigate to.

   • Importance: Ensures that navigation stays within the app context.

10. description:

    • Purpose: A brief description of the web application.

    • Importance: Provides users with an understanding of what the app does.

Example of a Web Manifest

{
  "name": "myapp.com",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "icon-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon-48x48.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    ...
  ],
  "theme_color": "#007bff",
  "background_color": "#ffffff",
  "display": "standalone",
  "start_url": "/",
  "orientation": "portrait",
  "scope": "/",
  "description": "Description of the app"
}

More about app Manifest - https://www.w3.org/TR/appmanifest/

In APEX, you can add it by navigating to Shared Components > Progressive Web App > Custom Manifest.

Packaging Your PWA App

To package the PWA into an Android app, I will use PWABuilder, which simplifies the process for us. Follow these steps to package the APEX app using PWABuilder.

PWABuilder

This powerful tool is designed to simplify the process of converting Progressive Web Apps (PWAs) into platform-specific apps, such as those for Android, iOS, Microsoft and Meta Quest. Created by Microsoft, PWABuilder offers an intuitive and straightforward way for developers to package their web applications and make them available across various app stores, enhancing the app's accessibility and user reach.

1. Visit PWABuilder: Go to PWABuilder.com.

2. Enter Your PWA URL: Input the URL of your PWA and click Start button.

3. Select Packaging Option: Click "Package for stores".

4. Generate Android Package: Choose "Generate Package" under the Android section.

5. Configure Package Options: On the Google Play tab, fill out the necessary information. Check if all the settngs under "All Settings" is correct.

6. Download Package: Click "Download Package" to get your Android package.

Publishing Your PWA App

1. Deploy assetlinks.json

Under PWABuilder .zip, you will find - assetlinks.json is a JSON file used to establish a relationship between your PWA and your website. It proves that you own the domain from which your PWA is served and allows the PWA to be installed without the browser URL bar, making it look more like a native app.

Upload the assetlinks.json file to your web server to prove ownership of your PWA. Place this file in the public folder of your server, making it accessible at https://<URL to your PWA>/.well-known/assetlinks.json.

Key Elements of assetlinks.json

1. relation:

   • Purpose: Specifies the permissions or actions that are allowed.

   • Importance: Ensures the PWA has the necessary permissions, such as handling all URLs related to the domain.

2. target:

   • Purpose: Defines the target app and its properties.

   • Importance: Establishes the connection between your web app and the Android app package.

Within the target, there are several important fields:

• namespace:

  • Purpose: Identifies the type of target. For Android apps, this is always "android_app".

  • Importance: Confirms the target is an Android application.

• package_name:

  • Purpose: Specifies the package name of the Android app.

  • Importance: Uniquely identifies your app in the Play Store.

• sha256_cert_fingerprints:

  • Purpose: Lists SHA-256 fingerprints of the app’s signing certificate.

  • Importance: Ensures the app is securely linked to your web domain.

Example of assetlinks.json

[
  {
    "relation": ["delegate_permission/common.handle_all_urls"],
    "target": {
      "namespace": "android_app",
      "package_name": "com.myapp.www",
      "sha256_cert_fingerprints": [
        "SHA256",
        "SHA256" // to be replaced later for production 
      ]
    }
  }
]

2. Upload App to Google Play Store

1. Log into the Google Play Console: Sign in and create a new app, providing the app name and other details.

2. Complete Dashboard Tasks: Follow the tasks listed on the Dashboard page. It will ask for some details of your app.

3. Create a New Release: Under Internal Testing > New Release. In the release creation step, you’ll need to upload an Android App Bundle (.aab) file from the zip file downloaded from PWABuilder.

4. Generate Google Signing Key: Follow the prompts to generate this key.

5. Prepare app screenshots: You will need app screenshots for different devices, that will be listed on the Play Store.

6. Add Testers: You’ll be asked to add Gmail accounts for internal testers, so App will be available for those account on the Play Store.

3. Update assetlinks.json For Production

1. Copy SHA-256 String: Go to the App Signing page in the Google Play Console and copy the SHA-256 string. Menu > Setup > App Signing > Copy - SHA-256 certificate fingerprint

2. Add SHA-256 toassetlinks.json:

    [
      {
        "relation": ["delegate_permission/common.handle_all_urls"],
        "target": {
          "namespace": "android_app",
          "package_name": "com.myapp.www",
          "sha256_cert_fingerprints": [
            "OLD_SHA",
            "NEW_ONE"
          ]
        }
      }
    ]
   

   Testing the App For 14 Days

   Before applying for the production, Google will ask you for 20 testers that will test your app for 14 days, so it might be your employees, friends, family... a bit boring.

Application is on Play Store

FullCalendar

Oracle APEX has a region type called Calendar, which is using the FullCalendar library. Full Calendar is powerfull lightweight library with over 300 settings, and more being added every release. Some of settings are nativly included in APEX, but for some advanced settings, Initialization JavaScript Function is needed to override/set the options.

Feel free to explore documentation and available options here.

Place to add your Initialization JavaScript Function in APEX is Calendar region > Attributes > Initialization JavaScript Function

Options

• Custom Button

If you have any need to create a custom button to your Calendar region, and add the action to it, this option is for you. :)

function ( pOptions ) {             

    pOptions.headerToolbar = {
        start: 'myCustomButton', 
        center: '',
        end: 'today prev,next' 
    }

    pOptions.customButtons = {
        myCustomButton: {
        text: 'Custom Button!',
        click: function() {
            alert('Button Clicked!');
        }
        }
    }

    return pOptions;
}

The options above will create a custom button to the beginning of the calendar's header. Clicking the button will trigger an alert message.

• eventDrop

My favorite feature of the FullCalendar is drag and drop functionality, sometimes you might need to ask user to confirm their action on the Calendar. Here is how you can do that.

function ( pOptions ) { 

    pOptions.eventDrop = function(info) {

        if (!confirm(info.event.title + " was dropped on " + info.event.start.toISOString())) {
            info.revert();
        }
    }

    return pOptions;
}

If I try to drag an event, I will get an confirm dialog.

• eventContent

If you want to add an additional text, image or any HTML to your event, without turning Escape special characters to off eventContent option might be helpful.

function ( pOptions ) { 

    pOptions.eventContent = function(arg) {
      return {
        html: arg.event.title + '<i>your html code here</i>'
      }
    }

    return pOptions;
}

As you can see in the image below, next to the title we will get an italic text that is used in Initialization Function.

• hiddenDays

To hide certain days in the calendar, you can use hiddenDays option, providing week days in range from 0 to 6 as an array.

function ( pOptions) {
    pOptions.hiddenDays = [1, 3]; // hides Monday and Wednesday

    return pOptions;
}

The Calendar image below shows that Monday and Wednesday are not displayed.

• validRange

To set a start and end dates of the Calendar, we can use validRange option. So the user will not be able to navigate outside of the provided range.

function ( pOptions) { 

    pOptions.validRange = {
        start: '2024-02-01',
        end: '2024-05-01'
    }

    return pOptions;
}

Conclusion

I hope you find these options useful. All or some of the options will be integrated into our Component Designer tool. Keep an eye out for updates! :)

And don't forget to explore the Component Designer tool—it's a valuable resource for designing and generating JavaScript Initialization Code tailored for Oracle APEX Components. Happy coding!

These kinds of reports can prove to be quite handy. They not only provide users with real-time updates but also enhance the overall user experience by ensuring that the displayed information remains current and relevant. This feature can be particularly beneficial in dynamic environments where data is constantly changing. By refreshing the Classic Report at regular intervals, we keep users well-informed and engaged with the latest data and trends in a user-friendly manner.

I will break this down into steps, making it easier to follow.

Step 1 - Create a progress bar in Classic Report

I will assume that you already have a Classic Report with data that you want to refresh. If not then simple create one, give the static id (in my case I called it empRpt. This id is needed later on).

Firstly, we will add CSS class to the header of the report, that will incorporate a progress bar into the Classic Report header, which will visually indicate when the next refresh will occur.

Navigate to your CR (Classic Report) > Region > Header and Footer > Header, and add the following HTML.

<span id="progress-bar" class="u-flex w100p h5 progress"></span>

Step 2 - Create After Refresh Dynamic Action

We are now going to create a Dynamic Action that will continually refresh the report. The event type to choose is "After Refresh" and the region that is related to your Classic Report.

Ensure that the After Refresh DA on the CR, where event scope is set to Dynamic, type is set to Debounce and time to 5000ms (5s).

Now, we need an Action, for this choose Execute JavaScript Code and enter the following.

$("#progress-bar").removeClass("progress").promise().then(function() {
    apex.region("empRpt").refresh().promise();
}).then(function() {
    $("#progress-bar").addClass("progress");
});

The provided code ensures that the 'progress' class is removed before refreshing the region with the Static ID "empRpt". After the region is refreshed, the 'progress' class is added back, ensuring that the progress is displayed again post-refresh.

Make sure that Fire on Initialization is set to Yes.

Final Step 3 - Create CSS animation

Create a progress bar animation, so user can see when next refresh will happen. Add the CSS snippet below to Page > Inline

.progress {
    background-color: var(--u-color-1);
    animation: progressBar 5s ease-in-out;
    height: 5px;
}

@keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

Result

Thanks a lot to Lucas Hirschegger for the idea and help.

In Conclusion

This straightforward implementation, featuring a progress bar and refreshing the Classic Report every 5 seconds, significantly enhances the user experience by providing a clear visual indicator of the refresh process. The progress bar is a subtle yet effective element in guiding users through the refresh cycle, contributing to a smoother and more engaging experience.

Hope you and your users find this enhancement valuable! :)

The concept is to save what the user enters on the page in the browser storage. This way, even if the user is in a new session the next time they visit the page, the information will be stored and can be loaded seamlessly.

To address this, I will utilize browser storage to store the preferred value in local storage. This way, the application can reuse saved value every time the user logs in.

Browser Storage

Think of browser storage as a virtual backpack for the internet. It allows websites keep and remember information directly on your device. There are two main types of browser storage – Local Storage and Session Storage.

Local Storage is like a long-term memory bank. Whatever you store here stays even after you close your browser. It's great for saving things like preferences, item values or any data you want to keep between different visits.

Session Storage is more like a short-term memory. It only keeps data for as long as you have a particular webpage open. Once you close that webpage or tab, the stored information disappears. It's handy for temporary data needs.

Why is browser storage important? By smartly using these storage options, you can make your application work better. You can create personalized experiences for users and make your app work better. The possibilities are endless when you make the most of browser storage.

How does it work with APEX?

Since APEX supports multiple applications, workspaces and even the same application working on different instances. There might be a problem using the browser storage because all apps from the same instance are using the same browser storage. To avoid that apex.storage.getScopedLocalStorage and apex.storage.getScopedSessionStorage is partitioning the storage by application id, additionally, page id and region id.

Given that APEX supports multiple applications, workspaces, and the possibility of the same application running on different instances, there's a potential issue with using browser storage. The problem arises when all apps from the same instance share the same browser storage. To address this challenge in the APEX, there are APIs: apex.storage.getScopedLocalStorage and apex.storage.getScopedSessionStorage. These methods act as a partitioning mechanism, ensuring that the storage is separated based on the application ID. Moreover, they take into account the page ID and region ID, providing a more granular and isolated storage environment for each specific instance of an application.

For more details, check official documentation.

Browser Comaptibility

sessionStorage

localStorage

Implementation

First, let's create a page item, and call it PX_BLOG.

The next step would be to create a dynamic action, that fires on page unload (when the user leaves the page). It should execute JavaScript code that saves our item text to local storage.

if ( apex.storage.hasLocalStorageSupport() ) {
  localStorage = apex.storage.getScopedLocalStorage({ prefix: "Demo", 
                                                      useAppId: true,
                                                      usePageId: true });
  localStorage.setItem( "text",  JSON.stringify($v("P2_BLOG")) );
}

Now, when a user types something in P4_BLOG item and left the page, the value of the item is written in the local storage.

To check if the value is set, run the following code in your browser console.

var itemText = localStorage.getItem('text');
console.log(itemText);

The next step is to create Dynamic Action that fires on page load, to set the value of the P4_BLOG with the value from the local storage.

var itemText;

if ( apex.storage.hasLocalStorageSupport() ) {
  itemText = apex.storage.getScopedLocalStorage({ prefix: "Demo", 
                                                  useAppId: true,
                                                  usePageId: true });
  itemText = localStorage.getItem( "text" );
}

$s('P4_BLOG', JSON.parse(itemText))

Result

Check out the demo application.

Conclusion

Browser Storage is a great way to save data that might be used in the app as a session based storage or use it even after the session is ended!

The Universal Theme comopnents are optimised to work well on different screen sizes, but not every APEX component is mobile-friendly; for instance, some reports might be challenging for users to read on mobile devices due to potential large horizontal scrolling.

Visibility classes are utilized to regulate when components should be hidden or displayed, based on the specific width range of the screen viewport.

Mobile-friendly components

As I mentioned already, some UT (Universal Theme) APEX components are not mobile-friendly. Such as Interactive Report, Interactive Grid and Classic Report

Oracle APEX has three mobile-friendly reports: a List View, Column Toggle, and a Reflow Report.

• List View: A List View report is like a mobile-friendly table that shows data neatly and lets you move around easily on your phone. It takes information from a specified data source (either local or external) and a table or SQL query you provide. Developers use the report attributes to pick which database columns to show, including the one used for List View entry.

• Column Toggle Report: This report is another way to display data from a SQL query, either local or external. It includes a handy "Columns" button that lets users choose which columns they want to see.

• Reflow Report: Think of a Reflow Report as a smart table that adjusts when there's not enough space to show everything side by side. It takes data from your chosen source, and if the space is tight, it rearranges the table into a neat vertical layout, displaying each column on its own row.

Problem

Classic Report - is displayed well on desktop, but on mobile, the problem is a big horizontal scroll and it is not easy to read what is on the report, especially when there's a column with large text.

Screenshot of the CR on the desktop. Columns are displayed as they should, and it looks nice.

Below is the same report displayed on the mobile.

As you can see from the screenshot above, only three columns are displayed, and the user needs to scroll horizontally to see the rest, if there is a column such as a description it might be even worse.

Solution

Universal Theme provides CSS classes that we can use to display or hide elements depending on the screen width.

So take a look at the screenshot above, for instance the class hidden-sm-down means that the component will be hidden on the screen width of 767px and below, but will be displayed on any screen wider than 767px.

Let's hide Classic Report on the smaller screens and display Reflow Report instead.

First, we need to create a Classic Report and assign the class hidden-sm-down to the CR, which means that it will be hidden on the screen size below 767px.

Next, we need another report to be displayed on the screen size below 767px and hidden on the screen size above 767px. So create the Reflow Report and assign hidden-sm-up class, which is the opposite of hidden-sm-down.

Results

Here is the result where you can see how the report is changing depending on the screen size. Take a look at the classes at the top of the CR/Reflow Report.

Conclusion

Visibility Classes is the feature you will like if you are developing mobile applications with Oracle APEX. For more details about the Visbility Classes check the Universal Theme app.

Options

• reorderColumns

It can be annoying for users if they accidentally change the order of a column in the IG. By default, users can click on the left edge of a column and move it to a different spot in the IG. To prevent this, we have a "reorderColumns" option. The default is set to true meaning users can move columns around. But if you want to disable that option, you can set it to false.

Behaviour when reorderColumns is enabled.

After setting reorderColumns to false, the option is disabled, so the user is not able to reorder the columns.

The code for reorderColumn option.

function(options) {

    options.defaultGridViewOptions = {
       reorderColumns: false
}

 return options;
}

• skipReadonlyCells

When users edit the IG, they use the tab key to move between columns. If you have columns that can't be edited (read-only), the tab key still goes there. To avoid this and skip read-only cells, you can set the "skipReadonlyCells" option to true. The default setting is false.

The behaviour after setting skipReadonlyCells to true.

The code for skipReadonlyCells option.

function(options) {

    options.defaultGridViewOptions = {
       skipReadonlyCells: true
}

 return options;
}

• footer

If you don't want to show the footer of the IG, perhaps because there are only a few rows to display, you can use the footer option. Set it to false to hide the footer. The default setting is true.

The look after disabling the footer.

The code for the footer option.

function(options) {

    options.defaultGridViewOptions = {
       footer: false
}

 return options;
}

• hideEmptyFooter

In case you want to display the footer, but not when no data found message is shown. The option hideEmptyFooter is available to hide the footer.

The behaviour of the hideEmptyFooter option.

The code for the hideEmptyFooter option.

function(options) {

    options.defaultGridViewOptions = {
       hideEmptyFooter: true
}

 return options;
}

• noDataIcon

If you want to change the icon displayed when there's no data found in the IG, you can use the noDataIcon option and provide the icon name as the value.

Look at the new icon, when no data is found.

The code for the noDataIcon option.

function(options) {

    options.defaultGridViewOptions = {
       noDataIcon: "fa fa-404"
}

 return options;
}

• hideDeletedRows

Another interesting option is hideDeletedRows. When you delete a row in the IG, the row is typically still visible until you click the Save button. However, if there's a reason to hide it immediately, this option is supported.

The code for the hideDeletedRows option.

function(options) {

    options.defaultGridViewOptions = {
       hideDeletedRows: true

 return options;
}

• pagination

To have more control over your pagination, you can utilize the pagination option.

The configuration shown in the image below removes links and buttons, resulting in the footer displaying only the count and the number of selected rows.

The code for the pagination option.

function(options) {

    options.defaultGridViewOptions = {
       pagination: {
        showRange: true,
        showPageLinks: false,
        maxLinks: 0,
        firstAndLastButtons: false
      }
}

 return options;
}

To discover more details about the options mentioned above, refer to the official documentation - docs.

Code Example for all the options

function(options) {

    options.defaultGridViewOptions = {
       reorderColumns: false,
       skipReadonlyCells: true,
       footer: true,
       hideEmptyFooter: true,
       noDataIcon: "fa-database-search",
       hideDeletedRows: true,
       pagination: {
        showRange: true,
        showPageLinks: false,
        maxLinks: 0,
        firstAndLastButtons: false
      }
}

 return options;
}

The code above should be added to the JavaScript Initialization Function, which is located under the Advanced section in region attributes.

Conclusion

I hope you find these options useful. They will be integrated into the Component Designer tool. Until then, feel free to write code manually. ;)

Check out the Component Designer tool, there are already components and their options, that might be useful in your development.

In this blog post, I will cover the Popup LOV feature called Additional Outputs, which is I believe not well known. This simple functionality might be very useful in your development, whenever you have items in a form that should have the same value as Additional Columns of the Popup LOV.

List of Values

Let's quickly go through defining a list of values. List of Values (LOV) has a display and returns columns, standardly named as d for display value and r for return value. On the List of Values page under Shared Components you can define LOV, just provide the name, and follow the next steps. Example of a very simple LOV query, displaying column name and retrieving the value of id column.

select name as d, id as r
from demo_restaurants;

I am selecting two columns, d as a display value and r as the value that will be returned by the item.

The next step is to map columns.

Now, LOV is ready to be used across your app. You can simply use it just pick it up from the Shared Components LOV.

Additional Columns

To fully leverage the Additional Outputs functionality, you need to define Additional Columns. This is particularly useful when a single display column may not uniquely identify a record, such as when dealing with the same restaurant name in different locations.

You can define display columns, and choose which columns are visible and searchable, you can set the display order etc.

Additional Outputs

Imagine you are working on a restaurant app, where you need to prefill fields such as name, address and city… that you already have in the database, so additional outputs can help you with that.

Once you have additional columns set, you can move to your page with the Popup LOV item and define Additional Outputs.

So it is important to map your columns, which are defined in LOV with page items. Example: COL1:P1_ITEM1,COL2:P1_ITEM2. If the columns and items are mapped correctly, no additional setting is needed.

Now, is the time to test if items are set correctly after we choose a value in Popup.

Additional Outputs feature is available in the Interactive Grid Popup LOV column as well.

Set the Additional Outputs attribute using the column Static IDs. For instance, ADDRESS1:ADDRESS_IG,CITY:CITY_IG,STATE:STATE_IG,ZIP_CODE:ZIP_CODE_IG

In Conclusion

This simple Popup LOV functionality might be very useful whenever you need to set some items from your additional columns. Doesn't matter if it is a page item or an Interactive Grid column. Simple, easy and super useful 🙂

Grid Layout

Grid Layout is a system of 12 columns used to arrange APEX components on the screen. Understanding the system will help you understand the responsive classes and their behaviour.

Based on the screenshot above we can conclude, that we have a parent region with a span of 12 columns, with 12 regions with a span of 1 column, and 1 region with a span of 12 again, etc. so you can see that every region has assigned span, and the same region can assign the span to child components, which is additional 12 columns. On the smaller screens region are splited which makes them responsive.

Responsive Classes

Let's say you have three chart regions in one row, all of them have a span of 4 columns (image below).

When you are on the phone they are splitted one below another which is great. But the problem comes when you are on a bit bigger screen, such as a tablet, they might be not splitted and make the user experience very bad.

Below is the same charts but, in the responsive mode, so you can see the behaviour on the different screen size.

So, as you can notice charts are not splitted and not user-friendly. This is the case when we need help from responsive classes, to get full control on spitting the regions to a new row.

The table above explains the range and provide class prefix that you can use, so, for instance, to split regions on smaller screens you can use this combination of classes - col-xxs-12 col-xs-12 col-sm-12 col-md-6 col-lg-4 These classes will split regions to new rows on smaller screens. On the medium screen, the region will be half of the screen, and on a big one, it will be a third of the screen. 12, 6, and 4 are the numbers of columns(span in the Grid Layout) you want to have on that component when the screen is in a certain range.

Result after adding the column classes to charts. Charts are splitted one below another.

A place to add the classes is the region > Column CSS Classes as shown in the image below.

Conclusion

Incorporating responsive classes into your design improves the user experience, but also eliminates the need for custom coding, which potentially can produce problems on application/theme upgrades.