1 Exporting Issues from Project
2 Creating and Managing Custom Templates
- 2.1 Template Editor
  - 2.1.1 Section Bar
  - 2.1.2 Toolbar
  - 2.1.3 Settings Panel
  - 2.1.4 Layers
  - 2.1.5 Indicator
3 Creating and Managing Layouts
- 3.1 Layout Editor
  - 3.1.1 Layout (Handlebars)
  - 3.1.2 Stylesheet (SCSS)

Exporting Issues from Project

Open the Jira project from which you want to export the issues from.
From the sidebar, click on Crystal Export under the Apps section.
A form will be opened where you can configure the options for export.
Select an template you want to use
Select and layout for rendering the issues
Select the output format
Click Convert to start the conversion
If you haven’t gave permission to our OAuth app, you’ll be asked to give permission. For more details on why we need this permission see “<INSERT OAUTH DOCS LINK HERE>”
Wait for the conversion to complete.
The download should be started automatically.

NOTE:

For the download to start automatically you must have allowed the site to open Popups in the browser.

Creating and Managing Custom Templates

Click on Crystal Export from Apps section in top navigation bar.
You’ll be redirected to the Manage Templates page.
Click on Add New button to create a new template.
To edit an existing template click on Edit button.
To remove an existing template click on Remove button

Template Editor

Crystal Export provides a drag-n-drop template editor which lets you customise the look and feel of the converted document including header & footer, page size, margins, etc.

Section Bar

Section bar lets you manage pages and group them into sections. Sections help to control how certain other elements behave.

For example:

When sections are used, Page Numer element will reset for each section. This can be used to create pages that should not be counted when calculating page numbers.

Toolbar

The tool bar contains various elements that can be used to design the template. The following elements and commands are available to use.

Name	Description

Name	Description
Simple Elements - can be used in header, footer and in content (as long as there is no Content Element). The content of element is either auto generated (e.g. page number) or added by the user.
Page Number	Displays current page number and/or total page numbers. The total page number is calculated based on total converted pages in a section. The format of page number can be controlled using `Format` property in settings panel.
Container	Used for grouping elements and controling their alignments and the flow direction of the child elements. The flow of elements can be controlled using `Direction` property.
Spacer	This element can be used to create space between two different elements when you don’t want them to fill the entire space. The ratio of space this takes can be controlled using `Fill Base` property. Example:
Text	Plain text element that can be a Single line/paragraph of text with simple formatting.
Content Elements - can only be used as the main content of page. The content of element is either derived from Confluence (e.g. the Confluence page’s content) or be auto-generated (e.g. table of contents) or added by the user (e.g. rich text)
Jira Issues	Inserts given Jira issues rendered using selected layout as content.
Rich Text	Allows the end user to insert custom rich text as the content. Overflowing content will be shown with a scroll bar in template editor but during conversion, will overflow to new pages.
Other Commands
Undo	Revert the last action
Redo	Redo the reverted actions

Settings Panel

This panel lets you customize various aspects of a selected element. The following properties are available for various components.

Name	Applicable To	Description

Name	Applicable To	Description
Draw Border	All elements with visual content	Draws a border around the bounds of an element.
Border Color	All elements with Draw Border option enabled	Changes the color of the border.
Fill	All elements with visual content	Makes the element take all the remaining space after required space is taken by other fixed elements.
Fill Basis	All elements with Fill option enabled	Specifies the basis for allocating the space for filled elements. By default all elements will have the fill basis of 1. That means if there are more than one element with Fill enabled, all of them will split the remaining space equally. E.g. Let’s say there are two filled elements. The first element has the fill basis of 2 and the second one has 1. Then the first element will take 2/3 of the remaining space and the second one will take 1/3 of the remaining space.
Font Family	All elements based on plain text content	Changes the font family of the element’s text.
Font Size	All elements based on plain text content	Changes the font size of the element’s text.
Text Color	All elements based on plain text content	Changes the text color of the element.
Alignment	All elements with visual content	Specified the horizontal & vertical alignment of element’s content within its bounds.
Padding	Specific to Elements that can host other elements.	Specifies the padding space inside the parent, around the child elements.
Direction	Specific to Container element	Specifies to direction of flow for child elements.
Format	Specific to Page Number element	Specifies the format for the page number. You can use placeholders to insert current page number and total page count. Place holders: {0} - Current page number {1} - Total page count (in section) Examples: {0} → 2 {1} → 5 {0} of {1} → 2 of 5 Page {0} of {1} → Page 2 of 5
Size	All elements with custom text based content, without `Fill` enabled	Specifies the height and width for element. If the values are not specified or `0` the elements will be sized to fit the content.
Padding	All elements with text content Container element	Specifies to inner padding for contents of the element.

Layers

The layers panel lets you to view the hierarchy-tree of all the elements in the page. You can use this panel to select and rearrange the position of an element in the hierarchy.

This panel is also helpful, while editing, when there are multiple elements in a tight space and you cannot click on a specific element to select it in the page view.

Click on the ““ icon to temporarily hide an element. To view the child elements click on the ““ icon.

Indicator

The indicator will be shown for elements on hover & when selected. It shows you the name of selected/hovered element and also provides options to control the element. The Move option allows you to move the element, and the Select Parent option selects the containing/parent element of currently selected element. The Delete option remove the selected element.

Creating and Managing Layouts

Click on Crystal Export from Apps section in top navigation bar.
Click on “Manage Layouts” button on sidebar.
You’ll be redirected to the Manage Layouts page.
Click on Add New button to create a new template.
To edit an existing template click on Edit button.
To remove an existing template click on Remove button

NOTE: Creating and managing layouts requires basic HTML, CSS knowledge.

Layout Editor

Layouts define how the issue data should be rendered. Considering the complexity of Jira issue and related data, and for maximum flexibility; Crystal Export allows you to define the layouts using Handlebars HTML Templates and SCSS.

Layout (Handlebars)

The structure of issue layout is defined using Handlebars Templates. The list of issues and other data will be provided via the context of Handlebars template. The layout of a single issue should be provided inside a each block so as to render all the issues.

Read more about handlebars on the language guide.

Stylesheet (SCSS)

Stylesheet lets you add styles to the HTML template provided in the layout. Crystal Export supports SCSS for allowing the user to create complex styles with simplicity.

Read more about SCSS on the documentation.

Crystal Export for Jira

User Guide

Analytics