HedgeBlog

WEIL.COM AND APS MODULE. PDF VERSION OF TIMELINE WIDGET

If you ever tried using APS module, you probably ran into a lot of questions, but not many answers. I started looking at APS when I joined Weil, Gotshal & Manges LLP in February of last year. At that time there were not that many APS resources on SDN or anywhere. Jetstream solution that was available on SDN at that time didn’t help understanding the big picture. I needed to figure out if it was at all possible to assign content references to APS project elements at runtime, and I couldn’t find the answer for the life of me. Luckily when I was in an absolute despair Mark Demeny from Sitecore came to the rescue. He shared new documentation and new version of Jetstream project with me, which provided me with a launch pad for the Weil.com project that was released at the beginning of July this year.

While the new Weil web site uses a lot of great technology like Sitecore7, MVC and Solr, APS module implementation in this solution is somewhat special. We generate PDF versions of biographies, experience pages and articles using APS. The implementation journey was not an easy one, but we made it, and I’ll be sharing a few lessons learnt during this project at Sitecore Symposium 2014 in Las Vegas and Barcelona (Creating dynamic brochures with Sitecore Adaptive Print Studio).

Figure 1. Web Version

To avoid spoiling it for those of you who are going to attend the Symposium, I won’t write here what I’m planning on speaking about at the session, but will share a different section of our APS solution – Treelist Widget. There are a lot of pages on our web site that have this html widget assigned. The challenge was to make it look the same in PDF.  Below are web version of the widget and a pdf one side by side:

Figure 2. PDF version

As you can see both versions are very similar. PDF one has all boxes expanded as there is no toggle concept in print. Otherwise they are very close.

Implementing this widget was not as complicated as I thought it would be, so let’s examine how it was done.

First of all I placed a TextFrame on a page in my InDesign document. Corresponding item was created in Sitecore APS project when I saved it. I renamed it to be called Intro. Because I was working with dynamic content, I added a Widget Repeater and a few Conditional Renderers as children of my newly created TextFrame. I’ll be showing what those are during my Symposium session. For those of you, who won’t be able to attend, I’ll share a link to the source code at the end of this blog post.

Both Widget Repeater and Condition Renderer items don’t produce any output in InDesign XML, but allow managing the output. The next after Intro TextFrame items that do provide an output in resulting XML are the Header and the p item that are ParagraphStyle type of items and render ParagraphStyle elements. ParagraphStyle template is a part of Sitecore APS Jetstream project which can be downloaded from Sitecore SDN. Let’s drill down a little further to the Treelist item. The Table item is the one responsible for rendering of the tree list widget.  Before examining the structure under Table element, let review how the tree list is done in InDesign document. After all this is exactly what we’ll have to reproduce by creating Table child elements.

As you can see from the picture, the tree is actually a table with three columns.(as you might have guessed from the Sitecore Table tree structure above).

The first row, Selected Representation header, is a row with two cells where first cell takes up two columns. The cell style for this cell is set to have a green left border and green background. APS requires all styling to be specified in a Master document. For this cell I have created a Solid Green cell style that has a green left border of 3pt and a green gradient background. You can see this on the screenshot below.

The second cell is empty and doesn’t have any borders or backgrounds and uses Clean cell style.

The second row represents a gap between Header and the tree items. It has three cells. The first one has a green left border while the other two are based on Clean cell style and have no border or background.

The next two rows render a tree child element. The first row in this pair holds actual content while the second one provides a left gap with green left border and thin gray top one. I have created a Green Left Border with Top Gray Border cell style in my master document for this cell.

The content row consists of two cells. The first one has only green left border that matches the green border in other left cells. The second one takes up two columns and two rows and has thick gray top border, thin left, bottom and right ones.

Now when all InDesign work is done, I can switch to Sitecore and create APS item structure to match InDesign one.

For the first Header row I have created two cell items: Left Gutter and Cell. As you can see I specified CellStyle values that match earlier created in InDesign master document cell styles. The HorStradle and VerStradle fields represent corresponding cell element attributes in InDesign xml and work the same way colspan and rowspan attributes do in html tables.

The next row, the gap between the header and the tree child item is called Gap in my Sitecore tree.

It has three cell items. Each one of these items has CellStyle value that matches InDesign cell style. Since there is no merging of cells, I have HorStradle and VerStradle both set to 0.

The next Timeline child element is represented by two rows in InDesign. In addition to that I need to render as many of these row sets as I have Representations in my data source collection. For that I’m using Jetstream Repeater. In my tree structure it is called NRs (Notable Representations). It allows me to loop through all items in my data source collection and create two row set for each one of them.

Under NRs repeater I have three row items: a row with main content, a left gap row and a copy of spacer row that separates header from tree items. The last one allows me to have consistent layout between all tree list items.

The style settings in these Sitecore cell items match those from InDesign the same way they did in Header and the second gap row we looked at above.  Once all of these items are created, the APS tree list structure is ready to produce xml elements that InDesign Server will convert into a table that looks like a tree list.

For additional information on how to configure APS module and create projects to generate PDF files dynamically you can read my blog post at http://sitecoreexperiences.blogspot.com/2013/07/sitecore-and-aps-saga-configurations.html

JD Little from Sitecore and I recently wrote a blog about Widget Repeater that was created for Weil.com solution. You can read this blog at http://www.sitecore.net/Learn/Blogs/Best-Practice-Blogs/JD-Little/Posts/2014/07/Guest-blog.aspx

You can also find the source code for our APS solution at github – https://github.com/jcore/JCore.SitecoreAPS.PrintStudio

0

Leave a Comment

HedgeBlog is the blog of Hedgehog, a full-service digital agency. It's our fresh take on what's new, what's now, what's next in technology, online media, and beyond. Drop by, chime in, and be inspired.

Newsletter