How do I add an image for sharing across application

 In Oracle APEX, sharing images across your entire application can enhance visual consistency and streamline development by centralizing commonly used visual assets like logos, icons, or branding elements. Instead of uploading the same image multiple times on different pages, Oracle APEX provides a structured way to store and reference shared images using Static Application Files or Workspace Files. This approach makes it easy to update or replace images in one location while having them automatically reflected across all relevant parts of your application.

To add an image for sharing across your Oracle APEX application, you should use Static Application Files. These files are stored at the application level and can be used throughout any page or component without needing to upload the same image multiple times. This method ensures consistency and simplifies maintenance when the image needs to be updated later.

Here are the detailed steps:

1. Open Your Application in APEX:
   Navigate to the Application Builder and select the application where you want to add the shared image.

2. Go to Shared Components:
   In the application home page, click on Shared Components. This section includes various resources shared across the application.

3. Access Static Application Files:
   Under the User Interface section, click on Static Application Files.

4. Upload Your Image:
   Click the Upload File button.

   • Click Choose File and select the image file (JPG, PNG, SVG, etc.) from your computer.

   • Optionally, enter a custom file name.

   • Click Upload to store the image in the application repository.

5. Reference the Image in Pages or Regions:
   Once uploaded, the image can be referenced using a substitution string. Use this syntax:

   #APP_IMAGES#your_image_name.jpg
   

   For example, in a region's HTML Expression or in a Static Content region, you might use:

   <img src="#APP_IMAGES#logo.png" alt="Company Logo">
   

6. Use in Templates or Dynamic Components:
   The same image path can be used in card templates, report templates, plug-ins, or even JavaScript logic. Just remember to use the #APP_IMAGES# substitution to point to the static image.

7. Update Image Later if Needed:
   If you ever need to replace the image, return to Static Application Files, delete the old version (or upload a new one with the same name), and it will automatically update wherever it’s referenced.

This method centralizes image management and ensures a single source of truth for shared visual elements across the application, enhancing maintainability and visual consistency.

How to Add an Image for Sharing Across Applications in Oracle APEX

Adding an image for use across multiple applications in Oracle APEX ensures consistency and easy management of visual elements like logos, icons, and banners. Oracle APEX provides different ways to store and access images globally, making them available for all applications in a workspace.

 

1. Using Workspace Static Files for Global Image Access

Workspace static files allow images to be stored once and used across all applications within the same workspace.

Steps to Upload an Image to Workspace Static Files

1. Navigate to App Builder and click on Workspace Utilities.

2. Select Static Files under Workspace Utilities.

3. Click Upload File, then choose the image file from your computer.

4. After uploading, APEX will generate a file URL in the format:

#WORKSPACE_FILES#image_name.png

5. Copy this file reference to use in any application within the workspace.

Using the Image in an APEX Page

• For an HTML region

<img src="#WORKSPACE_FILES#image_name.png" alt="Shared Image">

• For a CSS Background Image

body {

    background-image: url('#WORKSPACE_FILES#image_name.png');

    background-size: cover;

}

• For a Page Item (Display Image Type)

1. Add a Display Image item to the page.

2. Set the Image URL to:

#WORKSPACE_FILES#image_name.png

This ensures the image is available in any application within the workspace without needing to upload it multiple times.

---

2. Using a Shared Database Table for Image Storage

For more control over images, store them in a shared database table that can be accessed across applications.

Creating a Table for Image Storage

Run the following SQL to create a table for storing images:

CREATE TABLE SHARED_IMAGES (

    IMAGE_ID NUMBER GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,

    IMAGE_NAME VARCHAR2(100),

    IMAGE_BLOB BLOB,

    MIME_TYPE VARCHAR2(50)

);

Uploading an Image Using an APEX Form

1. Create a new APEX File Browse item for image uploads.

2. In the process handling the upload, insert the image into the table:

INSERT INTO SHARED_IMAGES (IMAGE_NAME, IMAGE_BLOB, MIME_TYPE)

VALUES (:P1_IMAGE_NAME, :P1_IMAGE_FILE, :P1_MIME_TYPE);

Displaying the Image in Any Application

1. Create an Application Process or RESTful Web Service to serve the image.

2. In any APEX page, reference the image dynamically using:

<img src="f?p=APP_ID:0:SESSION::NO::P0_IMAGE_ID:1" alt="Shared Image">

This allows applications to fetch and display shared images stored in the database.

---

3. Using a CDN or External Storage for Images

If images need to be accessed across multiple workspaces or environments, use an external CDN (Content Delivery Network) or cloud storage service like:

• Oracle Cloud Object Storage

• Amazon S3

• Google Drive (public links)

Referencing External Images in APEX

• For an Image Tag in a Page Region

<img src="https://cdn.example.com/images/logo.png" alt="Company Logo">

• For a CSS Background Image

body {

    background-image: url('https://cdn.example.com/images/background.jpg');

    background-size: cover;

}

Using external storage ensures that images are accessible from multiple workspaces or even different APEX environments.

 

Oracle APEX provides several ways to store and access shared images across applications:

• Workspace Static Files for quick and easy access within a workspace.

• Database Storage for controlled access with dynamic retrieval.

• External Storage or CDN for global access beyond APEX.

The best approach depends on your application's needs and how frequently the images are updated. Workspace files are best for simple use cases, while database storage and CDN solutions provide more flexibility for enterprise applications.

EXAMPLE:

Step 1 Create a file in  Shared Components > Static Application Files

Step 2 – Add the name and drag and drop the image

Step 3 – Image is ready

In Shared Components Static > Application Files > 

Adding a shared image to your APEX application is a simple yet powerful way to maintain branding and reduce redundancy. By uploading the image to Static Application Files and referencing it via its path, you can ensure a consistent user interface with minimal effort. This method supports scalable and maintainable application design, especially as your app grows or changes over time.

How do I display a page background image

 

Adding a background image to an APEX page can enhance the user interface and make the application visually appealing. This can be done using CSS, Static Application Files, or inline styles.

Below are multiple approaches to accomplish this in Oracle APEX.

 

1. Using CSS to Set a Background Image

The most efficient way to apply a background image is by using CSS.

Steps to Add a Background Image via CSS

1. Open Oracle APEX Page Designer.

2. Select the Page Attributes section.

3. Scroll down to the CSS section and find Inline CSS.

4. Add the following CSS code:

body {

    background-image: url('&APP_IMAGES.background.jpg');

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

}

5. Click Save and Run the page to see the background image.

Explanation of CSS Properties:

• background-image: Specifies the image to be used.

• background-size: cover: Ensures the image covers the full page.

• background-repeat: no-repeat: Prevents the image from repeating.

• background-attachment: fixed: Keeps the background image static when scrolling.

• background-position: center: Centers the image on the page.

 

2. Using a Static Application File for Background Image

If the image is stored in APEX under Static Application Files, reference it dynamically.

Steps to Upload and Use a Static File

1. Navigate to Shared Components > Static Application Files.

2. Click Upload File, select the image, and upload it.

3. Copy the file reference URL from the uploaded file.

4. Apply the CSS in Page Designer under Inline CSS:

body {

    background-image: url('#APP_FILES#background.jpg');

    background-size: cover;

    background-repeat: no-repeat;

}

APEX will dynamically replace #APP_FILES# with the correct image path.

 

3. Setting Background Image via Page Templates

If the same background image should be applied to all pages, update the Page Template.

Steps to Modify Page Template for Background Image

1. Open Shared Components.

2. Click on Themes and choose the theme in use (e.g., Universal Theme).

3. Select Page Templates.

4. Edit the Standard Page Template.

5. Find the <body> tag inside the Template Definition.

6. Add the following inline CSS before </body>:

<style>

    body {

        background-image: url('&APP_IMAGES.background.jpg');

        background-size: cover;

        background-repeat: no-repeat;

        background-attachment: fixed;

    }

</style>

7. Save changes and apply them to all pages using the template.

---

4. Using JavaScript to Dynamically Change Background Image

If the background image should change dynamically based on user actions, use JavaScript.

Steps to Change Background Image Using JavaScript

1. In Page Designer, navigate to Page Attributes.

2. Under Execute when Page Loads, add the following JavaScript:

document.body.style.backgroundImage = "url('&APP_IMAGES.dynamic_background.jpg')";

document.body.style.backgroundSize = "cover";

document.body.style.backgroundRepeat = "no-repeat";

3. This script changes the background when the page loads.

 

5. Changing Background Based on Page Conditions

To change the background based on specific page numbers or conditions:

1. Go to Page Designer > Execute when Page Loads.

2. Add the following JavaScript:

if ($v('P1_USER_ROLE') === 'Admin') {

    document.body.style.backgroundImage = "url('&APP_IMAGES.admin_background.jpg')";

} else {

    document.body.style.backgroundImage = "url('&APP_IMAGES.user_background.jpg')";

}

This changes the background dynamically based on user roles.

  

Displaying a background image in Oracle APEX can be done using CSS, Static Application Files, or JavaScript. The best approach depends on the application requirements. Using CSS is ideal for static backgrounds, while JavaScript is useful for dynamic changes based on conditions or user interactions.

EXAMPLE:

Step 1 – Click on the image from Shared Components > Static Application Files

Step 2  - Copy the reference value

Your reference should look like this: 

#APP_FILES#JayGeeMarketplace/JayGeeMarketplaceReactive.JayGeeComplex.jpg

Step 3 – Go to the “Page” level of the page and change the inline CSS

Code: 

#t_PageBody {

background-image: url(#APP_FILES#JayGeeMarketplace/JayGeeMarketplaceReactive.JayGeeComplex.jpg);

background-size: 100% Auto;

}

Should look like this:

How do I apply CSS to a button on a page

 Introduction:

In Oracle APEX, customizing the appearance of your application helps improve both user experience and branding. One of the simplest yet most effective enhancements is applying CSS styles to buttons on your page. Whether you're aiming to adjust the color, size, font, or even add icons, CSS gives you the flexibility to control how buttons look and behave. This blog post will guide you step-by-step on how to apply CSS to a button in Oracle APEX using inline styles, CSS classes, or external style sheets.

Applying CSS to a button in Oracle APEX allows you to customize its appearance beyond the default themes, helping your application stand out or match a specific design guideline. Here is a detailed explanation of how to apply CSS styles to a button on a page in Oracle APEX.

1. Identify the Button
   First, determine which button you want to style. Each button in Oracle APEX has a unique Static ID or a button name. You can assign or find the Static ID in the button’s attributes under the “Advanced” section in the Page Designer.

2. Using Inline CSS
   You can apply simple styles directly to the button using inline CSS in the button’s attributes. For example, in the button’s “CSS Inline” property, you can add styles like:
   background-color: #007acc; color: white; border-radius: 5px;

This method is quick but not recommended for complex or reusable styles.

3. Using CSS Classes
   A better practice is to assign a CSS class to the button. In the button’s “CSS Classes” attribute, enter a class name such as custom-button. Then, define this class in the page-level CSS or your application’s shared CSS file. For example:

.custom-button {  
  background-color: #007acc;  
  color: white;  
  border-radius: 5px;  
  padding: 10px 20px;  
  font-weight: bold;  
  border: none;  
  cursor: pointer;  
}  

.custom-button:hover {  
  background-color: #005f99;  
}

This approach is reusable and separates styling from markup.

4. Adding CSS to Your Application
   To add custom CSS, navigate to the Application Shared Components > User Interface Attributes > Cascading Style Sheets section. You can add your CSS rules here, and they will apply globally or per theme. Alternatively, you can add CSS to a specific page by using the “Inline CSS” property under the Page Attributes.

5. Using Template Options
   Some button templates in APEX allow CSS customization through template options or predefined classes. Check the button’s template for options that can be combined with your CSS for better integration.

6. Using JavaScript for Dynamic Styles (Optional)
   If you want to change button styles dynamically, you can use JavaScript to add or remove CSS classes based on user interaction or conditions. For example, using a Dynamic Action or JavaScript code snippet:

$("#BUTTON_STATIC_ID").addClass("custom-button");

7. Testing and Adjusting
   After applying your CSS, preview the page and check the button appearance. Adjust your CSS rules as needed for responsiveness, accessibility, and consistency with your design.

In summary, applying CSS to buttons in Oracle APEX involves assigning unique identifiers or classes to buttons and defining CSS rules either inline, on the page, or application level. This method ensures flexibility, maintainability, and enhances the overall look and feel of your APEX applications.

Step 1 – Use the browser Developer tools and find the ID, or the class, of the button

Step 2 – At the PAGE level, add your CSS using the button’s class or ID

 

Your CSS might look something like this:

/*#B40221631299266322*/

.t-Button--primary.a-Button--noUI, .t-Button--primary.t-Button--noUI {

/*background-color: white;*/

background: rgba(255, 254, 254, 0.1);

  color: white;

  border: 0px solid #04AA6D; /* Green */

  transition-duration: 0.4s;

  width: 350px;

  height:200px;

  border-radius: 8px;

 padding: 32px 16px;

  font-size: 24px;

  /*opacity: 0.3;

 

*/

}

/*button :hover*/

.t-Button--primary.a-Button--noUI, .t-Button--primary.t-Button--noUI:hover {

 background-color: #04AA6D; /* Green */

  color: white;

}

Conclusion:

Styling buttons with CSS in Oracle APEX is a straightforward process that brings a significant visual improvement to your applications. By assigning custom classes or using inline styles, you can match your buttons to your desired theme or design. With the right CSS adjustments, buttons can become more intuitive and visually aligned with the overall user interface, leading to a more polished and user-friendly application.