DHTML List (Image) with Sublist Won’t Work?

OK so you’ve uploaded your images to APEX, created your list and want to select your image for your main parent item. But nothing is displayed in the list of values for the image field and even when you type in the value the same blank image is used. Fear not, the solution is simple. This baffled me for a little while and why Oracle have coded it like this can only be to test our determination to get this to work. DHTML List (Image) with Sublist is a simple, yet brilliant way to turn your application into a truly professional solution.

Below I’ve given step by step details of how to set up a simple DHTML List (Image) with Sublist which will provide a button that navigates to a Create Users Page and also gives the options to Create User or Edit Users from the sublist as shown below.

End Result

First, create and upload the image you want on your button. You’ll need two images, one with the button and one for the drop down arrow. APEX will put the two images together to create the one button. However, this will work regardless of the images you use, so for now I’d advise either putting an image on top of the basic one that Oracle provides or uploading any small image that could be used for the button. This I’ve uploaded to the workspace, i.e. it’s not associated with an application, so my image name is prefixed #WORKSPACE_IMAGES#.

Next, create your list. This can be done from either the Shared Components page and then putting it on your page, or by creating a new List region on your page. Give the List a tile, in this case I’ve used Main Menu, and then select the template as DHTML List (Image) with Sublist. First create your Parent List Item, this will be for the page that the main button will link to. Give the list entry a Label, this will form the header on the sublist, and specify the page you want to navigate to. Then type in the name of the image to use, in this case case our image is called red_normal.png so the entry in the Image field is #WORKSPACE_IMAGES#red_normal.png. If you select theList of Values for this field then nothing is displayed even though you have uploaded your images. This is because this list only shows images that are being used, I’m sure there’s a reason for this I just can’t think what it might be!! Once you have saved this list entry you’ll find that your image appears in this list. You’re list entry item should look something like this:

Parent List Entry Item

Now create your sublist entries. These should be created in a similar way, but you should leave the image field empty and select the parent item you’ve just created as the Parent List Entry. Remember to select the page the list item should navigate to. I’ve done this so Create User goes to page 2 and Edit Users goes to page 4. When looking at the complete list, you should have the following:

Finished List Entries

Now you have a finished DHTML List (Image) with Sublist, however if you run you page you’ll notice that the image you’ve used isn’t displayed and the standard Oracle supplied one is still there. This is because Oracle have hard coded this image in the template and there is one more step you must complete.

Navigate to the Template for this list (Shared Components > Templates > Your Template > DHTML List (Image) with Sublist). You will see that there are four template definitions for current and non-current lists with and without sublists, in each of these you’ll see that the image source is hard coded with themes/generic_list.gif this you need to change to be #IMAGE# to use the image that you have entered in the image field for this list item. The template that we’re interested in for this example is List Template Noncurrent with Sublist Items, the original template is :
<p class="dhtmlMenuItem"><a href="#LINK#"><img src="#IMAGE_PREFIX#themes/generic_list.gif" /></a><img src="#IMAGE_PREFIX#themes/generic_nochild.gif" height="75" width="22" /><a href="#LINK#" class="dhtmlBottom">#TEXT#</a></p>
Which you will need to update to be :
<p class="dhtmlMenuItem"><a href="#LINK#"><img src="#IMAGE_PREFIX##IMAGE#" /></a><img src="#IMAGE_PREFIX#themes/generic_nochild.gif" height="75" width="22" /><a href="#LINK#" class="dhtmlBottom">#TEXT#</a></p>
Now when you run your page your image should appear on the button with a very sexy sublist allowing you quickly navigate to different pages. Obviously this is a very simple example, but it’s also a very simple way of making your application look very professional which can be built upon to create something fantastic. ;)

Sara

Sara Blair is a freelance Oracle developer with over 10 years Oracle experience. She has been working with Oracle APEX for nearly 4 years since htmldb 1.5, and is available to hire through Silvercore Solutions.

4 Responses to “DHTML List (Image) with Sublist Won’t Work?”

  • Venkat says:

    Thanks a lot!! I was wondering how I could include an image in the dhtml list. Great Post!!

  • Rodney Mahabir says:

    Hi, I am doing a project for my class and I found this article on how to change the images. Which I found to be very informative and helpful. I have four Parent list items, and I was wondering if you can help me find a way to give each of them individual images. I’ve tried the method stated above but all the buttons contain the same images. Please Help!!!

  • Sara says:

    Hi Rodney
    What you’re wanting to do should be possible. When you create your list the image is associated to each item. For your parent items you will be able to specify the image that relates to that item. Remember that you will need to upload each of those images and the images won’t appear in the list of values until you have used them. If you go into your parent list item you should be able to change the image associated with it by overtyping what is currently in this field.
    Hope this helps!

  • Lee says:

    Spot on–thanks!

Comments can no longer be submitted.