Custom reports require three distinct specifications:

Document configuration: defines each section of the document and what it will contain
Section templates (HTML): defines the layout of the information within each section
Styling (CSS): defines formatting details such as font size, border color, etc.

Document configuration

The document configuration defines the each section of your document, including the header and footer. Here is an example:

<script id="documentConfigurations" type="text/template">
{
  "header": {
    "left":   "{PROJECTNAME}",
    "center": "",
    "right":  "{REPORTNAME}"
  },
  "footer": {
    "left":   "Generated by iRise",
    "center": "{PAGENUMBER} of {PAGES}",
    "right":  "{REPORTDATE}"
  },
  "sections": [
    {
    "sectionName": "Start Page",
    "getData": "screens",
    "template": "StartPage_template",
    "page_break": "after"
  },
    {
    "sectionName": "Table of Contents",
    "page_break": "after"
  },
    {
    "sectionName": "General requirements",
    "getData": "requirements",
        "filters": [
      {"and" : [
        {"==" : [{"var" : "parentChapter.name"},"ADDED_REQUIREMENTS"]}
      ]}
    ],
    "template": "General_Requirements",
    "page_break": "after"
  },
    {
    "sectionName": "Screens",
    "getData": "screens",
        "filters": [
      {"or" : [
        {"==" : [{"var" : "type"},"PAGE"]},
        {"==" : [{"var" : "type"},"CLOUD"]}
      ]}
    ],
    "template": "Screen_Requirements",
    "page_break": "after"
  },
    {
    "sectionName": "Scenarios",
    "orientation": "landscape",
    "getData": "screens",
        "filters": [
      {"and" : [
        {"==" : [{"var" : "type"},"SCENARIO"]}
    	
      ]}
    ],
    "template": "Screen_Requirements",
    "page_break": "after"
  },
    {
    "sectionName": "Masters",
    "getData": "screens",
        "filters": [
      {"and" : [
        {"==" : [{"var" : "type"},"MASTER"]}
    	
      ]}
    ],
    "template": "Screen_Requirements",
    "page_break": "after"
  },
    {
    "sectionName": "Templates",
    "getData": "screens",
        "filters": [
      {"and" : [
        {"==" : [{"var" : "type"},"TEMPLATE"]}
    	
      ]}
    ],
    "template": "Screen_Requirements",
    "page_break": "after"
  },
    {
    "sectionName": "Other",
    "getData": "screens",
        "filters": [
      {"and" : [
        {"!=" : [{"var" : "type"},"MASTER"]},
        {"!=" : [{"var" : "type"},"PAGE"]},
        {"!=" : [{"var" : "type"},"CLOUD"]},
        {"!=" : [{"var" : "type"},"SCENARIO"]},
        {"!=" : [{"var" : "type"},"TEMPLATE"]},
        {"!=" : [{"var" : "name"},"ADDED_REQUIREMENTS"]}
    	
      ]}
    ],
    "template": "Non_UI_Requirements",
    "page_break": "after"
  }
  ]
}
</script>

Header and Footer

You can specify the text that should appear in the header and footer of your document:

The settings for the example above are:

"header": {
    "left":   "{PROJECTNAME}",
    "center": "",
    "right":  "{REPORTNAME}"
  },
  "footer": {
    "left":   "Generated by iRise",
    "center": "{PAGENUMBER} of {PAGES}",
    "right":  "{REPORTDATE}"
  },

Define sections of the document

You can use "sections" to define specific parts of a document. For example, you may want Screen info to appear in one section and Master info to appear in another.

 "sections": [
    {
      "sectionName": "Pages",
      // define section one
    },
    {
      "sectionName": "Masters",
      // define section two

    }
  ]

Table of contents
You can also include a table of contents by including a section called "Table of Contents":

   {
      "sectionName": "Table of Contents",
   },

Section specifications
For each section, you'll define the following:

sectionName: provide a label for each section that can be displayed in the document (required)
orientation: defines whether the section will appear in Word in landscape or portrait. (optional: defaults to portrait )
getData: specifies whether the section will contain screens information or requirements only. (required)
filters: provide filters to narrow to scope of the data appearing in the section. For example: filter to show only Masters. (optional)
template: specifies which HTML template will be used to display the report data. (required - see below)
page_break: include to add a page break in the Word document before or after the section (optional)

Defining filters
Filters are specified using JSON notation.

Example: Show screens where Type is "Page" or "Cloud"

"filters": [
   {"or" : [
      {"==" : [{"var" : "type"},"PAGE"]},
      {"==" : [{"var" : "type"},"CLOUD"]}
      ]}
   ],

Example: Show requirements where Details-Type is "Epic"

"filters": [
   {"and" : [
      {"==" : [{"var" : "Details-Type"},"Epic"]}
      ]}
   ],

Defining templates
For each section of the document you can specify which HTML template to use for the the display of report data.

"template": "Screen_Requirements",

Creating HTML templates is described below.

Section Templates (HTML)

Templates determine how the information will be displayed. Here's an example:

<script id="General_Requirements" type="text/template">
	<h1>{sectionName}</h1> 
	{?requirements}    
	<table class="table" style="border-collapse: collapse;">
	   <tr>
	      <th style="width:64%">Requirements</th>
	      <th style="width:12%">Status</th>
	      <th style="width:12%">Priority</th>
	      <th style="width:12%">Cost</th>
	   </tr>
	{:else}
	   <span style="font-size:9pt">No related requirements</span>
	{/requirements}   
	{#requirements}
	   <tr>
	      <td><a class="black" target="_blank" HREF="{link}">{Details-Type} #{docId}</A>: {title}<br><span style="font-size:8pt">{description|s}</span></td>
	      <td>{Details-Status}</td>
	      <td class="{@eq key=Priority-Priority[0] value="High"}red_text{:else}black_text{/eq}">{Priority-Priority}</td>
	      <td>{Priority-Cost}</td>
	   </tr>
	{/requirements}
    </table>
	<br style="page-break-before: always;">
</script>

The id is how you'll reference each template in the Document Configuration.

Within the <script> tag you define the look and layout of the information with simple HTML and CSS. Note that Microsoft Word only supports basic HTML and CSS. For details, see https://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx.

Within the HTML you can insert any of the variables (project data) from the right-side panel in the report editor:

Variables

In the variables, you can see that much of the information (data) is hierarchical:

The project contains a list of {#screens}.
Each screen contains a list of {#requirements}
Each requirement contains a list of {#comments}
Additionally, each screen, requirement, and comment has a set of attributes, such as {color} or {status}

Variables make it easy to insert this project data dynamically into the HTML. The notation is based on Dust.js. For details go to: http://www.dustjs.com/guides/getting-started/

Lists

For lists, such as screens, you can create a snippet of HTML that repeats for each item. To create a repeating section based on a list:

{#listname} 
   repeating html 
{/listname}

For example:

Screens:
<ul>
   {#screens}
     <li>The screen name is {name}
     <ul>
       {#requirements}
          <li>{title}</li>
       {/requirements}
     </ul
     </li>
   {/screens}
</ul>

The example above would produce an output like this:

Screens:
* The screen name is Page 1
  * The system shall do A 
  * The system shall do B
* The screen name is Page 2
  * The system shall do X 
* The screen name is Page 3
  * The system shall do Y

You can include conditional statements with ? (exists) and ^ (not exists). For example:

Screens:
<ul>
   {?screens}
     <li>The screen name is {name}</li> 
   {/screens}
</ul>
{^screens}
  No screens exist
{/screens}

For more information on dust.js notation:

Getting started: http://www.dustjs.com/guides/getting-started/
Helpers: http://www.dustjs.com/guides/dust-helpers/
Transformers: http://www.dustjs.com/guides/using-filters/

Styling (CSS)

Lastly, you can use styles to share formatting (CSS) across all sections of the document. Reference styles in your HTML templates just like you would in any HTML page. Here's an example:

<script id="myCSS" type="text/css">
    <style>
	 h1, h2, h3, h4, h4, p, span, li, table, tr, td, th {
	     font-family: Arial;
	 }
	 
	 h1 {
	     font-family: Arial;
	     font-size: 14pt;
	 }
	 
	 h2 {
	     font-family: Arial;
	     font-size: 11pt;
	 }
	 
	 h3 {
	     font-family: Arial;
	     font-size: 9pt;
	 }
	 
	 .project {
	     font-size: 28pt;
	     color: #000000;
	     font-weight: bold;
	 }
	 
	 .report {
	     font-size: 18pt;
	     color: #5A5A5A;
	     font-weight: bold;
	 }
	 
	 .strong {
	     font-weight: bold;
	     font-family: Arial;
	 }
	 
	 .gray {
	     font-weight: normal;
	     font-family: Arial;
	     font-size: 10pt;
	     color: #7F7F7F;
	 }
	 
	 a.gray:link {
	     color: #7F7F7F;
	 }
	 
	 a.gray:visited {
	     color: #7F7F7F;
	 }
	 
	 a.gray:hover {
	     color: #333333;
	 }
	 
	 a.black:link {
	     color: #000000;
	 }
	 
	 a.black:visited {
	     color: #000000;
	 }
	 
	 a.black:hover {
	     color: #7F7F7F;
	 }
	 
	 table {
	     table-layout: fixed;
	     border-collapse: collapse;
	     text-align: left;
	     width: 100%;
	     vertical-align: top;
	     padding: 5px 5px;
	     border: 1px solid #000000;
	 }
	 
	 td {
	     font-size: 9pt;
	     padding: 5px 5px;
	     border: 1px solid #000000;
	     vertical-align: top;
	     text-align: left;
	 }
	 
	 th {
	     font-size: 9pt;
	     padding: 5px 5px;
	     border: 1px solid #000000;
	     vertical-align: top;
	     background: #E7E6E6;
	     font-weight: normal;
	     text-align: left;
	 }
	 
	 .title {
	     font-weight: bold;
	 }

	 .red_text {
	     color: red;
	 }

	 .black_text {
	     color: black;
	 }
	 
	 </style>
</script>