...
| Note |
|---|
NOTE: For the download to start automatically you must have allowed the site to open |
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 |
|---|---|
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 |
 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 |
 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 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 |
|---|---|---|
Draw Border |
| Draws a border around the bounds of an element. |
Border Color |
| Changes the color of the border. |
Fill |
| Makes the element take all the remaining space after required space is taken by other fixed elements. |
Fill Basis |
| 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 |
| Changes the font family of the element’s text. |
Font Size |
| Changes the font size of the element’s text. |
Text Color |
| Changes the text color of the element. |
Alignment |
| Specified the horizontal & vertical alignment of element’s content within its bounds. |
Padding |
| Specifies the padding space inside the parent, around the child elements. |
Direction |
| Specifies to direction of flow for child elements.   |
Format |
| 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:
|
Size |
| Specifies the height and width for element. If the values are not specified or
|
Padding |
| 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
| Info |
|---|
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.