×

Please give details of the problem

Docs

Find

    Developer Guide

      1. Todo Validation
    1. Release Your User Login
    1. Markdown Template
      1. Backloop
      2. JavaScript Inclusion
      3. Task Reminder Email
      4. Variable Mapping
      5. SubProcess
      6. PDF
    2. Trigger
      1. Lock
      2. Dynamic Variable
      3. List 1000+ Objects
      4. JSONObject Creation
      5. JSONArray Conversion
      6. Number Currency Format
      7. Error Handling
      8. JSONObject Concatenation
      9. Freemarker Container Test
      10. Number Test
      11. Loop
      12. File Visibility
      13. List Hash Sequence
      14. Special Freemarker Characters
      15. Array To List
      16. Salesforce Computation
      17. Metadata
      18. JSONObject Keys Values
    1. Delegation
    2. Access Rights
    3. Dynamic Lanes
    4. Runtime Lanes
    5. Scripted Lanes
    6. Compound Organization Hierarchy
      1. Array From WS
      2. Column Inactivation
      3. Holidays
      4. List Reinitialization
      5. ArrayJSON to JSONArray
      6. Print JSONObject
      7. Invalid Fields
      8. Number Currency Format
      9. Google Tables
      10. Initialization Widget Date
      11. Date
      12. JQuery
      13. Round
      14. Inject JSONObject
      15. Label Modification
      16. Launch Process JQuery
      1. CSS Personalization
      2. CSS Examples
      1. Tags
      2. Retrieving Variables Values
      3. Dialog Window
      4. Autocomplete Widget
      5. JavaScript Report
      6. User Lane Picker
        1. Chart Dashboard Collection
        2. Chart Dashboard
        3. Report Chart
        4. Google Visualization
      7. Collection
      8. Dynamic List
      9. Summing Array
      10. API Listener
      11. File Preview
    1. Performance
      1. Custom Login Page
      2. Redirection ExecutionMode
      3. Mobile Devices
        1. homepage.js
        2. homepage.css
      4. Logout
      5. Header
      6. Menu Bar
      7. Information Tags
      8. Basket
    1. Mobile
    2. Offline
        1. Collections
          1. Process General Tab
            1. Process Step Output Variables
              1. Process Task Email Tab
              2. Process Task SubProcess Tab
              3. Process Task Functional Tab
              4. Process Task Connector Tab
              5. Process Task Manual Tab
              6. Process Task Loop Tab
              7. Process Task Script Tab
            2. Process Step Input Variables
            3. Gate
            4. Process Step Testing Variables
              1. Process Intermediary Event
              2. Process Timer Event
              3. Process Start Event
          2. Process Variables Tab
          3. Process Measures Tab
          4. Process Design
          5. Process Input Tab
          1. Organization
          2. Roles entities
          1. Project Collection Tab
          2. Project Definition Tab
          3. Version
          4. Project Versioned Files Tab
          5. Project Files Tab
          6. Project Description Tab
          7. Project Version Tab
          8. Project Rights Tab
          1. Connectors
          2. Providers
          3. Processes
          1. Composite API Configuration Tab
          2. Composite API Design Tab
        2. Custom Lists
        3. Revision
            1. Image Widget
            2. Spinner Widget
            3. FileUpload Widget
            4. Section Widget
            5. Multi Checkbox Widget
            6. URLInput Widget
            7. RadioButton Widget
            8. Array Widget
            9. Captcha Widget
            10. Checkbox Widget
            11. Report Widget
            12. Geolocation Widget
            13. Button Widget
            14. Custom Widget
            15. TextInput Widget
            16. Tree Widget
            17. List Widget
            18. StaticText Widget
            19. HTML Editor Widget
            20. JavaScript Widget
            21. Tab Widget
            22. HTML Widget
            23. ProgressBar Widget
            24. History Widget
          1. Web Interface Stylesheet Tab
          2. Web Interface Design Tab
          3. Web Interface Analytics Tab
          4. Web Interface Collection Tab
          5. Web Interface API Tab
          6. Web Interface Implementation Tab
          7. Web Interface JS Tab
        1. Scheduled Process
        2. Messages
        1. Configuration
        2. Users
        3. Usage
        1. Connectors
        2. Process Examples
      1. Customer Management
          1. Measuring
          2. Parameters
          3. Execution Path
          4. Runtime Users
        1. Web Interface Reports
        1. Files
        2. Home
        3. My Applications
      1. Collections To Array
      2. Collections BackOffice
      3. Collection JS Freemarker
      4. Collections To List
      1. Composite API Example
      1. Process Reporting API

    JavaScript Report

    A report widget can be used when your application requires users to interact with large amounts of data, and you want to load it in small chunks, filtered and/or paginated to keep the web pages lightweight and fast loading.

    Our report widget achieves this automatically for you, with no coding necessary. We support three types of data sources - Web interface reports, Process reports, and Collections.

    The JavaScript Report allows further customization; you can load the report widget with your own data, and provide the same user experience (i.e. filters, pagination and sort).

    1 Display and filter the data

    1. In the designer view for your web interface, choose the report widget. Set it to type JavaScript from the options offered under Other Report.

    js_report_1

    2. Define the columns, just as you would for any report. The JSON that you will 'set' to the widget should have the same key as the properties defined here.

    js_report_col

    js_report_2

    3. Set the script, the visible items max, and the identifier.
    The Loading Data Script is the JavaScript that will read and populate the report widget. This JavaScript is executed every time the user interacts with the report (for pagination, filter and reload).
    Visible Items specifies how many records should be displayed per page (for pagination).
    The Identifier gives the widget an identifier, this can be referenced from the JavaScript.

    js_report_3

    In the script below we will use a Composite API (id_capi) to fetch, paginate, filter, and sort data from a third party connector. These aspects are not handled by the JavaScript report as the other report types do (Web interface reports, Process reports, and Collections), but should be handled by your script.

    We have APIs that help you to configure your JavaScript report:

    • id_report.setLoading(true/false) Displays the report progress bar while loading and preparing data
    • id_report.getSortedColumns() Get sorting conditions input by user
    • id_report.getFilters() Get filter conditions input by user
    • id_report.setData(data, options) Fills the report with a JSON array
    • P_first Get the pagination index.

    Example

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    function successCallback(P_computed){
        var reportOptions = {
            // count of the available data items (mandatory)
            // if the count of data items is not known you should use RMP_Report.DYNAMIC_COUNT here
            count:P_computed.count,
            // pagination index (mandatory)
            first:P_first,
            // A text that may be displayed in the report pager if data items' count is not known (optional)
            pagerCount: "xxx"
        };
        // P_computed.data is a json array that should have the same structure configured in step (2)
        id_report.setData( P_computed.data, reportOptions )
        id_report.setLoading(false);
    }
    
    function failureCallback(P_error){
        alert(JSON.stringify(P_error));
        id_report.setLoading(false);
    }
    
    // the input object is used by the composite API to retrieve, paginate, filter and sort data by calling a third party connector
    var input = {};
    input.pageSize = 20;
    input.first = P_first;
    // sortedColumns looks like [{"order":"name","orderby":"desc"},...]
    input.sortedColumns = id_report.getSortedColumns();
    // currentFilters looks like [{"filter":"name","value":"hakim","operator":"CONTAINS"},...]
    input.currentFilters = id_report.getFilters();
    
    id_report.setLoading(true);
    id_capi.trigger(input,{},successCallback,failureCallback);
    

    4. You can save and test the web interface. You should see the report widget with data filled in with your JSONObject.

    reportwithdata

    2 Exporting the data

    2.1 Exporting a page of data

    A Javascript report enable you to export (in CSV format) the data that is currently displayed on the report by clicking on the export icon.

    export_button

    If you choose the customize option, you will be able to customize your CSV export by choosing :

    • the values separator (comma, semi-colon or tabulation)
    • the charset of the created file
    • the decimal separator (period or comma)
    • the date format (used only for the date columns of the report)

    On the other hand, Your default export is a default configuration based on the language of the connected user.

    export_choice

    2.2 Exporting all of the data

    Let's now imagine that the data you want to display is paginated. Exporting it as above will only give you a CSV containing only the data that is currently displayed. If you want to be able to export all the data, you will have to develop the export feature.

    2.2.1 Configuring the report

    Since you are able to display any kind of data (including from third parties), the platform cannot know what the source of the data is or how this full export should be done. For this reason, you will need to configure your own process to export all the data. Once you have this process configured (see section 2.2.2), you will simply need to attach it to your JavaScript report in the Web interface designer. You can use the Parameter field to pass any required parameters to the process.

    config_process_export

    When the user chooses to Export, if a process is attached to the report an additional checkbox Receive all data, by e-mail will be available on the Customize ... page. If this checkbox is checked when the user clicks on the Export button, the process that has been configured will be launched with some inputs containing the filters chosen by the user, the CSV settings selected and any parameters specified in the parameter field.

    export_full_choice

    2.2.2 Configuring the export process

    An export process should have a simple structure.

    process_export

    In this example, the process contains four simple steps :

    • Init : This step initializes the pagination
    • Get Superheroes as JSONArray : This step loops over the Composite API used to display the data in the JavaScript report. The loop retrieves the data from the third-party if they are paginated. The output of this task is a JSONArray containing all the data.
    • From JSON to CSV : This step creates the CSV file based on the output of the previous step.
    • Send Mail : This step sends an email to the connected user with the CSV file as an attachment.

    We will consider each step in detail:

    1. Init

    We intialize the JSONArray all_superheroes to an empty JSONArray [].

    2. Get Superheroes as JSONArray

    Since the pagination management depends completely on the source of the data, we will not explain in details how to do it. We will just explain how to compute the final output of the task. At the end of each iteration of the loop, you have to add the JSONArray returned by the Composite API to the all_superheroes variable. To do so, we assign all_superheroes with the following freemarker code

    1
    2
    <#assign output = all_superheroes + ${P_result}.data>
    ${output}
    

    3. From JSON to CSV

    The role of this step is to transform the data obtained in the previous step (all_superheroes in the example) into a CSV file. This involves 2 steps :

    • transforming the JSONArray into a CSV text
    • save the CSV text in a file

    To do this we will use the json_to_csv freemarker method to create the variable superheroes_as_csv and assign it with the following value: ${json_to_csv(all_superheroes,options)}

    the options variable is a JSONObject representing the options of the CSV generation. It is good practice to create it by taking into account the choices of the end user. An example of assignation of this options variable could be :

    1
    {"separator":"${separator}","header":true,"parse_dates":{"date":"${date_format}"}}
    

    with

    • separator an input variable passed to the process by the JavaScript report and matching the choice of the end user
    • header an option to generate the headers in the CSV file
    • date_format an input variable passed to the process by the JavaScript report and matching the choice of the end user. In our example, the data exported does not contain any date column which make this option unnecessary.

    An example of the input variables passed to an export process:

    full_export_inputs

    Once the CSV text is created (and stored in the variable superheroes_as_csv in the example), the only thing left to do is to store it in an uploaded file. To do so, we create a new variable output_file_creation and assign it with the following value :

    1
    ${create_file("superheroes.csv", superheroes_as_csv,charset)}
    

    The charset variable is an input variable passed to the process by the JavaScript report and matching the choice of the end user.

    from_json_to_csv

    4. Send Mail

    Configure your task to send an email with your preferred email provider. Configure the email task to send it to the end user.

    1
    To : ${P_user.login}
    

    and attach the file created in the previous step

    1
    Attached file: ${output_file_creation}
    

    You should now be able to export all of your data.