FacebookLinkedInTwitter

Anatomy of a Mobile Report: How to set it up in Resco Mobile CRM?

hand holding up a paper spaceship
FacebookLinkedInTwitter

The purpose of Mobile Reports is to present data in a combined and easy to understand way. And when a user executes (or “runs”) a report in the Resco Mobile CRM app, the result is a document in one of the supported formats – PDF, Word, Excel, or even HTML.
However, a mobile report definition file contains data queries, design styles and information about where and how to display certain parts of data. To enable you to deliver tailor-made mobile reports to users on the go, let us take a detailed look at each of these essential processes, elements, and how you can work with them in the Woodford configurator.

Data and Queries

Mobile reports contain either text or image data. This data can be static or loaded from the CRM database.
The primary variable for each report is either a single CRM record or a collection of CRM records. You have to decide whether the report is singular when designing the report.
You can also add input variables to the report. These are additional details the user has to fill out before executing a report, for example a range in dates or currency.
Use Fetch and Fetch-Table variables in order to load a record (or records) related to the primary variable. Fetch variable uses standard FetchXml to define the data-filter. Other variables can be also used in place of filter condition values. In case you want to load aggregated and/or group records instead of a record list, you can use the Aggregate function on the Fetch variable.
Variables can define a single primitive value, text, date, or number. However, the primary variable and a fetch variable are composite and contain multiple fields. To address a particular field of a complex variable, we use the . syntax.
Utilizing pre-defined variables you can also effortlessly incorporate several basic details into your mobile reports. The PageNumber variable (Page: {PageNumber}) specifies the sequence order of each page. The PageCount defines the total number of pages that the report contains. And the CurrentDate variable ({CurrentDate:DDDD}) enables you to add the date and exact time when the mobile report was generated. For, example in the footer (or elsewhere on the page) you could include {PageNumber}/{PageCount}, dynamically changing depending on the page the user is viewing at that moment.

Structure

Mobile Reports are a collection of a few elements. TextBlock and ImageBlock define the data to display. The Grid element is used to layout the blocks. The Repeater element allows iterating over a collection of CRM records (contained in the primary variable or fetch variables).

TextBlock

The purpose of the TextBlock element is to display textual data.
The block size and position are set through the Column, Row, ColumnSpan and RowSpan properties. The parent Grid of the block determines the actual pixel size of the block (assigning width and height to its columns and rows).
Each block has an attached Style, which controls how the text is drawn. It specifies the colors to use, the font name, border color and alignment, and other parameters – all covered the Style section below.
TextBlock displays constant text, which is just a drawn verbatim using the style information. To display dynamic data you must assign a variable binding to the TextBlock. This binding can be the name of a primitive (input) variable, such as dateRange. It can also be the name of a composite (primary, fetch) variable and a particular field, for example: order.totalamount.
In order to display multiple variables in a single field, wrap their names in curly brackets: {order.street1},  {order.city}, {order.country}. Any text outside of brackets will be copied verbatim (constant).
If you need to format a numeric or date value in a certain way, add a colon and a formatting string after the variable name: {order.createdon:YYYY-MM-DD}. Please see the C# Visual Studio reference for the possible formats. Last but not least, you can optionally include also the culture identifier to format dates or numbers for a specific culture. This controls the names of months, separators, etc.: {order.createdon:YYYY-MM-DD;en-US}.

ImageBlock

The purpose of the ImageBlock is to display JPEG or PNG images.
Its size and position follow the same rule as the TextBlock.
Static images are loaded from the Offline HTML section. You need to specify the image path: /folder/name.png or /folder/name.jpg.
Dynamic images are loaded from note attachment or cloud documents. To select an image, you simply define a fetch filter for the note entity. Remember that you can use also other variables in place of filter condition values.

Grid

The Grid element is the mobile report’s basic container element. It contains TextBlock and/or ImageBlock elements and places them into a table pattern. Each block has grid column, row, column span and row span coordinates (these correspond to logical X, Y, width and height).
The maximum width of the grid is the width of the page, and you can specify the grid column width in either pixels or stars. If the grid contains a star-column, the width of the grid is set to the page width. To calculate the size of a star-column, we start with the remainder width, which is the size of the page minus the size of all pixel-sized columns. The remainder width is then distributed among the star-columns, a 2* column taking twice the space as a 1* (or just *) column.
The row height can be set to Auto for automatic height calculation, or again, as an explicit pixel size. Automatic calculation uses the maximal height of the blocks in the grid row. That means either the height of text in a particular font or the height of an image (the image height might be scaled automatically to fit into a particular width).

Repeater

Thanks to the Repeater element, you can display a list of multiple records in your reports. The element consists of an optional header Grid element and a body. If the repeater spans multiple pages, the header will be repeated on each page. The body of the repeater may contain a single or multiple Grid elements. You can also nest one or several Repeater elements into the report.
The repeater inherits all variables defined for the report.
It also contains one special iteration fetch variable. The repeater body is rendered for every record from this query.

Visibility

You can control the visibility of a TextBlock, ImageBlock and Grid, by setting the visibility property. The value used must be a valid variable in curly braces, e.g. {customer.primarycontactid}. The block or grid will not be visible only if the variable is false, zero (0) or null (empty). If you need the opposite behavior, use the exclamation mark before the variable: !{customer.primarycontactid}.

Style

You can define the visual representation of a TextBlock or ImageBlock through the Style element. Each block must have an assigned Style, and a single style can be used on multiple blocks.
Style properties:

  • Margin: Defines the space to leave around the block content outside the border. Left,Top,Right,Bottom pixels
  • Padding: Defines the space to leave around the block content. Left,Top,Right,Bottom pixels
  • VerticalAlignment: Aligns the content to the top, bottom or center of the available space.
  • HorizontalAlignement: Aligns the content to the left, right or center of the available space.
  • FontSize: The size of the font in points.
  • FontName: The name of the font (must be a TrueType file (TTF) included in the Mobile Project Offline HTML section). Built-in fonts: LiberationSans-Bold, LiberationSans-BoldItalic, LiberationSans-Italic, LiberationSans-Regular, LiberationSerif-Bold, LiberationSerif-BoldItalic, LiberationSerif-Italic, LiberationSerif-Regular.
  • BorderThickness: The size of the border Left,Top,Right,Bottom pixels
  • Background: The background color #AARRGGBB
  • Foreground: The foreground color #AARRGGBB
  • BorderColor: The border color #AARRGGBB

Tip: To convert the decimal variable to currency, use this C# format in the binding field – {variableName:C}. To convert datetime variable to date variable, use this C# format in the binding field – {variableName:MMMM d yyyy}.
Intrigued? In the Mobile Reports section of the Woodford configurator, you can start building mobile reports straight away and give your Mobile CRM users crystal-clear overview of even a large number of records with just a few clicks. And in case you have any  questions feel free to ask us through Resco Support portal.

FacebookLinkedInTwitter