Inside APEX it’s possible to specify ‘Page Items to Submit’:

  • Within the action of the type ‘Execute PL/SQL-code’ of a dynamic action.
  • Within a region of the type ‘Interactive report’ or ‘Classic Report’.

The listed page items will be submitted to the server and thus available to use within your ‘PL/SQL-code’ or ‘Source’.
When you’re using a page item the ‘Session State Protection’ of this item must be ‘Unrestricted’.  If you use another setting,  par example ‘Checksum Required – Application Level’, the following Javascript-error will occur:

Firefox:
Error: JSON.parse: unexpected character
Source: http://localhost:8585/i/javascript/apex_4_1.min.js
Line: 16

Chrome:
Uncaught SyntaxError: Unexpected token <      apex_4_1.min.js:16

Sometimes you want to call a page-proces, but do need to make a compleet refresh of the page by making a request.

In my case I made a simple master-detail screen with Tabs (Thank you Richard). In the tabs there are reports with a delete button for each row. For the delete operation I did not want refresh the complete page, but only wanted to call the page-proces I had written for the delete-operation and only wanted to refresh the report-region affected.

This is wat i did:

  • I made a normal report and added an icon for the delete operation. The icon for the delete operation is the id-column in the report (PRODUCT_VERWIJZING_ID) and has the follwoing column link properties:
    • link text: <img src=”#IMAGE_PREFIX#del.gif” alt=””>
    • target: URL
    • URL: javascript:del_verwijzing(#PRODUCT_VERWIJZING_ID#)

Continue reading

After some testing en struggling with the Apex-tree item I decided to look for an alternative for an expanding and collapsable html-list.

Because of the integration with Jquery in apex, i obviously looked for an apex plug-in and found a really ease one.

The plug-in is written by Milaju and the source and documentation can be found at:
http://www.milaju.com/post/simple-jquery-expandcollapse-unordered-lists

You can find a demo at:
http://fluidbyte.net/workshop/jqcollapse/

How to integrate:

  1. Download the source-file from http://www.milaju.com/post/simple-jquery-expandcollapse-unordered-lists
  2. Extract the zip-file
  3. Go to Shared Components – Static files
  4. Upload the files “jquery.collapse.js” and “jquery.easing.js”. You do not need to upload the file “jquery.js”, because it’s already available within Apex
  5. Go to the page where you want to make the list
  6. Create a new HTML-region named “_Javascript”; display point: After Header (I always use a separate region were I put custom javascript. So when I open a page I can see if there is any custom javascript).
  7. Put in the region source:
    <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.easing.js"></script>
    <script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.collapse.js"></script>
    <script type="text/javascript">
      $(function(){
          $('#collapser').jqcollapse({
    	      slide: true,
    		  speed: 500,
    		  easing: 'easeOutCubic'
          });
    	});
    </script>
  8. Make a new report region which makes the list-output as shown under. (the most important thing is to give the first ul-element the id “collapser” and keep the structure of the elements UL en LI the same)
    <ul id="collapser">
      <li>Item 1
        <ul>
    	  <li>Item 1.1</li>
    	  <li>Item 1.2
    	    <ul>
    		  <li>Item 1.2.1</li>
    		  <li>Item 1.2.2</li>
    		</ul>
    	  </li>
    	  <li>Item 1.3</li>
    	</ul>
      </li>
      <li>Item 2
        <ul>
    	  <li>Item 2.1
    	    <ul>
    		  <li>Item 2.1.1</li>
    		  <li>Item 2.2.2</li>
    		</ul>
    	  </li>
    	</ul>
      </li>
      <li>Item 3</li>
    </ul>
  9. And voilà! The list is done! Easy, not?!
<ul id=”collapser”>
<li>Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2</li>
</ul>
</li>
<li>Item 1.3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Item 2.1
<ul>
<li>Item 2.1.1</li>
<li>Item 2.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
</ul>

The solution uses APEX 4 built-in jQuery libraries.

The idea is to create a “containing region”, that is a region that will contain the sub-regions.

Those sub-regions then will appear as a tab on your page.

Create a template for the containing region

Go to “Shared Components” – “Templates”, filter on Region Type templates:

Press the create button

choose Region

choose “From Scratch”

Give the template a meaningful name. In my example I use “jQuery Tabs”
Choose “Custom 1” for the template class
Press the “Create button”
Editing the template
You now have the “jQuery Tabs” template in your list.
Open it by clicking on the name:


We must place some code in the “Definition” section:

<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
<div style="clear:both;"></div>
</div>
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>

Go to the “Sub Regions” section, this consists of three items:

  1. Header Template
    <ul style="height: auto;">#ENTRIES#</ul>
  2. Header Entry Template
    <li><a href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>
  3. Template
    <div id="#REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION#</div>

The template is now ready. Save the template.

Next step is creating a Containing Region on the page
Go to the page:

Create a HTML-region:

The Title doesn’t really differ that much, it’s only for you reference.
Choose the correct Region Template (“jQuery Tabs”)
Leave the rest as defaulted.


leave the presented HTML region source empty. Remember we’re going to use this region only as a container for sub regions
Open the region we just created:
Go to the “Header and Footer” section and place this code in the footer:

<script type="text/javascript">
 apex.jQuery(function() {
 apex.jQuery("##REGION_STATIC_ID#").tabs();
 });
</script>

Now open each region that should be transferred into a tab and change the parent region (within the section “User Interface”) to the newly created container-region (“jQueryTabs”)


Repeat this step for each tab you need.
Ready.. Good luck!