When you use a custom template for your APEX application and you want to use an image on a button, you might encounter a small, trivial bug. Thanks to
Anthony Rayner and twitter for a simple workaround.
The Setting
For the custom theme that is used in the application that I'm working on, an Application Level Substitution string was created.
You can define these substitution strings at the application level, available from the application home page.
In the section "Substitutions" you can create your own substitution string and substitution value pairs. In the screenshot below I created a substitution string called "MY_LOCATION" with the value "some_custom_path".
Why would you want to do this? Instead of having your custom location hardcoded throughout the application, you can use this substitution string instead. When the location changes, for whatever reason, you only have to make the change in one place namely the value that is associated with the substitution string.
On a site note; you might notice that the screen shots are taken from APEX 4.2, the first early adapter site in which the described bug is still present. Maybe with the final version of APEX 4.2 that this bug is resolved,.. just wait and see.
For this example I will use the sample application. On page one, create a button - I created a "Page Item Button" and named it "P1_TEST".
In the Attributes section, choose for the Style the value "Image".
In the screenshot above, I picked the image called "e.gif", one of the images that reside in the "/i/" folder.
When you run the application, you can see the button with the image.
The image itself is irrelevant for this example, you might recognize the image. This image is shown when you run the page with the edit-links visible - but this is besides the point. The point is that it works as expected.
Look at the generated HTML (I use Google Chrome to inspect items on the page, F12) and you can see that the src attribute for the image is "/i/e.gif".
The Problem
When you want to use a custom image, located in your custom folder, you might want to use the substitution sting in the src attribute when defining the image.
Simply specify the substitution string using the ampersand-dot notation (&MY_LOCATION.) followed by the name of the image that you want to use. Normally this should be sufficient for it to work.
Unfortunately the image will be shown as broken on the page. It turns out that the substitution string doesn't get substituted at all. You can see this when you inspect the HTML code.
The following screenshot shows what the src attribute will look like when you use the substitution string in your image definition for the button.
In the screenshot above you can see that the src attribute is "/i/&MY_LOCATION./e.gif", nearly the same as it was entered.
The Solution
The solution, or I should say the workaround, is as follows: Instead of entering just the substitution string followed by the name of the image, enter the built-in substitution string #IMAGE_PREFIX# before you enter your substitution string:
The image will then show up as you expect it to.
What can you learn from the screenshot above? Not that the image is still broken, but you can see that the src attribute for the image does have the substitution string value in it, just like you would expect it to have.
The Bug
This bug was confirmed by Anthony Rayner with bug number 14197492, and he showed the workaround proposed in this article in a short twitter message.
No comments:
Post a Comment