In this section, we'll learn how to display images in our Oracle APEX application without relying on a page
item. This method is perfect for situations where we need to show an image
directly from a database table column, a file, or a URL without first loading
it into a specific page item. We'll cover how to achieve this using a dynamic
action and a PL/SQL procedure, making our application more efficient and
flexible. By the end of this tutorial, we'll be able to display images
dynamically, improving the user experience and reducing page load times. This
technique is useful for reports, dashboards, and custom user interfaces where a
static page item isn't the best solution. You can vind a visual solution from here.
STEP 1: Create a blank page.
STEP 2: Create a region and set it properties like-
Name: Emp
Type: Interactive Grid
Source:
Location; Local Database
Type: SQL Query
SQL Query: SELECT employee_id, first_name FROM employees
Column: 3
Column Span: 2
Template Options:
Header: Hidden
STEP 3: Create a new region and set it properties like-
Name: Region Container
Start New Row: No (Toggle Off)
Column Span: 5
Template Options:
Header: Hidden
STEP 4: Create another region for contaning some neccessary items-
Set the below properties for this region-
Name: Item Container
Type: Static Content
Template: Blank with Attributes
Template Options:
Item Spacing: Slim
STEP 5: Create page Items to display employee information in details-
P32_EMP_ID => Set it's type hidden and value protected to no (toggle off).
P32_NAME
P32_DESIGNATION
P32_DEPT
P32_HIRE_DATE
P32_MOBILE
P32_EMAIL
P32_SALARY
STEP 6: Create another region for displaying image-
Set the below properties for this region-
Name: Image Container
Type: Static Content
Start New Row: No (Toggle Off)
Template: Blank with Attributes
Template Options:
Item Spacing: Slim
STEP 7: Create a page item under 'Image Container' region.
Set below properties for this item
Name: Display Image
Type: Dispaly Image
Based On: Image URL Stored in Page Item Value
Template: Optional
Custom Attributes: style="border:1px solid gray;width:100px;height:100px"
Default:
Type: Static
Static Value: ''
STEP 8: Create a dynamic action to capture the Employee Id-
Select "Emp" region and reight click here and choose Create Dynamic Action. Set the below properties of this dynamic action-
Name: Set Emp Id
Leave other properties as it is. Select True action and set it properties as like below-
Action: Execute JavaScript Code
Code:
model = this.data.model ;
var i, empId;
for (i=0; i < this.data.selectedRecords.length; i++) {
empId = model.getValue(this.data.selectedRecords[i],'EMPLOYEE_ID');
$s('P32_EMP_ID', empId);
}
STEP 9: Create Ajax Callback Process for preparing image to display
Go to processing tab and select Ajax Callback. Right click here and Create Process. Set it properties as like-
Name: SET_EMP_DETAIL
Type: Execute Code
PL/SQL Code:
BEGIN
apex_json.open_array;
apex_json.open_object;
FOR i IN (
SELECT first_name||' '||last_name AS ename
, job_id
, department_name
, phone_number
, TO_CHAR(hire_date,'DD/MM/RRRR') AS hire_date
, salary
, 'data:image/jpg;base64,'||apex_web_service.blob2clobbase64(emp_photo) AS src
FROM employees e
, departments d
WHERE 1 = 1
AND e.department_id = d.department_id
AND employee_id = apex_application.g_x01
) LOOP
apex_json.write('ENAME', i.ename);
apex_json.write('JOB', i.job_id);
apex_json.write('DEPT', i.department_name);
apex_json.write('EMAIL', i.email);
apex_json.write('PHONE', i.phone_number);
apex_json.write('HIRE_DATE', i.hire_date);
apex_json.write('SALARY', i.salary);
apex_json.write('SRC', i.src);
END LOOP;
apex_json.close_object;
apex_json.close_all;
END ;
Select 'P32_EMP_ID' items and create adynamic action here. Set it's properties as like below-
Name: Set Emp Details
Select true action and set it's properties as -
Action: Execute JavaScript Code
Code:
apex.message.clearErrors();
apex.server.process(
'SET_EMP_DETAIL'
, {
x01: $v('P32_EMP_ID')
}
, {
dataType: 'json',
success: function(pData) {
$s('P32_FULL_NAME', pData[0].ENAME);
$s('P32_DEPT', pData[0].DEPT);
$s('P32_DESIGNATION', pData[0].JOB);
$s('P32_EMAIL', pData[0].EMAIL);
$s('P32_MOBILE', pData[0].PHONE);
$s('P32_HIRE_DATE', pData[0].HIRE_DATE);
$s('P32_SALARY', pData[0].SALARY);
var img = document.getElementById('P32_DISPLAY_IMAGE');
img.setAttribute('src', pData[0].SRC);
}
}
)
Let save and run the page. That's it. Happy coding!!
Comments
Post a Comment