Create or change spotcolor dynamically

[thomasweber]

Hello,

is it possible to create a spotcolor dynamically in the Connect Designer? Or if not, is it possible to change the cmyk-values of an existing spotcolor?

Best regards,
Thomas

[AlbertsN]

Hello Thomas,

Could you please explain a little more what you mean? I’m not familiar with the term Spotcolor.

If you’re asking if you can change the color of an element on the page dynamically, absolutely. HTML allows you to change the color of any of it’s elements at any time by passing in the appropriate CSS properties. CSS accepts Hex, RGB, RGBA, HSL, HSLA, and broser predefined colors. It is also possible to convert a CMYK value into these values. See this link for an example of CMYK to RGB.

RGB to CMYK and back algorithm

I can think of two possible ways to have this color be represented in your template.

1. Include the actual color value in your data if possible. Then, any element in your HTML that needs to be set to that color can be set through javascript in the design template. I’d recommend setting a default value and then changing it based on the value in the data.

2. If your data cannot include the color value desired, but has some other element that you can base your color off of, you can build conditionals to set the color based off of these other values. For example, if you wanted to set a font color to red for one geographic location, and blue for another, you’d build a conditional statement that looks for those locations and returns the color of your choosing.

Please note, however, that HTML, CSS, and Javascript are all very limited in what they can do to pre-existing images. There are some functions built in to do basic things, but you’ll need to test them to see if they’ll work. For example, you may be able to read the color from an image, generating an average color to apply elsewhere. En example of this being done in a browser can be found below, but I can’t guarantee it’ll work as expected, or at all, in Design.

Get average color of image via Javascript

[thomasweber]

Hello AlbertsN,

thank you for your replay and sorry for my bad explanation. I don`t want to change colors dynamically. I want to change or create spotcolors in the connect designer.

In the connect designer it´s possible to set own spotcolors (menu: edit > colors…) manually. I want to create/change a spotcolor dynamically without changing my design document manually.

[AlbertsN]

To the best of my knowledge, no. The color palette cannot be modified automatically.

This is meant strictly as a design aid while creating the document. It allows you to setup a palette to easily select commonly used colors in your document. This way you aren’t constantly typing in or selecting the color that you desire when inserting elements, you just pick it from the picklist.

You can, as mentioned above, always modify the colors of elements on the page dynamically. So you could easily have your different ‘palettes’ appear based on, for example, a datafield in your datamapping. A good example might be an announcement for a child birth where the primary color would be green if the child is a boy and yellow if the child is a girl. You’d read the gender value from the datamapping and dynamically set the color elements based on that.

[thomasweber]

Thank you for your reply. I thought so.

I know the ways to manipulate colors based on datafields or manipulating the DOM afterwards by using jquery. But that`s not what I need. Some RIPs (Raster Image Processors) need elements with spotcolors to print it correctly.

In my case I get a datafile with spotcolor-names and have to ouput one file for the RIP (spotcolors with cmyk-values only black and white) and another file for another device (spotcolors with cmyk-values colored). Because I only get one spotcolor-name in the datafile but that spotcolor has different cmyk-values based on the output-device I need to change the spotcolor cmyk-values dynamically. Now I have created two identically design templates with different cmyk-values for the spotcolors (template1 = black/white; template2 = colored). But for every change in the design I have to edit two templates.

[AlbertsN]

Alright, I’m beginning to understand the trouble and I think I have a solution for you to try.

So we know that the Spot color needs to change based on the printer, that you only get one name defined in the data. So we need a way to take that name and the output destination into account.

We can do this in workflow. But we’ll need to set up the datamapping and the template first.

Say that your Spot Color comes into the data like so

FieldName = SpotColor

Value = SpotColorRed

Create your two (or more) spotcolors in the one template. Name them something obvious like PrinterOneSpotColorRed and PrinterTwoSpotColorRed

In your datamapping, create a blank field named PrinterName

Finally set up all of your HTML elements to use the field (PrinterName + SpotColor) to get their spot color value.

Now, in workflow we’ll need to setup a bit of metadata. I’m assuming you already have some sort of conditional or branch to decide where to send the document. In these branches we’re going to add a “Metadata Fields Management” task. In here, we can define the value of that ConditionalSpotColor field we made in the datamapping. It will be something like this:

Level: Document

Field name: _vger_fld_PrinterName

Field value: PrinterTwo

This, of course, has to happen before the Create Print Content task and you will need to be sure that “Update Records from Metadata” is checked in the Create Print Content task.

So you should end up with a workflow that looks a little like this

Execute Datamapping

Conditional to determine output location

If Printer1 > Set Metadata with Field Management (value = PrinterOne) > Create Print Content > Create Job > Create Output

If Printer2 > Set Metadata with Field Management (value = PrinterTwo) > Create Print Content > Create Job > Create Output

So as the file goes through each branch, the Printer name gets added into the datafile, allowing your color selection in Designer to work. The name should come out to match your predefined spotcolors by concatonating the PrinterName and SpotColor fields. Now wherever it prints to, it will choose the correct spot color for that printer.

Edited for clarity

[thomasweber]

Thanks again for your reply and good explanation. But sadly it doesn`t work for me. The problem is that both output-devices need the same spotcolorname but different cmyk-values. The devices are working with the spotcolornames but the generated pdf documents have to be colored in different ways (black/white and colored).

I dont think its possible to do it variable.

[puszczyk]

@AlbertsN

Include the actual color value in your data if possible. Then, any element in your HTML that needs to be set to that color can be set through javascript in the design template. I’d recommend setting a default value and then changing it based on the value in the data.

I have a data mapping that has access to four integer values matching a CMYK and one string in the format [C,M,Y,K]. How can I reference this in Designer to change the background colour of a <div> or font using <span>?

[Erik]

To set the background color of an element to a CMYK color from your data you could do something like this:

// Parsing the color values into an array
// Assumes the data looks like this: [40,100,0,0]
var color = JSON.parse( record.fields.color ); 

// Create the cmyk color definition, example result: cmyk(40%, 100%, 0%, 0%)
var cmykColor = "cmyk(" + color[0] + "%, "+ color[1] + "%, "+ color[2] + "%, "+ color[3] + "%)";

// Assign the color to the elements in the result set
results.css( 'background-color', cmykColor );

Erik

[puszczyk]

I have full control of the data, so I’m guessing I can add the %s in the actual query to prevent having to concat them in the cmykColor initialisation?

[Erik]

Correct, you could even provide the complete cmyk color def via a data field.