Using GraphQL in Telerik Report Builder

Using Power BI and Telerik with Fast-Weigh GraphQL

Some of the information about the GraphQL API may have changed since this article was written and the videos were recorded! For the most up-to-date information on the GraphQL API, check out our other GraphQL articles in this section!

Connecting GraphQL to Telerik Report Designer

How to Connect to GraphQL

Note: Make sure you are running Telerik Report Designer version 14.0.20.219 or later.

1. Navigate to the Data tab of the Report Designer

   
2. Select "Web Service Data Source" to bring up the configuration wizard

   
3. Enter the GraphQL Endpoint URL into the Service URL: https://graphql.fast-weigh.com/

   1. Set the "Method" to "Post"

   2. Enter the Body from the Insomnia plugin "Fast-Weigh: Copy Telerik Body"

   3. Set the Data Selector to $.data.*

   
4. Click Next > to configure the Request Parameters

   
5. Create a new parameter called x-api-key.

   1. Set the Type to Header

   2. Enter the API key in both the Value and Design-Time Value fields

      
6. If you are using a WHERE clause in your Body, check out the Using Telerik Report Parameters section for more information

Note: In our example, our "Inline Parameters" are the @FromDate and @ToDate.

1. Click "Next >" to show the "Preview Your Data" page

2. Click on the "Download" button to run the Preview

1. Click "Finish >>|" to load in your dataset to use in your report.

Using Telerik Report Parameters

Required Parameters

When building your reports within Telerik, you have the ability to link your GraphQL Where Clause directly to dynamic parameters within Telerik to filter your data.

1. Ensure that you have your Where Clause set up within your GraphQL Query.

   • When you copy your query Body over from Insomnia, it should auto-generate Telerik parameter connectors in your variables.

1. Click Next to go to the Configure Request Parameters page. Here, you will see your auto-generated parameters.

1. Make sure the "Type" is set to "Inline" for any Parameters that are passed to your GraphQL Body.

2. Enter the values you want to use for the data preview in the "Design-Time Value"

   
3. Set up the parameterized value in Value by selecting the drop-down > "New Report Parameter" (if you have pre-set up your parameter, just select it from the list).

   
4. Set up the Telerik Parameter in the Report Parameter Editor pop-up

   • For more information about what the settings here are, check out this Telerik Report Parameters Docs

   • Click here for more info on the difference between Blank and Null.

1. Some GraphQL Where clause formats will need to add extra formatting in your Value

   

   • Strings: Make sure your body does have quotes around the @variable in the Body.

   • Integers: Make sure your body does not have quotes around the @variable in the Body.

   • Dates: Make sure your body does have quotes around the @variable in the Body.

     • You will also need to add the following formatting to the Value expression to ensure that the date is in the correct Year-Month-Day format: = Format("{0:yyyy-MM-dd}", Parameters.NAME.Value )

   • String Arrays: Make sure your body does not have quotes and does have brackets around the @variable in the Body

     • You will also need to add the following formatting to the Value expression to ensure that each value selected is wrapped in quotes and separated by commas: ='"' + Join('","', Parameters.NAME.Value ) + '"'

   • Integer Arrays: Make sure your body does not have quotes and does have brackets around the @variable in the Body.

     • You will also need to add the following formatting to the Value expression to ensure that each value selected is separated by commas: =Join(',', Parameters.NAME.Value )

     
2. Click Next to preview your data using the "Design-Time Value", then click Finish.

3. Navigate to the Home tab on the top of the report and click Preview to test your parameters.

   

Optional Parameters

In addition to Required Parameters that directly filter what is returned from your Data Source, you can also use Telerik by itself to create optional parameters and filters.

1. Set up the parameter by right-clicking the white space on the report and then clicking "Report Parameters..."

   
2. Add in a new Parameter in the Report Parameter Editor pop-up

   • For more information about what the settings here are, check out this Telerik Report Parameters Docs.

   • Click here for more info on the difference between Blank and Null.

3. Click OK to close the pop-up.

4. Right-click the report white space again and this time select Filters...

   • You can also use Filters for simple data filters like filtering out all voided tickets.

1. Add a new Filter that you will map to your new Report Parameter

   • Since we want this parameter to pull in everything when blank or filter to one customer when filled out, we will need to add in more to the expression than a simple filter.

2. Under the Expression side of the filter editor, click on the drop-down arrow and select "<Expression>"

3. Click in the text box after the equals sign

4. Navigate to Functions > Logical and double click IIf to add it into the text box above.

   • You can also manually type this instead of pulling it in from Functions)

1. Begin the conditional IIf statement with a check to see if the parameter is blank.

   1. Here, we are using Parameters.CustomerID.Value

   2. Add in the parameter value by navigating to Report Parameters > click the + by the parameter name > double click Value

      
   3. In the text box, click between the end of the Value and the parenthesis and add in an equal sign and an empty quote: = ""

   4. This completes the check to see if the parameter is blank.

      
2. Click in the text box after the empty quotes and add a comma to begin the truePart of the IIf statement.

   1. Here, we want nothing to happen if the expression is true (the parameter is blank).

   2. Add in another empty quote: ""

   3. This completes the truePart of the IIf statement.

      
3. After the truePart, add another comma to begin the falsePart.

   1. Here, we want the Customer ID to populate if the expression is false (the parameter is not blank).

   2. Navigate to Fields and double-click on the field you want to populate if the parameter is not blank (what it will be matching to in the returned data).

   3. This completes the falsePart of the IIf statement.

      
4. Click OK to close the Expression Editor.

5. Under the Value side of the filter editor, click on the drop-down arrow and select the Parameter.

1. This completes your entire optional filter. Go ahead and close the Filter Editor.

2. Navigate to the Home tab on the top of the Report Designer and click Preview to test out the report.

   • You should be able to leave your new parameter blank (you may have to click inside of the field and then click out in the report designer so it registers and blank) or type in a value to filter the report to that single value

Handling Nullable Tables in Telerik

Sometimes, you may have a table linked in your GraphQL query that can be set or completely blank depending on the parent table it is connected to.

A good example of this would be if you wanted to show the Order Salesperson Name, which might not always be set on the Order. When you query this in GraphQL, it can return in two ways:

While the way this data is returned may be fine in the JSON view, it can cause some major problems in Telerik. This is because you end up trying to call a field object that either exists and returns correctly or doesn't exist at all:

=Fields.Order.Salesperson.Name

When you add the Salesperson Name field to the report like normally and then run the report, the Orders that do not have a salesperson will show you the following error in place of where the name would be:

"An error has occurred while processing TextBox 'textBox2': The expression contains object 'Name' that is not defined in the current context."

---

If you do receive this error for the Salesperson Name field (or any other field), there is a workaround you can use to display the name when it is set or hide the object entirely when it is blank.

1. Navigate to the Insert tab at the top of the Report Designer.

   
2. Inset a "List" from the Tables section.

   
3. Select the new List object, and navigate to the Properties Panel on the bottom-right.

   
4. Find the Data section of the Properties.

5. Click on the "..." button to edit the Bindings.

1. Add a new Binding.

2. Set the Property Path to "DataSource"

3. The Expression needs to be the parent of the field you are wanting to display. In this case, we want to see = Fields.Order.Salesperson.Name so we will set the Expression to = Fields.Order.Salesperson

4. Click OK to save the Bindings

   
5. Click inside of the new List object, add in new text boxes for the field title and the field itself, and set up their formating

   
6. In the field where you want to show the salesperson's name, you only need to add the second half of the expression we referenced for the DataSource = Fields.Order.Salesperson.Name.

   1. In this case, we only need to input = Fields.Name to get the Salesperson Name.

      
7. Lastly, make sure to preview the report for both fields that should have a Salesperson and should be blank to make sure everything functions as expected.

   
8. In my example, including the field title in the list ensured that it was hidden entirely when there was no salesperson set, but you can keep the title outside of the list to prevent this.

   

   1. If you do not want the field to be entirely blank, you can set a "NoDataMessage" and "NoDataStyle" in the Properties Panel

Grouping Data

Styling Your Report

Conditional Formatting