LCS - Using Advanced Filter to Pass Collection with Children to Action for Gen PDF

This document describes how to use an ADVANCED FILTER to pass collection criteria to an action and generate a PDF to report on that collection AND ITS CHILDREN.

Start on your page 

  1. Add a data table to your page to list the rows of a model. 

  1. Add a non-model-based form ABOVE and OUTSIDE the data table; assigning a suitable action name. 

  1. Insert the Advanced Filter into that Form. 

  1. Update the Filter with the model named in the data table. 

  1. Update the Filter, adding a text-type action input variable (named ‘filter_query’ in this example).  

  1. Change the Box holding the ‘Add Filter Group’ to align on the right. 

  1. Delete the ‘Add Filter Group’ button from the Filter (groups won’t work in the Form’s action). 

  1. Change the Form’s ‘Send’ button to something like ‘Gen PDF’. (This button must remain inside the Form, but OUTSIDE the Filter.) 

  1. Set that button’s Toggle Visibility to hide it (to prevent it’s use before criteria are entered). 

  1. Add a data container for the model that will hold the PDF; position it AFTER and OUTSIDE the Form, BEFORE the data table. (See “Component Tree Structure” image shown below.) 

  1. Define an Open Page button within that data container to open an external page in a new tab and enter the URL of the PDF property; label the button something like ‘Open PDF’. 

  1.  Add a condition around that Open Page button to only show it when the URL contains https (to prevent the user from clicking the button before a PDF exists) 

  1.  Add an interaction to the ‘Apply Filter’ button to show the ‘Gen PDF’ button when clicked. 

  1.  Verify that your component tree structure closely resembles the Component Tree Structure image shown below.  

  1.  Compile the page. 

Component Tree Structure     Form Detail     Filter Detail   

 Data Container Detail     Open PDF Button Detail     Conditional for Open PDF

In the Form’s action:  

Action Flow Structure

  1. Add an Expression passing it the Form’s action input variable (filter_query) as ‘filter’; this example names the text result as ‘the_final_filter’.  

Action Step 1 - Functions

 

  1. (Optional) Use an Expression to get the current date time (for use in this example’s PDF file name). In this example, the Result was ‘dttm’ as Text. 

 

Action Step 2 - GetDttm

 

new Date().toLocaleDateString("nl-NL", { month: '2-digit', day: '2-digit', year: 'numeric',  

hour: '2-digit', minute: '2-digit' })  

 

  1. (Optional) Use an Expression to reformat the date time (for use in this example’s PDF file name). In this example, the Variable Key was ‘string’ and the Value was ‘dttm’; the Result was ‘dttm’ as Text. 

 

Action Step 3 - ReformatDttm

 

"{{string}}".substr(6,4)  + "-" + "{{string}}".substr(3,2) + "-" + "{{string}}".substr(0,2) + "_" +  "{{string}}".substr(12,2) + "-" + "{{string}}".substr(15,2) 

 

  1. (Optional) Use an Expression to format the PDF’s file name. In this example, the two Variables are passed into the expression: Key ‘type’ with Value ‘Publicuser’ and Key ‘dttm’ with Value ‘dttm’; the Result was ‘file_name’ as Text.  

 

Action Step 4 - GetFileName

 

"{{type}}" + "-Object_Report_" +  "{{dttm}}" + ".pdf" 

 

This is an example of the Result ‘file_name’: Publicuser-Object_Report_2025-07-21_11-54.pdf 

 

  1. Add a Data API Request step (from the Block Store)  

      1. Set Model to the one named in the Filter.
      2. Set Type to ‘Collection’.
      3. Set Filter to ‘the_final_filter’ (the name given to the first Expression’s result).
      4. Set the Skip and Take values according to your needs.
      5. Populate Query Data with the GraphiQL names of all the properties to be used in the PDF.
      6. Set Output Type to ‘Results’.
      7. Set the Result name; set it as Type ‘Collection’.  

 

Action Step 5 - Data API Request

 

  1. Add a Generate PDF step (from the Block Store) 

      1. Populate the HTML with your code.
      2. Add a variable:
        1. Set the Key as the model named in the Data API Request.
        2. Set the Value as the Result (collection) named in the Data API Request. 

 

Action Step 6 - Generate PDF

Note: Visual Studio Code is a free tool that’s good for coding/saving HTML. 

 

This example’s HTML is included in the next section. 

 

  1. Update the appropriate model/row to store the PDF and its file name.  

 

Here’s an example of the PDF output image: 

Example of PDF output

Code the HTML for ‘Generate PDF’ in the tool of your choice, including in the body:  

  1. Reference models and properties by their GraphiQL names. (These are camel-case; the precise  names are available in the Playground.) 

  1. {% for objectrec in object %} – where object is the name of the model that will be named in the Gen PDF step, and objectrec is how its properties are referenced within the HTML. 

  1. {% for photorec in objectrec.objectPhotos %} – where objectPhotos is the child model of the model that will be named in the Gen PDF step, and photorec is how its properties are referenced within the HTML. 

  1. {% endfor %} – positioned after all the child model’s properties have been used. 

  1. {% endfor %} - positioned after all the parent model’s properties have been used. 


Keywords:
Collection, Children, Collection with children, PDF, Advanced Filter, Data, API Request For Reporting HTML Images Media 
Doc ID:
132749
Owned by:
Celia P. in Low Code Solutions
Created:
2023-11-13
Updated:
2026-09-01
Sites:
DoIT Enterprise Business Systems - Low Code Solutions