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%