docs/8.0/ayanova/docs/ay-report-edit.md

@@ -24,6 +24,8 @@ Note that _viewing_ reports is supported on all devices, only editing is unavail
 
 ### Properties
 
+![report edit form properties tab](img/report-edit-form-properties-tab.png)
+
 These are the general properties of the report:
 
 -   `Name` the name of the report as it is displayed to users for selection; no two reports **for the same object type** can have the same name, however you can re-use a name for reports for different AyaNova Types
@@ -34,6 +36,8 @@ These are the general properties of the report:
 
 ### PDF Options
 
+![report edit form pdf tab](img/report-edit-form-pdf-tab.png)
+
 #### overview
 
 Report generation consists of two distinct and separate processes: Processing the the report html template to generate an HTML web page and secondly rendering the generated HTML page to a PDF document for the final report. The PDF Options tab of the report designer controls settings related to the rendering and appearance of the output PDF document which contains the report.
@@ -120,17 +124,23 @@ If you specify a header or footer without setting a top or bottom margin you wil
 
 ### Report Template
 
+![report edit form template tab](img/report-edit-form-template-tab.png)
+
 The main HTML / Handlebars template. This is where the report is defined and is required to render a report. A template is a mixture of both source HTML and Handlebars templates combined with data to generate the final report HTML.
 
 In order to get up to speed quickly with report design we recommend experimenting with copies of the stock report templates provided as well as referring to the [Handlebars documentation](https://handlebarsjs.com/guide/#what-is-handlebars)
 
 ### CSS
 
-This section is provided to optionally define your own HTML Cascading Style Sheet for the report document. Define your styles here and they will be available to the report template.
+![report edit form css tab](img/report-edit-form-css-tab.png)
+
+This optional section is provided to optionally define your own HTML Cascading Style Sheet for the report document. Define your styles here and they will be available to the report template.
 
 ### Prepare
 
-This section is provided as a way to change the data _before_ it is sent to the report template and rendered.
+![report edit form prepare tab](img/report-edit-form-prepare-tab.png)
+
+This optional section is provided as a way to prepare / change the data _before_ it is sent to the report template and rendered.
 
 Typically this function is used to retrieve outside data and / or alter data that is fed to the report template. For example changing the data from a list of Customer Units to Group By Customer or adding running totals.
 
@@ -152,11 +162,23 @@ A common use for the ayPrepareData function would be to insert or re-shape data
 
 ### Helpers
 
-This section is for custom [Handlebars helper functions](https://handlebarsjs.com/guide/#custom-helpers) defined by the user. AyaNova comes with several [built in Handlebars helpers](#built-in-handlebars-helpers) however, this section is where you can add your own. Any helper compatible with Handlebars can be defined here. You can even use AyaNova API methods in your helpers if required to pull in data from other areas of AyaNova not directly provided in the report data.
+![report edit form helpers tab](img/report-edit-form-helpers-tab.png)
+
+This optional section is for custom [Handlebars helper functions](https://handlebarsjs.com/guide/#custom-helpers) defined by the user. 
+
+AyaNova comes with several [built in Handlebars helpers](#built-in-handlebars-helpers) however, this section is where you can add your own. 
+
+Any helper compatible with Handlebars can be defined here. 
+
+You can even use AyaNova API methods in your helpers if required to pull in data from other areas of AyaNova not directly provided in the report data.
 
 ### Sample Data
 
-This is displayed in the report designer user interface when the report designer is opened via a business object. The sample data is temporary and displayed for the purpose of assisting during report design as a reference to the field names available to the report.
+![report edit form sample data tab](img/report-edit-form-sample-data-tab.png)
+
+This read only section is for viewing sample data from real objects as a referece to the names of fields and "shape" of the collections available to use in your report template.
+
+Data here is displayed in the report designer user interface when the report designer is opened via a business object. 
 
 If you do not see this section it means the report designer was opened directly without passing through a business object first so there is no current data to display but you can still edit the report as normal. This can happen if you open a report from a History form or use the browser back button to go back to a report that was previously edited or open a report URL directly.