Creating a Preview Image By Data (Using JSON)
Problem
You want to create one or more preview images using a template and JSON data as inputs.
Solution
The solution is to create a request using the following URI and method type and submit it to the server via the Content Creation REST service:
| Create Preview Image (By Data) (JSON) | /rest/serverengine/workflow/contentcreation/imagepreview/{templateId} | POST |
Example
HTML5
cc-preview-image-by-data-json.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create Preview Image (By Data) (JSON) Example</title>
<script src="../../common/lib/js/jquery-3.4.1.min.js"></script>
<script src="../../common/js/common.js"></script>
<script src="js/cc-preview-image-by-data-json.js"></script>
<link rel="stylesheet" href="../../common/css/styles.css">
</head>
<body>
<h2>Content Creation Service - Create Preview Image (By Data) (JSON) Example</h2>
<form>
<fieldset>
<legend>Inputs</legend>
<div>
<label for="datafile">JSON Data File:</label>
<input id="datafile" type="file" required>
</div>
<div>
<label for="template">Template ID/Name:</label>
<input id="template" type="text" placeholder="1234 or Filename" required>
</div>
</fieldset>
<fieldset>
<legend>Image Parameters</legend>
<div>
<label for="context">Context:</label>
<select id="context">
<option value="default">Default</option>
<option value="print">Print</option>
<option value="web">Web</option>
<option value="email">Email</option>
</select>
</div>
<div>
<label for="section">Section:</label>
<input id="section" type="text" placeholder="Section Name">
</div>
<div>
<label for="type">Type:</label>
<select id="type">
<option value="jpg">JPG</option>
<option value="jpeg">JPEG</option>
<option value="png">PNG</option>
</select>
</div>
<div>
<label for="quality">Quality:</label>
<input id="quality" type="number" min="0" max="100" value="100">
</div>
<div>
<label for="dpi">DPI:</label>
<input id="dpi" type="number" min="1" max="1200" value="96">
</div>
<div>
<label for="archive">Archive:</label>
<select id="archive">
<option value="default">Default</option>
<option value="true">True</option>
<option value="false">False</option>
</select>
</div>
<div>
<label for="bleed">Include Bleed:</label>
<input id="bleed" type="checkbox" value=false>
</div>
<div>
<label for="pages">Pages:</label>
<input id="pages" type="text" placeholder="1, 2, 3-5, 6">
</div>
<div>
<label for="viewPortWidth">Viewport Width:</label>
<input id="viewPortWidth" type="number" min="0" value="1024">
</div>
</fieldset>
<fieldset>
<legend>Actions</legend>
<div>
<input id="submit" type="submit" value="Submit">
</div>
</fieldset>
</form>
</body>
</html>JavaScript/jQuery
cc-preview-image-by-data-json.js
/* Content Creation Service - Create Preview Image (By Data) (JSON) Example */
(function ($, c) {
"use strict";
$(function () {
c.setupExample();
var $quality = $("#quality"),
$archive = $("#archive"),
$bleed = $("#bleed"),
$pages = $("#pages"),
$viewPortWidth = $("#viewPortWidth"),
jsonData = null;
c.setupJsonDataFileInput($("#datafile"), function (data) { jsonData = data });
$("#type")
.on("change", function (event) {
$quality.prop("disabled", ($(event.target).val() === "png"));
})
.trigger("change");
$pages
.on("change", function (event) {
c.setCustomInputValidity(event.target,
function (value) {
return c.validateNumericRange(value, false, true);
},
"Invalid Pages value entered");
if (event.target.validity.valid && $archive.val() === "false" &&
c.validateNumericRange(event.target.value, true, true)) {
$archive.val("true");
}
})
.trigger("change");
$("#context")
.on("change", function (event) {
var isDefault = ($(event.target).val() === "default"),
isPrint = ($(event.target).val() === "print");
$pages.prop("disabled", (!isDefault && !isPrint));
$bleed.prop("disabled", (!isDefault && !isPrint));
$viewPortWidth.prop("disabled", (!isDefault && isPrint));
})
.trigger("change");
$("form").on("submit", function (event) {
event.preventDefault();
if (!c.checkSessionValid()) return;
var templateId = $("#template").val();
/* Construct JSON Record Data List (with Image Parameters) */
var config = {
"type": $("#type").val(),
"dpi": $("#dpi").val()
},
context = $("#context").val(),
section = $("#section").val().trim(),
archive = $archive.val();
if (jsonData != null) config.data = jsonData;
if (context !== "default") config.context = context;
if (section.length) config.section = section;
if (!$quality.prop("disabled")) config.quality = $quality.val();
if (archive !== "default") config.archive = (archive === "true");
if (!$bleed.prop("disabled")) config.bleed = $bleed.prop("checked");
if (!$viewPortWidth.prop("disabled"))
config.viewPortWidth = $viewPortWidth.val();
if (!$pages.prop("disabled") && $pages.val().trim().length)
config.pages = $pages.val();
/* Create Preview Image (By Data) (JSON) */
$.ajax({
type: "POST",
url: "/rest/serverengine/workflow/contentcreation/imagepreview/"
+ templateId,
data: JSON.stringify(config),
contentType: "application/json",
dataType: "file"
})
.done(function (response, status, request) {
c.displayStatus("Request Successful");
c.displayResult("Result", c.dataToFileLink(response, "Image Preview"), false);
})
.fail(c.displayDefaultFailure);
});
});
}(jQuery, Common));Screenshot & Output
Usage
To run the example you first need to use the Browse button to select an appropriate JSON Data File to use as an input using the selection dialog box.
Next, you need to enter the Managed File ID or Name of your template (previously uploaded to the file store) into the appropriate text field.
Lastly, you can specify the following JSON Image Parameters to use when creating the preview image
-
Context – the context in the template to be used in the creation of the preview image (Default value is determined by the first context in the template).
-
Section – the section within the context specified to be used in the creation of the preview image.
If unspecified, then the default value is determined by the value of the Context image parameter specified.
For the Print context this will be all enabled sections, for the Email and Web contexts this will be the default section. -
Type – the image type/format to be used in the creation of the preview image.
-
DPI – the target resolution of the preview image in dots per inch (DPI)
-
Archive – whether to return the resulting preview as a ZIP file/archive. The Default value is determined automatically by the number of image files in the preview output.
If the Type image parameter is set to a value of PNG, then the following image parameter can also be specified:
- Quality – the quality of the preview image (ranging in value from 0 - 100).
If the Context image parameter is set to a value of Print, then the following image parameters can also be specified:
- Include Bleed – whether to include the bleed area in the preview image.
-
Pages – the page range to be output in the preview image.
If unspecified, then the default value is determined by the value of the Archive image parameter.
If the Archive image parameter is set to a value of False, then the default value will be 1.
If the Archive image parameter is set to a value of either Default or True, then the default value will be * (all pages).
Alternatively, if the Context image parameter is set to a value of Email or Web, then the following image parameter can also be specified:
-
Viewport Width – the image width of the preview image in pixels.
Once the inputs and image parameters have been entered/specified, select the Submit button to create the preview image. When the response returns, a download link of the preview image (or images) will be displayed in the Results area.
Further Reading
See the Content Creation Service page of the REST API Reference section for further detail.