Document Actions Series: SelectImage
Well, document actions have been live for over a week now. Have you examined the new capabilities? The benefits are worth the learning curve. You’ll find yourself so much more productive, creative, and responsive to your customers. I’m starting this series on document actions to help with the learning curve and hopefully open the creative process in your own world.
Today’s demo of SelectImage will combine capabilities of some spec form scripting along with the document action. I’m trying to cover a scenario I think is widely used throughout Four51.
The idea is to present a dropdown of choices to the user. Once a choice is made an in-form preview of the image will be displayed. Once the user saves the variant the SelectImage document action will retrieve the correct image for rendering. Utilizing the document action eliminates the need to create a cumbersome rule, and I’ll show you how to set the project up in a way that allows you to quickly add new options without having to edit your project and template files.
Let’s start with the template file. I’m going to keep the demo simple by only placing a new image element in the center of the template. Then, using the element properties I’m going to give it a name: Jersey. The name property is available in the “Info” tab of the properties window.
Next, I want to create two variables in the project file: ImageChoice, Images. Both variables are constant plain text types.
The last task within the project files is to create the jobs and define the document action. I’ll only cover the arguments because you should be familiar with adding a document action by now. The SelectImage action has 4 arguments: ImageElement, Case, SourceArray, ErrorMessage.
- The ImageElement is looking for the name of the element that will get the image assignment. Remember above that we named the element “Jersey”, so we’ll just keep the value type Constant and type “Jersey” into the vaue field.
- The Case argument is the value indicator. Meaning that the selection value should be applied to this argument. In our demo that value is the ImageChoice variable, so I set the Value Type to Variable and then select the variable from the list.
- The SourceArray is the array of image choices. They are essentially key value pairs. There is a key (dropdown text) and a value (image) in each pair. The keys should exist in our dropdown options and the values should match images in the project image folder. I’m going to choose Variable Value Type and select the Images variable from the list as the argument value. This is what will allow you to add new options without needing to edit your project files.
Now that our project is complete and we’ve created the product on Four51, let’s set up the spec form and script.
First, the variable import for ImageChoice will be defaulted as text, but we want to make it a selection and add our choices: Green Bay, Indianapolis, Tennessee. For ease of reading I’m setting the Image variable to have 10 lines and 5000 characters. I’m also setting the default to the SourceArray value. This is the key to the update without touching the project file.
{Green Bay=gbhome.jpg}
{Indianapolis=indyhome.jpg}
{Tennessee=tenhome.jpg}
The spec form has little change to the default. I’m basically adding an image html element (id = preview) for the in-form preview:
| ImageChoice | [[ImageChoice]] | |
| Images | [[Images]] |
Lastly, we’ll write our script for previewing the image. You’ve seen this before so I won’t go into great detail:
var preview = get('preview');
var image_choice = spec['ImageChoice'];
var path = "http://www.four51.com/Themes/Custom/de891832-01b5-4c5d-84da-b4f85e394864/demo/jerseys/";
var images = {
"Green Bay": "gbhome.jpg",
"Indianapolis": "indyhome.gif",
"Tennessee": "tenhome.jpg"
}
function Display() {
preview.imgSrc(path + images[image_choice.selectedText()]);
}
image_choice.onchange = Display;
image_choice.removeOption(0);
// Normally I'd hide this variable, but I'm leaving it visible for the demo.
//spec['Images'].hide();
Display();
You can see the comment regarding leaving the Images variable visible. I wouldn’t want a customer to see this obviously, but I’m leaving it for the demo.
Now that we’re done setting up the product you can continually add new image options by simply updating the options in the two variable. Your project is equipped to handle that without intervention.
I have set up a demo product named “Documents Actions Select Image“. Go to the site to see it in action, and also download the project files I created.
Popularity: 46%
Comment by Peter on 21 October 2008:
This is great document actions example. Could I use this to display different images on different pages of the template?
Thx
Peter
Comment by Steve on 22 October 2008:
@Peter. Sure. The document action is applying the image to a named element. So, just duplicate the action and change the ImageElement parameter.
Comment by Maiton Vang on 18 February 2009:
Hello,
I’m trying to open the project files and I’m getting an error:
Can’t open project file, XML syntax error [Line14]: Unexpected number of elements in element ‘job’
Please help. Thank You.
Maiton Vang
Comment by Steve on 18 February 2009:
More than likely you need to upgrade your version of pageflex. Contact support for that.
Comment by Maiton on 27 February 2009:
Thank You Steve, I figure that out after I upgrade to Pageflex 6.0 it work. Can you also help on the var image path portion:
the script below is to pull the images from the project folder:
var path = “http://www.four51.com/Themes/Custom/de891832-01b5-4c5d-84da-b4f85e394864/demo/jerseys/”;
my images are not showing up. what is the path after the shared folder ID# “/demo/jerseys/” above?
Comment by Steve on 27 February 2009:
In your adminstration interface there is a section for Themes. One of the properties is your base theme folder. You’ll want to use that to point to the images in your theme folder.
Comment by Maiton on 27 February 2009:
Thank you.
I am on the right track.
Everything is working correctly except when I pick a logo it does not show on my proof. Can you please explain more on the instruction below I think the info below is what causing my logo not to show on the proof.
——
I’m also setting the default to the SourceArray value. This is the key to the update without touching the project file.
{Green Bay=gbhome.jpg}
{Indianapolis=indyhome.jpg}
{Tennessee=tenhome.jpg}
Comment by Steve on 27 February 2009:
Have you downloaded the example project file?
Comment by Steve on 27 February 2009:
If you’re copying and pasting my examples into your project it won’t work. You’ve got to edit that information to match yours.
Comment by Robin on 2 August 2009:
Thanks for the great information!
I am only having trouble with the:
var path = “http://www.four51.com/Themes/Custom/d1bb0f81-62f0-45b4-b1ee-a86ea1324546/”;
I saw the previous entry on this subject and I have copied the path from the Admin tab under custom themes. This buyer company is using a pre-existing Four51 template (this is not a custom template). I have the images in the “Shared” folder as well as the images folder for this project.
How do I link to the images? What should I append to the path that links to my project “Images” folder or the “Shared” folder?
I do not have any sub folders inside the “Images” folder, but I have created a “Demo” folder inside of the “Shared” folder.
Thanks again!
Robin
Comment by Steve on 4 August 2009:
The “path” variable is only for displaying the thumbnail in the spec form. If your images are displaying on the web site you’re doing it right.
The Shared Resource document action handles the pathing for you. However, if you placed your images in a sub folder like “Demo” then you need to specify that in the document action parameters. In your case the SharedPath parameter should be set to “Demo”.