Creating a Dynamic Image
Posted: Tue Jun 24, 2008 1:55 pm
Q:
I want to add a dynamic image on one of my application's screens. How can I do that?
A:
It’s pretty easy in Genie to create a dynamic image. You simply modify the “image source” property to include a script expression. Any property that starts with “script:” or “js:” is treated as an expression. You can use the get() function in the expression to grab any information you want from the screen by id.
Now, what if you want to show a different as you hover over subfile elements. This is a bit more involved, but not too hard at all.
First, create a new image and note the Id of the image (by default, this will be "Image" and that's what I’ll use in the code below, but you can change this id).
Then select all output fields in the subfile at one time (don't include the header -- just the body of the subfile). Then paste the following code into the "onmouseover" property all in one line:
getObj('Image').src = "/images/items/" + get("D_" +
getRow(this) + "_12") + ".jpg";
That’s all there is to it.
This code assumes that the “key” field, the one that determines which image file to use is in column 12. Of course, this will vary from screen to screen.
To explain how this code works: We get the hover element's row and append "_12" to get the "key" element's id and then its content to change the source of the image on the image field.
I want to add a dynamic image on one of my application's screens. How can I do that?
A:
It’s pretty easy in Genie to create a dynamic image. You simply modify the “image source” property to include a script expression. Any property that starts with “script:” or “js:” is treated as an expression. You can use the get() function in the expression to grab any information you want from the screen by id.
Now, what if you want to show a different as you hover over subfile elements. This is a bit more involved, but not too hard at all.
First, create a new image and note the Id of the image (by default, this will be "Image" and that's what I’ll use in the code below, but you can change this id).
Then select all output fields in the subfile at one time (don't include the header -- just the body of the subfile). Then paste the following code into the "onmouseover" property all in one line:
getObj('Image').src = "/images/items/" + get("D_" +
getRow(this) + "_12") + ".jpg";
That’s all there is to it.
This code assumes that the “key” field, the one that determines which image file to use is in column 12. Of course, this will vary from screen to screen.
To explain how this code works: We get the hover element's row and append "_12" to get the "key" element's id and then its content to change the source of the image on the image field.