Selecting a record range in Indesign using javascript's data merge

A question came to my blog the other day regarding Indesign's scripting.

The question was:
How do I select a certain number of records before doing a data merge in Indesign (using javascript).

In order to select the range you need to set the dataMergePreferences within the dataMergeProperties. I've included a handy script with UI which will allow you to select your record range. 

main();
function main()
{
//Set document to open indesign doc, from a file dialog box. 
var myDocument = app.open(File.openDialog( "Pick an indesign file template." )); 
myDocument.dataMergeProperties.selectDataSource(File.openDialog("Select your .csv file for import. The Merge process can take some time...", "*.csv"));

                    with(myDocument.dataMergeProperties.dataMergePreferences)   
                    {       
                        
                        //-----------       UI for record range ----------------------//
                        var myWindow = new Window ("dialog", "Record Range to Import");
                        var myInputGroup = myWindow.add ("group");
                         myInputGroup.add ("statictext", undefined, "Range:");
                         var myText = myInputGroup.add ("edittext", undefined, "1-10");
                         var allRecordsCheckbox = myInputGroup.add ("checkbox", undefined, "&All Records");
                         //allRecordsCheckbox.shortcutKey = "c";
                         myText.characters = 20;
                         myText.active = true;
                        var myButtonGroup = myWindow.add ("group");
                         myButtonGroup.alignment = "right";
                         myButtonGroup.add ("button", undefined, "OK");
                         myButtonGroup.add ("button", undefined, "Cancel");
                        myWindow.show ();

                        if (allRecordsCheckbox.value == true){
                            RecordSelection.ALL_RECORDS;
                        }else{
                             //how many records to import in a range
                              recordRange = myText.text;
                              recordSelection = RecordSelection.RANGE;     

                        //or you could do one record by choice

                        //recordNumber = "pageNumber";

                        //RecordSelection.ONE_RECORD;

                        }                  
                       
                    }   

                
                        myDocument.dataMergeProperties.mergeRecords();
//Set measurement units so units on place match layout
with(myDocument.viewPreferences){
                                //Measurement unit choices are: 
                                //* MeasurementUnits.agates
                                //* MeasurementUnits.picas
                                //* MeasurementUnits.points
                                //* MeasurementUnits.inches
                                //* MeasurementUnits.inchesDecimal
                                //Set horizontal and vertical measurement units to inches. 
                                horizontalMeasurementUnits = MeasurementUnits.inches; 
                                verticalMeasurementUnits = MeasurementUnits.inches;
                                myDocument.viewPreferences.rulerOrigin = RulerOrigin.pageOrigin;
}
//This Saves the document under a new name for later use. 
//myDocument=myDocument.save(File("specialdatamerge.indd")); 
app.activeDocument.save(File("specialdatamerge.indd"));

//This Closes the document, with an option to not save the Auto.indd file used for the merge.
//This is a good idea so the original file is not destructed. 
myDocument.close(SaveOptions.no);

}//End Main

Detecting whether an element is present with jQuery and Javascript

JQuery is an interesting web development tool. It allows for customization, animation, effects, and even minor UI development. I prefer JQuery to flash, as it doesn't require a "player" which may or may not be installed on the users system. As long as the user allows javascript, the tricks I'll be teaching work cross browser, and cross platform (Mac, windows, iphone, android.)

The first step to using JQuery is to embed the library into your html page. There are two ways of doing this.
1. Embed directly from google if internet access is available.
2. Download the script library and include it in your files if working from your desktop without internet.

I prefer to use the script right off Google's code library. I prefer to do so because it not only saves your server bandwidth, but it also allows for very quick response, and less storage space on your ftp.

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

This link can be embedded using the external javascript embed.

Now that we have jQuery embedded, we can begin using the libraries extensive tools. Let's say we want to check whether an element is on the page. If it is, we want to throw an alert. Let's use jQuery to do so. First, we must include the external script, in the same way we did above with JQuery.

Now, here is what the script file looks like. The first step, is to instantiate JQuery.

$(document).ready(function(){

});

This is needed for Jquery to loop through your script. Without this starting statement, JQuery will not work. Next, we will use Javascripts length property to detect whether an element is present.

$(document).ready(function(){
if($('#DivElement').length==1){
alert("the Div is present")
}else{
alert("the Div is not present")
}
});

This is a very simple script, and it doesn't really use JQuery's tools extensively, but it does allow for an element to be detected on screen. Why would this be useful? Let's say we have a template, and on some parts of the template there are buttons that we want to throw alerts on. Instead of including this script on every page, we merely include it in our template and let javascript do the detecting for us.

Merging Data using Indesign's built-in DataMerge Class & Javascript

Merging data to automate production is a must for any catalog, or template based production. The great thing about adobe is the ability to script within programs. Javascript is a very popular scripting language for the web, and makes an excellent tool for scripting automation within Indesign. Here are the preparatory steps you need to take.

1) The script below requires your .indd template to be placed in a folder called "Automation."
You'll need to replace the references in your javascript file to match your files location for both the template, and the .csv file.

2)The other requirement of this script is to label your text boxes in the .indd template file. You'll do this using Indesign's script label panel. It can be found under "Window>Automation>"

3) In the template file style your text frames and place them as you would like them on the page.

4) Open the Data Merge Panel in Indesign, and import your .csv file using the corner pulldown menu. In order to populate the data merge panel with text frame field references you have to import your csv.

5) The Data merge panel is now populated with your fields. Drag and drop the fields on your text frames. Save your template file as Auto.indd, and move on to step 6.

6) Copy the javascript file, and place it in your Indesign's scripts folder. This can be found in your application's sub folders. "Scripts/Scripts Panel" The file is pasted below. Just copy and paste it. Save it as a Javascript file using Adobe's ExtendScript Toolkit. (It comes with the creative Suite).

Below, is the javascript file:

UPDATED JULY 21, 2014:

main();
function main()
{
//Set document to open indesign doc, from a file dialog box. You must provide the template
var myDocument = app.open(File.openDialog( "Pick an indesign file template." )); 
myDocument.dataMergeProperties.selectDataSource(File.openDialog("Select your .csv file for import. The Merge process can take some time...", "*.csv"));
myDocument.dataMergeProperties.mergeRecords();
//Set measurement units so units on place match layout
with(myDocument.viewPreferences){
                                //Measurement unit choices are: 
                                //* MeasurementUnits.agates
                                //* MeasurementUnits.picas
                                //* MeasurementUnits.points
                                //* MeasurementUnits.inches
                                //* MeasurementUnits.inchesDecimal
                                //Set horizontal and vertical measurement units to inches. 
                                horizontalMeasurementUnits = MeasurementUnits.inches; 
                                verticalMeasurementUnits = MeasurementUnits.inches;
                                myDocument.viewPreferences.rulerOrigin = RulerOrigin.pageOrigin;
}
//This Saves the document under a new name so the template is not destroyed.
app.activeDocument.save(File("specialdatamerge.indd"));

//This Closes the document, with an option to not save the .indd file used for the merge.
//This is a good idea so the original file is not destructed. 
myDocument.close(SaveOptions.no);
      //open the new document you just saved.
       var newDoc = app.open(File("specialdatamerge.indd"));
//do something with the contents of a layer.
var PageLength = app.activeDocument.documentPreferences.pagesPerDocument;
 for (i; i<= PageLength-1;i++)

{
      //For example, grab a text LAYER labeled "ID" (Not a script label).
      var id = newDoc.pages.item(i).textFrames.item("ID").contents;
      alert(id);                  
}

}//End Main 

Get hired as a web designer in 5 steps by learning the essential tools employers are looking for.

So your a print designer who was just let go due to a failing magazine and newspaper. You have plenty of print experience but lack the web knowledge of how to get started. Your wondering to yourself...what is it that top notch web firms are looking for??

1. Learn html basics, and how web pages go together. Why tags start with brackets, and end with a trailing slash. < > Also learn how javascript and css styles are  externally embedded. 
2. Learn CMS systems and how to install them. Start be reading up on the top three Open source CMS systems: Wordpress, Joomla, Drupal. They'll open the doors to new opportunities because most every design firm knows that building off these platforms is a key essential to quick, easy, updatable websites. 
3. Learn jQuery, MooTools, or Scriptaculous Javascript libraries. These libraries make animation, interactive design and effects very easy for a competent web designer. They have a steep learning curve sometimes, but once you understand one, they will all start to make sense. They're goals are all the same: Create the best viewing environment using a browser and object oriented programming. Dive in and try to understand the basics. Whats the difference between an object, a variable, a string, a function and how they are combined in scripts. Think back to your math days.
4. Learn SEO / Google Analytics combined with Webmaster tools from Google AND Yahoo/Bing. Most people are fearful of SEO. They always think there is a trick, or some special program to be an SEO person. There's not. It's all about putting tags in, and using title attributes correctly. It's a strategy, not a programming language in itself. Google supplies multiple sources to get you started. Be smart and make sure to spend plenty of research time. Still lost?
   Start here:
   http://googlewebmastercentral.blogspot.com/2008/11/googles-seo-starter-guide.html
5. Understand the difference between php/asp, html, css, javascript, and mySQL/SQL. What are all these abbreviations?? What do they mean? Knowing what they mean, and how they are used is an essential part of web design. If you look at any of those abbreviations and shrug your shoulders, go look them up. Don't be lazy. LOOK IT UP. There are more than enough resources to get started. Understanding the integration of all these code languages will make you a strong web designer. 

Setting styles based on browser settings

When you are designing for the net, you always have to keep in mind that different browsers display things differently. Sometimes a slight change may be needed according to what browser you are viewing the page in. When I run across this instance, I sometimes use a browser detection script to let me know which browser I am using. Below is a link to the Browser Detection script that I usually use. It's open source and a great script for doing a number of tasks.

http://caseygovero.com/CaseysSite/Scripts/Browser_Detect.js

Let's say you wanted a simple display somewhere to let users know what browser they are using. It's not entirely useful in this respect, but this will give you an idea of what you can do with the script.
Note: The beginning and ending script tags have been removed. You will need them for this to work in your html file. If you are new to javascript, read more here: 
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.1

First off, we embed the script in our html page using the external script. The second part is a very common "if" statement. This statement allows us to basically ask a question using script.

if(BrowserDetect.browser=="Firefox")

Are we using firefox?

if(BrowserDetect.browser=="Firefox"){document.write("Your browser is"+BrowserDetect.browser)}

The second part of the script is what actually does the action. document.write is the javascript method for displaying text strings. You could place anything here, but in this instance I've decided to display text from a string. Using the browser detect class, we can add styling dependent on what browser you are using. This applies to other browsers as well by changing the if statement. 

if(BrowserDetect.browser=="Chrome")

This example checks against Google Chrome. If you look at the script here, you will see the available browsers:

http://caseygovero.com/CaseysSite/Scripts/Browser_Detect.js
Try it out for yourself. It will display a message if your in firefox, but not in any other browser. I'm sure you guys can use your imagination and find a use for the script!

Using custom variables in common object oriented programming

In this article, I'm going to be discussing some very basic OOP techniques using variables. Variables are a basic necessity in most programs, whether it be web or application based. So what is a variable you ask? Well, in computer terms, it is a constant, which can be updated, changed, or well...changed. Since flash is my forte, I'm going to discuss both actionscript and php. Code will be denoted by red.

The basic declarations (naming your variable) are a bit different in as3 and php. In actionscript, we use the starting prefix var, where as in php we use $. Once you get the basics of OOP, you'll start to notice the synatx similarities, and how to work well with both.

Lets say we want to write a math program. A basic calculator maybe. Well, in order to "calculate" we'll need to assign a variable to the number we will be calculating.

In AS3, we would start with:

var CalculatorNumber

In PHP:

$CalculatorNumber

Notice, spaces are not allowed, except after the var in AS3. It's required there for the flash player's recognition. It's preferred to use camel case as well. Now that we have a number that we can use as a variable, we will assign it a number. Usually, we would data type it as well, but it is not required for this simple app. Ok, so we have our variable, now, I'm going to write a function to process the variable.

, according to what the user clicks.