3
votes

Is it possible to design page (or region) in Oracle APEX with 4 buttons like those on APEX main page (after login)?

I tried but I have no idea how to do it.
I tried with custom HTML, using tables and HTML buttons, but HTML buttons are not shown.

Thanks in advance.

3
Can you show a screenshot? Have you looked at templates?jle

3 Answers

6
votes

It's definitely possible, because the APEX interface itself is built in APEX!

This is part of the page source for the page with the 4 buttons:

<div class="apex-list-horizontal">
 <div class="noncurrent">
  <div class="image">
    <a href="f?p=4000:1500:1830284778179490:::::" title="Application Builder"><img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" /></a>
  </div>
  <div class="label">
    <a href="f?p=4000:1500:1830284778179490:::::" title="Application Builder">Application Builder</a>
  </div>
 </div>
 <div class="noncurrent">
  <div class="image">
    <a href="f?p=4500:3002:1830284778179490::NO:::" title="SQL Workshop"><img src="/i/apex/builder/menu-sqlws-128.gif" width="128" height="128" title="SQL Workshop" alt="SQL Workshop" alt="" /></a>
  </div>
  <div class="label">
    <a href="f?p=4500:3002:1830284778179490::NO:::" title="SQL Workshop">SQL Workshop</a>
  </div>
 </div>
 <div class="noncurrent">
  <div class="image">
    <a href="f?p=4800:4000:1830284778179490:::::" title="Team Development"><img src="/i/apex/builder/menu-teamdev-128.gif" width="128" height="128" title="Team Development" alt="Team Development" alt="" /></a>
  </div>
  <div class="label">
    <a href="f?p=4800:4000:1830284778179490:::::" title="Team Development">Team Development</a>
  </div>
 </div>
 <div class="noncurrent">
  <div class="image">
    <a href="f?p=4350:1:1830284778179490:::::" title="Administration"><img src="/i/apex/builder/menu-admin-128.gif" width="128" height="128" title="Administration" alt="Administration" alt="" /></a>
  </div>
  <div class="label">
    <a href="f?p=4350:1:1830284778179490:::::" title="Administration">Administration</a>
  </div>
 </div>
</div>

Each button is like this fragment:

 <div class="noncurrent">
  <div class="image">
    <a href="f?p=4000:1500:1830284778179490:::::" title="Application Builder"><img src="/i/apex/builder/menu-appbuilder-128.gif" width="128" height="128" title="Application Builder" alt="Application Builder" alt="" /></a>
  </div>
  <div class="label">
    <a href="f?p=4000:1500:1830284778179490:::::" title="Application Builder">Application Builder</a>
  </div>
 </div>

So you could create a button template that resembles that:

 <div class="noncurrent">
  <div class="image">
    <a href="#LINK#" title="Application Builder"><img src="/myImages/#BUTTON_ATTRIBUTES#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" /></a>
  </div>
  <div class="label">
    <a href="#LINK#" title="#LABEL#">#LABEL#</a>
  </div>
 </div>

In each button you would define the Label, the Link URL and I have assumed you might use "button attributes" to hold the image name.

Another way to achieve this would be to hold your button defintions (label, URL, image location) in a table and create a report like this:

select label, url, image_loc
from mybuttons
where ...;

Now you can build a report template ("row template" style) where each row has the template:

 <div class="noncurrent">
  <div class="image">
    <a href="#URL#" title="Application Builder"><img src="#IMAGE_LOC#" width="128" height="128" title="#LABEL#" alt="#LABEL#" alt="" /></a>
  </div>
  <div class="label">
    <a href="#URL#" title="#LABEL#">#LABEL#</a>
  </div>
 </div>
1
votes

This menu is built with the Shared Components->Navigation->Lists feature.

Check out this documentation: http://docs.oracle.com/cd/E17556_01/doc/user.40/e15517/nav.htm#CHDEEFAB

or this documentation for APEX 3.2: http://docs.oracle.com/cd/E14373_01/appdev.32/e13363/issue_track_ui.htm#BGBIICHF

1
votes

You can create a List (Shared Components), and use the 'Horizontal Images with Label' template. Upload your images to #WORKSPACE_IMAGES#, and for each list entry, select the appropriate image in the 'Image' field.

If you create a Page 0 and add this list region there, it will appear on every page of your application.