When a file gets uploaded, the icon of the file type is displayed without opening the file. This has been inspired by Microsoft - Outlook. Here I am giving an elegant way for displaying the file type icon in Oracle APEX reports.
Step 1: Create a table by using below script,
CREATE TABLE ebs_project_files
(
id NUMBER,
project_id NUMBER,
filename VARCHAR2(4000),
file_mimetype VARCHAR2(512),
file_charset VARCHAR2(512),
file_blob BLOB,
file_comments VARCHAR2(4000),
created_on TIMESTAMP (6) WITH local TIME zone,
created_by VARCHAR2(255),
updated_on TIMESTAMP (6) WITH local TIME zone,
updated_by VARCHAR2(255),
PRIMARY KEY (id) USING INDEX ENABLE
);
Step 2: Populate some records on ebs_project_files.
Step 3: Create a new blank page.
Step 4: Create a new Classical Report region to the page. (Refer below script)
SELECT data.id,
'<span class="t-Icon file-icon fa '
|| Decode(Substr(Upper(data.filename), -4), '.PPT',
'fa-file-powerpoint-o',
'.XLS', 'fa-file-excel-o',
'.DOC', 'fa-file-word-o',
'.PDF', 'fa-file-pdf-o',
'.GIF', 'fa-file-image-o',
'.PNG', 'fa-file-image-o',
'.JPG', 'fa-file-image-o',
Decode(Substr(Upper(data.filename), -5), '.PPTX',
'fa-file-powerpoint-o',
'.XLSX', 'fa-file-excel-o',
'.DOCX', 'fa-file-word-o',
'.TIFF', 'fa-file-image-o',
'fa-file-o'))
|| '"></span>' AS icon,
data.filename,
data.last_action_on,
data.last_action_by
FROM (SELECT epf.id,
epf.filename,
epf.file_comments,
epf.file_blob,
epf.file_charset,
epf.file_mimetype,
lower(Nvl(epf.updated_by, epf.created_by)) last_action_by,
Nvl(epf.updated_on, epf.created_on) last_action_on
FROM ebs_project_files epf
ORDER BY created_on DESC) data
WHERE rownum <= 10; -- Print only 10 records for test purpose
Step 5: Go to report attribute ICON and set Escape special characters = Yes
Step 6: Change the style of the icon by adding below CSS to the page in inline CSS section.
Go to Page => CSS => Inline
.file-icon.fa-file-powerpoint-o,
.file-icon.fa-file-excel-o,
.file-icon.fa-file-word-o,
.file-icon.fa-file-pdf-o,
.file-icon.fa-file-image-o,
.file-icon.fa-file-o {
padding: 4px 8px;
text-align: center;
color: #FFF;
border-radius: 2px;
}
.file-icon.fa-file-powerpoint-o {
color: #D24726;
}
.file-icon.fa-file-excel-o {
color: #217345;
}
.file-icon.fa-file-word-o {
color: #2A579A;
}
.file-icon.fa-file-pdf-o {
color: #F40700;
}
Happy APEXing!!!...
References:
Comments
Post a Comment