Beta verzia novej dokumentácie.

Go back to old version
Go to cdesk.eu
Documentation Navigation

Netgrif Report Connector

CDESK includes several predefined print reports that are used in various modules. However, thanks to the NETGRIF connector, you are no longer limited to the predefined forms; instead, you can create your own print reports for requests, orders, and quotes. Thanks to the high modularity of the NETGRIF tool, you can design a print report that meets even very specific requirements, as it can include fields from requests, fulfillments, and configuration items. Thanks to the NETGRIF connector, these forms are transferred to CDESK.

Configuring a custom print report begins on the NETGRIF side, where the appearance of the print report itself is configured. Next, you need to configure the workflow for the report. Finally, directly within the NETGRIF connector, the fields of the print report are mapped to the fields of the selected CDESK module so that the required information is displayed in the print report fields. Detailed procedures for each step are described in this manual.

Configuring the template for a print report on the NETGRIF side

Access to the report template 

When creating your own print report, you need to start by designing it in NETGRIF. To do this, go to the following link: . When you open the link, the NETGRIF form configuration tool will appear.

Image: The NETGRIF tool before starting to configure a print report

On this page, you can create a print report from scratch or use pre-designed templates as a starting point. To simplify your work, we have prepared templates for you, which you can download at the following link.

After downloading the files, upload them to the NETGRIF tool using the icon for uploading XML files. After clicking the icon, a file explorer will appear to select a file from your computer.

Image: Icon for uploading XML files to NETGRIF

Once the file is uploaded, two square icons representing the form screen will appear in the form. Below these icons, the form to be designed is displayed. In the first step, right-click on the icon labeled t1 and select the option + Create new form .

Image: The "Create form" option under the icon labeled "t1"

Clicking this button displays a grid map. The number of columns in this grid determines how many fields can be placed side by side. The default value is 8, meaning that 8 different fields can be placed side by side. However, individual fields can span multiple columns. The number of columns can be changed using the “” field under “Number of Columns” . However, the number of columns in the grid does not determine the final width of the print report. The final width will always be the same, which is the width of an A4 page. The number of columns only determines how many fields can be placed side by side in the print report.

Image: Basic grid of the print report and field for changing the number of columns

Adding fields to a print report

To add any type of field, click on the “” option and then “Create new fields” , located on the left side. Menus for various field types will then appear. To add a text field, click on the “” option and then “Text” , and then select “” and “Simple” , which indicates a simple text field. After clicking, the text field is automatically placed in the upper-left corner of the grid, from where you can move it to any location within the grid. Alternatively, you can place the field directly at the desired location by grabbing it from the menu on the left side and using Drag & Drop to move it to the desired location.

Image: Adding a simple text box to the grid

You can resize the added field by dragging its edges. The size can be adjusted both horizontally and vertically. The maximum width of the field is determined by the number of columns in the grid. The maximum height of the field is not limited. You can move the field within the grid using the “” icon, which appears in the upper-right corner of the field. To delete the field, click the “” icon.

Image: Icons for deleting and moving a field

Configuring Field Properties in a Print Report

When you click on a field in the grid, the parameters for that field will appear on the right side of the window. These are the following settings:

  • Id – We recommend changing the default value so that you can later identify the field when pairing it with CDESK fields, and also so that the field is distinguished from the other fields in the grid. We recommend entering the name in lowercase.
  • Behavior – the following options will be important for the CDESK print report:
    •  Editable – used for fields that will be populated with a parameter from CDESK.
    •  Visible – no value will be pre-filled in the field. This setting is used if, for example, a logo or fixed text is to be displayed in the field.
  • Title – field description displayed in the print report
  • Description – field description displayed in the grid when configuring the print report. The description is used to identify the field within the grid.
  • Initial value – enter the text to be permanently displayed in the field. This is used if the field is set to Editable .
Image: Setting field properties

Add a subform

If a print report is to include multiple records from modules linked to the original module from which the print report is generated, a subform is used. This applies, for example, to cases where the print report is to contain a list of all CI items linked to a request, or a list of all fulfillments for a request. The subform is configured in the same way as the main form for the print report. Subsequently, in this form, you must add Task ref → Simple to the location where the subform fields are to be displayed.

Image: Adding a subform to the main form

Add an image

If you want to insert your own logo or image into the form, follow these steps:

  • Add an HTML Editor field to the form and configure it as follows: visible
Image: Inserting an HTML Text Area component

Next, we find the desired image and encode it into Base64 format; for this step, you can use websites such as , base64-image.de, , or

.

Once we have copied the Base64 text (the format should be data:image/png;base64…), we go back to the NetGrif Builder. In the HTML editor, set the field with the following initial values:

  • < img src=”BASE64″> where “base64” is the copied data of the image we encoded in the previous step
Image: Assigning an initial value for inserting an image

Checkbox settings

To configure the checkbox, we’ll create a simple text field in the form. Then, in CDESK, when mapping the form fields, we’ll send the value of the user field—which appears as a checkbox in CDESK—to the simple text field.

If we want empty checkboxes to be displayed as well, we must check the “Show empty checkboxes” box in the connector settings.

Image: Setting the display of empty checkboxes

Settings related to form generation

After configuring the individual fields in both the main form and the subform, go to the form for the main print report and click the “” button. Then right-click the “” button and select “Edit action.” Next, you need to adjust the following settings:

Dataref button_html

Under the option Post , the following settings should be present:

textField: f.text_html_output,

style: f.text_style;

def transitionId = “t1”;

formToHtmlTable(textField, transitionId, style)

Image: HTML settings

Dataref button_pdf

Under the option Post , the following settings should be found:

html_text_output: f.text_html_output,

file_pdf_output: f.file_pdf_output;

dynamicHtmlToPdf(html_text_output, “t1”, file_pdf_output)

Image: PDF settings

Dataref button_add_subform_1

Under the option Post , the following settings should be present:

taskRef_subform: f.taskRef_subform;

def cnt = findCases({it.processIdentifier.eq(“FULLFILMENT_SUBFORM”)}).size();

def newCase = createCase(“FULLFILMENT_SUBFORM”, “Subform” + cnt.toString());

def newTask = findTask{(it.caseId.eq( newCase.stringId)).and(it.transitionId.eq(“t1”))};

def taskList = taskRef_subform.value + newTask.stringId;

change taskRef_subform value { taskList }

Image: Settings for generating a subform

After making these changes, export the XML file for the form and the subform as well.

Image: Exporting an XML file

Workflow Configuration

Upload the file to autoforms.cdesk.io . If a subform is included, you must upload that as well.

Image: Uploading an XML file

Next, in the section All cases and tasks , upload the XML file.

Image: Adding an XML file

After adding the file, you need to assign the PDF, HTML, and subform to the form.

Image: Assigning a PDF, HTML, and subform to a form

Once they have been assigned, you can preview the form. If the form is configured correctly, it can be linked to the CDESK system.

Image: Example of a configured form containing the CI parameters of an item linked to a request, as well as the parameters of the linked fulfillment

Changing the visual layout of the form

The entire form is generated from the HTML code at , which is generated based on the document at .xml . Therefore, to change the style of the document and its specific elements, we can use the CSS at .

Style change on autoforms.cdesk.io

Since the entire form is an HTML table, we can change its style by applying CSS to specific elements. First, we recommend testing the desired style on the page autoforms.cdesk.io, where you can use the appropriate text area (the one at the bottom). After rewriting the CSS, you must click the HTML and PDF buttons again.

For inspiration, you can check out these additional tutorials: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables

The image below shows a pre-filled example of applying CSS to an HTML table and its content.

Image: Area for entering CSS styles for the form table

Static style changes to form elements

Certain style changes for a specific element can be applied directly when creating it in Netgrif by wrapping its content in the appropriate HTML tag. For example, we can wrap text in < b > <\b > which will result in bold text. At the same time, its style can also be defined here, for example < p style=”color:red;”> Red text <\p > should change the text color to red.

Styles applied to specific elements in this way do not need to be redefined elsewhere.

Important note: static style changes apply ONLY to elements whose value will not change, i.e., “ visible ” form elements. If it is expected that a value will be retrieved from CDESK instead of the element, then the value of this field will be overwritten along with the predefined style!

Image: Example of wrapping text in an HTML "b" tag in Netgrif

Saving CSS styles for generated forms

The final version of the form’s CSS style must be saved in Generate → Edit form → the CSS section . If the CSS is not entered here, it will not appear in the resulting .xml file, so it will not be applied to forms generated in CDESK and autoforms!

Image: Steps for saving a CSS style
Image: Area for saving CSS styles

Adding the Netgrif connector to CDESK

To add the Netgrif connector to the CDESK system, go to Global Settings → Connectors, API and click the +Add Connector button. After clicking, a window will appear with a selection of connector types. Select the option NETGRIF . To continue, click the Continue button.

Image: Selecting a Netgrif connector from the list of available connectors

A connector configuration form will then appear, containing the following fields:

Image: Netgrif Connector Field Configuration
  • Connector Type – this field is read-only
  • Name – enter the name under which this connector will appear in the connector list. In addition to identification in the list, the name will also be used to label the button that appears in the Requests or Fulfillments details (depending on the connector settings) and is used directly to create a specific report.
  • Enabled – the connector is active only if enabled
  • Location – determines in which module the button for creating a print report will be displayed. The current version of CDESK offers the following options.
    • Requests
    • Requests created from the selected template
    • Fulfillments
    • Requests and fulfillments
  • URL – URL of the page where the print report workflow was configured. In this case, it is autoforms.cdesk.io
  • Username – username used to log in to autoforms.cdesk.io
  • Password – password used to log in to autoforms.cdesk.io
  • Network identification – in builder.netgrif.com right-click outside the boxes t1 and Generate and select the option Configure Model . A window will appear in the right-hand pane containing the option Identifier . In the Network Identification field, enter the value from the Identifier field.
  • PDF Save Location – the location where the generated report will be saved.

After configuring these properties, click the “” button to reload the “” report fields so that the fields from Ntgrif are mapped to the CDESK fields.

Image: Mapping Netgrif form fields to CDESK fields

The following CDESK fields can be included in the print report:

  • Supplier – Company Name and Address
  • Request Number
  • Order Number
  • Request Creation Date
  • Request Number
  • Request Type
  • Request Service Area
  • Request Description
  • Company
  • Company Address
  • Text of First Delivery
  • Materials Used
  • First Delivery – Investigator
  • Project investigator
  • Last update – Investigator
  • Date of update
  • Start of update
  • End of fulfillment
  • First fulfillment – transport
  • Fulfillment – transport
  • Last fulfillment – transport
  • Fulfillment – contractor’s signature
  • CI – main group name
  • CI – type name
  • CI – operation
  • CI – location
  • CI – name
  • CI – description
  • CI – status
  • CI – owner
  • Additional properties configured for requests
  • Additional properties configured for fulfillments
  • Additional properties configured for CI items

After filling in all fields, save the settings by clicking the “” button. . Once saved, you can call up the report in the module selected in the “” field. . If the selected usage location is, for example, Requests, a button with the name set in the connector in the field Name will appear under the button Action .

Image: Button for generating a print report configured via the Netgrif connector
Go to cdesk.eu
Go to cdesk.eu