How can I load Document Object Model (Core) Level in connect?

How can I load Document Object Model (Core) Level in connect?

When I try this code I get document not defined. So how can we load more API’s?

var canvas = document.createElement(‘canvas’);

Hello Ricoh_Glenn,

If you are working with the Print Context, then you should use the Connect Designer API instead to add HTML elements to the document on the fly. The Designer AP is available here:

http://help.objectiflune.com/EN/pres-connect-user-guide/1.4/#designer/API/Designer_API.htm?Highlight=API

If you are working in the Web context, the standard HTML DOM can be accessed and manipulated with standard JavaScript\jQuery functions.

Regards,

Rod

It’s important here to make the distinction between Scripts and JavaScript Resources. The Scripts pane essentially amounts to Server-Side Scripting, more akin to node.js, PHP and ASP than it is to javascript run in the browser. Essentially, you’re not manipulating the DOM or an HTML page - you’re working with various APIs that are made available to you (such as control scripts, the record object, and the html manipulation API that Rod links to).

I know that initially there might be a confusion, simply because our API looks a lot like jQuery… but it’s not, it’s just inspired by it in terms of functionality. This is and remains server-side JS, not browser JS, so you won’t find the canvas object and you can’t use jQuery plugins in the Scripts pane.

Ok, let me ask this. I am doing a comparison of the length of my name field. If it has certain amount of characters I want to create a box on the fly. I was able to do this in Planet Press 7.

I do not want a box with a condition, because the box size and position depends on the length of the name.

So how is this achieved if we cannot use DOM in the print section?

You could check the length of the name field, and create the box on the fly with certain parameters. Something like:

var html_content = “”;
if(record.fields.fullname.length > 14) {
html_content = ‘<div class=“namebox”>’+record.fields.fullname+‘</div>’;
} else {
html_content = '<div class=“namenobox”>‘+record.fields.fullname+’</div>';
}

You can then use the “namebox” and “namenobox” classes in the stylesheet to set the box borders and sizes (static or dynamic) or you can use inline styles. Could even calculate various box and font sizes depending on certain ranges of name length… There’s still a whole lot of power here.