Usage

Usage

This section describes an example implementation of Interactive Grid Download File Pro in an example Oracle APEX application.

The usage guide shows the basic implementation of the plug-in and doesn’t describe the plug-in attributes.

Introduction

This usage guide is using the Interactive Grid Download File Pro sample application table, UC/_IG/_DOWNLOAD. Table columns are described in the table below:

Column Name	Data Type	Description
ID	NUMBER	Primary key
FILE/_CONTENT	BLOB	Content of a file
MIME/_TYPE	VARCHAR2(100)	The mime type of a file
FILE/_NAME	VARCHAR2(50)	The filename of a file

In the example application, page 710 is defined. On the page, an interactive grid region called Example is created and contains three columns:

• ID
• MIME/_TYPE
• FILE/_NAME

All columns are Display Only and the interactive grid doesn’t support editing. This usage guide will lead you through the process of creating the 4th column which will be using the plug-in to download a file stored in the FILE/_CONTENT column.

The initial state of page 710 in page designer is presented below:

The page will look like the following:

Implementing the plug-in

To implement the plug-in you will need to create a new interactive grid column and a dynamic action implementing the plug-in.

Create an interactive grid column

1. In page designer, right-click on Columns in the interactive grid

2. Click Create Column

3. For the newly created column:

   1. Set Identification // Column Name to DOWNLOAD

   2. Set Identification // Type to Link

   3. Set Heading // Heading to Download

   4. In the Link section, click on the button No Link Defined

   5. In the popup Link Builder - Target

      1. Set Target // Type to URL

      2. Set Target // URL to javascript: void(0);

      3. Apply the changes by clicking OK button

   6. Set Link // Link Text to Download

   7. Set Link // Link Attributes to class=”download”

   8. Set Source // Type to None

4. Save the page

The newly created column definition in page designer is presented below:

Dynamic Action

1. Create new dynamic action called Download file from IG

2. Set When // Event to Click

3. Set When // Selection Type to jQuery Selector

4. Set When // jQuery Selector to .download

5. Set Advanced // Event Scope to dynamic

6. Set Advanced // Static Container (jQuery Selector) to body

The dynamic action definition in the page designer is presented below:

Dynamic Action - True Action

1. Change the true action Show to United Codes IG Download File /[plug-in/]

2. Set the plug-in attributes

   1. Set Settings // IG Column Containing BLOB ID to ID

   2. Set Settings // Table Name to UC/_IG/_DOWNLOAD

   3. Set Settings // Primary Key Column to ID

   4. Set Settings // BLOB Column to FILE/_CONTENT

   5. Set Settings // Mime Type Column to MIME/_TYPE

   6. Set Settings // File Name Column to FILE/_NAME

   7. (Optional) Set Settings // Settings according to your requirements

3. Set Affected Elements // Selection Type to Region

4. Set Affected Elements // Region to Example

5. Set Fire on Initialization to No

6. Save the page

The true action is presented below:

Test the Implementation

1. Open page 710 in a browser

2. Click on the Download anchor

Page 710 after adding a new column is presented below. Clicking on the “Download” link will initialize the download process.